我搜索了这个主题，但找不到任何可行的解决方案。
如何添加一个简单的基本面包屑来显示类别、子类别。
例如：
主页 / 技术讲座 / WordPress
我想在顶部导航正下方添加它。
这可能就是 @asugar 所设想的。
2 个赞
您好 @asugar。 
您能否详细说明一下您的意思？我们称类别和标签为导航辅助“面包屑导航”；@Canapin 在他们的截图中突出显示了它们。
通常我会提到展示截图并标明您想要它们的位置，然后我们再从那里开始，但我首先还有另一个观察：
我认为，如果您将此添加到每个页面，它实际上会显示多个相同的导航菜单，并且彼此靠近。
作为替代方案，我们能否对现有的面包屑导航做些什么，使其适用于您的网站？ 
另外，值得澄清“面包屑导航”的含义。我曾多次参与过这样的对话，双方的意思不同：
- 分层面包屑导航，反映网站结构（类别/子类别/标签，或书籍/标题/章节）
- 跟踪面包屑导航，即访问过的页面的历史记录（我最喜欢的例子是 dokuwiki_点击几个随机链接并查看标题 [DokuWiki]
@asugar，您指的是哪种面包屑导航？
3 个赞
我不能猜测 @asugar 希望得到什么，但也许和所有其他网页一样——WordPress 主要使用的是：使用类别构建的导航面包屑。
但是 Discourse 只有两层深度结构，所以它只能是 home - category - subcategory（当然，也可以有页码，但那没有用，而且我认为几乎不可能构建）。
所以，面包屑除了占用空间之外，什么也提供不了。
1 个赞
大家好。@Jagster 说得对。我想要链接到分类和子分类。例如：
主页 - 分类 - 子分类 - 子子分类 - …
我可以看到 Discourse 中现有的导航，但它不是点击即可转到分类/子分类。点击时会显示下拉菜单。
是否真的不可能添加我想要的简单导航？
3 个赞
这是可能的，大家想说的是，可能有一个与你所要求的不同的替代解决方案，他们想知道你是否对此感兴趣。也就是说，这是可能的，但不是开箱即用的。你必须设计或创建一些自定义的东西。类似的东西已经被创建的例子有：
自定义顶部导航链接 - 主题 - Discourse Meta 和 自定义页眉链接 - 主题 - Discourse Meta
1 个赞
那是导航/菜单，我已经有了。面包屑不是导航/菜单。我想要面包屑。
1 个赞
我明白了，所以我用了“相似”这个词，它们相似之处在于实现或开发过程相似，而不是完全相同、一模一样或非常接近，而是相似，或者我说可以比较。
我分享或提到它们相似是因为我觉得看到 Discourse 中在技术上实现类似功能是可能的，这可能会有帮助。
鉴于目前已确定在 Discourse 中不通过自定义实现无法做到这一点，您可能需要为此创建一个 Marketplace 主题。
这是在任何论坛软件中都能找到的一个典型面包屑导航，上面那个来自 vBulletin。这就是我所说的。
2 个赞
菜单实际上是一个面包屑（因为它在类别和子类别页面上显示类别和子类别），所以我认为您可以将其从使用下拉菜单更改为使用指向当前类别或子类别的普通超链接。我敢打赌，任何知道如何编写插件的人都可以做到这一点。
在主题页面的顶部，当您向下滚动时，已经显示了类别和子类别（以及标签），所以也许您对此已经满意了。我想插件作者可以将其移到屏幕的不同位置。
如果您为此付费并使其免费提供，我可能会使用它……
3 个赞
我希望已经有一个插件了，有人知道吗？
2 个赞
有人能解决页面上显示经典面包屑的问题吗？
这可能不是最好的方法，但对我们来说是有效的：
header.html 或单独的插件：
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(`
<li class="breadcrumb-item">
<a href="YOUR HOME">HOME</a>
</li>
<li class="breadcrumb-item active">
Community
</li>
`);
} else {
$("#breadcrumbsContainer").append(`
<li class="breadcrumb-item">
<a href="YOUR HOME">HOME</a>
</li>
<li class="breadcrumb-item">
<a href="/">Community</a>
</li>
`);
}
};
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(`
<li class="breadcrumb-item active">
${categoryTitle}
</li>
`);
}
},
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(`
<li class="breadcrumb-item">
<a href="${categoryURL}">${categoryTitle}</a>
</li>
<li class="breadcrumb-item active">
${topicTitle}
</li>
`);
}
},
error: function(error) {
console.error("Error fetching category details for topic", error);
}
});
}
},
error: function(error) {
console.error("Error fetching topic details", error);
}
});
}
}
SCSS：
#breadcrumbsContainer {
display: flex;
flex-wrap: wrap;
padding: 0.75rem 1rem;
margin-bottom: 0;
list-style: none;
background-color: #FFFFFF;
border-radius: 0.25rem;
.breadcrumb-item {
display: flex;
align-items: center;
padding-left: 0;
& + .breadcrumb-item::before {
content: ">";
display: inline-block;
padding: 0 0.5rem;
color: #6c757d;
}
.home {
position: relative;
padding-left: 2.3rem;
font-size: 0;
visibility: hidden;
&::before {
content: "";
position: absolute;
display: block;
background-image: url('HOME SVG');;
background-repeat: no-repeat;
height: 24px;
width: 32px;
top: -20px;
visibility: visible;
}
&:hover {
&::before {
background-image: url('HOME HOVER SVG');;
}
}
}
a {
text-decoration: none;
color: #006BB4;
&:hover {
text-decoration: underline;
color: #0056b3;
}
}
&.active {
color: #6c757d;
}
}
}
在我们的 after_header.html 模板中：
<div id="breadcrumbsContainer"></div>
3 个赞
3 个赞
非常好。我希望在几次升级后，它能进入核心。
我很喜欢这个！
有这个选项吗，还是我需要找程序员介入？
如果您想要一个可靠的组件，就需要开发人员的努力。
我不建议使用此主题上共享的那个。
感谢您的回复！
我将聘请一名开发人员来协助处理此事，但您能否告诉我这段代码的主要问题是什么？
非常感谢！
我不是开发人员，如果有人比我更了解 Discourse 的组件，他们会给出比我更好的答案
我看到两个主要问题：
-
返回数据的 AJAX 调用非常非常不优化。我很确定你可以不进行任何此类请求就完成这样的组件。它们使整个过程变得迟缓，并导致面包屑延迟填充。
-
该组件几乎不使用 Discourse JS API，而该 API 可能会返回我们需要的数据，并以正确的方式装饰/插入模板，而不是手动将 HTML 代码注入 DOM。
3 个赞