로고 옆 헤더에 텍스트 추가

개발
7

방금 테마용으로 이렇게 구현해 보았습니다. 사이트의 제목과 짧은 설명을 사용하고 있지만, 테마 설정 값이나 로컬라이즈된 텍스트를 삽입하는 것도 가능합니다.

components/header-logo-title.gjs에 glimmer 컴포넌트를 추가합니다.

import Component from "@glimmer/component";
import { service } from "@ember/service";

export default class HeaderLogoTitle extends Component {
  @service siteSettings;

  <template>
    {{#unless @outletArgs.minimized}}
      <div class="header-logo-title">
        <span
          class="header-logo-title__title"
        >{{this.siteSettings.title}}</span>
        {{#if this.siteSettings.short_site_description}}
          <span
            class="header-logo-title__description"
          >{{this.siteSettings.short_site_description}}</span>
        {{/if}}
      </div>
    {{/unless}}
  </template>
}

/api-initializers/my-theme.js에서 아웃렛에 연결합니다.

import { apiInitializer } from "discourse/lib/api";
import HeaderLogoTitle from "../components/header-logo-title";

export default apiInitializer("1.26.0", (api) => {
  api.renderAfterWrapperOutlet("home-logo", HeaderLogoTitle);
});

#unless 헬퍼는 로고의 최소화 상태를 확인하며, 전체 로고가 표시될 때만 텍스트를 추가합니다. 항상 표시되길 원한다면 해당 조건을 제거해야 합니다.