话语中的可定制性？

支持
1

我关注 Discourse 已经很多年了，但一直犹豫是否要迁移，因为我不熟悉编码或命令行设置。不过，令人兴奋的功能和开源性质最终说服了我从 XenForo 迁移，并且我有一位懂技术的朋友帮忙。

现在，我渴望自定义我的论坛！作为一名 UI/UX 设计师，我有很多想法，但我不确定从哪里开始。在 XenForo 中，我使用与我的愿景非常接近的主题，并通过 CSS 进行微调。内置的主题选项也允许我通过 GUI 调整特定的 UI 元素，例如帖子背景或侧边栏边框。

在 Discourse 中，我看到了颜色选项，但是否有任何内置控件可以进行更详细的样式设置，还是我需要完全依赖代码？任何指导都将不胜感激！尽管如此，我对 Discourse 的功能印象深刻，并热衷于探索它的潜力。

3 个赞
2

欢迎 :slight_smile:

除了调色板之外，还有 CSS/SCSS，如果需要的话还可以有更多（JS、HTML）。

您可能会对此感兴趣：

您可以创建主题和组件。组件就像“子主题”（它们可以包含样式和功能），任何组件都可以为一个或多个主题启用。

The image displays a download page for a mobile app, highlighting installable themes that include various customization options and frontend features, with toggle options like "Category list mobile," "Discotoc," and "Emoji." (Captioned by AI)
The image displays a download page for a mobile app, highlighting installable themes that include various customization options and frontend features, with toggle options like "Category list mobile," "Discotoc," and "Emoji." (Captioned by AI)356×455 19.4 KB

This image shows a screenshot of the "Components" section of a forum theme called "DiscoTOC," detailing various default components that can be added or modified to customize the style of a forum, such as emoji fluffs, groups CSS classes, and progress bar settings. (Captioned by AI)
This image shows a screenshot of the "Components" section of a forum theme called "DiscoTOC," detailing various default components that can be added or modified to customize the style of a forum, such as emoji fluffs, groups CSS classes, and progress bar settings. (Captioned by AI)1004×704 65.5 KB

有一个命令行工具可以帮助创建主题和组件，我建议您看一下：

还有一个特殊页面列出了大多数 Discourse HTML 元素，因此您可以概览它们的外观，并相应地创建您的样式。
该页面必须启用 Styleguide enabled 站点设置。

示例：

https://unicyclist.com/styleguide/molecules/topic-list-item

7 个赞
3

虽然这对我来说有点令人生畏，但我仍然对此感到乐观，感谢您如此出色的回复，我认为风格指南肯定会派上用场。万分感谢！

2 个赞
4

您可以在 Discourse 的界面中直接编辑 CSS，以完成初始设置：

从 /admin/customize/themes/：

此图像显示了一个主题选择和自定义界面，特别是针对“Uni light”主题，并提供了 CSS/HTML 编辑选项。(由 AI 添加字幕)
此图像显示了一个主题选择和自定义界面，特别是针对“Uni light”主题，并提供了 CSS/HTML 编辑选项。(由 AI 添加字幕)1061×898 60.6 KB

图像显示了 Unicelist.com 开发人员站点上 create-backdrop 页面的屏幕截图，其中一个面板显示了部分代码，左侧有一个侧边栏菜单。(由 AI 添加字幕)
图像显示了 Unicelist.com 开发人员站点上 create-backdrop 页面的屏幕截图，其中一个面板显示了部分代码，左侧有一个侧边栏菜单。(由 AI 添加字幕)2560×1305 192 KB

Discourse 原生支持 SCSS 语法，它会被即时编译。

6 个赞
5

@manuel 正在扩展用于主题构建和自定义的非（或较少）编码选项。我建议从那里开始（自私地说，我很想关注您的进展，直到我自己有时间深入研究 :wink:，所以如果您这样做，请一路提供/发布反馈和报告！）。他似乎正在为我们这些 UI/UX 爱好者进行一些创新性的简化。

4 个赞
6

并非所有事情都需要，但要实现任何更自定义的设计，我认为你需要编写代码。我的建议步骤是：

  • 学习如何使用 @Canapin 已经提到的 Theme CLI gem。这可能是一个艰巨的第一步，但如果有什么能让你爱上自定义 Discourse，那就是这个小 gem！它就像设计师的魔法棒 :sparkles: 没有它，你可能会在每一步都感到阻碍。
  • 练习使用 CSS 自定义属性来实现样式。

我认为这方面的指南已不再是最新的。要实现一个真正一致的设计令牌系统还有很多工作要做，但 Discourse 已经走了很长一段路！弄清楚自定义属性的使用位置和方式将极大地帮助你理解 Discourse 前端最佳实践。

你可以使用浏览器的检查器找到自定义属性，或者先看看这个列表：Documenting custom properties。你可以使用自定义属性来样式化最近的模板，例如侧边栏。

  • 正如 @denvergeeks 所建议的，你可以看看 Canvas 主题模板。它所做的是添加了一组用于布局样式的自定义属性，这些属性在核心中不可用。
3 个赞
7

到目前为止，我只采用这种方法，通过浏览器的检查选项并进行调整。