커스텀 HTML에 위젯 주입

제품 지원
1

안녕하세요,
이미 어딘가에 답변이 올라가 있을 수도 있지만, 몇 시간을 찾아봐도 스스로 해결하지 못해서 질문드립니다.

위젯과 컴포넌트의 개념은 어느 정도 파악한 것 같은데, 찾아본 모든 예제가 비슷한 방식으로 만들어져 있었습니다.
위젯이나 컴포넌트는 이미 존재하는 위젯이나 기존 커넥터, 아웃렛에 연결(hook)되어 있는 구조였습니다.

제가 하려는 일은 다음과 같습니다:
Dark/Light Toggler 컴포넌트를 사용 중인데, 사용자가 찾기 직관적이지 않습니다.
다른 테마 전환기 컴포넌트들(제 것이 포함)도 항상 기존 디스코urs 요소(헤더, 링크, 내비게이션 등)에 첨부되어 있습니다.

하지만 제 자체 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">
				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에 다음과 같이 주입(inject)하는 방식입니다:

<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