예정된 헤더 변경 – 테마 및 플러그인 준비

[saquetim (Sérgio Saquetim)]

@Danny_Dainton

이 부분에 필요한 변경 사항에 대해 도움을 주실 수 있으신 분 계신가요?

<script type="text/discourse-plugin" version="0.4">
const { iconNode } = require("discourse-common/lib/icon-library");

api.decorateWidget('header-icons:before', helper => {
    return helper.h('li', [
        helper.h('a#graduation-cap.icon', {
            href:'https://example.com/',
            title: 'Learning Center'
        }, iconNode('graduation-cap')),
    ]);
});
</script>

api.headerIcons.add(“foo”, FooIcon, { before: “search” })을 사용하도록 변환해야 하는 것 같은데, 정확히 어떻게 해야 하는지 100% 확신이 서지 않습니다

도움 주시면 정말 감사하겠습니다

HI @Danny_Dainton,

Custom Header Links (icons) 테마 컴포넌트를 확인해 보세요. 필요하신 기능을 수행하는 것 같습니다.

테마 컴포넌트를 사용할 수 없다면, api.headerIcons.add를 사용하면 됩니다.

• 새로운 초기화 파일(initializer file)을 생성하세요. 확장자는 .gjs여야 합니다.
• 다음 코드가 원하시는 작업을 수행할 것입니다:

// javascripts/discourse/initializers/custom-header-icons.gjs

import { apiInitializer } from "discourse/lib/api";
import dIcon from "discourse-common/helpers/d-icon";

export default apiInitializer("1.34.0", (api) => {
  api.headerIcons.add(
    "custom-header-home",
    <template>
      <li>
        <a id="graduation-cap" class="icon" href="https://example.com/" title="Learning Center">
          {{dIcon "graduation-cap"}}
        </a>
      </li>
    </template>,
    { before: "search" }
  );
});