Injecter un Widget dans du HTML personnalisé

Soutien
1

Salut,
Désolé si la réponse est déjà quelque part, mais après plusieurs heures, je n’ai pas réussi à la trouver ni à résoudre le problème moi-même.

Je pense avoir compris le sens des widgets et des composants, mais chaque exemple que j’ai trouvé était construit de manière similaire.
Un widget ou un composant est intégré à un élément existant, à un connecteur ou à une prise déjà présents.

Voici ce que j’essaie de faire :
J’utilise le composant Dark/Light Toggler, mais il n’est pas intuitif pour les utilisateurs de le trouver.
D’autres composants de changement de thème (le mien inclus) sont toujours attachés à un élément Discourse existant (en-tête, liens, navigation, etc.).

Mais je veux l’intégrer dans mon propre HTML, dans ma propre barre latérale :

image
image838×492 79.2 KB

Voici à quoi ressemble ma barre latérale à l’écran :

	<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">
				Joueurs en ligne sur 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">Heure du serveur</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 Obtenir de l'aide">
		    Besoin d'aide ?
		</a>
		<hr class="content-textLine">

Comment puis-je faire cela ?
Idéalement, ce serait quelque chose comme :

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

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

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

et ensuite l’injecter dans mon propre HTML comme suit :

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

Je pense que c’est quelque chose de simple que je rate…
Toute aide est la bienvenue !

1 « J'aime »
2

Comment ajoutez-vous le HTML de votre barre latérale ? Est-ce ajouté dans plugin-outlet ?

1 « J'aime »
3

Salut @Johani,
merci pour ta réponse.
Je l’ajoute dans mon thème > en-tête

image
image479×196 11.9 KB

2 « J'aime »
4

Lorsque vous ajoutez du code HTML brut dans l’onglet En-tête de votre thème, il est inséré ici :

Cela se trouve en dehors de l’application. Vous ne pouvez donc pas utiliser des éléments tels que :

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

Au lieu d’ajouter du code HTML brut, utilisez le point d’extension de plugin above-site-header. Il est inséré au même endroit, de sorte que l’apparence visuelle devrait rester identique.

Quelque chose comme ceci :

<script type="text/x-handlebars" data-template-name="/connectors/above-site-header/my-sidebar">
  ajoutez votre HTML ici
  Vous pouvez insérer {{mount-widget widget="my-dark-light-widget"}} n'importe où dans le code
</script>
4 « J'aime »
5

Super, comme toujours, merci d’avoir pris le temps de répondre d’une manière qui permet d’apprendre en même temps !
Grâce à votre aide, cela a été très simple et j’ai même pu utiliser le widget de composant une deuxième fois.

image
image756×277 20.3 KB

1 « J'aime »
6

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