自定义组件 -- 在任何插件插口添加按钮或文本

[pfaffman (Jay Pfaffman)]

	摘要	在任何位置添加按钮或文本
	仓库	https://github.com/literatecomputing/discourse-custom-components
	安装指南	如何安装主题或主题组件
	Discourse 主题新手？	Discourse 主题使用入门指南

安装此主题组件

在任何插件插口处添加链接按钮或任意文本。（忽略图片中的水印——这些截图是在暂存/测试站点上截取的。）

要查看插件插口在哪里，请使用 Introducing Discourse developer toolbar 来查找它们。如果你不知道什么是插件插口，可以查看 https://meta.discourse.org/t/using-plugin-outlet-connectors-from-a-theme-or-plugin/32727，但此组件允许你在一定限制下，将文本插入到任何插件插口，而无需编程或真正理解什么是插件插口。

我开始开发这个插件是为了满足某人的需求，他想在用户个人资料和用户卡片上显示一个“点击此按钮订阅以便发送私信”的按钮。他希望在用户无法发送私信时显示该按钮。由于我并不总是像我想象的那么聪明，我使用组来确定按钮的显示方式来编写该组件。这种方法的一个问题是，工作人员不在订阅者组中，因此即使他们可以发送私信，也会看到“你必须订阅”的按钮。此外，该组是隐藏的，因此无论如何都不可能在主题组件中使用它。我重写了那个主题组件，使用 currentUser.can_send_private_messages 来确定是否显示该按钮。

谁适合使用？

如果你想放置一个带有链接的按钮，或者一些根据特定组显示或隐藏的任意文本，这将允许你将它们插入到任何插件插口中。你想在除非成员外的每条消息之间添加一个“你应该订阅”的链接按钮吗？这个可以做到。你想将任意 HTML 粘贴到插件插口，只是想看看它会是什么样子吗？这个也可以做到。

它如何帮助开发者

这个主题包含了一些简单的示例，说明如何：

• 使用 Objects type for theme setting
• 使用 api.renderInOutlet（如此处所述）将 Glimmer 组件固定到由设置控制的插口，而不是在 connectors 目录中创建文件
• 编写一个简单的 Glimmer 组件，该组件访问 currentUser
• 将组件包装在另一个（内联）模板中，以便能够向其传递数据
• 从主题设置中显示任意 HTML，不受 Markdown 的限制——当然，也许

@Discourse

你可以在这里使用 Ember 的 html-safe 助手，它将渲染 HTML 而不是文本。

但在 .gjs 文件中的 <template> 内尝试这样做时，它的工作方式略有不同（例如 {{htmlSafe component.text}}）

[NateDhaliwal]

空格使文本不加粗。

---

很棒的组件！

[jrgong]

是否可以在按钮 URL 中添加占位符，例如让 URL 包含用户所在的 topic ID？

[pfaffman (Jay Pfaffman)]

我不确定。如果你有预算，我会看看。

如果按钮有主题 ID，它会做什么？

如果你解决了并且想提交一个 PR，我可能会接受。

@jrgong

是否可以为按钮 URL 添加占位符，例如 URL 包含用户所在的主题 ID？

我很确定答案是否定的，但你可以使用这里描述的变通方法

@Discourse

你也可以将其他 Ember 组件用作块，只需使用正确的名称即可。例如，core 包含一个 signup-cta Ember 组件，你可以在侧边栏中按原样使用它。请注意，你不能使用需要一组参数的组件，但你可以在单独的主题中构建自己的 Ember 组件，并在侧边栏的 blocks 设置中仅通过其名称来引用它。

[jrgong]

您好 @pfaffman

我们希望为我们企业账户用户组中的每位成员添加这样一组按钮。
该按钮将触发创建一个新的私人消息，其中包含用户当前所在的 URL。

这样，我们的企业客户就可以向我们发送固定、突出显示或“赞助”特定主题的请求。

[pfaffman (Jay Pfaffman)]

如你所知，你可以创建一个打开新主题撰写器的 URL。你可以让主题组件添加该链接。

@jrgong

然后它会包含用户当前所在的 URL

我认为，如果不向主题组件添加代码，这是不可能实现的（但也许可以？）。也许有人对此有想法，并在此（或其他主题）提供解决方案。如果没有，你可以联系我，或在 Marketplace 发布你所需内容的描述和预算。

[Cate_Soule]

演示文本块与演示按钮和其他部分未对齐。我在块插口中使用 extra-nav-item。

[pfaffman (Jay Pfaffman)]

我认为你需要将那些其他按钮的类添加到你添加的那个按钮上。

[Cate_Soule]

您是什么意思？我尝试使用与演示按钮相同的类。

[pfaffman (Jay Pfaffman)]

是的。由于那是文本而不是按钮，你需要添加一些 CSS 才能使其看起来像那里其他的按钮。

主题组件已将文本放置在你想要的位置，但它没有设计成你想要的样式。

将以下内容添加到你某个主题的 CSS 中应该有效。

.custom-component.btn-custom {
  display: inline-flex;
  align-self: center;
}

[Cate_Soule]

您好，它无法正常工作。此外，即使“文本块组”设置为“所有人”，访客也看不到该文本块。

[pfaffman (Jay Pfaffman)]

您需要在主题设置中将文本块的类与我展示的 CSS 中的类相匹配。

@Cate_Soule

另外，即使“文本块组”设置为“所有人”，访客也看不到该文本块。

另外，您应该更改设置，使其隐藏匹配的组，而不是为匹配的组显示。

如果您需要更多帮助并且有预算，我的电子邮件地址在我的用户卡中。

[Cate_Soule]

谢谢！我的 CSS 奏效了！

[pfaffman (Jay Pfaffman)]

太棒了！很高兴它奏效了！那些 CSS 东西对我来说仍然很棘手。