在自定义 HTML 中注入 Widget

[B-iggy]

嘿，
抱歉，如果答案已经在那里等着我了，但我花了几个小时也没能找到或自己弄清楚。

所以我想我理解了 widgets 和 components 的含义，但我找到的每个示例结构都相似。
一个 widget 或 component 被挂载到一个已存在的组件、连接器或出口上。

我想做的是：
我正在使用 组件 Dark/Light Toggler，但用户很难直观地找到它。
其他主题切换组件（包括 我自己的）总是附加到现有的 Discourse 元素（标题、链接、导航等）上。

但我希望它出现在我自己的 HTML 中。在我的侧边栏中：

您在屏幕上看到的侧边栏如下所示：

	<div class="row">
		<div class="sidebar-counterTitleWrapper">
			<div class="sidebar-counterRefreshIcon" type="success" size="medium" circle>
				<svg class="far fa-sync fa d-icon d-icon-sync svg-icon svg-node">
					<use xlink:href="#sync"></use>
				</svg>
			</div>
			<h3 class="sidebar-counterTitle">
				Player online on HWS
			</h3>
		</div>
		<div class="sidebar-counterServers">
			<span class="sidebar-counterPlayer">HWS EU:</span>
			<strong class="sidebar-counterPlayer--eu">
			</strong>
		</div>
		<div class="sidebar-counterServers">
			<span class="sidebar-counterPlayer">HWS NA:</span>
			<strong class="sidebar-counterPlayer--na">
			</strong>
		</div>
		<div class="sidebar-counterServers">
			<span class="sidebar-counterPlayer">HWS RE:</span>
			<strong class="sidebar-counterPlayer--re">
			</strong>
		</div>
		<br>
		<h4 class="sidebar-server-title">Server Time</h4>
		<div class="sidebar-server-time"></div>
	</div>
	<hr class="content-textLine">
	<div class="need-help-wrapper">
		<a href="https://help.hws.global" title="HWS Get help">
		    Need help?
		</a>
		<hr class="content-textLine">

我该怎么做？
理想情况下，它应该类似于：

<script type="text/discourse-plugin" version="0.8">
  const h = require("virtual-dom").h;

  api.createWidget("my-dark-light-widget", {
    tagName: "div.my-widget",

    // dark-light stuff
  });
</script>

然后将其注入到我的 HTML 中，例如：

<script type="text/x-handlebars" inject-to-my-class-selector(.sidebar-counterTitleWrapper)>
  {{mount-widget widget="my-dark-light-widget"}}
</script>

我想这很简单，只是我漏掉了什么……
任何帮助都将不胜感激！

[Johani (Joe)]

您是如何为侧边栏添加 HTML 的？它是通过 plugin-outlet 添加的吗？

[B-iggy]

嘿 @Johani
感谢您的回复。
我正在将其添加到我的主题 > 头部

[Johani (Joe)]

当您在主题的“头部”选项卡中添加原始 HTML 时，它会被添加到这里：

app/views/layouts/application.html.erb

这位于应用程序外部。因此，您无法使用类似以下内容：

{{mount-widget widget="my-dark-light-widget"}}

请改用 above-site-header 插件出口（plugin-outlet）来添加原始 HTML。它会被插入到相同的位置，因此在视觉上应该看起来一样。

示例如下：

<script type="text/x-handlebars" data-template-name="/connectors/above-site-header/my-sidebar">
  在此处添加您的 HTML
  您可以在标记中的任意位置插入 {{mount-widget widget="my-dark-light-widget"}}
</script>

[B-iggy]

太棒了，一如既往，感谢您抽出时间以寓教于乐的方式回复！
在您的帮助下，这变得非常简单，我甚至能够第二次使用该组件小部件。