自定义您的网站品牌标识

:bookmark: 这是一篇非技术性教程,将指导您自定义 Discourse 站点的品牌标识和外观。

:person_raising_hand: 所需用户级别:管理员

想要自定义您的站点品牌标识,但不知从何下手?继续阅读以了解更多信息!

设置向导

Discourse 具有极高的可定制性!进行站点自定义的一个好起点是登录站点的管理员账户,并运行站点的设置向导:mage:

设置向导允许您配置站点的标题、默认语言区域以及访问设置(公开与私有、注册与邀请制,以及用户是否必须经过批准)。这些是让站点运行起来的基本首要步骤。

完成向导后,您可以从管理面板进一步自定义站点的外观——包括徽标、颜色、字体等。

您可以直接在此页面上预览可用的选项。找到适合您的设置后,点击“下一步”按钮。不用担心,如果您觉得这些设置不符合您的需求,随时可以在以后更改它们。

站点主题

一旦完成了基本配置,就该进一步自定义您的站点了!:sparkles:

主题是广泛的自定义项,会更改论坛设计样式的多个元素,并且通常还包含额外的前端功能。主题能够显著改变论坛的外观和布局。

Meta 上的 Customization > Theme 类别托管了各种预先创建的主题,您可以将其用于您的站点以自定义站点外观。这是搜索适合您站点的主题的最佳场所。不妨从这个类别中挑选一个您想在站点上使用的主题。

确定要在站点上使用的主题后,您可以从 Admin -> Customize -> Themes 页面(位于 /admin/config/customize/themes)将主题添加到您的站点。您还可以在此页面上更改站点的主题,甚至创建一个全新的主题。

《Discourse 主题使用初学者指南》 是关于 Discourse 主题基础知识的速成课程,概述了如何在您的 Discourse 站点上安装主题。请阅读本指南以获取有关如何安装所选主题的说明。

:tipping_hand_woman: 您还可以在以下位置找到有关如何使用、创建和分享您自己的主题的更多信息:

配色方案

您可以通过 Admin -> Config -> Colors 页面(位于 /admin/config/colors)调整站点的配色方案来进一步自定义站点。:art:

从这里您可以创建新的配色方案,选择现有的配色方案进行自定义,并将配色方案分配为主题的默认浅色或深色方案。

选择一个现有的配色方案作为新配色方案的基础,然后通过点击每个配色部分旁边的颜色来自定义新配色方案的颜色:

别忘了为您的新配色方案命名,并在完成后保存更改!

:tipping_hand_woman: 需要一些帮助来决定颜色吗?像 Paletton - The Color Scheme Designer 这样的取色工具对此非常有帮助!

有关如何在 Discourse 中使用配色方案的更多信息,请参阅:

主题组件

与主题类似,Discourse 还有“主题组件”可供您使用,以更改论坛设计的外观元素或添加额外的前端功能。与完整主题相比,它们体积更小、更具针对性,通常(尽管并非总是)可以与其他主题组件结合使用,以创建专为您的社区量身定制的独特论坛设计。:gear:

Meta 上的 Customization > Theme component 类别包含 Discourse 的所有官方和非官方主题组件。浏览那里列出的主题组件,如果您想在站点上安装其中任何一个,请按照以下说明操作:Discourse 主题界面及如何安装主题组件

一些最受欢迎的 Discourse 主题组件包括:

:tipping_hand_woman: Discourse 还内置了由 interface_color_selector 站点设置控制的深色/浅色模式切换器,可以将其设置为显示在侧边栏页脚或页眉中。

:tipping_hand_woman: Meta 上的 theme-guides 标签也有很多如何使用主题组件进一步自定义站点的操作指南和创意。

站点品牌标识

Discourse 在 Admin -> Appearance -> Logo(位于 /admin/config/logo)处有一个专门的徽标配置页面,您可以在那里管理站点的所有徽标和图标。

  • Primary logo(主徽标)- 显示在站点顶部导航以及站点电子邮件通知的顶部。推荐尺寸为 600 × 80 像素。
  • Primary logo dark(主徽标深色版)- 主徽标的深色模式替代方案。推荐尺寸为 600 × 80 像素。
  • Square icon(方形图标)- 徽标图像的方形版本,显示在站点顶部,同时也是移动应用徽标。推荐尺寸为 512 × 512 像素。
  • Favicon(网站图标)- 徽标将显示为浏览器标签页和浏览器收藏夹/书签中的图标。
  • Small logo(小徽标)- 站点左上角的小徽标图像,在向下滚动时可见。如果留空,将显示主页图标。推荐尺寸为 120 × 120 像素。
  • Small logo dark(小徽标深色版)- 小徽标的深色模式替代方案。推荐尺寸为 120 × 120 像素。

Mobile(移动设备)部分下:

  • Mobile logo(移动设备徽标)- 在站点移动版本中使用的徽标。如果留空,将使用 logo 设置中的图像。使用高度为 120 且纵横比大于 3:1 的宽矩形图像。
  • Mobile logo dark(移动设备徽标深色版)- 移动设备徽标的深色模式替代方案。使用高度为 120 且纵横比大于 3:1 的宽矩形图像。
  • Manifest icon(清单图标)- 在 Android 上用作徽标/启动画面的图像。如果留空,将使用 large_icon。推荐尺寸为 512 × 512 像素。
  • Manifest screenshots(清单截图)- 在安装提示页面上展示实例功能和功能的截图(在 Android 上使用“添加到主屏幕”时显示)。所有图像都应该是本地上传的,并且尺寸相同。
  • Apple touch icon(Apple 触控图标)- 用于 Apple 触控设备的图标。如果留空,将使用 large_icon。推荐尺寸为 180 × 180 像素。不建议使用透明背景。

Email(电子邮件)部分下:

  • Digest logo(摘要徽标)- 用于站点电子邮件摘要顶部的备用徽标图像。如果留空,将使用 logo 设置中的图像。使用宽矩形图像。不要使用 SVG 图像。

Social media(社交媒体)部分下:

  • OpenGraph image(OpenGraph 图像)- 默认 opengraph 图像,当页面没有其他合适的图像时,许多应用程序和平台会将其用于网页链接预览。如果留空,将使用 large_icon。
  • X summary large image(X 摘要大图像)- X 卡片“摘要大图像”。如果留空,只要 OpenGraph_image 不是 .svg 格式,将使用 OpenGraph_image 生成常规卡片元数据。推荐尺寸至少为 280 × 150 像素。不要使用 SVG 图像。

:tipping_hand_woman: 为了获得最佳效果,我们建议遵循上述每种徽标和图标类型的尺寸指南。

其他自定义

现在您已经为站点添加了自定义主题、配色方案、一些品牌徽标,也许还有一些主题组件,您就完成了所有基本的站点自定义!:tada:

如果您仍在寻找更多自定义 Discourse 站点的方法,我们建议您阅读以下您可能感兴趣的主题:

8 个赞

那么 Manifest screenshots 实际上是做什么的?比如,这些截图用在哪里?是当有人通过浏览器将你的社区安装为本地应用时吗?如果你让你的社区可以通过 Discourse Discover 被发现,显示的图片是这些吗?

我在 Chrome 的“添加到主屏幕”选项中看到这些屏幕截图,我的 Android 设备

2 个赞

很有趣!我以为他们就是这么做的,但我在桌面上(Chrome、Windows)安装时没有看到它们。不过,我可能没有给它们足够的时间加载/传播。

不过,很高兴知道我对它们的作用的看法是正确的!

1 个赞

看起来这一部分被错误地遗漏了,

1 个赞

读了两遍之后,我觉得我明白了。尺寸指南已包含在上面。例如:

我认为总的来说,本指南已经过时了。您无法再通过向导添加徽标或配置外观。主题管理页面现在看起来完全不同,颜色方案已重命名为颜色调色板。
深色/浅色模式切换主题组件已移至核心。品牌设置有一个新的配置页面,位于 /admin/config/logo。
我只是想知道为什么配置页面上提到的尺寸与我在查看站点设置时看到的描述不同。


600×80 与最小 360×120 不同。

2 个赞

这个话题已经有点过时了,因为这些东西最近被彻底修改了。

以下是我对一些(但有价值的)改进建议的一些想法:

4 个赞