小组件自定义

运行机制

登录小组件是应用程序中用于用户注册和授权的图形界面。小组件可包含输入用户凭证的字段以及通过社交网络登录的按钮。此外，小组件还可包含解释性文字及其他按钮，例如重置密码或发送验证码按钮等。

艾克索拉提供标准小组件模板。其外观和内容由项目所选的登录方法决定。以下是经典登录小组件的标准视图。

登录管理器产品允许自定义小组件以使其更具辨识性并与您的应用程序或网站界面统一。为此您可以：

• 添加Logo
• 更改颜色方案
• 上传图片并将其作为小组件周围区域的背景
• 更改按钮和输入字段的轮廓形状
• 更改小组件上社交网络按钮的顺序（该顺序由所选的本地化国家/地区决定）
• 设置小组件的显示语言

您可以通过以下方式自定义小组件的外观和内容：

• 在发布商帐户中使用图形编辑器
• 在艾克索拉Login Widget SDK库中更改相应JSON文件的设置

在发布商帐户中自定义小组件

建议您在发布商帐户中编辑小组件，因为这样可以：

• 实时查看所作的更改
• 直接在小组件自定义页面的编辑器中或预览窗口中测试小组件按钮的操作

要自定义小组件：

1. 在发布商帐户中打开您的项目，然后前往登录管理器部分。
2. 在登录管理器项目面板中单击配置。
3. 在导航页上，前往自定义区块，然后选择小组件自定义部分。

4. 选择小组件本地化的语言和国家/地区。
5. 使用编辑器自定义小组件样式。
6. 完成所有设置后，使用小组件预览区域上方的按钮切换到HTML模式。

7. 单击复制代码复制生成的小组件初始化代码。使用该代码将小组件集成到您的应用程序或网站。

如何使用小组件编辑器

1. 要打开小组件编辑器，请在小组件自定义页面上单击自定义。
2. 在编辑器窗口中，对小组件样式进行所需更改：
   • 添加Logo
   • 更改小组件颜色方案
   • 上传图片并将其作为小组件周围区域的背景
   • 设置按钮和输入字段的轮廓形状
   所有更改在小组件预览区域中实时显示。

3. 要检查小组件在不同语言下显示效果，请在小组件预览区域上方的下拉列表中更改语言。

4. 在小组件编辑器中完成所有更改后，单击发布。

如何添加Logo

1. 打开小组件编辑器。
2. 在编辑器侧边栏中，单击登录管理器小组件。
3. 在打开的登录管理器小组件编辑器面板中，选择Logo开关。

4. 单击开关下方的上传按钮。
5. 在文件搜索窗口，选择Logo图片文件，然后单击打开。

资源面板将在编辑器侧边栏中打开。上传的Logo将在该面板以及预览区域的小组件中显示。

6. 如要测试Logo的不同版本，请使用资源面板中的上传按钮。

7. 要在小组件中显示不同版本的Logo，请在资源面板中单击其图片。
8. 结束自定义Logo后，请关闭资源面板。您的最终选择将自动保存。

如何更改小组件的颜色方案

小组件的颜色方案由三个基础色定义：

• 文本 — 用于解释性文字、输入字段内容以及小组件底部按钮上的社交网络Logo。
• 按钮 — 用于登录和接受并创建按钮、突出显示字段和按钮的轮廓、链接以及活动小组件选项卡的标题。
• 页面色调 — 定义小组件的背景色。

要更改小组件的基础色：

1. 打开登录管理器小组件。
2. 在编辑器侧边栏中，单击全局主题，然后单击要更改的基础色的按钮。
3. 通过以下方式之一选择新颜色：
   • 在打开的色板中指定。要更改色板中的颜色，请使用色板下方的滑块。
   • 使用滑块下方的按钮来切换模式：HEX、RGB或HSL，然后以所选格式输入颜色代码。
   对颜色方案的更改实时在小组件预览区域显示。

4. 如需要，可用同样方式更改其他基础色。

如何在小组件周围区域放置背景图片

1. 打开小组件编辑器。
2. 在编辑器侧边栏中，单击登录管理器小组件。
3. 在打开的登录管理器小组件编辑器面板的页面背景部分，单击+图标，然后单击上传按钮。

4. 在文件搜索窗口中，选择背景图片文件，然后单击打开。

资源面板将在编辑器侧边栏中打开。上传的图片将在该面板以及小组件周围的区域中显示。

5. 如果要测试背景图片的不同版本，请使用资源面板中的上传按钮。
6. 要在小组件预览区域显示不同背景，请在资源面板中单击其图片。
7. 完成背景图片自定义后，请关闭资源面板。您的最终选择将自动保存。

如何改变按钮形状

小组件的所有按钮和输入字段均为圆角矩形或方形。圆度值可在0（直角）到100%之间调整。

要更改圆度：

1. 打开小组件编辑器。
2. 使用圆度滑块选择小组件按钮的形状。

如何更改社交网络按钮的顺序

仅当您的登录管理器项目设置中连接了社交网络后，社交网络按钮才会显示。按钮的顺序由本地化国家/地区决定。小组件将显示该国家/地区中最常使用的社交网络的按钮，并按照常用程度从左到右降序排列。在小组件顶部一栏，将对用户显示其最近用于登录应用程序的社交网络。

默认情况下，国家/地区参数设置为自动检测。如要更改该设置，请使用小组件自定义页面上的国家/地区下拉列表。

如何设置小组件的显示语言

标准艾克索拉登录小组件提供20种语言的本地化。界面本地化的语言用preferredLocale变量的前两个字母编码，可在初始化时传入小组件。

示例：要将小组件显示为英文，则设置preferredLocale: "en_XX"。

如未设置preferredLocale变量，则语言由IP地址或浏览器语言自动决定。

要设置小组件对用户显示的语言：

1. 在小组件自定义页面，从可用语言下拉列表中选择一个语言。

在艾克索拉生成的小组件初始化代码中，preferredLocale变量会根据您的选择改变其值。

2. 要查看初始化代码，请切换到HTML模式（使用预览区域上方的按钮）。
3. 要检查小组件在所选语言下的显示效果，请切换到预览模式。

使用JSON文件自定义小组件

如已连接艾克索拉Login Widget SDK，您可以不通过发布商帐户来更改小组件的外观和内容。您可在文本编辑器中对以下JSON文件作出更改：

• socialsJSON，用于设置社交网络按钮在小组件上的显示顺序；
• themeJSON，用于自定义小组件的外观：
  • 选择小组件的颜色方案及其周围的区域；
  • 设置一些元素类型边角的圆度：按钮、输入字段和小组件本身；
  • 对不同元素使用背景图片：小组件标题、小组件本身、小组件周围区域；
  • 如需要，隐藏小组件的授权或注册选项卡以及社交网络按钮。

可编辑的小组件设置说明见包含小组件设置的JSON文件部分。

在己侧使用CSS代码自定义小组件

1. 创建一个CSS文件，在其中包含登录区块的视觉设置。

字体自定义代码示例：

@font-face {
    font-family: 'Chakra petch';
    font-stretch: normal;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Chakra-Petch-Regular'),
        url('https://some-url-to-fonts/Chakra-Petch-Regular.woff2 ') format('woff2');
}

@font-face {
    font-family: 'Chakra petch';
    font-stretch: normal;
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: local('Chakra-Petch-Bold'),
        url('https://some-url-to-fonts/Chakra-Petch-Bold.woff2 ') format('woff2');
}

@font-face {
    font-family: 'Chakra petch';
    font-stretch: normal;
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: local('Chakra-Petch-Thin'),
        url('https://some-url-to-fonts/Chakra-Petch-Thin.woff2 ') format('woff2');
}

body, .app-block {
    font-family: 'Chakra petch', sans-serif;
}

样式自定义代码示例：

#mainBody {
  padding: 13px 36px 25px;
  height: 464px;
  border: 1px solid #989898;
  box-shadow: 0 2px 27px rgba(0, 0, 0, 0.5);
}

form {
  position: relative;
}

.universal-input {
  margin-top: 30px;
}

button[data-testid="login-form__button-submit"] {
  background: black;
  padding: 10px 22px 11px;
  height: 40px;
  color: rgba(255, 255, 255, 1);
}

2. 上传一个CSS代码文件到您可公开访问的托管主机。
3. 在初始化脚本的customStyle参数中提供该CSS代码文件的链接：

const xl = new Widget({
  // your other params
 projectId: '[Login ID]',
 preferredLocale: 'en_US',
 // new param for CSS styling
  customStyle: ‘https://your-domain.com/assets/loginWidgetStyles.css’
});

https://your-domain.com/assets/loginWidgetStyles.css — 包含样式的CSS文件的链接。

使用建站器自定义小组件

如使用艾克索拉建站器，可在建站器的区块设置中自定义登录管理器小组件。

要在建站器中自定义小组件：

1. 在发布商帐户中打开您的项目。
2. 在侧边栏中单击建站器。
3. 在站点部分，选择您的网站，然后单击打开建站器。
4. 在登录设置中前往布局部分。
5. 上传Logo或自定义背景。方法是：
   1. 选择Logo或自定义背景开关。
   2. 单击开关下方的上传按钮。
   3. 在文件搜索窗口中，选择Logo图片文件，然后单击打开。随后编辑器的侧边栏中将打开资料库面板，上传的图片将显示在该面板以及小组件的预览部分。
   4. 选择图片大小（可选）：
      1. 单击上传的图片。
      2. 在图像部分，打开大小下拉列表，然后选择包含、覆盖或固定。
   5. 更改图片色调（可选）：
      1. 单击上传的图片。
      2. 在图像 > 色调部分，单击⚙图标，然后选择选项或色板上的颜色。
   6. 要在建站器中显示其他版本的Logo或背景，请在资料库面板中选择相应图片。
6. 在艾克索拉登录管理器部分，您可以设置自动为登录区块选择颜色。方法是选中使用网站样式开关。

在建站器中使用CSS代码自定义小组件

1. 创建一个CSS文件，在其中包含登录区块的视觉设置。

示例：

#mainBody {
  padding: 13px 36px 25px;
  height: 464px;
  border: 1px solid #989898;
  box-shadow: 0 2px 27px rgba(0, 0, 0, 0.5);
}

form {
  position: relative;
}

.universal-input {
  margin-top: 30px;
}

button[data-testid="login-form__button-submit"] {
  background: black;
  padding: 10px 22px 11px;
  height: 40px;
  color: rgba(255, 255, 255, 1);
}

2. 上传一个CSS代码文件到您可公开访问的托管主机并复制该文件的链接。
3. 在建站器中，单击添加区块 > 自定义代码。
4. 插入以下代码：

<script>
    window.SB.subscribe((api) => {
        api.login.setConfigMiddleware((config) => ({
            ...config,
            customStyle: "https://your-domain.com/assets/loginWidgetStyles.css"
        }));
    });
</script>

https://your-domain.com/assets/loginWidgetStyles.css — 包含样式的CSS文件的链接。

为此页面评分

我们还有其他可改进之处吗？ 发送

不想回答

感谢您的反馈！