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

功能
,
14

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

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

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

<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>
4 个赞