要求
要使用这些技巧和窍门，您必须是自托管 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 元素之间的区别：https://www.w3schools.com/html/html_blocks.asp。
如果您希望在多行上显示粉色背景（仍作为 块），则需要确保 [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 🐸 !
这将输出一个 内部 包含 <span> 标签的链接，该标签具有 data-button 属性，这意味着 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 上。
