ヘッダーのロゴの横にテキストを追加

開発
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 ヘルパーは、ロゴの最小化状態を確認し、完全なロゴが表示される場合にのみテキストを追加します。常に表示したい場合は、その条件を削除する必要があります。

「いいね！」 4