# 如何添加面包屑导航？ **URL:** \ **Category:** Development\ **Created:** [2022年四月3日 19:17 UTC](https://meta.discourse.org/t/how-to-add-breadcrumb/223012 "2022-04-03T19:17:28Z")\ **Posts on this page:** 6\ **Page:** 2
**Author:** ![Oohyeah88](https://avatars.discourse-cdn.com/v4/letter/o/f08c70/32.png) [@Oohyeah88](https://meta.discourse.org/u/Oohyeah88)\ **Post date:** [2023年九月15日 10:11 UTC](https://meta.discourse.org/t/how-to-add-breadcrumb/223012/22 "2023-09-15T10:11:46Z")
非常有帮助，非常感谢！ ---
**Author:** ![DogBite](https://avatars.discourse-cdn.com/v4/letter/d/b782af/32.png) [@DogBite](https://meta.discourse.org/u/DogBite)\ **Post date:** [2023年十月5日 13:46 UTC](https://meta.discourse.org/t/how-to-add-breadcrumb/223012/23 "2023-10-05T13:46:00Z")
我尝试使用这段代码，但它似乎不起作用。 我可以看到 breadcrumbsContainer 及其白色背景，但它没有在其内部生成面包屑。 我尝试将其作为组件，也尝试直接将其作为“自定义 CSS/HTML”下的主题部分。 您知道我可能做错了什么吗？ ---
**Author:** ![denvergeeks](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/denvergeeks/32/327671_2.png) [@denvergeeks](https://meta.discourse.org/u/denvergeeks)\ **Post date:** [2024年六月9日 21:24 UTC](https://meta.discourse.org/t/how-to-add-breadcrumb/223012/24 "2024-06-09T21:24:57Z")
是的 @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); } }); } } ``` ---
**Author:** ![denvergeeks](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/denvergeeks/32/327671_2.png) [@denvergeeks](https://meta.discourse.org/u/denvergeeks)\ **Post date:** [2024年六月10日 04:17 UTC](https://meta.discourse.org/t/how-to-add-breadcrumb/223012/25 "2024-06-10T04:17:43Z")
这里我实现了一个非常简单的面包屑（显示为链接）主题组件（主页不显示面包屑）……欢迎提交 PR！ 另外（重要的是）目前它只能正确处理分类——它不能处理子分类！ > **[GitHub - denvergeeks/discourse-breadcrumb-links: Breadcrumb Navigation for Discourse](https://github.com/denvergeeks/discourse-breadcrumb-links)** > > Breadcrumb Navigation for Discourse 在分类列表页面上的样子…… ![discourse-breadcrumbs-theme-component](https://global.discourse-cdn.com/meta/original/4X/3/d/5/3d548bd515c9d27e2752444983ae2022345767eb.png) 在主题页面上的样子…… ![discourse-breadcrumbs-theme-component-on-topic](https://global.discourse-cdn.com/meta/original/4X/0/d/b/0db639d2c138be99dbddf462a1cf7492d275bedf.png) ---
**Author:** ![denvergeeks](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/denvergeeks/32/327671_2.png) [@denvergeeks](https://meta.discourse.org/u/denvergeeks)\ **Post date:** [2024年九月6日 20:20 UTC](https://meta.discourse.org/t/how-to-add-breadcrumb/223012/26 "2024-09-06T20:20:12Z")
> [@Breadcrumb Links](https://meta.discourse.org/t/breadcrumb-links/325372): > > information_sourceSummary Breadcrumb LinkseyeglassesPreview [README](https://github.com/denvergeeks/discourse-breadcrumb-links/blob/main/README.md)hammer_and_wrenchRepository [GitHub - denvergeeks/discourse-breadcrumb-links: Breadcrumb Navigation for Discourse](https://github.com/denvergeeks/discourse-breadcrumb-links)questionInstall Guide [How to install a theme or theme component](https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682)open_bookNew to Discourse Themes? [Beginner’s guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) Install this theme component Basic Breadcrumb Links On all Topic pages: displays links back to the Subcategory (if any) and Category … ---
**Author:** ![manuel](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/manuel/32/468169_2.png) [@manuel](https://meta.discourse.org/u/manuel)\ **Post date:** [2024年十月8日 09:51 UTC](https://meta.discourse.org/t/how-to-add-breadcrumb/223012/27 "2024-10-08T09:51:27Z")
深入研究后发现，今年早些时候 Discourse 添加了一个面包屑组件：[https://github.com/discourse/discourse/commit/1239178f496cba5d864adb7c118b17902b8b72dc。目前它仅在选定的管理员页面上呈现。](https://github.com/discourse/discourse/commit/1239178f496cba5d864adb7c118b17902b8b72dc%E3%80%82%E7%9B%AE%E5%89%8D%E5%AE%83%E4%BB%85%E5%9C%A8%E9%80%89%E5%AE%9A%E7%9A%84%E7%AE%A1%E7%90%86%E5%91%98%E9%A1%B5%E9%9D%A2%E4%B8%8A%E5%91%88%E7%8E%B0%E3%80%82) 所以我做了一个测试组件来呈现面包屑：[https://gitlab.com/manuelkostka/discourse/components/breadcrumbs。当前的模板是：](https://gitlab.com/manuelkostka/discourse/components/breadcrumbs%E3%80%82%E5%BD%93%E5%89%8D%E7%9A%84%E6%A8%A1%E6%9D%BF%E6%98%AF%EF%BC%9A) ```hbs ``` 我现在做了一个使用新 dbreadcrumbs 组件的分支：[https://gitlab.com/manuelkostka/discourse/components/breadcrumbs/-/tree/dbreadcrumbs。这将使模板更加简洁，并且我认为总体上能提供更好的一致性和可访问性：](https://gitlab.com/manuelkostka/discourse/components/breadcrumbs/-/tree/dbreadcrumbs%E3%80%82%E8%BF%99%E5%B0%86%E4%BD%BF%E6%A8%A1%E6%9D%BF%E6%9B%B4%E5%8A%A0%E7%AE%80%E6%B4%81%EF%BC%8C%E5%B9%B6%E4%B8%94%E6%88%91%E8%AE%A4%E4%B8%BA%E6%80%BB%E4%BD%93%E4%B8%8A%E8%83%BD%E6%8F%90%E4%BE%9B%E6%9B%B4%E5%A5%BD%E7%9A%84%E4%B8%80%E8%87%B4%E6%80%A7%E5%92%8C%E5%8F%AF%E8%AE%BF%E9%97%AE%E6%80%A7%EF%BC%9A) ```hbs ``` 但是，在使用 `DBreadcrumbsItem` 时，父类别和子类别的顺序在渲染的组件中被弄混了。当前类别被首先插入： ![此图像显示了蓝色的背景，上面有各种文本和图标，创建了一个看起来像是来自软件应用程序的用户界面。（由 AI 标注）](https://global.discourse-cdn.com/meta/original/4X/6/6/7/667bbe3b29ea3c71477a77053e18dbcf3d965397.png) 我想知道这是否是因为提交消息中提到的那个行为？ > - DBreadcrumbsItem - 注册面包屑路径的 LinkTo 的组件。面包屑 \> 路径 \> 将根据这些项目在页面上渲染的顺序显示。 [上一頁](https://meta.discourse.org/t/how-to-add-breadcrumb/223012.md?page=1)