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

[mcwumbly (Dave McClure)]

Wir möchten es Benutzern ermöglichen, einen benutzerdefinierten Abschnitt mit Links zu ihrer Seitenleiste hinzuzufügen.

In einem ersten Schritt für diese Funktion planen wir, auf der bestehenden Seitenleisten-Einstellungen-Seite aufzubauen und einem Benutzer zu erlauben, einen einzelnen benutzerdefinierten Abschnitt für diese Links hinzuzufügen.

Wir denken, es könnte ungefähr so funktionieren:

1. Kontrollkästchen für „Benutzerdefinierten Abschnitt anzeigen“.
   Wenn aktiviert, erscheint Benutzerdefinierter Abschnitt über dem Kategorien-Abschnitt, und die Werte müssen einen gültigen Namen und mindestens einen gültigen Link enthalten, um „Änderungen speichern“ zu können.
2. Textfeld für den Namen des benutzerdefinierten Abschnitts (Standard: Meine Links, darf nicht leer sein)
3. Schaltfläche zum „Link hinzufügen“. Wenn geklickt, wird ein Dialog zum Hinzufügen von Links angezeigt.
4. Hinzugefügte Links zeigen eine Schaltfläche zum Entfernen an.

Dialog zum Hinzufügen von Links

1. Der Dialog zum Hinzufügen von Links hat zwei Textfelder: Name, URL
2. Der Name darf nicht leer sein und kann Emojis enthalten (die in der Seitenleiste gerendert werden sollten).
3. Die URL muss ein Link zu derselben Discourse-Seite sein*.
4. Speichern fügt den Link hinzu, Abbrechen verwirft ihn.

Wenn ein gültiger benutzerdefinierter Abschnitt konfiguriert und gespeichert ist, zeigt die Seitenleiste diesen Abschnitt über „Kategorien“ an.

* Warum?

1. Wir möchten den Link in der Seitenleiste „hervorheben“/„fett“ darstellen können, wenn Sie sich auf der entsprechenden Seite befinden.
2. Wir möchten den „Pfad“-Teil speichern, damit Website-Umbenennungen wie erwartet funktionieren.

---

Wir denken, dass das Hinzufügen von Links heute wertvoll sein wird, da es den Leuten einfachen Zugriff auf Dinge wie „Offene Seitenleisten-Bugs“ ermöglicht und uns die Nutzung zukünftiger Verbesserungen für Themenlisten, wie z. B. verbesserte Filter für Themenlisten, ermöglicht. Solange Dinge eine URL haben, können Leute sie zu ihrer Seitenleiste hinzufügen.

Wir denken, dass Benutzer mehrere Abschnitte hinzufügen und neu anordnen können möchten, aber wir werden dies zunächst außer Reichweite halten.

[bletch (Danny Goodall)]

Eine Frage dazu, @mcwumbly. Das sieht nach einer Strategie aus, mit der ein Benutzer persönliche Links zur Seitenleiste hinzufügen kann. Würde dieser Ansatz es Websitebesitzern ermöglichen, Links hinzuzufügen, die alle Benutzer sehen würden?

Spoiler – Ich denke, das sollte er.

[mcwumbly (Dave McClure)]

@bletch

Würde dieser Ansatz es Websitebesitzern ermöglichen, Links hinzuzufügen, die alle Benutzer sehen würden?

Ja, ich denke, es könnte sicherlich erweitert werden, um so etwas zu tun, und ich sehe, wie das für einige Websites eine nützlichere Funktion wäre als die für Benutzer.

[xan2622]

Ich mag diese Idee wirklich.

Nur ein paar Fragen:

1. Wird es eine Begrenzung für die Anzahl der benutzerdefinierten Links geben, die ein Benutzer hinzufügen darf?

2. Werden die Enden der Links (in der Seitenleiste) wie im folgenden Mock-up abgeschnitten? (Ich hätte damit kein Problem).
   Und wenn ja, können die Benutzer ihren Text in voller Länge in einem Tooltip lesen (wenn der Mauszeiger über den Links schwebt)?
   

   

[mcwumbly (Dave McClure)]

@xan2622

Wird es eine Begrenzung für die Anzahl der benutzerdefinierten Links geben, die ein Benutzer hinzufügen darf?

Gute Frage. Wir müssen wahrscheinlich einige Grenzen festlegen, aber es ist nichts, das wir im Detail besprochen haben. Welche Art von Grenzen hoffen Sie zu sehen (oder zu vermeiden)?

[xan2622]

Zuerst dachte ich, 10 Links könnten genug sein, aber ich schätze, andere Forenmitglieder werden mehr wollen. Vielleicht 20. Deshalb würde ich es mit 20 versuchen und auf das Feedback der Benutzer warten und sehen, ob sie mehr verlangen (aber ich denke, 20 ist bereits eine gute Zahl).

[xan2622]

Um die „Benutzerfreundlichkeit“ dieser Funktion zu erweitern, wäre es ziemlich cool, wenn der Benutzer Links (beliebige Links von der aktuellen Discourse-Seite) direkt per Drag-and-Drop in die Seitenleiste ziehen könnte.

Ein Zeiger (zwischen Links, die zuvor zum DIV „Meine Links“ hinzugefügt wurden) würde anzeigen, wo der Link platziert würde.

Mock-up (Rechtsklick > „Bild in neuem Tab öffnen“, um die Animation in voller Größe zu sehen):

Vielleicht könnte die folgende Seite bei der Implementierung von Drag-and-Drop helfen?

The HTML5 Drag and Drop API  |  Articles  |  web.dev

[mcdanlj (Michael K Johnson)]

Ich würde gerne Standardlinks für meine Website festlegen können, die Benutzer schließen könnten. Das würde es meiner Meinung nach deutlich besser machen als die benutzerdefinierten Header-Links, die ich derzeit verwende.

[V1ktor (Viktor N.)]

+1 für das Hinzufügen benutzerdefinierter Links. Wir hatten ein paar benutzerdefinierte Links zum ursprünglichen Dropdown-Menü hinzugefügt. Es wäre schön, sie wieder hinzuzufügen, ähnlich wie Discourse selbst “Geburtstage” und “Docs” unter der Option “Mehr” hat.

[Olivier_Lambert]

Hallo zusammen!

Ich frage mich, wie ich Links zur neuen Seitenleiste hinzufügen könnte.

Es scheint in diesem Bereich keinen Anschluss zu geben…

Was wäre der effektivste Weg, das zu tun?

---

Bearbeiten

Meine Frage wurde hierher verschoben… Ich bin mir nicht sicher warum, da ich wirklich dasselbe frage.

Auf jeden Fall, hier ist, was ich getan habe, um es zu lösen. Es ist KEINE schöne Lösung und es wäre viel besser, wenn es eine Möglichkeit gäbe, das mit dem Templating-System von Discourse zu integrieren.

Hier ist es:

<script>
    let logo = "" // Ich habe die SVG-Pfade entfernt, weil ihr sie nicht braucht.
    const div = document.createElement('div') // Erstelle den hinzuzufügenden Link
    div.className = 'sidebar-section-link-wrapper' // Füge die relevanten Klassen hinzu
    div.innerHTML = `
          <a title="Tous les sujets" 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>
    ` // Fülle den Link aus

    $( document ).ready(() => { // Dies ist notwendig, um zu warten, bis Ember fertig ist
        // Navigation auf dem Desktop hinzufügen
        let desktop = document.getElementsByClassName('sidebar-section-content')[0];
        if(desktop) desktop.prepend(div)

        // Navigation auf dem Handy hinzufügen
        let hamburger = document.getElementById('toggle-hamburger-menu').addEventListener("click", addMobileNav);
        function addMobileNav () {
            setTimeout(function(){ // Erzwinge das Warten, bis die Navigation geladen wurde
                document.getElementsByClassName('sidebar-section-content')[0].prepend(div);
            }, 0);
        }
    })
</script>

Ergebnis auf dem Desktop…

& Ergebnis auf dem Handy:

Bis es einen besseren Weg gibt, muss das reichen!

Bearbeiten #2

Den Code aufgeräumt, damit die Navigation aus einem Array von Objekten geladen wird.

<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 () {
    // Erstelle die Links
    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 },
    ]

    // Handy
    let hamburger = document.getElementById("toggle-hamburger-menu")
    if (hamburger) {
      hamburger.addEventListener("click", addCustomLinks)
    } else {
      addCustomLinks()
    }

    let bool = false;
    function addCustomLinks() {
      setTimeout(function () {
        // Warte, bis die Navigation geladen wurde
        const sidebar = document.getElementsByClassName("sidebar-sections")[0]
        if (sidebar) {
          sidebar.prepend(customHeader)
          if (bool) return;
          // Hole die 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>

Ich hoffe, das hilft jemandem!

[jrgong]

+1 von meiner Seite. Etwas mehr Anpassbarkeit für die Seitenleiste, wie z. B. benutzerdefinierte Links oder vielleicht sogar mehr Schaltflächen oben, wäre gut!

[rahim123]

Vielen Dank für die Berücksichtigung. Ich denke, für die Benutzerbasis meines Forums ist dies eine ziemlich wichtige Funktion. Benutzer sind normalerweise schlecht darin, selbst leicht versteckte Informationen zu entdecken, und ich muss einige prominente Links für Dinge wie „Administrator kontaktieren“ und „Forenregeln“ hinzufügen. Es macht mir nichts aus, wenn sie direkt unter der Überschrift Community stehen, aber sie werden definitiv nicht unter dem Menü Mehr entdeckt. Auch die Flexibilität, interne und externe Links zu haben, wäre wichtig, externe Links funktionieren derzeit im benutzerdefinierten Hamburger-Menü nicht:

Custom Hamburger Menu Links

I took a look at Discourse’s sidebar code and @manuel icons addition. 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…

[Ryan_Hyer]

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>

[rahim123]

@Ryan_Hyer Sehr gut! Sie haben herausgefunden, wie die Elemente nach dem Hamburger-Umschalt-Ereignis angezeigt werden (oder weiterhin angezeigt werden), was das Problem war, auf das ich hier gestoßen bin:

Custom Hamburger Menu Links

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:

Ihr Code ist auch sehr geordnet und sauber. Dank dessen konnte ich ihn so anpassen, dass er das anzeigt, was ich im Community-Menü haben möchte, ohne dass es unter „Mehr“ versteckt ist:

Kopfzeile:

<script>

const links = [
    // FontAwesome-Icons müssen möglicherweise in den Website-Einstellungen hinzugefügt werden, wenn sie nicht korrekt angezeigt werden
    { 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])
        addCustomLinks()
    }

    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) {
                        addCustomLinks()
                    }
                }, 100)
            })
        }
    }
    
    function addCustomLinks() {
        // Warten Sie einen Moment, bis die Navigation geladen wurde
        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>

Und das ergänzende CSS:

.sidebar-section-content {
  display: flex; /* Richten Sie ein Flex-Layout ein, damit Sie die Dinge neu anordnen können */
  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;
}

[nat (Natalie T)]

Ich möchte nur Ihre Aufmerksamkeit auf dieses Thema lenken, das gerade veröffentlicht wurde:

Custom sidebar sections being tested on meta

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. [Add section button] 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…

Bitte geben Sie Feedback in diesem Thema!