sidebarMod: Añadir/Eliminar Enlaces y Secciones de la Barra Lateral

sidebarMod

aquí está mi script para modificar la barra lateral (mencionado por primera vez en el tema de secciones personalizadas de la barra lateral).

usa promesas y MutationObserver para observar la barra lateral en busca de cambios (por ejemplo, al expandirse o contraerse) y agregar/eliminar elementos de manera eficiente.

creo que lo hice lo suficientemente flexible para la mayoría de los casos de uso. puedes agregar enlaces (posicionados agregando, anteponiendo o insertando antes/después de enlaces existentes), eliminar secciones, eliminar enlaces e incluso eliminar ⋮Más.

incluso es posible cambiar el comportamiento si el espectador es un invitado o un usuario registrado. por ejemplo, lo estoy usando para eliminar una sección personalizada que es irrelevante para los invitados.

es un buen complemento a la nueva función de secciones personalizadas de la barra lateral (habilitada a través de SiteSetting.enable_custom_sidebar_sections), por lo que no me molesté en agregar una función para crear secciones.

avísame si encuentras errores o necesitas funciones adicionales.

instalación

crea un nuevo componente de tema y pégalo en Head. recuerda habilitarlo para tu tema.

configuración

solo necesitas editar injections y removals cerca de la parte superior.

sugiero dejarlo como está al principio para que veas lo que está haciendo. intenté que la configuración de ejemplo fuera ilustrativa.

personalmente lo estoy usando así:

  /**
   * posicionadores de enlaces:
   *   (bool) prepend, append: anteponer/agregar enlace a la sección
   *   (str)  addBeforeKebab, addAfterKebab: agregar enlace antes/después del enlace existente
   * visibilidad del enlace:
   *   (str)  injectFor: inyectar enlace solo para usuarios 'anon', solo para usuarios 'registered', o para 'both' (predeterminado: '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 }
      ]
    }
  ],

  /**
   * opciones de sección:
   *   (str) removeFor: eliminar sección solo para usuarios 'anon', solo para usuarios 'registered', o para 'both' (predeterminado: 'none')
   *   (str) removeMore: eliminar '⋮Más' solo para usuarios 'anon', solo para usuarios 'registered', o para 'both' (predeterminado: 'none')
   *                       útil si sabes que está vacío debido a la eliminación de enlaces
   * opciones de eliminación de enlaces:
   *   (str) removeFor: eliminar enlace solo para usuarios 'anon', solo para usuarios 'registered', o para 'both' (predeterminado: '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'
    }
  ],

preguntas de mi parte

investigué cómo hacer esto con la API, pero no creo que se haya implementado suficiente funcionalidad.

si quisiera hacer esto de la “manera correcta” en lugar de hackear el DOM, ¿cómo lo haría? ¿necesitaría hacer un plugin con ruby? cualquier pista sería apreciada.

2 Me gusta

actualizado para funcionar con data-link-name

Gracias, esto fue realmente útil para implementar una sección personalizada en la barra lateral que necesita actualizarse en las transiciones de página (ver Making custom changes to the sidebar programmatically). Un problema que tengo es que cuando se hace clic en los enlaces personalizados, se activa una actualización completa de la página. ¿Lo has solucionado de alguna manera?

Para su información, encontré una solución aquí: Reload page body when clicking a link in a custom header