自定义您的网站品牌标识

:bookmark: 本教程非技术性,将引导您自定义 Discourse 站点的品牌标识和外观。

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

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

设置向导

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

设置向导允许您配置站点标题、默认语言环境以及访问设置(公开或私密、注册或仅限邀请,以及用户是否需要审核)。这些是让站点运行的基本第一步。

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

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

站点主题

一旦基本配置就绪,就可以进一步自定义站点了!:sparkles:

主题是对站点样式进行的大规模自定义,会改变论坛设计的多个元素,通常还包含额外的前端功能。主题能够显著改变论坛的外观和布局。

Meta 上的 #theme 分类托管了各种预建主题,您可以在站点上使用它们来自定义外观。这是搜索站点主题的最佳位置。请从这个分类中挑选一个您想使用的主题。

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

Discourse 主题使用入门指南 是 Discourse 主题基础知识的速成课程,并概述了如何在 Discourse 站点上安装主题。请阅读该指南以了解如何安装您选择的主题。

:tipsing_hand_woman: 您还可以在以下资源中找到更多关于如何使用、创建和分享自己主题的详细信息:

配色方案

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

在此页面,您可以创建新的配色方案,选择现有方案进行自定义,并将方案分配为主题默认的浅色或深色模式。

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

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

:tipsing_hand_woman: 需要帮助来决定颜色吗?像 Paletton - The Color Scheme Designer 这样的选色工具会非常有帮助!

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

主题组件

与主题类似,Discourse 还提供“主题组件”,可用于更改论坛设计的表面元素或添加额外的前端功能。主题组件比完整主题更小、更具针对性,通常(尽管并非总是)可以与其他主题组件组合,为您的社区打造定制的论坛设计。:gear:

Meta 上的 #theme-component 分类包含了 Discourse 所有官方和非官方的主题组件。浏览列出的主题组件,如果您想在站点上安装任何组件,只需按照此处说明操作:Discourse 主题界面及如何安装主题组件

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

:tipsing_hand_woman: Discourse 还内置了深色/浅色模式切换功能,由 interface_color_selector 站点设置控制,该设置可配置为在侧边栏页脚或页眉中显示切换按钮。

:tipsing_hand_woman: Meta 上的 theme-guides 标签也包含大量操作指南,提供使用主题组件进一步自定义站点的创意。

站点品牌标识

Discourse 提供了一个专用的徽标配置页面 Admin -> Appearance -> Logo(位于 /admin/config/logo),您可以在其中管理站点的所有徽标和图标。

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

移动设备 部分下:

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

电子邮件 部分下:

  • 摘要徽标 - 用于站点电子邮件摘要顶部的替代徽标图像。如果留空,将使用 logo 设置中的图像。请使用宽矩形图像。请勿使用 SVG 图像。

社交媒体 部分下:

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

:tipsing_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 个赞