パンくずリストの追加方法

これをさらに調べてみると、今年初めに Discourse にパンくずコンポーネントが追加されました: https://github.com/discourse/discourse/commit/1239178f496cba5d864adb7c118b17902b8b72dc。現在は一部の管理者ページでのみ表示されています。

そこで、パンくずを表示するためのテストコンポーネントを作成しました: https://gitlab.com/manuelkostka/discourse/components/breadcrumbs。現在のテンプレートは次のとおりです。

  <template>
    {{#if this.currentPage}}
      {{bodyClass "has-breadcrumbs"}}
      <ul class="breadcrumbs {{concat '--' settings.plugin_outlet}}">
        <li class="breadcrumbs__item --home">
          {{#if this.homePage}}
            {{i18n "js.home"}}
          {{else}}
            <a href="/">{{i18n "js.home"}}</a>
          {{/if}}
        </li>
        {{#if this.parentCategory}}
          <li class="breadcrumbs__item --parent">
            <a href="/c/{{this.parentCategoryLink}}">
              {{this.parentCategoryName}}</a>
          </li>
        {{/if}}
        {{#unless this.homePage}}
          <li class="breadcrumbs__item --current">
            {{this.currentPage}}
          </li>
        {{/unless}}
      </ul>
    {{/if}}
  </template>

新しい dbreadcrumbs コンポーネントを使用したブランチを作成しました: https://gitlab.com/manuelkostka/discourse/components/breadcrumbs/-/tree/dbreadcrumbs。これにより、テンプレートがより簡潔になり、一般的に一貫性とアクセシビリティが向上すると思われます。

  <template>
    {{#if this.currentPage}}
      {{bodyClass "has-breadcrumbs"}}
      <DBreadcrumbsContainer class="{{concat '--' settings.plugin_outlet}}" />
      <DBreadcrumbsItem @path="/" @label={{i18n "js.home"}} />
      {{#if this.parentCategory}}
        <DBreadcrumbsItem
          @path="/c/{{this.parentCategoryLink}}"
          @label={{this.parentCategoryName}}
        />
      {{/if}}
      {{#unless this.homePage}}
        <DBreadcrumbsItem @path="" @label={{this.currentPage}} />
      {{/unless}}
    {{/if}}
  </template>

しかし、DBreadcrumbsItem を使用すると、親カテゴリとサブカテゴリの順序がレンダリングされたコンポーネントで混在してしまいます。現在のカテゴリが最初に挿入されます。

コミットメッセージに記載されているこの動作が原因でしょうか?

  • DBreadcrumbsItem - パンくずリストの LinkTo を登録するコンポーネント。パンくずリストは、これらのアイテムがページにレンダリングされる順序に基づいて表示されます。