Widget in benutzerdefiniertes HTML injizieren

[B-iggy]

Hey,
entschuldige, falls die Antwort schon irgendwo für mich bereitsteht, aber nach stundenlanger Suche habe ich sie nicht finden und selbst herausfinden können.

Ich denke, ich habe die Bedeutung von Widgets und Komponenten verstanden, aber jedes Beispiel, das ich gefunden habe, war ähnlich aufgebaut.
Ein Widget oder eine Komponente wird in ein bereits vorhandenes Element, einen vorhandenen Connector oder eine vorhandene Outlet eingebunden.

Was ich versuchen möchte:
Ich verwende das Dark/Light Toggler-Komponente, aber es ist für Benutzer nicht intuitiv zu finden.
Andere Theme-Switcher-Komponenten (auch meine eigene) sind immer an ein bestehendes Discourse-Element (Header, Links, Navigation usw.) angehängt.

Aber ich möchte es in meinem eigenen HTML haben. In meiner eigenen Seitenleiste:

Meine Seitenleiste, die du auf dem Bildschirm siehst, sieht so aus:

	<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">
				Spieler online auf 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">Serverzeit</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 Hilfe erhalten">
		    Hilfe benötigt?
		</a>
		<hr class="content-textLine">

Wie kann ich das umsetzen?
Idealerweise wäre es etwas wie:

<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>

und dann das Einfügen in mein eigenes HTML wie:

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

Ich denke, es ist etwas Einfaches, das ich nur übersehen habe…
Jede Hilfe wird geschätzt!

[Johani (Joe)]

Wie fügst du das HTML für deine Seitenleiste hinzu? Wird es im plugin-outlet eingefügt?

[B-iggy]

Hey @Johani,
danke für deine Antwort.
Ich füge es in meinem Theme > Header ein

[Johani (Joe)]

Wenn Sie im Header-Tab Ihres Themes rohes HTML hinzufügen, wird dies hier eingefügt:

app/views/layouts/application.html.erb

Dies befindet sich außerhalb der Anwendung. Daher können Sie Dinge wie

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

nicht verwenden.

Statt rohes HTML hinzuzufügen, verwenden Sie den above-site-header-Plugin-Outlet. Dieser wird an derselben Stelle eingefügt, sodass es visuell gleich aussehen sollte.

Etwas in dieser Art:

<script type="text/x-handlebars" data-template-name="/connectors/above-site-header/my-sidebar">
  Fügen Sie hier Ihr HTML hinzu
  Sie können {{mount-widget widget="my-dark-light-widget"}} an beliebiger Stelle im Markup einfügen
</script>

[B-iggy]

Toll, wie immer! Vielen Dank, dass du dir die Zeit nimmst, so zu antworten, dass man dabei gleichzeitig etwas lernt!
Mit deiner Hilfe war es dann sehr einfach, und ich konnte das Widget sogar ein zweites Mal verwenden.