Wie man Breadcrumbs hinzufügt?

Entwickler
27

Als ich mir das genauer angesehen habe, wurde Anfang dieses Jahres eine Breadcrumbs-Komponente zu Discourse hinzugefügt: FEATURE: Introduce DBreadcrumbs components (#27049) · discourse/discourse@1239178 · GitHub. Sie wird derzeit nur auf ausgewählten Admin-Seiten gerendert.

Ich habe eine Testkomponente zur Darstellung von Breadcrumbs erstellt: Manuel Kostka / Discourse / Components / Breadcrumbs · GitLab. Die aktuelle Vorlage ist:

  <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>

Ich habe jetzt einen Branch erstellt, der die neue DBreadcrumbs-Komponente verwendet: Files · dbreadcrumbs · Manuel Kostka / Discourse / Components / Breadcrumbs · GitLab. Das würde die Vorlage übersichtlicher machen und wahrscheinlich generell für bessere Konsistenz und Barrierefreiheit sorgen:

  <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>

Bei der Verwendung von DBreadcrumbsItem werden jedoch die Reihenfolge der übergeordneten Kategorie und der Unterkategorie in der gerenderten Komponente vertauscht. Die aktuelle Kategorie wird zuerst eingefügt:

Dieses Bild zeigt einen blauen Hintergrund mit verschiedenen Texten und Symbolen, was eine Benutzeroberfläche einer Softwareanwendung darstellt. (Beschriftet von KI)
Dieses Bild zeigt einen blauen Hintergrund mit verschiedenen Texten und Symbolen, was eine Benutzeroberfläche einer Softwareanwendung darstellt. (Beschriftet von KI)949×118 7.59 KB

Ich frage mich, ob das an diesem Verhalten liegt, das in der Commit-Nachricht angegeben ist?

  • DBreadcrumbsItem - Die Komponente, die einen LinkTo für den Breadcrumb-Pfad registriert. Der Breadcrumb-Pfad wird basierend auf der Reihenfolge angezeigt, in der diese Elemente auf der Seite gerendert werden.