要求
要使用这些技巧，你需要是自托管 Discourse 实例的管理员，或者拥有高于 Basic 级别的 Discourse 托管计划。
简介
Discourse 支持多种方法来格式化和自定义帖子内容。你可以在这里找到列表：
但有时，你可能想要更具体的效果，例如一个看起来像按钮的链接。
这就是我们将要学习的那种修改。
逻辑
我会简要解释背后的逻辑，但你可以直接跳到下一步，查看一个实际的例子 
Discourse 允许在帖子内容中使用任何以 data- 开头的 HTML 属性。
这些属性就是我们将使用 CSS 来自定义内容所针对的对象。
在本教程中，我将它们称为 data- 属性
创建带有这些属性的元素的一种方法是使用类似 BBcode 的标签：[wrap]，我们可以给它添加一个自定义值。在这里，我们选择 “button”（这可以是其他任何值，甚至可以是你的狗的名字 
)：
[wrap=button]some text[/wrap]
这将输出一个具有以下属性的 HTML 元素：data-wrap="button"。
第一个例子：粉色背景
让我们从一个实际的例子开始。我们将创建带有粉色背景的文字。
作为 块级 元素
在你的帖子中，在一行空白处，写下：
[wrap=pink]pink text[/wrap]
这将创建一个具有属性 data-wrap="pink" 的 div 元素。
然后，将以下 CSS 添加到你的主题中。
前往 管理面板 → 自定义 → 主题 → 你的主题 → 编辑 CSS/HTML → CSS。
在内部放入以下 CSS 代码：
[data-wrap="pink"] {
background: pink;
}
然后点击保存按钮。
回到你的帖子，查看结果：
是的，它已经很美了 
你会注意到背景覆盖了帖子的整个宽度。因为我们的 wrap 是该行上唯一的元素，所以它输出的是一个 块级 元素。
你可以在这里了解更多关于 块级 和 行内 HTML 元素之间的区别：HTML Block and Inline Elements。
如果你想在多行上使用粉色背景（仍然是 块级），你需要让 [wrap] 标签所在的行没有其他内容或文本：
[wrap=pink]
pink text
pink text
pink text
pink text
[/wrap]
这将看起来像这样：
作为 行内 元素
现在，让我们在 [wrap] 之前或之后添加一些文本，或者两者都加 
。例如：
Here is some [wrap=pink]pink text[/wrap] and it's awesome ✨
结果如下：
如果文本或其他元素与你的 [wrap] 标签之一位于同一行，它将输出一个 行内 元素。
第二个例子：具有按钮外观的链接。
摆弄 [wrap] 标签有时会因为各种原因导致不理想的结果，其中一个原因是它根据上下文可以是块级或行内元素。
因此，我们将描述两种实现相同结果的不同方法，你可以选择最适合你的一种 
使用 [wrap] 的行内按钮链接
使用 Markdown 创建链接的语法是：[some text](https://some-link.etc)。
为了自定义文本并使其看起来像按钮，我们将在方括号内插入 wrap。这里有一个例子：
This [[wrap=button]nice link[/wrap]](https://discourse.org/) is a blue button 🐳 !
我们不会评论这段代码输出了什么。你知道，因为你写了 [wrap=button]，所以你需要在 CSS 中针对 [data-wrap="button"]。
那么，让我们开始吧，添加一些漂亮的 CSS 让它看起来更酷！ 
[data-wrap="button"] {
display: inline-block;
padding: 0.5em 1em;
background: DodgerBlue;
color: White;
}
我们不会在这里详细解释 CSS 规则。互联网上有许多 CSS 资源，所以如果你想进行更具体的修改，你需要先学习相关知识。
结果 
：
看起来不错，对吧？
使用常规 HTML 内容的行内按钮链接
由于 Discourse 接受 HTML 代码，我们可以决定不使用 [wrap] 标签，而是使用带有 data- 属性的 HTML。在这个例子中，我们将使用常规的 Markdown 链接语法，并用 <span> 标签包裹它。
我们不能直接使用链接 <a> 标签，因为它是一个例外，不允许任何 data- 属性。
写下：
This <span data-button>[link](https://discourse.org/)</span> is a green button 🐸 !
这将输出一个位于具有 data-button 属性的 <span> 标签 内部 的链接，这意味着 CSS 会稍微复杂一些。我们需要同时针对 data-button 和链接：
[data-button] {
display: inline-block;
padding: 0.5em 1em;
background: ForestGreen;
a {
color: White;
}
}
结果如下！
进一步探索
使用 [wrap] 自定义列表
[wrap] 标签和 data- 属性可以在许多上下文中使用，你可以自定义更高级的内容。限制主要在于你的 CSS 知识（以及较小程度的 HTML 知识）。
我将给出一个没有解释的例子，通过自定义一个列表，其中每个元素前面都会加一个猫的表情符号：
文本：
[wrap=cat]
- Felix
- Garfield
- Nat's cat
[/wrap]
CSS：
[data-wrap="cat"] ul {
list-style: none;
li:before {
content: "🐈";
margin-right: 0.25em;
}
}
结果：
使用你自己主题的颜色变量
如果你允许用户使用不同的主题或颜色，你的修改可能不会在每个主题中看起来都很好，特别是如果他们可以在浅色和深色配色方案之间选择时。
一个好的做法是使用 Discourse 的颜色变量，而不是“硬编码”的颜色，如 red、#FF0000 或 rgb(255,0,0)。
这里有一个例子，其中按钮的背景色将使用当前调色板的主色，而文本将使用次要颜色：
文本：
This [[wrap=button]nice link[/wrap]](https://discourse.org/) is a button 🌈 !
CSS：
[data-wrap="button"] {
display: inline-block;
padding: 0.5em 1em;
background: var(--primary);
color: var(--secondary);
}
以下是使用 Solarized Light 配色方案的用户看到的效果：
如果他们使用 Solarized Dark 配色方案：
结论
你现在已经掌握了使用 [wrap] 元素和 data- 属性创建自定义元素的基础知识。
要进行更高级的自定义，学习 CSS 是至关重要的。你会在互联网上找到许多教程。
以下 Discourse 指南也可能有所帮助：Making custom CSS changes on your site。
使用你的互联网浏览器的开发者工具也可以轻松显示你的 Discourse 颜色变量列表以及每个变量的外观：
欢迎提出任何针对此指南的修改建议！
本文档受版本控制 - 请在 github 上建议更改。
