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

Discourse は初心者ですので、簡単な作業であれば申し訳ないのですが、Discourse ページのヘッダーにあるロゴの横に表示させたいテキストをどこで定義できるか、どうやら見つけられないようです。

ヘッダーの赤い枠内で、「コミュニティフォーラム」などのテキストを追加したいと考えています:

これを達成するにはどのようにすればよいでしょうか?

ご意見やアドバイスをお待ちしております。よろしくお願いいたします。

やあ Daniel :wave:

あなたのサイトのヘッダーロゴの隣にテキストを追加するには、以下のようなコードを使用できます。

<script type="text/discourse-plugin" version="0.8">
api.decorateWidget("home-logo:after", helper => {
  const titleVisible = helper.attrs.minimized;
  const headerText = "追加したいテキスト"; // <--- ここを変更してください

  if (!titleVisible) {
    return api.h("span.header-text", headerText);
  }
});
</script>

これは、テーマまたはコンポーネントのヘッダーセクションに追加します。Discourse のテーマシステムについては、こちらで詳しく読むことができます。

「いいね!」 3

これは、Discourse の変更により、エラーバナーが表示されるようになりました。新しいアプローチで同じ結果を得るための提案はありますか?ありがとうございます。

その方法はもう機能しなくなり、home-logo:after ウィジェット装飾を置き換える home-logo プラグインアウトレットに関するセクションで指定されているコネクタを使用する必要があります。

「いいね!」 4

もし自分でやる時間があれば、ここにコードを貼り付けます。それか、誰かが先に時間があれば、とても感謝します… :slight_smile:

「いいね!」 1

テーマのためにこれを行いました。サイトのタイトルと短い説明を使用していますが、テーマ設定やローカライズされたテキストの値も挿入できます。

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

(v.1.26.0以降)api.renderAfterWrapperOutlet("home-logo")も使用できます。これは、__before/__afterというマジックワードを指定せずに、実際のコンセント名を使用する利点があります。

「いいね!」 4

@Arkshineさん、ありがとうございます。より良いものになりました。前の投稿を更新しました。

「いいね!」 3

現在これを試していますが、問題が発生しています。「components/header-logo-title.gjs」の「glimmerコンポーネント」にアクセスするにはどうすればよいですか?

私のコミュニティはこちらです:https://community.worldradioleague.com/

有料プランを利用しています。もしかしたら、これを確認するためにDiscourseコアへのアクセスがないのでしょうか?

コンポーネントにラップしました。こちらをお試しいただけます: https://gitlab.com/manuelkostka/discourse/helpers/header-logo-title。デフォルトでサイトのタイトルと短いサイトの説明が追加されます。または、コンポーネントの設定でタイトルと説明のカスタムテキストを追加することもできます。

「いいね!」 3