如何在用户个人资料卡中添加自定义按钮？

开发
1

如何在用户个人资料摘要和卡片视图中添加自定义按钮？
我们想添加一个 CTA 来执行某些操作（例如重定向），但不需要保存数据…

image
image1812×800 88.3 KB

也用于个人资料卡：

image
image946×252 49.6 KB

我最初的代码几乎实现了目标，但它在标题部分，并且找不到在用户个人资料摘要和卡片上实现的方法：

<script type="text/discourse-plugin" version="0.4">
    api.decorateWidget('header-buttons:after', helper => {
        if (Discourse.User.current()) {
            const cta = function() {
                // do something here...
            };
            return helper.h('button#create-new', {
                className: "btn fa fa-plus",
                onclick: cta
            }, 'CTA' );
        }
    });
</script>
1 个赞
2

您好，欢迎 :wave:
您需要在此处使用插件插口，特别是 user-profile-controls。
您可以在此处查看示例：

3 个赞
3

感谢 @Arkshine，我对这些插件确实是新手，所以我想它会与标题按钮有类似之处。

无论如何，user-profile-controls 是一个插件吗？你能指导我如何实现吗？

4

我建议您阅读 https://meta.discourse.org/t/using-plugin-outlet-connectors-from-a-theme-or-plugin/32727；它将回答您的问题！

本质上，插件出口是一种在特定位置注入代码的方式。

建议使用 theme CLI 创建一个主题组件，并使用 单独的文件，就像我在我的主题组件中所做的那样（请随时克隆我的存储库以便您可以测试/修改它）：

但是，您仍然可以从您的 <script> 标签进行测试：

在您的情况下，您将编写：

<script type='text/x-handlebars' data-template-name='/connectors/user-profile-controls/my_connector_name'>
  Template content here
</script>

请注意第一行。我们将 user-profile-controls 用作连接器名称，而 my_connector_name 可以是您想要的任何名称。

4 个赞
5

太棒了！我现在明白了，既然可以在脚本标签中进行测试，那么至少我们可以在创建组件之前先进行测试。再次感谢 :beers:

3 个赞
6

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.