브레드크럼을 추가하는 방법?

[manuel (Manuel Kostka)]

조금 더 살펴본 결과, 올해早些에 Discourse에 breadcrumbs 컴포넌트가 추가되었습니다: FEATURE: Introduce DBreadcrumbs components (#27049) · discourse/discourse@1239178 · GitHub. 현재는 일부 관리자 페이지에서만 렌더링됩니다.

저는 breadcrumbs를 렌더링하기 위한 테스트 컴포넌트를 작성했습니다: Manuel Kostka / Discourse / Components / Breadcrumbs · GitLab. 현재 템플릿은 다음과 같습니다:

  <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 컴포넌트를 사용하는 브랜치를 만들었습니다: Files · dbreadcrumbs · Manuel Kostka / Discourse / Components / Breadcrumbs · GitLab. 이렇게 하면 템플릿이 더 간결해지고, 전반적으로 일관성과 접근성을 더 잘 제공할 것이라고 생각합니다:

  <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을 사용하면 렌더링된 컴포넌트에서 상위 카테고리(parent-category)와 하위 카테고리(sub-category)의 순서가 뒤섞입니다. 현재 카테고리가 먼저 삽입됩니다:

이것이 커밋 메시지에 명시된 동작 때문일까요?

• DBreadcrumbsItem - LinkTo를 등록하는 컴포넌트입니다.
  breadcrumb trail은 페이지에서 이러한 항목들이 렌더링되는 순서에 따라
  표시됩니다.