# 面包屑链接

**URL:** https://meta.discourse.org/t/breadcrumb-links/325372
**Category:** Theme component
**Created:** [2024年九月6日 19:53 UTC](https://meta.discourse.org/t/breadcrumb-links/325372 "2024-09-06T19:53:27Z")
**Posts on this page:** 20
**Page:** 2

<div class="post-metadata">

### 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年九月18日 07:10 UTC](https://meta.discourse.org/t/breadcrumb-links/325372/21 "2024-09-18T07:10:17Z")

</div>

非常感谢 @manuel – 我已使用您的代码更新了此组件（并添加了一些代码片段），以启用一些其他功能：

1. 嵌套类别现在可在面包屑中支持
2. 除主题页面外，完整的面包屑现在将显示在所有类别和嵌套类别列表页面上
3. 现在有一个设置可以在移动设备上启用或禁用此功能

---

<div class="post-metadata">

### Author: ![cristo](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cristo/32/434899_2.png) [@cristo](https://meta.discourse.org/u/cristo)
#### Post date: [2024年十月7日 19:55 UTC](https://meta.discourse.org/t/breadcrumb-links/325372/22 "2024-10-07T19:55:28Z")

</div>

你好！这个组件很棒！

只有一个小细节，也许你知道如何修复。

返回按钮在向下滚动时会消失（请看附带的视频）……是否可以将返回按钮固定/浮动在屏幕顶部，以便在滚动时保持可见？

背景：该社区被嵌入（webview）到我们的移动应用程序中。

---

<div class="post-metadata">

### 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年十月7日 22:44 UTC](https://meta.discourse.org/t/breadcrumb-links/325372/23 "2024-10-07T22:44:42Z")

</div>

感谢 @cristo 提出的绝佳建议，该建议现已包含在设置中：

 ![图像显示一个带有“主题设置”标题的窗口的计算机屏幕，其中显示一个带有默认值消息和“在移动设备上显示”选项的对话框。（由 AI 题注）](https://global.discourse-cdn.com/meta/original/4X/c/1/f/c1fc8bbcf7d3f8652fe9d2949985f4c5351fc341.png)

---

<div class="post-metadata">

### Author: ![cristo](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cristo/32/434899_2.png) [@cristo](https://meta.discourse.org/u/cristo)
#### Post date: [2024年十月8日 00:36 UTC](https://meta.discourse.org/t/breadcrumb-links/325372/24 "2024-10-08T00:36:20Z")

</div>

谢谢 @denvergeeks！按钮现在是固定的。

但是，正如您在附加视频中看到的，该按钮 **没有** 将我带回到主屏幕的滚动位置。

---

<div class="post-metadata">

### 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年十月8日 00:46 UTC](https://meta.discourse.org/t/breadcrumb-links/325372/25 "2024-10-08T00:46:30Z")

</div>

是的，因为这是一个“主页”按钮，而不是“返回”按钮！

---

<div class="post-metadata">

### Author: ![cristo](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cristo/32/434899_2.png) [@cristo](https://meta.discourse.org/u/cristo)
#### Post date: [2024年十月8日 15:25 UTC](https://meta.discourse.org/t/breadcrumb-links/325372/26 "2024-10-08T15:25:00Z")

</div>

抱歉！因为有那个箭头，我还以为是返回按钮。

@denvergeeks 感谢您的澄清！您是否知道有哪个组件提供返回按钮？

---

<div class="post-metadata">

### 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年十月8日 20:38 UTC](https://meta.discourse.org/t/breadcrumb-links/325372/27 "2024-10-08T20:38:23Z")

</div>

我不知道是否有任何现有的 TC 包含（或包含）一个真正的“返回”按钮。可能确实存在包含该按钮的内容。

但我认识到在网站导航中添加“返回”按钮的实用性，因此我将另外创建一个提供该功能的 TC。

也许您可以查找是否有什么现有的主题或主题组件碰巧包含该按钮。找到它可能会加快我的进程。

---

<div class="post-metadata">

### Author: ![cristo](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cristo/32/434899_2.png) [@cristo](https://meta.discourse.org/u/cristo)
#### Post date: [2024年十月8日 21:15 UTC](https://meta.discourse.org/t/breadcrumb-links/325372/28 "2024-10-08T21:15:57Z")

</div>

太棒了！我会研究一下然后告诉你我的发现。

谢谢！

---

<div class="post-metadata">

### Author: ![cristo](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cristo/32/434899_2.png) [@cristo](https://meta.discourse.org/u/cristo)
#### Post date: [2024年十月8日 23:08 UTC](https://meta.discourse.org/t/breadcrumb-links/325372/29 "2024-10-08T23:08:40Z")

</div>

@denvergeeks 我找到了一个可能对您有用的主题：

> [@Backward/Forward and History Navigation in Discourse Apps](https://meta.discourse.org/t/backward-forward-and-history-navigation-in-discourse-apps/232284/9):
>
> From the WIkipedia article: a progressive web app is a type of webpage or website known as a web application In 2015, designer Frances Berriman and Google Chrome engineer Alex Russell coined the term “progressive web apps” to describe apps taking advantage of new features supported by modern browsers Yes, there are many facets to system architecture, but the points in posts above seems to be a case of semantics (which is appropriate for technical discussions, but this isn’t intended to be…

我还没有找到任何包含后退按钮的现有主题或组件。

---

<div class="post-metadata">

### Author: ![Zomb](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/zomb/32/93881_2.png) [@Zomb](https://meta.discourse.org/u/Zomb)
#### Post date: [2024年十一月12日 06:03 UTC](https://meta.discourse.org/t/breadcrumb-links/325372/30 "2024-11-12T06:03:04Z")

</div>

> [@Aaron\_Walsh](#):
>
> 是的。该图标现在已完全显示，并且已从登录页面中移除。但是，它仍然保留在聊天框中，聊天框仍然会截断默认的输入框。

不幸的是，我在 iPhone 16 Pro Max 上遇到了同样的问题。

---

<div class="post-metadata">

### Author: ![Aaron\_Walsh](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/aaron_walsh/32/312661_2.png) [@Aaron\_Walsh](https://meta.discourse.org/u/Aaron_Walsh)
#### Post date: [2024年十一月12日 11:00 UTC](https://meta.discourse.org/t/breadcrumb-links/325372/31 "2024-11-12T11:00:58Z")

</div>

是的，我可以确认它是在更新后出现的。我的安卓手机也出现了这个问题。

---

<div class="post-metadata">

### 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年十一月12日 17:10 UTC](https://meta.discourse.org/t/breadcrumb-links/325372/32 "2024-11-12T17:10:25Z")

</div>

感谢 @Aaron_Walsh 和 @cristo 的报告！请立即更新并告知您的结果！

---

<div class="post-metadata">

### Author: ![Aaron\_Walsh](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/aaron_walsh/32/312661_2.png) [@Aaron\_Walsh](https://meta.discourse.org/u/Aaron_Walsh)
#### Post date: [2024年十一月12日 17:56 UTC](https://meta.discourse.org/t/breadcrumb-links/325372/33 "2024-11-12T17:56:59Z")

</div>

我确认了 Android 端的问题。现已修复并移除。

---

<div class="post-metadata">

### Author: ![Zomb](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/zomb/32/93881_2.png) [@Zomb](https://meta.discourse.org/u/Zomb)
#### Post date: [2024年十一月13日 06:48 UTC](https://meta.discourse.org/t/breadcrumb-links/325372/34 "2024-11-13T06:48:32Z")

</div>

已在我的 iPhone 上修复！

---

<div class="post-metadata">

### Author: ![cristo](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cristo/32/434899_2.png) [@cristo](https://meta.discourse.org/u/cristo)
#### Post date: [2024年十一月23日 17:48 UTC](https://meta.discourse.org/t/breadcrumb-links/325372/35 "2024-11-23T17:48:50Z")

</div>

@denvergeeks 太棒了！返回按钮在 Android 上可以正常工作了。

非常感谢！

---

<div class="post-metadata">

### Author: ![alltiagocom](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/alltiagocom/32/492709_2.png) [@alltiagocom](https://meta.discourse.org/u/alltiagocom)
#### Post date: [2025年三月26日 10:42 UTC](https://meta.discourse.org/t/breadcrumb-links/325372/36 "2025-03-26T10:42:01Z")

</div>

我注意到没有办法决定面包屑导航的位置，这会很方便。例如，我正在使用类别横幅，我希望面包屑导航位于其上方。

 ![image](https://global.discourse-cdn.com/meta/original/4X/d/7/a/d7a15ec3c7d772f179cadbfcbac88c8bd33cd5b0.png)

它在下面会有点迷失。

有没有可能改变这一点？  
谢谢

* * *

我刚注意到一些可以修复（或至少可以选择打开和关闭）的东西。我认为最后的“/”不需要在那里。

![image](https://global.discourse-cdn.com/meta/original/4X/e/5/3/e53d29a98258cd4087e77827928d01af099d5ce4.png)

所以它将是“Home / General Discussion”，而不是“Home / General Discussion /”。

编辑：  
我刚用 CSS 做了这个，但我认为它可以是默认的。如果有人想要：

```css
/* 从最后一个面包屑导航项中删除分隔符（::after 内容） */
.breadcrumbs li:last-child::after {
    content: none;
}

```

* * *

这是一个小的调整，但对我来说看起来更好。将底部外边距增加到 1rem，让它有更多“呼吸”空间，但当有横幅时（如果我们必须坚持在页面上的那个位置），它也会使其居中。看看我之前的图片（默认的 0.5rem）与使用 1rem 的对比：

![image](https://global.discourse-cdn.com/meta/original/4X/5/2/5/525a672bcbe48bb351f8f913fd0d457ee50c4153.png)

* * *

所有 CSS 调整后的最终结果：

![image](https://global.discourse-cdn.com/meta/original/4X/a/a/1/aa140199294ae3366b67068794477aaa094996ac.png)

CSS：

```css
/* 面包屑导航 - 删除背景并增加底部外边距 */
.breadcrumbs {
    background-color: transparent !important;
    margin-bottom: 1rem;
}

/* 面包屑导航 - 隐藏“Home”链接的返回箭头 */
.breadcrumbs__title .d-icon {
    display: none;
}

/* 面包屑导航 - 从最后一个面包屑导航项中删除分隔符（::after 内容） */
.breadcrumbs li:last-child::after {
    content: none;
}

```

---

<div class="post-metadata">

### Author: ![Victor\_Bramante](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/victor_bramante/32/445410_2.png) [@Victor\_Bramante](https://meta.discourse.org/u/Victor_Bramante)
#### Post date: [2025年七月15日 15:21 UTC](https://meta.discourse.org/t/breadcrumb-links/325372/37 "2025-07-15T15:21:13Z")

</div>

您好，我的论坛收到了一个警告，因为 Discourse 核心即将发生更改：

[管理员通知] 您的某个主题或插件需要更新，以支持 Discourse 核心即将发生的变化。（ID：discourse.script-tag-discourse-plugin）已识别问题：“面包屑链接”。

我正在使用 Discourse cloud，是我自己可以解决这个问题，还是必须等待插件更新？

---

<div class="post-metadata">

### Author: ![alltiagocom](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/alltiagocom/32/492709_2.png) [@alltiagocom](https://meta.discourse.org/u/alltiagocom)
#### Post date: [2025年八月9日 22:30 UTC](https://meta.discourse.org/t/breadcrumb-links/325372/38 "2025-08-09T22:30:48Z")

</div>

@manuel 在 GitHub 上我注意到您是此组件的贡献者之一，所以希望在这里提及您没问题吧？

我相信更多人也看到了相同的消息：

`[Admin Notice] 主题 'Breadcrumb Links' 包含需要更新的代码。(id:discourse.script-tag-discourse-plugin) (了解更多)`

而“了解更多”链接指向：

> [@Modernizing inline script tags for templates & JS API](https://meta.discourse.org/t/modernizing-inline-script-tags-for-templates-js-api/366482):
>
> Using \<script type='text/discourse-plugin\> or \<script type='text/x-handlebars'\> in themes is now deprecated. Any use of these tags in themes should be updated according to the instructions below. Regular \<script\> and \<script type='text/javascript'\> are unaffected by this change. Timeline These are rough estimates, subject to change May 2025 - console deprecation messages enabled July 2025 - admin warning banners enabled Late September 2025 - removal of feature Converting \<script ty…

这个组件有更新的可能性吗？  
谢谢！

---

<div class="post-metadata">

### Author: ![Juan\_Barreto](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/juan_barreto/32/516986_2.png) [@Juan\_Barreto](https://meta.discourse.org/u/Juan_Barreto)
#### Post date: [2025年八月11日 15:43 UTC](https://meta.discourse.org/t/breadcrumb-links/325372/39 "2025-08-11T15:43:32Z")

</div>

我刚刚提交了一个[修复此问题的 PR](https://github.com/denvergeeks/discourse-breadcrumb-links/pulls)，希望贡献者能审核并合并它。

---

<div class="post-metadata">

### Author: ![alltiagocom](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/alltiagocom/32/492709_2.png) [@alltiagocom](https://meta.discourse.org/u/alltiagocom)
#### Post date: [2025年八月11日 19:40 UTC](https://meta.discourse.org/t/breadcrumb-links/325372/40 "2025-08-11T19:40:51Z")

</div>

谢谢分享！现在它在没有警告信息的情况下正常工作了。

我遇到了另一个问题，我在下面提到了：

> [@Getting the wrong breadcrumb path with a specific title](https://meta.discourse.org/t/getting-the-wrong-breadcrumb-path-with-a-specific-title/378197/1):
>
> I don’t know if this is related to the component itself [Breadcrumb Links](https://meta.discourse.org/t/breadcrumb-links/325372), or if there’s something else I can do to fix it? Wrong breadcrumb for the sub category “Other Projects” When I change the title for the same topic: I opened all the other topics in the same category and they all work as expected. I even tried to copy the whole content and title, create new topic, same result. It shows the wrong breadcrumb. Now, I tried a bunch of different t…

关于这个问题，我问了 ChatGPT，它（因为我不是开发者）回答说：

> **显示 ChatGPT 的消息**
>
> 这个问题很可能源于你从 URL 中提取 `topicId` 的方式：
> 
> ```js
> const topicId = url.split('/')[2];
> 
> ```
> 
> 如果你的 URL 包含更复杂的模式（例如带有空格、特殊字符或非标准 slug 的标题），这种简单的分割方法将无法可靠地获取正确的 topic ID。
> 
> * * *
> 
> ### 为什么这会导致问题：
> 
> - 像 `/t/3ple-2015-2019-title/12345` 这样的 URL，数字 topic ID 位于 **末尾** ，但你的代码假设 topic ID 始终是第三个部分。
> - 如果你的 URL 结构不同，有时你会获取到 slug 或标题的一部分，而不是 ID。
> - 这会破坏你的 AJAX 请求 (`/t/${topicId}.json`)，因为你可能会发送一个无效的 topic ID 或 slug，导致返回不正确或默认的类别信息（例如“General”）。
> 
> * * *
> 
> ### 如何修复：
> 
> 使用更可靠的方法从 URL 中提取 topic ID：
> 
> 1. **从 URL 的最后一个数字部分提取 topic ID。**
> 
> Discourse 的 topic URL 通常看起来像 `/t/{slug}/{id}`，例如：
> 
> ```plaintext
> /t/3ple-2015-2019-title/12345
> 
> ```
> 
> 这里的 `12345` 是 topic ID。
> 
> * * *
> 
> ### 替换这个：
> 
> ```js
> const topicId = url.split('/')[2];
> 
> ```
> 
> ### 用这个：
> 
> ```js
> const segments = url.split('/').filter(Boolean);
> const topicId = segments[segments.length - 1]; // 最后一个部分，预计是数字 ID
> 
> ```
> 
> * * *
> 
> ### 为了更安全，请验证 `topicId` 是一个数字：
> 
> ```js
> if (!/^\\d+$/.test(topicId)) {
> console.error("从 URL 中提取的 topic ID 无效:", topicId);
> return; // 停止执行
> }
> 
> ```
> 
> * * *
> 
> ### 总结：在 `updateBreadcrumbs` 中将你的代码片段更新为如下：
> 
> ```js
> if (url.includes('/t/')) {
> const segments = url.split('/').filter(Boolean);
> const topicId = segments[segments.length - 1];
> 
> if (!/^\\d+$/.test(topicId)) {
> console.error("从 URL 中提取的 topic ID 无效:", topicId);
> return;
> }
> 
> // 然后继续使用 topicId 进行 AJAX 调用
> }
> 
> ```
> 
> * * *
> 
> 这样，无论 URL 中的标题是否复杂或包含空格，你都能始终获取到数字 topic ID，从而修复面包屑类别和路径查找问题。

您能帮忙修复这个问题吗？  
提前感谢！🙌

[上一頁](https://meta.discourse.org/t/breadcrumb-links/325372.md?page=1)

[下一頁](https://meta.discourse.org/t/breadcrumb-links/325372.md?page=3)