Вставка виджета в пользовательский HTML

Поддержка
1

Привет,
извините, если ответ уже где-то есть, но я потратил часы и не смог найти его или разобраться самостоятельно.

Я, кажется, понял смысл виджетов и компонентов, но все найденные мной примеры были построены схожим образом.
Виджет или компонент подключается к уже существующему элементу, разъёму или выходу.

Что я пытаюсь сделать:
Я использую компонент переключателя тёмной/светлой темы, но пользователям неудобно его искать.
Другие компоненты переключения тем (включая мой собственный) всегда прикрепляются к существующим элементам Discourse (заголовок, ссылки, навигация и т. д.).

Но я хочу разместить его в своём собственном HTML. В своём боковом меню:

image
image838×492 79.2 KB

Ваше боковое меню на экране выглядит так:

	<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">
				Игроков онлайн на 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">Время на сервере</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">
		    Нужна помощь?
		</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",

    // настройки тёмной/светлой темы
  });
</script>

а затем внедрить это в свой HTML так:

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

Думаю, это что-то простое, что я упустил…
Буду признателен за любую помощь!

2

Как вы добавляете HTML для боковой панели? Это делается через plugin-outlet?

3

Привет @Johani, спасибо за ответ. Я добавляю это в свой шаблон > заголовок

image
image479×196 11.9 KB

4

Когда вы добавляете необработанный HTML в вкладку заголовка вашей темы, он добавляется сюда:

Это находится вне области приложения. Поэтому вы не можете использовать такие элементы, как

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

Вместо добавления необработанного HTML используйте плагин-выход above-site-header. Он вставляется в то же место, поэтому визуально должно выглядеть так же.

Что-то вроде этого:

<script type="text/x-handlebars" data-template-name="/connectors/above-site-header/my-sidebar">
  добавьте ваш HTML здесь
  Вы можете вставить {{mount-widget widget="my-dark-light-widget"}} в любом месте разметки
</script>
5

Отлично, как всегда, спасибо за то, что нашли время ответить так, чтобы это одновременно и обучало!
Благодаря вашей помощи всё оказалось очень просто, и я даже смог использовать виджет компонента во второй раз.

image
image756×277 20.3 KB