حقن عنصر واجهة مستخدم في HTML مخصص

[B-iggy]

مرحبًا،
آسف إذا كانت الإجابة موجودة بالفعل في مكان ما، لكنني بعد ساعات لم أستطع العثور عليها أو حلها بنفسي.

لذا أعتقد أنني فهمت معنى الـ widgets والمكونات، لكن كل مثال وجدته كان مبنيًا بطريقة متشابهة.
يتم ربط الـ widget أو المكون بمكون موجود مسبقًا أو بموصل أو منفذ موجود.

ما أحاول فعله:
أنا أستخدم مكون تبديل الوضع الداكن/الفاتح لكنه غير بديهي للمستخدمين للعثور عليه.
مكونات تبديل السمة الأخرى (بما في ذلك المكون الخاص بي) تكون دائمًا مرفقة بعنصر موجود مسبقًا في 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">
				اللاعبون المتصلون على 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>

أعتقد أنه شيء بسيط أفتقده فقط…
أي مساعدة ستكون موضع تقدير!

[Johani (Joe)]

كيف تضيف HTML للشريط الجانبي؟ هل تتم إضافته عبر plugin-outlet؟

[B-iggy]

مرحبًا @Johani
شكرًا لك على ردك.
أنا أضيفه في سمة > رأس الصفحة

[Johani (Joe)]

عند إضافة HTML خام في تبويب الرأس (header) في قالبك، يتم إضافتها هنا
discourse/app/views/layouts/application.html.erb at 13b31def80c1f1262bf6fd21226c0639dcfabb13 · discourse/discourse · GitHub

هذا خارج نطاق التطبيق. لذا، لا يمكنك استخدام أشياء مثل

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

بدلاً من إضافة HTML الخام، استخدم منفذ الإضافة (plugin-outlet) 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>

[B-iggy]

رائع، كما هو معتاد، شكرًا لك على وقتك في الرد بطريقة تُعلّم في الوقت نفسه!
بمساعدتك كان الأمر سهلاً للغاية، وتمكنت حتى من استخدام عنصر واجهة المستخدم مرة أخرى.