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

開発
1

I’m new to discourse, so I apologize if this is something that is easily done, however, I can’t seem to find where I can define the text that I want to appear beside our logo in the header of our discourse page.

Within the red box in the header is where I’d ideally like to add text saying ‘Community Forums’ or something of the sort:

AddText-Discourse
AddText-Discourse1132×325 37.3 KB

How can I go about getting this done?

Thanks in advance for any and all feedback!

2

Hey Daniel :wave:

You can use something like this to add text next to the header logo on your site

<script type="text/discourse-plugin" version="0.8">
api.decorateWidget("home-logo:after", helper => {
  const titleVisible = helper.attrs.minimized;
  const headerText = "Text you want to add"; // <--- change this text

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

You’d add it in the header section of your theme / component. You can read more about the Discourse theme system here

「いいね！」 3
3

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

4

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

「いいね！」 4
5

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

「いいね！」 1
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
8

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

「いいね！」 4
9

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

「いいね！」 3
10

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

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

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

11

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

「いいね！」 3