sidebarMod: Aggiungi/Rimuovi collegamenti e sezioni della barra laterale

sidebarMod

ecco il mio script per modificare la barra laterale (menzionato per la prima volta nell’argomento sezioni personalizzate della barra laterale).

utilizza promise e MutationObserver per osservare la barra laterale alla ricerca di modifiche (ad es. dall’espansione o dalla compressione) e aggiungere/rimuovere elementi in modo performante.

penso di averlo reso abbastanza flessibile per la maggior parte dei casi d’uso. puoi aggiungere collegamenti (posizionati aggiungendo, anteponendo o inserendo prima/dopo collegamenti esistenti), rimuovere sezioni, rimuovere collegamenti e persino rimuovere ⋮More.

è persino possibile modificare il comportamento se lo spettatore è un ospite o un utente registrato. ad esempio, lo sto usando per rimuovere una sezione personalizzata irrilevante per gli ospiti.

è un buon complemento alle nuove sezioni personalizzate della barra laterale (abilitate tramite SiteSetting.enable_custom_sidebar_sections), quindi non mi sono preoccupato di aggiungere una funzionalità per creare sezioni.

fammi sapere se trovi bug o hai bisogno di funzionalità aggiuntive.

installazione

crea un nuovo componente del tema e incollalo in Head. ricorda di abilitarlo per il tuo tema.

configurazione

devi solo modificare injections e removals in alto.

suggerisco di lasciarlo così com’è all’inizio per vedere cosa sta facendo. ho cercato di rendere la configurazione di esempio illustrativa.

personalmente lo sto usando così:

  /**
   * posizionatori di link:
   *   (bool) prepend, append: antepone/aggiunge il link alla sezione
   *   (str)  addBeforeKebab, addAfterKebab: aggiunge il link prima/dopo il link esistente
   * visibilità del link:
   *   (str)  injectFor: inserisce il link solo per utenti 'anon', solo per utenti 'registered', o per 'both' (default: 'both')
   */
  injections: [
    { sectionSelector: '.sidebar-section[data-section-name="community"]',
      links: [
        { text: 'Guidelines', kebab: 'guidelines', title: 'Guidelines for using this site', href: '/guidelines', icon: 'gavel', addBeforeKebab: 'faq', injectFor: 'registered' }
      ]
    },
    { sectionSelector: '.sidebar-section[data-section-name="categories"]',
      links: [
        { text: 'Site Map', kebab: 'site-map', title: 'Site Map', href: '/t/32', icon: 'map-marker-alt', prepend: true }
      ]
    }
  ],

  /**
   * opzioni di sezione:
   *   (str) removeFor: rimuove la sezione solo per utenti 'anon', solo per utenti 'registered', o per 'both' (default: 'none')
   *   (str) removeMore: rimuove '⋮More' solo per utenti 'anon', solo per utenti 'registered', o per 'both' (default: 'none')
   *                       utile se sai che è vuoto a causa della rimozione di link
   * opzioni di rimozione link:
   *   (str) removeFor: rimuove il link solo per utenti 'anon', solo per utenti 'registered', o per 'both' (default: 'both')
   */
  removals: [
    { sectionSelector: '.sidebar-section[data-section-name="community"]',
      links: [{ kebab: 'badges', removeFor: 'anon' }]
    },
    { sectionSelector: '.sidebar-custom-sections .sidebar-section[data-section-name="my-topics"]',
      removeFor: 'anon'
    }
  ],

domande da parte mia

ho indagato su come farlo con l’API, ma non credo che ci sia abbastanza implementato.

se volessi farlo nel “modo giusto” invece di hackerare il DOM, come dovrei fare? avrei bisogno di creare un plugin con ruby? qualsiasi suggerimento sarebbe apprezzato.

2 Mi Piace

aggiornato per funzionare con data-link-name

Grazie, questo è stato molto utile per implementare una sezione personalizzata della barra laterale che deve essere aggiornata al passaggio di pagina (vedi Making custom changes to the sidebar programmatically). Un problema che ho è che quando si fa clic sui collegamenti personalizzati, viene attivato un aggiornamento completo della pagina. Sei riuscito in qualche modo a evitarlo?

Per tua informazione, ho trovato una soluzione qui: Reload page body when clicking a link in a custom header