您可以自定义哪些 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