# 在侧边栏添加自定义链接部分的功能

**URL:** <https://meta.discourse.org/t/ability-to-add-a-custom-section-of-links-to-the-sidebar/239778>\
**Category:** Feature\
**Tags:** sidebar, completed\
**Created:** [2022年九月22日 16:46 UTC](https://meta.discourse.org/t/ability-to-add-a-custom-section-of-links-to-the-sidebar/239778 "2022-09-22T16:46:26Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![mcwumbly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mcwumbly/32/103861_2.png) [@mcwumbly](https://meta.discourse.org/u/mcwumbly)\
**Post date:** [2022年九月22日 16:46 UTC](https://meta.discourse.org/t/ability-to-add-a-custom-section-of-links-to-the-sidebar/239778/1 "2022-09-22T16:46:26Z")

</div>

我们希望允许用户在其侧边栏中添加自定义链接部分。

在此功能的第一个版本中，我们计划在现有的[侧边栏偏好设置页面](https://meta.discourse.org/my/preferences/sidebar)的基础上进行构建，并允许用户为这些链接添加一个自定义部分。

我们认为它的工作方式可能如下：

1. “显示自定义部分”复选框。  
如果选中，则“自定义部分”显示在“类别部分”上方，并且值必须具有有效的名称和至少一个有效的链接才能“保存更改”。
2. 自定义部分名称文本框（默认值：“我的链接”，不能为空）。
3. “添加链接”按钮。单击时，显示添加链接的对话框。
4. 添加的链接显示一个删除按钮。

添加链接对话框

1. 添加链接对话框有两个文本框：名称、URL。
2. 名称不能为空，可以包含表情符号（应在侧边栏中呈现）。
3. URL 必须是同一 Discourse 站点的链接\*。
4. 保存将添加链接，取消将丢弃它。

当配置并保存了有效的自定义部分后，侧边栏将在“类别”上方显示该部分。

> \* 为什么？
> 
> 1. 我们希望在用户处于相应页面时，“突出显示”/“加粗”侧边栏中的链接。
> 2. 我们希望存储“路径”部分，以便站点重命名按预期工作。

* * *

我们认为今天添加链接将很有价值，因为它将允许人们轻松访问诸如[“打开侧边栏错误”]（[Topics tagged sidebar](https://meta.discourse.org/tags/c/bug/1/sidebar?status=open%EF%BC%89%E4%B9%8B%E7%B1%BB%E7%9A%84%E5%8A%9F%E8%83%BD%EF%BC%8C%E5%B9%B6%E4%BD%BF%E6%88%91%E4%BB%AC%E8%83%BD%E5%A4%9F%E5%88%A9%E7%94%A8%E6%9C%AA%E6%9D%A5%E4%B8%BB%E9%A2%98%E5%88%97%E8%A1%A8%EF%BC%88%E5%A6%82%E6%94%B9%E8%BF%9B%E7%9A%84%E4%B8%BB%E9%A2%98%E5%88%97%E8%A1%A8%E8%BF%87%E6%BB%A4%E5%99%A8%EF%BC%89%E7%9A%84%E4%BB%BB%E4%BD%95%E6%94%B9%E8%BF%9B%E3%80%82%E5%8F%AA%E8%A6%81%E4%BA%8B%E7%89%A9%E6%9C%89) URL，人们就可以将它们添加到他们的侧边栏。

我们认为用户将希望能够添加多个部分并重新排序它们，但我们最初将把这些排除在范围之外。

---

<div class="post-metadata">

**Author:** ![bletch](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/bletch/32/69088_2.png) [@bletch](https://meta.discourse.org/u/bletch)\
**Post date:** [2022年九月22日 17:01 UTC](https://meta.discourse.org/t/ability-to-add-a-custom-section-of-links-to-the-sidebar/239778/3 "2022-09-22T17:01:12Z")

</div>

关于这一点有一个问题，@mcwumbly。这看起来是一种允许用户向侧边栏添加个人链接的策略。这种方法是否允许网站所有者添加所有用户都能看到的链接？

剧透 - 我认为应该是这样。🙂

---

<div class="post-metadata">

**Author:** ![mcwumbly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mcwumbly/32/103861_2.png) [@mcwumbly](https://meta.discourse.org/u/mcwumbly)\
**Post date:** [2022年九月22日 17:18 UTC](https://meta.discourse.org/t/ability-to-add-a-custom-section-of-links-to-the-sidebar/239778/4 "2022-09-22T17:18:49Z")

</div>

> [@bletch](#):
>
> 这种方法是否允许网站所有者添加所有用户都能看到的链接？

是的，我认为肯定可以扩展来实现这样的功能，而且我明白这对于某些网站来说比用户功能更有用。

---

<div class="post-metadata">

**Author:** ![xan2622](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/xan2622/32/156912_2.png) [@xan2622](https://meta.discourse.org/u/xan2622)\
**Post date:** [2022年九月23日 18:11 UTC](https://meta.discourse.org/t/ability-to-add-a-custom-section-of-links-to-the-sidebar/239778/5 "2022-09-23T18:11:14Z")

</div>

我真的很喜欢这个主意。👍

只是有几个问题：

1. 用户可以添加的自定义链接数量是否有限制？

2. 侧边栏中的链接末尾是否会像下面的模型图一样被截断？（我对此没意见）。  
如果会，用户是否可以在工具提示中（当鼠标光标悬停在链接上时）阅读其完整文本？

---

<div class="post-metadata">

**Author:** ![mcwumbly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mcwumbly/32/103861_2.png) [@mcwumbly](https://meta.discourse.org/u/mcwumbly)\
**Post date:** [2022年九月23日 19:05 UTC](https://meta.discourse.org/t/ability-to-add-a-custom-section-of-links-to-the-sidebar/239778/6 "2022-09-23T19:05:12Z")

</div>

> [@xan2622](#):
>
> 用户可以添加的自定义链接数量是否有限制？

问得好。我们可能需要一些限制，但这并不是我们详细讨论过的事情。您希望看到（或避免）什么样的限制？

---

<div class="post-metadata">

**Author:** ![xan2622](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/xan2622/32/156912_2.png) [@xan2622](https://meta.discourse.org/u/xan2622)\
**Post date:** [2022年九月23日 19:12 UTC](https://meta.discourse.org/t/ability-to-add-a-custom-section-of-links-to-the-sidebar/239778/7 "2022-09-23T19:12:34Z")

</div>

起初，我认为 10 个链接就足够了，但我猜其他论坛成员会想要更多。也许 20 个。因此，我会尝试 20 个，然后等待用户的反馈，看看他们是否要求更多（但我认为 20 个已经是一个不错的数字了）。

---

<div class="post-metadata">

**Author:** ![xan2622](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/xan2622/32/156912_2.png) [@xan2622](https://meta.discourse.org/u/xan2622)\
**Post date:** [2022年九月24日 06:45 UTC](https://meta.discourse.org/t/ability-to-add-a-custom-section-of-links-to-the-sidebar/239778/8 "2022-09-24T06:45:21Z")

</div>

为了扩展此功能的“用户友好性”，让用户能够直接将链接（当前 Discourse 页面上的任何链接）拖放到侧边栏中，将会非常棒。

一个指示器（位于先前添加到“我的链接” DIV 中的链接之间）将指示链接将被放置的位置。

模型图 _(右键单击 \> “在新标签页中打开图片”以全尺寸查看动画)：_

![anim01](https://global.discourse-cdn.com/meta/original/4X/f/1/9/f19d98f801f6722b39b16343025e347fb95dd3b6.gif)

也许，以下页面有助于实现拖放功能？

> **[The HTML5 Drag and Drop API  |  Articles  |  web.dev](https://web.dev/articles/drag-and-drop)**
>
> The HTML5 Drag and Drop API lets developers make almost any element on a page draggable.

---

<div class="post-metadata">

**Author:** ![mcdanlj](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mcdanlj/32/131829_2.png) [@mcdanlj](https://meta.discourse.org/u/mcdanlj)\
**Post date:** [2022年九月24日 22:17 UTC](https://meta.discourse.org/t/ability-to-add-a-custom-section-of-links-to-the-sidebar/239778/9 "2022-09-24T22:17:57Z")

</div>

我希望能够为我的网站设置默认链接，用户可以将其关闭。在我看来，这会让它比我现在使用的自定义标题链接好得多。

---

<div class="post-metadata">

**Author:** ![V1ktor](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/v1ktor/32/232406_2.png) [@V1ktor](https://meta.discourse.org/u/V1ktor)\
**Post date:** [2022年十一月14日 18:01 UTC](https://meta.discourse.org/t/ability-to-add-a-custom-section-of-links-to-the-sidebar/239778/10 "2022-11-14T18:01:59Z")

</div>

+1 支持添加自定义链接。我们之前在原始下拉菜单中添加了一些自定义链接。如果能像 Discourse 本身在“更多”选项下添加“生日”和“文档”一样，将它们添加回来就好了。

---

<div class="post-metadata">

**Author:** ![Olivier\_Lambert](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/olivier_lambert/32/74807_2.png) [@Olivier\_Lambert](https://meta.discourse.org/u/Olivier_Lambert)\
**Post date:** [2022年十一月27日 18:32 UTC](https://meta.discourse.org/t/ability-to-add-a-custom-section-of-links-to-the-sidebar/239778/11 "2022-11-27T18:32:04Z")

</div>

大家好！

我想知道如何在新侧边栏中添加链接。

 ![image](https://global.discourse-cdn.com/meta/original/4X/f/f/c/ffcc75334e550047bb493b1a788cb5feab47c555.png)

那个区域似乎没有连接器……

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

添加链接的最有效方法是什么？

* * *

### 编辑

我的问题被移到这里了…… 不知道为什么，因为我问的其实是同一件事。

无论如何，这是我解决问题的方法。它不是一个漂亮的方法，如果能有一种方法与 discourse 的模板系统集成就好了。

这是代码：

```plaintext
<script>
    let logo = "" // 我删除了 SVG 路径，因为你们不需要它。
    const div = document.createElement('div') // 创建要添加的链接
    div.className = 'sidebar-section-link-wrapper' // 添加相关类
    div.innerHTML = `
          <a title="所有主题" href="https://www.latranchee.com" id="ember12" class="sidebar-section-link sidebar-section-link-everything sidebar-row ember-view">
            <span class="sidebar-section-link-prefix icon">
              <svg viewBox="0 0 100 100" class="logoIcon" xmlns="http://www.w3.org/2000/svg">${logo}</svg>
            </span>
            <span class="sidebar-section-link-content-text"> Accueil </span>
          </a>
    ` // 填充链接
    
    $( document ).ready(() => { // 这是为了等待 ember 完成它的工作
        // 在桌面端添加导航
        let desktop = document.getElementsByClassName('sidebar-section-content')[0];
        if(desktop) desktop.prepend(div)
        
        // 在移动端添加导航
        let hamburger = document.getElementById('toggle-hamburger-menu').addEventListener("click", addMobileNav);
        function addMobileNav () {
            setTimeout(function(){ // 强制等待导航加载完成
                document.getElementsByClassName('sidebar-section-content')[0].prepend(div);
            }, 0);
        }
    })
</script>

```

桌面端结果……

 ![image](https://global.discourse-cdn.com/meta/original/4X/3/7/2/372fdf95caf259eac88d41b6c7e9de3b9eadb315.png)

……以及移动端结果：

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

在有更好的方法之前，就这样吧！

### 编辑 #2

整理了代码，使导航可以从对象数组加载。

```plaintext
<script>
  let rss = `<path d="M5,3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3M7.5,15A1.5,1.5 0 0,0 6,16.5A1.5,1.5 0 0,0 7.5,18A1.5,1.5 0 0,0 9,16.5A1.5,1.5 0 0,0 7.5,15M6,10V12A6,6 0 0,1 12,18H14A8,8 0 0,0 6,10M6,6V8A10,10 0 0,1 16,18H18A12,12 0 0,0 6,6Z"></path>`
  let mdiSchool = `<path d="M12,3L1,9L12,15L21,10.09V17H23V9M5,13.18V17.18L12,21L19,17.18V13.18L12,17L5,13.18Z"></path>`
  let logo = `<g xmlns="http://www.w3.org/2000/svg" fill="#0e1e2b">
    <path d="M77.4 196.2 c-8 -6.9 -11.4 -16.9 -11.4 -33.2 0.1 -20.9 2.4 -30.2 6.7 -27.4 2.9 1.8 4.3 9.4 5.4 28.9 0.9 16.5 1.4 19.8 3.6 25 1.3 3.3 2.5 6.7 2.6 7.5 0.3 2.6 -3.6 2.1 -6.9 -0.8z"/>
    <path d="M2.9 167.3 c-5.1 -6.1 11.2 -24.2 21.9 -24.3 2.6 0 2.7 1.1 0.6 5.5 -1.4 3 -12.6 13.5 -14.3 13.5 -0.4 0 -1.4 1.2 -2.1 2.6 -2 3.6 -4.5 4.8 -6.1 2.7z"/>
    <path d="M87.4 160.5 c-1.9 -1.9 -2.4 -3.4 -2.2 -5.8 0.4 -4.5 3.2 -4.7 7.4 -0.6 3.9 3.8 4.1 4.9 1.6 7.2 -2.5 2.3 -3.9 2.1 -6.8 -0.8z"/>
    <path d="M126.5 158.9 c-6 -3 -10 -7.4 -17 -18.6 -7.6 -12.2 -8.2 -13.8 -5.8 -15.2 2.8 -1.5 7.3 1.8 21.3 15.4 6.9 6.8 13.5 12.6 14.7 12.9 2.7 0.8 3.9 4.2 2.3 6.1 -1.8 2.2 -10.7 1.8 -15.5 -0.6z"/>
    <path d="M36.2 156.7 c-1.5 -1.8 -1.8 -7.8 -0.4 -10.3 1.9 -3.6 3.8 -4.7 6.1 -3.4 1.7 0.9 2.1 2 2.1 6.1 0 2.8 -0.5 5.9 -1 7 -1.2 2.2 -5.2 2.5 -6.8 0.6z"/>
    <path d="M121.5 116 c-0.8 -2.5 1.1 -5.1 3 -4.4 2 0.8 2.7 3.4 1.4 5 -1.7 2 -3.7 1.7 -4.4 -0.6z"/>
    <path d="M4.3 113 c-2.6 -1.1 -2.8 -1.9 -1 -4.4 1.5 -2 7.5 -2.9 9.5 -1.4 1.8 1.5 1.5 4.6 -0.7 5.8 -2.3 1.2 -4.8 1.2 -7.8 0z"/>
    <path d="M32.7 82 c-6.3 -4 -10.3 -9.9 -13.2 -19.4 -2.5 -8.8 -4 -24 -2.7 -29.5 0.9 -4.2 3.4 -6.1 6 -4.5 1.7 1.1 1.9 2 4.6 17.9 1.8 10.8 7.3 22.5 14.1 30.3 2.8 3.1 4.5 5.8 4.1 6.7 -1 2.6 -7.7 1.8 -12.9 -1.5z"/>
    <path d="M133.6 80.4 c-2.1 -2.1 -2 -2.9 0.6 -5.4 2.8 -2.6 6.6 -3.6 8.6 -2.3 2.5 1.5 2.4 2.9 -0.3 6.2 -2.9 3.4 -6.4 4 -8.9 1.5z"/>
    <path d="M93.3 73.3 c-2 -0.8 -1.6 -2.8 2.6 -11.1 7.1 -14.1 10.8 -19.4 22.7 -31.9 9.8 -10.5 12.1 -12.4 14.3 -12.1 1.5 0.2 2.7 1 2.9 2 0.6 3.2 -18 29.9 -29.4 42.1 -6 6.5 -11.1 11.7 -11.4 11.6 -0.3 0 -1.1 -0.3 -1.7 -0.6z"/>
    <path d="M61.7 56.2 c-2.7 -3 -3.3 -7.9 -1.2 -10.2 1 -1.1 2.4 -2 3.1 -2 2.1 0 4.4 4.2 4.4 8 0 5.6 -3.1 7.7 -6.3 4.2z"/>
    <path d="M96.2 18.8 c-4.2 -4.2 4 -19.3 8.8 -16.3 1.8 1.1 1 6.9 -1.7 12.2 -2.6 5.3 -4.7 6.5 -7.1 4.1z"/>
    </g>`

  const div = document.createElement("div")
  div.className = "sidebar-section-link-wrapper"
  div.innerHTML = `
            <a href="https://www.latranchee.com" class="sidebar-section-link sidebar-section-link-everything sidebar-row">
              <span class="sidebar-section-link-prefix icon">
                <svg viewBox="0 0 100 100" class="logoIcon" xmlns="http://www.w3.org/2000/svg">${logo}</svg>
              </span>
              <span class="sidebar-section-link-content-text"> Accueil </span>
            </a>
      `

  const customHeader = document.createElement("div")
  customHeader.className = "sidebar-section-wrapper sidebar-section-community"
  customHeader.innerHTML = `
            <div class="sidebar-section-header-wrapper sidebar-row">
              <button id="ember11" class="sidebar-section-header sidebar-section-header-collapsable btn-flat btn no-text" type="button">
                <span class="sidebar-section-header-text"> Camp d'entraînement </span>
              </button>
          </div>
          <div class="sidebar-section-content" id="customNavigation"></div>
      `

  $(document).ready(function () {
    // 创建链接
    const links = [
      { title: "Accueil", src: "https://www.latranchee.com", svg: logo, viewbox: "0 0 100 100" },
      { title: "Formations", src: "https://www.latranchee.com/formations", svg: mdiSchool, viewbox: "2 -2 16 16" },
      { title: "Blogue", src: "https://www.latranchee.com/blogue", viewbox: "1 -3 16 16", svg: rss },
    ]

    // 移动端
    let hamburger = document.getElementById("toggle-hamburger-menu")
    if (hamburger) {
      hamburger.addEventListener("click", addCustomLinks)
    } else {
      addCustomLinks()
    }
    
    let bool = false;
    function addCustomLinks() {
      setTimeout(function () {
        // 强制等待导航加载完成
        const sidebar = document.getElementsByClassName("sidebar-sections")[0]
        if (sidebar) {
          sidebar.prepend(customHeader)
          if (bool) return;
          // 获取 customNav ID
          const customNavigation = document.getElementById("customNavigation")
          if (customNavigation) {
            links.filter(function (link) {
              let linkDiv = document.createElement("div")
              linkDiv.className = "sidebar-section-link-wrapper"
              linkDiv.innerHTML = `<a href="${link.src}" class="sidebar-section-link sidebar-section-link-everything sidebar-row ember-view">
                        <span class="sidebar-section-link-prefix icon" id="link_${link.title}"></span>
                        <span class="sidebar-section-link-content-text"> ${link.title} </span>
                    </a>
                  `
              customNavigation.append(linkDiv)
              let linkIcon = document.getElementById("link_" + link.title)
              if (linkIcon && link.svg) {
                linkIcon.innerHTML = `<svg viewBox="${link.viewbox}" class="logoIcon" xmlns="http://www.w3.org/2000/svg"> ${link.svg}</svg>`
              }
            })
          }
        }
        bool = true
      }, 0)
      
    }
  })
</script>

```

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

希望这对大家有帮助！

---

<div class="post-metadata">

**Author:** ![jrgong](https://avatars.discourse-cdn.com/v4/letter/j/c57346/32.png) [@jrgong](https://meta.discourse.org/u/jrgong)\
**Post date:** [2022年十二月2日 18:37 UTC](https://meta.discourse.org/t/ability-to-add-a-custom-section-of-links-to-the-sidebar/239778/12 "2022-12-02T18:37:18Z")

</div>

+1。侧边栏能有更多自定义选项，比如自定义链接或者顶部能有更多按钮就更好了！

---

<div class="post-metadata">

**Author:** ![rahim123](https://avatars.discourse-cdn.com/v4/letter/r/df705f/32.png) [@rahim123](https://meta.discourse.org/u/rahim123)\
**Post date:** [2023年一月13日 22:55 UTC](https://meta.discourse.org/t/ability-to-add-a-custom-section-of-links-to-the-sidebar/239778/13 "2023-01-13T22:55:10Z")

</div>

感谢您考虑这一点，我认为这对我的论坛用户来说是一个非常重要的功能。用户通常很难发现即使是稍微隐藏的信息，我需要添加一些醒目的链接，例如“联系管理员”和“论坛规则”。我不在乎它们是否直接放在“社区”标题下，但它们绝对不会在“更多”菜单下被发现。此外，能够拥有内部和外部链接的灵活性也很重要，外部链接在自定义汉堡菜单中目前是无效的：

> [@Custom Hamburger Menu Links](https://meta.discourse.org/t/custom-hamburger-menu-links/87644/70?u=rahim123):
>
> I took a look at Discourse’s sidebar code and @manuel [icons addition](https://meta.discourse.org/t/custom-hamburger-menu-links/87644/59). It seems that currently, it’s not possible to customize the icon’s custom links because the hamburger menu decoration method doesn’t take into account the prefixValue constant (which contains the icon’s name) or something like that… It also seems to me that hamburger-menu decorations with api.decorateWidget are going to be depreciated. See: Also, the fact that external links don’t work anymore could come from this: So th…

---

<div class="post-metadata">

**Author:** ![Ryan\_Hyer](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ryan_hyer/32/159861_2.png) [@Ryan\_Hyer](https://meta.discourse.org/u/Ryan_Hyer)\
**Post date:** [2023年一月27日 23:53 UTC](https://meta.discourse.org/t/ability-to-add-a-custom-section-of-links-to-the-sidebar/239778/14 "2023-01-27T23:53:45Z")

</div>

这是一个对某人有帮助的另一个示例，很大程度上基于上述示例。此代码不添加一个全新的部分，而是将其他链接添加到“社区”部分中的“更多”面板底部（但在页脚的“常见问题解答”和“关于”链接之前）。它支持 FontAwesome 图标（假设它们已在站点设置中添加）和外部链接。它处理侧边栏关闭和重新打开，以及/或社区部分折叠和重新展开的边缘情况。它在桌面和移动设备上均可运行。

我不是 JavaScript 专家，因此对于任何不佳或非最优的代码表示歉意。至少在我的网站上，它似乎按预期工作。

只需将此代码放入主题组件的“Header”选项卡中，然后根据需要进行自定义：

```plaintext
<script>
const links = [
    // 如果图标未正确显示，可能需要在站点设置中添加 FontAwesome 图标
    { title: "我的账户", src: "/my/billing/subscriptions", icon: "file-invoice-dollar" },
    { title: "用户目录", src: "/u?asc=true&cards=yes&order=username&period=all", icon: "address-book" },
    { title: "文档", src: "/docs", icon: "book-reader" },
    { title: "外部网站", src: "https://google.com/", icon: "globe" }
]

$(document).ready(function () {
    if (document.getElementById("toggle-hamburger-menu")) {
        // 我们处于移动视图
        addToggleListener(document.getElementById("toggle-hamburger-menu"))
    } else {
        // 我们处于桌面视图
        addToggleListener(document.getElementsByClassName("btn-sidebar-toggle")[0])
        addHeaderListener()
        addMoreListener()
    }

    function addToggleListener(toggleEl) {
        if (toggleEl) {
            toggleEl.addEventListener("click", function () {
                // 等待片刻让侧边栏加载
                setTimeout(function() {
                    let sidebar = document.getElementsByClassName("sidebar-section-header").length
                    if (sidebar) {
                        addHeaderListener()
                        addMoreListener()
                    }
                }, 100)
            })
        }
    }

    function addHeaderListener() {
        let communityHeader = document.getElementsByClassName("sidebar-section-header")[0]
        if (communityHeader) {
            communityHeader.addEventListener("click", function () {
                // 等待片刻让部分展开
                setTimeout(function() {
                    let communitySection = document.getElementById("sidebar-section-content-community")
                    if (communitySection) {
                        addMoreListener()
                    }
                }, 100)
            })
        }
    }
    
    function addMoreListener() {
        let buttonMore = document.getElementsByClassName("sidebar-more-section-links-details")[0]
        if (buttonMore) {
            buttonMore.addEventListener("click", addCustomLinks)
        }
    }
    
    function addCustomLinks() {
        // 等待片刻直到导航加载完成
        setTimeout(function () {
            const parentEl = document.getElementsByClassName("sidebar-more-section-links-details-content-main")[0]
            let linksAlreadyAdded = document.getElementsByClassName("sidebar-section-custom-link").length
        
            if (parentEl && !linksAlreadyAdded) {
                links.filter(function (link) {
                    let linkDiv = document.createElement("li")
                    let linkTitleTrim = link.title.replace(/\s+/g, '')
                    linkDiv.className = "sidebar-section-link-wrapper sidebar-section-custom-link"
                    linkDiv.innerHTML = `<a href="${link.src}" class="sidebar-section-link sidebar-section-link-everything sidebar-row ember-view">
                            <span class="sidebar-section-link-prefix icon" id="link_${linkTitleTrim}"></span>
                            <span class="sidebar-section-link-content-text"> ${link.title} </span>
                        </a>
                      `
                    parentEl.append(linkDiv)
                    
                    let linkIcon = document.getElementById("link_" + linkTitleTrim)
                    if (linkIcon && link.icon) {
                        linkIcon.innerHTML = `<svg viewBox="0 0 640 512" class="fa d-icon svg-icon prefix-icon svg-string d-icon-${link.icon}" xmlns="http://www.w3.org/2000/svg">
                                <use xlink:href="#${link.icon}"></use>
                            </svg>
                        `
                    }
                })
            }
        }, 100)
    }
})
</script>

```

---

<div class="post-metadata">

**Author:** ![rahim123](https://avatars.discourse-cdn.com/v4/letter/r/df705f/32.png) [@rahim123](https://meta.discourse.org/u/rahim123)\
**Post date:** [2023年一月28日 19:32 UTC](https://meta.discourse.org/t/ability-to-add-a-custom-section-of-links-to-the-sidebar/239778/15 "2023-01-28T19:32:33Z")

</div>

@Ryan_Hyer 很好！你找到了在汉堡包切换事件后显示（或继续显示）项目的方法，这正是我在这里遇到的问题：

> [@Custom Hamburger Menu Links](https://meta.discourse.org/t/custom-hamburger-menu-links/87644/80?u=rahim123):
>
> There is a quirk with this method where the custom div disappears when toggling the visibility of the sidebar, for example if the browser window is narrow. This is a problem especially for tablets, which usually get the desktop version of Discourse and require clicking on the hamburger menu to display the sidebar. Any possible workarounds? Thanks! Edit: Solved here:

你的代码也非常有序和整洁。多亏了你，我才能把它改造成我想要的样子，显示在“Community”菜单中，而不是隐藏在“More”下面：

### Head：

```plaintext
<script>

const links = [
    // 如果字体图标未正确显示，可能需要在站点设置中添加它们
    { title: "User Directory", src: "/u?asc=true&cards=yes&order=username&period=all", icon: "address-book" },
    { title: "Docs", src: "/docs", icon: "book-reader" },
    { title: "External Site", src: "https://google.com/", icon: "globe" }
]

$(document).ready(function () {
    if (document.getElementById("toggle-hamburger-menu")) {
        // 我们处于移动视图
        addToggleListener(document.getElementById("toggle-hamburger-menu"))
    } else {
        // 我们处于桌面视图
        addToggleListener(document.getElementsByClassName("btn-sidebar-toggle")[0])
        addCustomLinks()
    }

    function addToggleListener(toggleEl) {
        if (toggleEl) {
            toggleEl.addEventListener("click", function () {
                // 等待一段时间让侧边栏加载
                setTimeout(function() {
                    let sidebar = document.getElementsByClassName("sidebar-section-header").length
                    if (sidebar) {
                        addCustomLinks()
                    }
                }, 100)
            })
        }
    }
    
    function addCustomLinks() {
        // 等待一段时间直到导航加载完成
        setTimeout(function () {
            const parentEl = document.getElementsByClassName("sidebar-section-content")[0]
            let linksAlreadyAdded = document.getElementsByClassName("sidebar-section-custom-link").length
        
            if (parentEl && !linksAlreadyAdded) {
                links.filter(function (link) {
                    let linkDiv = document.createElement("li")
                    let linkTitleTrim = link.title.replace(/\s+/g, '')
                    linkDiv.className = "sidebar-section-link-wrapper sidebar-section-custom-link"
                    linkDiv.innerHTML = `<a href="${link.src}" class="sidebar-section-link sidebar-section-link-everything sidebar-row ember-view">
                            <span class="sidebar-section-link-prefix icon" id="link_${linkTitleTrim}"></span>
                            <span class="sidebar-section-link-content-text"> ${link.title} </span>
                        </a>
                      `
                    parentEl.append(linkDiv)
                    
                    let linkIcon = document.getElementById("link_" + linkTitleTrim)
                    if (linkIcon && link.icon) {
                        linkIcon.innerHTML = `<svg viewBox="0 0 640 512" class="fa d-icon svg-icon prefix-icon svg-string d-icon-${link.icon}" xmlns="http://www.w3.org/2000/svg">
                                <use xlink:href="#${link.icon}">
                            </use>
                        </svg>
                        `
                    }
                })
            }
        }, 100)
    }
})
</script>

```

### 以及配套的 CSS：

```plaintext
.sidebar-section-content {
  display: flex; /* 设置弹性布局以便重新排序 */
  flex-direction: column;
  .sidebar-more-section-links-details {
    order: +1;
  }
}

.sidebar-wrapper li a.sidebar-section-link-about {
    display: none;
}

.sidebar-wrapper li a.sidebar-section-link-faq {
    display: none;
}

.sidebar-more-section-links-details-content-secondary .sidebar-section-link.sidebar-section-link-about {
    display: none;
}

.sidebar-more-section-links-details-content-secondary .sidebar-section-link.sidebar-section-link-faq {
    display: none;
}

```

---

<div class="post-metadata">

**Author:** ![nat](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nat/32/235063_2.png) [@nat](https://meta.discourse.org/u/nat)\
**Post date:** [2023年二月16日 06:00 UTC](https://meta.discourse.org/t/ability-to-add-a-custom-section-of-links-to-the-sidebar/239778/16 "2023-02-16T06:00:25Z")

</div>

我想提请您注意这个刚刚发布的主题：

> [@Custom sidebar sections being tested on meta](https://meta.discourse.org/t/custom-sidebar-sections-being-tested-on-meta/255303):
>
> Recently, we decided to extend the level of customization for sidebar on meta. We have enabled the ability for you to create your own sidebar sections with links (using the enable custom sidebar sections setting). How it works To display the form, you will need to click plus button at the bottom of the sidebar. You will need to provide the title of the section and at least one valid link. A valid link contains an icon, name and correct URL within the Discourse forum (abs…

请在该主题中提供反馈！

---

<div class="post-metadata">

**Author:** ![nat](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nat/32/235063_2.png) [@nat](https://meta.discourse.org/u/nat)\
**Post date:** [2023年二月18日 00:00 UTC](https://meta.discourse.org/t/ability-to-add-a-custom-section-of-links-to-the-sidebar/239778/17 "2023-02-18T00:00:24Z")

</div>

该主题在 42 小时后自动关闭。不再允许回复。