특정 페이지에만 HTML 주입하기

개발
1

테마의 JS 탭에 다음과 같은 코드가 있습니다:

import { apiInitializer } from "discourse/lib/api";


export default apiInitializer("0.11.1", (api) => { 
    api.renderInOutlet("above-main-container",
        <template>
            <div>
              html stuff
            </div>
        </template>
     );
});

위 코드를 복사해서 붙여넣었는데 작동합니다(단순 예시입니다).

홈 페이지에서만, 또는 카테고리 페이지에서만 렌더링되도록 하려면 어떻게 해야 하나요?

질문이 적절하지 않았다면 죄송합니다.

2

좋은 질문입니다. 걱정하지 마세요! 이렇게 하면 됩니다:

import Component from "@glimmer/component";
import { service } from "@ember/service";
import { apiInitializer } from "discourse/lib/api";
import { defaultHomepage } from "discourse/lib/utilities";

class HomepageOnly extends Component {
  @service router;

  get shouldShow() {
    return this.router.currentRouteName === `discovery.${defaultHomepage()}`;
  }

  <template>
    {{#if this.shouldShow}}
      <div>
        html stuff
      </div>
    {{/if}}
  </template>
}

export default apiInitializer((api) => {
  api.renderInOutlet("above-main-container", HomepageOnly);
});

이 코드는 router 서비스와 defaultHomepage 유틸리티를 사용하여 현재 사용자가 홈페이지에 있는지 확인하는 새로운 컴포넌트를 생성합니다. 그런 다음 해당 컴포넌트가 아웃렛(outlet)에 렌더링됩니다.

여기에 조금 더 자세한 정보가 있습니다: Add custom content that only appears on your homepage

3

크리스, 고마워요. 완벽하게 작동하네요. 링크도 감사해요. 열심히 배우고 있어요.

4

누군가에게 후속 질문이 있습니다

주입된 작은 HTML 조각이 홈 페이지에 멋진 배너를 만들어 주며, 로딩도 정상적으로 작동합니다. 저는 테마의 탭에 다음 코드를 넣었습니다:

document.addEventListener('DOMContentLoaded', loadMyWidget);

이것은 작동하지만, 다른 페이지로 이동했다가 홈 페이지로 돌아오면 위젯이 다시 로딩되지 않습니다. 다음 코드를 추가해 보았지만:

window.addEventListener('focus', loadMyWidget);

효과가 없었습니다. 누군가 도와줄 수 있을까요? 이 질문을 위해 새로운 주제를 시작해야 할까요?

수정:

해결 방법을 찾은 것 같습니다.

export default apiInitializer((api) => { 에 다음 코드를 추가했습니다:

api.onPageChange(() => {
  const myWidget = document.querySelector("#widget-container");
  if (myWidget) {
    window.loadMyWidget();
  }
 });

이제 홈 페이지로 돌아오면 위젯이 다시 로딩됩니다.