您可以自定义哪些 HTML 内容？

开发
1

作为 Discourse 的新手，我正在尝试了解可以自定义哪些内容以及如何操作。我知道有各种主题和主题组件可用，并且我也明白，理论上如果进入 admin -> customize -> Themes -> [点击所选主题] -> edit CSS/HTML，就可以编辑 HTML、CSS 和 JavaScript。

我目前正在努力掌握在点击“edit CSS/HTML”时出现的仪表板的使用方法。它显示了 <head> Header After Header <body> Footer Embedded CSS。

是否有任何带有示例的指南，说明如何实际编辑 HTML？我了解到 meta 上有相关建议，但据我所见，这些内容分散在论坛的各个主题中。

作为一个让我感到困惑的例子：这篇 帖子 询问是否可以更改主题列表的列顺序，这本来是一个相对基础的 HTML 修改。但回复基本上是说，如果不进行一些深层覆盖，这是无法实现的。

因此，我正在努力弄清楚如何利用那个“edit CSS/HTML”功能来定制我的论坛。

2

有的，请查看 Discourse 主题开发者指南。

2 个赞
3

谢谢。我之前看到过这个，但没敢尝试，因为感觉重点在于创建新主题，而不是仅仅编辑我当前的单个论坛。

我确实看到那里有关于如何使用“编辑 CSS/HTML”仪表板的指南。但想确认一下，我是否可以在不创建新主题的情况下直接修改 HTML、CSS 和 JS？

另外，目前还不清楚在哪里以及如何移动组件，而不仅仅是添加或删除它们（例如，调整列顺序，使“用户组”出现在页面的最左侧）。

1 个赞
4

没错！

我强烈建议你也阅读那份指南。不要因为它涉及“主题”部分而却步，因为它深入探讨了多种对你有益的自定义方面。

1 个赞
5

Simon 提供的链接解释了所有内容，但篇幅较长，阅读起来有些耗时。

基本上，如果您想编辑 Discourse 的 HTML，可以通过以下几种方式实现：

  1. 通过您的主题或组件中预定义的 HTML 标签页： Header、After Header、</body>、Footer。
  2. 通过定位一个“自由”的 HTML 空间（outlet），您可以在此处填充自己的 HTML。这可以通过在 <head> 标签页中添加一个 <script> 标签来实现。
    以下是主题视图中可用 outlet 的示例：
    image
    image1141×1158 87.7 KB
  3. 通过覆盖现有的 HTML 模板。模板有时包含大量 HTML 代码，您需要复制并粘贴所有内容才能进行修改。这也可以在 <head> 中添加的 <script> 标签中完成。

实际上，创建主题、创建主题组件或“仅仅编辑我的单个论坛”，在这里的做法大致相同。这三种方式的操作流程基本一致。

是的，这取决于您具体想做什么，但通常正确的做法是创建一个新的主题组件，并在其中编写 HTML/CSS。

3 个赞
6

谢谢提供这些有用的信息。我可以理解如何向开放空间添加 HTML，以及如何用 CSS 隐藏现有 HTML（例如，对相关的 div 类设置 display: none，我想我只需要用检查器找到它）。\n\n但该如何覆盖 HTML 呢，比如移动某个组件？您能提供一个简短的示例吗？

7

我部分引用了 simon 粘贴的链接：

用一个大红方块填充插槽的快速示例；此处插槽位于主题视图中帖子列表的上方：

<script type="text/x-handlebars" data-template-name="/connectors/topic-above-post-stream/a-unique-name">
  <div style="height: 200px; width: 200px;background: red"></div>
</script>

image
image1049×801 56.5 KB

请注意 data-template-name 属性。

覆盖导航栏模板的快速示例：

<script type="text/x-handlebars" data-template-name="components/navigation-bar">
    {{#each navItems as |navItem|}}
      {{navigation-item content=navItem filterMode=filterMode category=category}}
    {{/each}}
    <div style="background: red; padding: 10px; float: left;">我在导航栏模板中添加了此块</div>
    {{custom-html name="extraNavItem" tagName="li"}}
    {{!- 这是为了避免在 UL 中出现 DIV，原本使用的是 {{plugin-outlet name="extra-nav-item"}}
    {{#each connectors as |c|}}
      {{plugin-connector connector=c class=c.classNames tagName="li" args=(hash category=category filterMode=filterMode)}}
    {{/each}}
</script>

image
image1135×122 10.7 KB

同样，请注意 data-template-name 属性。

以下是模板列表：https://github.com/discourse/discourse/tree/master/app/assets/javascripts/discourse/app/templates

还有一个有用的主题组件，可以高亮显示所有插槽的位置：(deprecated) Plugin outlet locations theme component

4 个赞
8

好的，我现在开始明白了。这真的很有帮助。

1. 这个 type="text/x-handlebars" data-template-name="/connectors/topic-above-post-stream/a-unique-name" 是从哪里来的？（也就是说，我该如何知道该在那里填什么？）

关于你提供的用于覆盖模板的代码示例，我开始看出这是如何实现的，因为我可以获取模板代码，移动它、删除它、添加内容等等。

2. 所以我是从你提供的 GitHub 链接 获取模板代码吗？如果是的话，这说得通，但似乎很难找到正确的代码。例如，首页的模板是哪一个？

3. 然后将相关代码粘贴到“编辑 CSS/HTML”仪表板中。但具体在哪里？是在第一个选项（</head>）下吗？我从你之前的回答中推测是这样，但希望能得到确认。

希望这些内容也能对其他用户有所帮助。

9

要查找某个组件的名称和位置，我认为最好的方法是使用我之前链接的插件。

至于查找对应你想要编辑的页面部分的模板……这就有点棘手了。
我不知道有什么简单的方法。如果有类似的插件那就太好了。
有时候，我会查看页面的 HTML 代码，寻找一些我认为具有唯一性的代码（例如某个 CSS 类），然后在所有模板文件中进行搜索。我已经在自己的家用电脑上克隆了 Discourse 仓库，并使用 Sublime Text 在这些文件中进行搜索，但我相信肯定还有其他更好的方法。
有时候，我也会查看现有的主题组件代码，这些组件修改了我同样想要自定义的页面位置。

是的，确实很难，但我并不是专家，我猜肯定有更高效的方法来实现这一点！

是的。

当你来自 WordPress 或 phpBB，习惯了直接编辑那些目录中的模板文件时，Discourse 可能会显得晦涩难懂……:sweat_smile:

10

谢谢。不过，与 WordPress 相比，至少在我看来，Discourse 的一个显著优势是它使用 Ruby 和 JavaScript，而不是 PHP。