sidebarMod: Adicionar/Remover Links e Seções da Barra Lateral

sidebarMod

aqui está meu script para modificar a barra lateral (mencionado pela primeira vez no tópico de seções personalizadas da barra lateral).

ele usa promises e MutationObserver para observar a barra lateral em busca de alterações (por exemplo, de expansão ou colapso) e adicionar/remover coisas de forma eficiente.

acho que o tornei flexível o suficiente para a maioria dos casos de uso. você pode adicionar links (posicionados anexando, antepondo ou inserindo antes/depois de links existentes), remover seções, remover links e até mesmo remover ⋮Mais.

é até possível alterar o comportamento se o visualizador for um convidado ou um usuário registrado. por exemplo, estou usando-o para remover uma seção personalizada que é irrelevante para convidados.

é um bom complemento para o novo recurso de seções personalizadas da barra lateral (ativado via SiteSetting.enable_custom_sidebar_sections), então não me preocupei em adicionar um recurso para criar seções.

me avise se encontrar bugs ou precisar de recursos extras.

instalação

crie um novo componente de tema e cole-o em Head. lembre-se de ativá-lo para o seu tema.

configuração

você só precisa editar injections e removals perto do topo.

sugiro deixá-lo como está no início para que você veja o que ele está fazendo. tentei tornar a configuração de exemplo ilustrativa.

pessoalmente, estou usando assim:

  /**
   * posicionadores de link:
   *   (bool) prepend, append: antepor/anexar link à seção
   *   (str)  addBeforeKebab, addAfterKebab: adicionar link antes/depois do link existente
   * visibilidade do link:
   *   (str)  injectFor: injetar link apenas para usuários 'anon', apenas para usuários 'registered', ou para 'both' (padrão: '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 }
      ]
    }
  ],

  /**
   * opções de seção:
   *   (str) removeFor: remover seção apenas para usuários 'anon', apenas para usuários 'registered', ou para 'both' (padrão: 'none')
   *   (str) removeMore: remover '⋮Mais' apenas para usuários 'anon', apenas para usuários 'registered', ou para 'both' (padrão: 'none')
   *                       útil se você sabe que está vazio devido a remoções de links
   * opções de remoção de link:
   *   (str) removeFor: remover link apenas para usuários 'anon', apenas para usuários 'registered', ou para 'both' (padrão: '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'
    }
  ],

perguntas minhas

investiguei fazer isso com a API, mas acho que não há implementações suficientes.

se eu quisesse fazer isso “da maneira certa” em vez de hackear coisas no DOM, como eu faria isso? eu precisaria fazer um plugin com ruby? qualquer dica seria apreciada.

2 curtidas

atualizado para funcionar com data-link-name

Obrigado, isso foi muito útil para mim ao implementar uma seção personalizada na barra lateral que precisa ser atualizada nas transições de página (veja Making custom changes to the sidebar programmatically). Um problema que tenho é que, quando os links personalizados são clicados, uma atualização completa da página é acionada. Você conseguiu contornar isso de alguma forma?

FYI, encontrei uma solução aqui: Reload page body when clicking a link in a custom header