如何添加面包屑导航？

[Oohyeah88 (KL)]

非常有帮助，非常感谢！

[DogBite]

我尝试使用这段代码，但它似乎不起作用。
我可以看到 breadcrumbsContainer 及其白色背景，但它没有在其内部生成面包屑。

我尝试将其作为组件，也尝试直接将其作为“自定义 CSS/HTML”下的主题部分。
您知道我可能做错了什么吗？

[denvergeeks]

是的 @DogBite，解决方案是在 header.html 的顶部和底部添加 Script 标签……

顶部：
`

` 底部： ` ` **像这样……** ``` api.onPageChange((url) => { updateBreadcrumbs(url); }); const updateBreadcrumbs = (url) => { // Helper function to reset the breadcrumbs container const resetBreadcrumbs = () => { $("#breadcrumbsContainer").empty(); // If on the homepage if (url === '/') { $("#breadcrumbsContainer").append(`

HOME

Community

`); } else { $("#breadcrumbsContainer").append(`

HOME

Community

`); } }; resetBreadcrumbs(); if (url.includes('/c/')) { // If on a category page const categorySlugOrId = url.split('/')[2]; $.ajax({ type: "GET", url: `/c/${categorySlugOrId}/show.json`, success: function(response) { if (response && response.category && response.category.name) { const categoryTitle = response.category.name; $("#breadcrumbsContainer").append(`

${categoryTitle}

`); } }, error: function(error) { console.error("Error fetching category details", error); } }); } else if (url.includes('/t/')) { // If on a topic page const topicId = url.split('/')[2]; $.ajax({ type: "GET", url: `/t/${topicId}.json`, success: function(response) { if (response && response.title) { const topicTitle = response.title; const categoryId = response.category_id; // Now, fetch the category name using the category ID $.ajax({ type: "GET", url: `/c/${categoryId}/show.json`, success: function(categoryResponse) { if (categoryResponse && categoryResponse.category) { const categoryTitle = categoryResponse.category.name; const categoryURL = `/c/${categoryResponse.category.slug}`; $("#breadcrumbsContainer").append(`

${categoryTitle}

${topicTitle}

`); } }, error: function(error) { console.error("Error fetching category details for topic", error); } }); } }, error: function(error) { console.error("Error fetching topic details", error); } }); } } ```

[denvergeeks]

这里我实现了一个非常简单的面包屑（显示为链接）主题组件（主页不显示面包屑）……欢迎提交 PR！

另外（重要的是）目前它只能正确处理分类——它不能处理子分类！

GitHub - denvergeeks/discourse-breadcrumb-links: Breadcrumb Navigation for Discourse

在分类列表页面上的样子……

在主题页面上的样子……

[denvergeeks]

Breadcrumb Links

Summary Breadcrumb Links Preview README Repository GitHub - denvergeeks/discourse-breadcrumb-links: Breadcrumb Navigation for Discourse Install Guide How to install a theme or theme component New to Discourse Themes? Beginner’s guide to using Discourse Themes Install this theme component Basic Breadcrumb Links On all Topic pages: displays links back to the Subcategory (if any) and Category …

[manuel (Manuel Kostka)]

深入研究后发现，今年早些时候 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 的组件。面包屑 > 路径 > 将根据这些项目在页面上渲染的顺序显示。