标志、外观模式、品牌色、字体与圆角是整个品牌共用的身份,不只出现在网站页面上:结账页、顾客登录页、顾客中心、寄给顾客的信件与结业证书都会用到。Kanorio 把这些项目集中在后台的“网站设置 › 品牌”,设置一次,全部一致。
这一页与建站模式无关:从 Kanorio 开始建站的网站,网站页面也直接套用;自架前端(Headless)的网站,结账、登录与信件同样套用,您的前端则通过 Content Delivery API 的 brand 与 Kanorio Elements 拿到同一套值(见下方“自架前端怎么用”)。
| 项目 | 说明 | 建议 |
|---|---|---|
| 品牌标志 | 上传图片或挑选内置图标;可另外上传一张深色背景专用的版本。 | 当外观模式设为“自动切换”或“固定深色”时,建议补充深色版,以确保标志在深色背景上清晰可见。 |
| 网站图标(Favicon) | 浏览器分页标签与书签旁的小图案。默认会根据品牌标志自动生成:图标型标志会以品牌色绘制在白底上,若更换标志或品牌色,图标亦会随之更新;下方的分页预览即为保存后的显示效果。 | 若标志细节过多或含有长文字,建议关闭自动生成功能,改为上传一张方形小图标。 |
| 外观模式 | 设置网站、结账、登录与客户中心使用浅色或深色主题:“自动切换”会跟随访客设备的设置,“固定浅色”与“固定深色”则让所有访客看到统一的界面。若您使用自建前端,此选项将控制 Kanorio 提供的结账、登录与客户中心界面。 | 选择“自动切换”时,请务必检查浅色与深色两种模式;若固定其中一种,则只需设置该模式下的品牌色。 |
| 品牌色 | 按钮、链接、重点图标与品牌色区块的主色,浅色模式与深色模式可分别设置。系统内置精选配色,亦可输入自定义色码。 | 深色模式的品牌色可比浅色模式稍亮,以确保在深色背景上清晰易读。 |
| 品牌文字色 | 显示在品牌色按钮或品牌色背景上的文字颜色。默认会根据对比度自动选用黑色或白色,亦可自行指定。 | 自行指定时请留意对比度,页面右侧的预览功能会实时显示效果。 |
| 字体 | 优先显示网站主要语言的内文字体;展开“更多语言字体”可分别为英文、繁体中文、简体中文、日文与韩文挑选字体。所有字体均由平台托管,不支持自行上传字体文件。 | 若网站包含中英混排内容,分别为中文与英文挑选合适的字体,视觉效果会更佳。 |
| 圆角 | 统一按钮、卡片、输入框与图片的边角弧度:提供方形、一般、圆角三种选项。 | 预览会同时显示按钮与卡片,挑选一个与品牌风格相符的选项即可。 |
页面右侧(手机上在表单下方)有实时预览,照实际页面的版型与尺寸画出“网站、结账、登录、信件”(自架前端没有“网站”),可切换浅色/深色(外观模式固定时只显示那一种)。信件的卡片与按钮圆角、字体是信件固定的样式,只有标志圆角跟着网站;信件开头的标志大小与位置在调整。
按页面底部的“保存”后立即生效,不需要回编辑器按“发布”:
brand 与 Kanorio Elements文字大小与模块密度属于网站的版面设置,在编辑器的“设计”调整、按“发布”后生效;编辑器的“设计”面板会显示目前的品牌,并连回这一页修改。自定义按钮、品牌关联网址与商家信息在编辑器的“品牌信息”面板,见。
自架前端(Headless)的网站,Kanorio 托管的结账、登录、顾客中心与信件会直接套用这一页的设置;您自己的前端有两种方式拿到同一套品牌:
GET /site 的 brand 提供算好的色票(浅色与深色各一组,含可读的文字色)、您选的外观模式、浅底与深底各自要用的标志、字体家族与样式表网址、圆角尺寸表,可直接用在您的版面上。细节请工程师参考 。
品牌色、外观模式、字体与圆角不只网站用,结账、登录与信件也用,所以只在"网站设置 › 品牌"一处设置,避免两边不一致。"设计"面板只显示目前的品牌并连回这里;版面相关的文字大小与密度仍在"设计"调整。
品牌设置保存后立即生效,不需要发布。若画面还是旧的,请重新整理页面;浏览器偶尔会暂存旧的样式。
建议设置。即使网站页面由您自己呈现,结账、登录、顾客中心与寄给顾客的信件仍由 Kanorio 提供,会套用这里的标志与品牌色;您的前端也能通过 API 与组件取得同一套值,整体才会一致。