사이드바에 사용자 지정 링크 섹션을 추가하는 기능

[Ryan_Hyer]

위 예제들을 바탕으로 누군가에게 도움이 되기를 바라며 또 다른 예시를 하나 더 소개합니다. 이 코드는 완전히 새로운 섹션을 추가하는 것이 아니라, 커뮤니티 섹션의 “더 보기” 패널 하단에 추가 링크를 삽입합니다(푸터의 FAQ 및 소개 링크 앞). FontAwesome 아이콘(사이트 설정에 추가된 경우)과 외부 링크를 지원합니다. 사이드바가 닫혔다가 다시 열리거나, 커뮤니티 섹션이 접혔다가 다시 확장되는 경계 상황도 처리합니다. 데스크톱과 모바일 모두에서 작동합니다.

저는 JavaScript 전문가가 아니므로, 비효율적이거나 최적화되지 않은 코드가 있을 수 있습니다. 하지만 제 사이트에서는 적어도 의도한 대로 작동하는 것 같습니다.

아래 코드를 테마 구성 요소의 Header 탭에 붙여넣고 필요에 맞게 수정하세요:

<script>
const links = [
    // 올바르게 표시되지 않으면 사이트 설정에 FontAwesome 아이콘을 추가해야 할 수 있습니다
    { title: "My Account", src: "/my/billing/subscriptions", icon: "file-invoice-dollar" },
    { 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])
        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>