api.decorateWidget - 如何查找模板名称？

[Ed_Bobkov (Ed)]

我该如何找到 Discourse 模板的位置以便在代码中设置？
我特别想知道用户卡（usercard）的正确名称。

@Johani

decorateWidget()

使用此方法，您可以在小部件之前或之后添加 HTML。用法如下：

<script type="text/discourse-plugin" version="0.8">
  api.decorateWidget('NAME:LOCATION', helper => {

  });
</script>

[tshenry (Taylor)]

有一个非常实用的主题组件，可用于追踪我们各种 Handlebars 模板的插件出口：https://meta.discourse.org/t/plugin-outlet-locations-theme-component/100673。在首帖末尾，有一个链接指向该组件在我们主题创建网站上的预览。你可以利用它来查找大多数插件出口，甚至无需将其安装到自己的站点上。

需要注意的是，模板和组件是两个不同的概念。不过，如有需要，它们可以协同工作，例如将组件挂载到模板的插件出口上。不过，目前更常见的做法是像使用插件一样，通过连接器、组件或控制器来操作插件出口。

开发者指南中的这一部分涵盖了许多你所需的内容。此外，我也建议浏览我们 #theme 分类下的主题组件 GitHub 仓库，查看一些优秀的示例。

[Ed_Bobkov (Ed)]

感谢提示！我找到了必要的部分 user-card-post-names:after。

'Plugin Outlet Locations' by @RGJ

我尝试在原始代码中使用它，但失败了。

@simon

<script type="text/discourse-plugin" version="0.8.27">  
    api.decorateWidget('poster-name:after', helper => {  
        const attrs = helper.attrs;  
        if (attrs.userCustomFields && attrs.userCustomFields.user_field_4) {  
            return helper.h('span.poster-user-field', helper.attrs.userCustomFields.user_field_4);  
        }  
    });  
</script>  

我将 poster-name:after 改为 user-card-post-names:after，但它没有生效，自定义字段在用户卡片上也不可见。对于出现这种情况的原因，有什么建议吗？

[tshenry (Taylor)]

你无法在插件出口上使用 decorateWidget()。试试像这样的方法：

<script type="text/discourse-plugin" version="0.8.42">
    const h = require("virtual-dom").h;
    api.createWidget("user-card-custom-field", {
      html(attrs) {
        const userCustomFields = attrs.user.custom_fields;
        if (userCustomFields.user_field_4) {
            return h('span.poster-user-field', userCustomFields.user_field_4);
        }
      }
    });
</script>

<script type="text/x-handlebars" data-template-name="/connectors/user-card-post-names/user-card-custom-field">
    {{mount-widget widget="user-card-custom-field" args=(hash user=user)}}
</script>

mount-widget 会将我们从核心插件出口中可用的 user 对象传递进来，并使其在我们创建的 user-card-custom-field 小部件的属性中可用。

app/assets/javascripts/discourse/app/templates/components/user-card-contents.hbs

请确保根据需要已在站点设置中将 user_field_4 添加到你的“公开用户自定义字段”或“工作人员用户自定义字段”中。

编辑

此外，除非你有特别需要做的事情，否则你应该完全避免使用小部件，而直接使用插件出口：

<script type="text/x-handlebars" data-template-name="/connectors/user-card-post-names/user-card-custom-field">
  {{#if user.custom_fields.user_field_1}}
    <span class="poster-user-field">{{user.custom_fields.user_field_1}}</span>
  {{/if}}
</script>

[Ed_Bobkov (Ed)]

非常感谢！一切正常。