寻找合适模板进行编辑的最佳策略是什么？

开发
1

我还在熟悉 Discourse，但正在学习如何在其基础上编写代码来自定义功能。我正在尝试了解将代码插入页面特定位置（比通用区域更精准）的最佳方法。看起来我必须覆盖控制该位置的模板。

我的理解是，无论我是在自定义仪表板的 <head> 区域操作，还是使用单独的 GitHub 仓库作为主题，我都必须：

  1. 找到需要编辑的正确模板
  2. 在你进行编码的地方（仪表板、仓库等）重新输出整个模板
  3. 对模板进行所需的修改

第一步对我来说是个障碍。如何找到需要编辑的正确模板？

我目前了解到：Discourse 的模板位于此处，而真正需要编辑的模板通常位于组件文件中。

举个例子，假设我想在群组索引页（相当于此页面）的每个群组列表中添加一行。该页面的模板在哪里？我的最佳猜测是群组卡片模板，但我不太确定，尤其是因为我刚开始接触 Ember。

有没有更可靠的方法让我识别正确的模板？

2

你试过 Ember 浏览器扩展吗？

它可以显示模板和组件：

image
image494×456 25.2 KB

3

听起来很棒。您是指 Ember Inspector 吗？

4

明白了。使用它时，有一件事我不太明白（可能和我刚接触 Ember 有关）：

如果你查看 discourse 的 群组页面，每个群组条目都有一个名称和用户数量。

使用 Ember Inspector，我可以看到名称来自 groups-info 模板，但 group-user-count 是从哪里来的呢？（它似乎在 Ember Inspector 中没有对应的条目）

5
6

谢谢。我看到 group-user-count 出现在第 55 行。

这是否意味着，如果我想在 group-user-count 这一行之前添加一行，我就必须复制 index.hbs 文件中的全部 100 行代码，并将其插入到我的代码中，如下所示：
<script type="text/x-handlebars" data-template-name="groups/index">
[此处为 100 行代码]
</script>

7
  • 通常，您应检查是否存在合适的插件出口（plugin outlet），并使用它。
  • 您可以尝试使用 jQuery 定位元素，但如果您试图修改迭代元素，这种方法将不起作用。

如果上述两种方法都不可行：

  • 向 Discourse 团队申请添加新的插件出口，并提供理由
  • 按照您的建议，用您自己的模板完全替换现有模板。
8

你的意思是修改它周围的出口代码吗？（例如 components/group-info）

编辑：抱歉，我混淆了模板和插件出口。我明白了，插件出口是 Discourse 代码中的行（例如 {{plugin-outlet name="topic-above-post-stream" args=(hash model=model)}），由 Discourse 团队放置，作为你可以用来修改代码的锚点。

9

编辑：已将此后续内容移至 此处，因为它涉及一个略有不同的问题。