定制您的网站品牌

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

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

想要自定义您的站点品牌,但不知道从何开始?继续阅读以了解详情!

设置向导

Discourse 是高度可定制的!开始站点自定义的一个好地方是登录站点的管理员帐户并运行站点的设置向导:mage:

设置向导的“配置更多”选项允许您为站点选择站点徽标、配色方案、字体和主页样式:

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

站点主题

在完成基本配置后,就可以进一步自定义您的站点了!:sparkles:

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

Meta 上的 Theme 类别托管了各种预先创建的主题,您可以在您的站点上使用它们来自定义站点的外观。这是搜索要用于您站点的最佳位置。继续从该类别中选择一个您想用于您站点的主题

一旦您决定了要用于您站点的主题,就可以从 Admin -> Customize -> Themes 页面(位于 .../admin/customize/themes)将该主题添加到您的站点。您也可以在此页面上更改您站点的主题,甚至创建全新的主题

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

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

配色方案

您可以通过在“Admin → Customize → Colors”页面(位于 /admin/customize/colors)调整配色方案来进一步自定义您的站点。:art:

让我们通过单击此页面上的“+新建”按钮来创建一个新的配色方案供您的站点使用:

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

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

:tipping_hand_woman: 需要一些颜色选择方面的帮助吗?像 http://paletton.com/#uid=1000u0kllllaFw0g0qFqFg0w0aF 这样的配色工具对此会非常有帮助!

一旦您对配色方案满意,就可以将其分配给您当前的主题,并预览它以查看您站点上的更改实时反映出来。

刷新页面后,您的更改也将自动应用于站点。

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

Create and share a color scheme

主题组件

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

Meta 上的 Theme component 类别包含 Discourse 的所有官方和非官方主题组件。查看那里列出的主题组件,如果您想在您的站点上安装任何一个,只需按照此处的说明操作:Discourse 主题界面及主题组件安装指南

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

:tipping_hand_woman: Meta 上的 theme-guides 标签也有许多操作指南,其中包含有关使用主题组件进一步自定义站点的想法。

站点品牌

除了您在站点设置向导中选择的徽标外,Discourse 在“Admin → Settings → Branding”页面(位于 /admin/site_settings/category/branding)上还有几个其他的站点品牌相关设置,您可以使用它们来为您的站点添加自定义图像和徽标。

在此页面上,您可以为您的站点添加以下类型的徽标:

  • logo - 您站点左上角的徽标图像。使用高度为 120 且长宽比大于 3:1 的宽矩形图像。如果留空,将显示站点标题文本。
  • logo small - 您站点左上角的小徽标图像,滚动时可见。使用 120 × 120 的方形图像。如果留空,将显示主页图标。
  • digest logo - 您站点电子邮件摘要顶部使用的备用徽标图像。使用宽矩形图像。不要使用 SVG 图像。如果留空,将使用 logo 设置中的图像。
  • mobile logo - 用于您站点移动版本的徽标。使用高度为 120 且长宽比大于 3:1 的宽矩形图像。如果留空,将使用 logo 设置中的图像。
  • logo dark - ‘logo’ 站点设置的深色主题替代。
  • logo small dark - ‘logo small’ 站点设置的深色主题替代。
  • large icon - 用作其他元数据图标基础的图像。理想情况下应大于 512 x 512。如果留空,将使用 logo_small。
  • manifest icon - 在 Android 上用作徽标/启动图像的图像。将自动调整为 512 × 512。如果留空,将使用 large_icon。
  • manifest screenshots - 在安装提示页面上展示您的实例功能和特性的屏幕截图。所有图像都应是本地上传且尺寸相同。
  • favicon - 您站点的图标,请参阅 https://en.wikipedia.org/wiki/Favicon。为了在 CDN 上正常工作,它必须是 png 格式。将调整为 32x32。如果留空,将使用 large_icon。
  • apple touch icon - 用于 Apple Touch 设备的图标。将自动调整为 180x180。如果留空,将使用 large_icon。
  • opengraph image - 默认的 opengraph 图像,当页面没有其他合适的图像时,许多应用程序和平台会使用它来预览网页链接。理想情况下应为方形。如果留空,将使用 large_icon。
  • twitter summary large image - Twitter 卡片“summary large image”(宽度至少为 280,高度至少为 150,不能是 .svg 格式)。如果留空,则使用 opengraph_image 生成常规卡片元数据,前提是 opengraph_image 也不是 .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 不同。

1 个赞

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

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

2 个赞