Möglichkeit, einen benutzerdefinierten Link-Bereich zur Seitenleiste hinzuzufügen

Merkmal
,
14

Hier ist ein weiteres Beispiel, das hoffentlich jemandem hilfreich sein wird, basierend auf den obigen Beispielen. Dieser Code fügt keinen völlig neuen Abschnitt hinzu, sondern fügt zusätzliche Links am Ende des Panels „Mehr“ im Abschnitt „Community“ hinzu (aber vor den Links FAQ und Über im Footer). Er unterstützt FontAwesome-Icons (vorausgesetzt, sie sind in den Website-Einstellungen hinzugefügt) und externe Links. Er behandelt Randfälle, in denen die Seitenleiste geschlossen und wieder geöffnet wird und/oder der Abschnitt „Community“ ein- und ausgeklappt wird. Er funktioniert auf Desktop und Mobilgeräten.

Ich bin kaum ein JavaScript-Experte, daher entschuldige ich mich für schlechten oder nicht optimalen Code. Auf meiner Website scheint er zumindest wie beabsichtigt zu funktionieren.

Fügen Sie diesen Code einfach in den Header-Tab einer Theme-Komponente ein und passen Sie ihn nach Bedarf an:

<script>
const links = [
    // FontAwesome-Icons müssen möglicherweise in den Website-Einstellungen hinzugefügt werden, wenn sie nicht korrekt angezeigt werden
    { title: "Mein Konto", src: "/my/billing/subscriptions", icon: "file-invoice-dollar" },
    { title: "Benutzerverzeichnis", src: "/u?asc=true&cards=yes&order=username&period=all", icon: "address-book" },
    { title: "Docs", src: "/docs", icon: "book-reader" },
    { title: "Externe Website", src: "https://google.com/", icon: "globe" }
]

$(document).ready(function () {
    if (document.getElementById("toggle-hamburger-menu")) {
        // Wir sind in der mobilen Ansicht
        addToggleListener(document.getElementById("toggle-hamburger-menu"))
    } else {
        // Wir sind in der Desktop-Ansicht
        addToggleListener(document.getElementsByClassName("btn-sidebar-toggle")[0])
        addHeaderListener()
        addMoreListener()
    }

    function addToggleListener(toggleEl) {
        if (toggleEl) {
            toggleEl.addEventListener("click", function () {
                // Warten Sie einen Moment, bis die Seitenleiste geladen ist
                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 () {
                // Warten Sie einen Moment, bis der Abschnitt erweitert wird
                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() {
        // Warten Sie einen Moment, bis die Navigation geladen wurde
        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 „Gefällt mir“