跳转到内容

如何自定义文档外观(主题、颜色与字体)

你可以自定义已发布文档的外观,使其符合品牌调性。相关设置位于“项目设置”(Project Settings)下的“发布 > 主题与颜色”(Publishing > Themes & Colors)选项卡中。通过这些设置,你可以控制访客所见的主题、颜色、字体及其他样式元素。

选择主题模式

“默认主题模式”(Default Theme Mode)设置决定了访客首次访问文档时的视觉效果。你可以指定特定主题,或允许其根据用户的系统设置自动调整。

  • 自动(跟随系统偏好): 这是默认选项。文档将根据访客操作系统的偏好,在浅色和深色主题之间自动切换。
  • 浅色: 无论用户的系统设置如何,文档将始终以浅色主题显示。
  • 深色: 文档将始终以深色主题显示。
Documentation image

徽标配置

你可以分别为浅色和深色主题上传不同的徽标,以确保其清晰可见并符合品牌要求。如果未上传徽标,系统将显示你提供的文本。

  • 浅色主题徽标: 上传适合在浅色背景下显示的徽标。
  • 深色主题徽标: 上传专为深色背景设计的徽标。
  • 浅色/深色主题徽标文本: 如果没有对应的徽标,请输入要显示的品牌名称或其他文本。
Documentation image

自定义颜色

通过设置浅色和深色主题下的主色调和辅助色,来定义你的品牌配色方案。这能确保在不同浏览模式下保持一致的品牌体验。

  • 主色(Primary Color): 这是用于按钮、链接和高亮显示等交互元素的主要强调色。
  • 辅助色(Secondary Color): 该颜色用于辅助元素,提供微妙的对比度。
Documentation image

字体与样式设置

通过选择字体并调整界面元素的圆角样式,进一步优化文档外观。

  • 主要字体系列: 从列表中选择标题、正文和通用界面元素所使用的主要字体。
  • 等宽字体系列: 专门为代码块和行内代码片段选择字体。
  • 圆角样式: 调整界面元素的圆角半径。选项包括“直角”(0px)、“圆角”(4px)和“大圆角”(8px)。
Documentation image

自定义建议

请记得保存更改,并点击发布设置顶部的“发布更改”(Publish Changes)按钮,使更新生效。务必使用高对比度的配色方案以提升可读性,特别是在处理文本和交互元素时。

总结

本文详细介绍了如何自定义已发布 Hinto 文档站点的视觉外观。内容涵盖了选择默认主题模式、上传适合浅色和深色背景的自定义徽标、定义主色调和辅助色,以及选择字体,从而打造出符合品牌形象的专业外观。

相关内容