 |
Resumen | DiscoTOC te permitirá generar una tabla de contenidos interactiva para tus temas con un solo clic. |
 |
Vista previa | Vista previa en Discourse Theme Creator |
 |
Enlace al repositorio | https://github.com/discourse/DiscoTOC |
 |
¿Es tu primera vez con los temas de Discourse? | Guía para principiantes sobre el uso de temas de Discourse |
Instala este componente de tema
Ejemplos
Escritorio
Móvil
Funcionalidades
toc = tabla de contenidos
-
Genera automáticamente toda la tabla de contenidos mediante un botón en el menú de engranajes del editor
-
La tabla de contenidos siempre estará visible en la pantalla: se desplaza con el contenido, similar al widget de progreso del tema
-
A medida que te desplaces por las secciones del tema, el elemento activo en la tabla de contenidos se resaltará en azul
-
Añade atributos
ida los encabezados (puedes enlazar a una sección específica desde otro tema o publicación) -
Al hacer clic en cualquier enlace de la tabla de contenidos, el navegador navegará a la sección correspondiente (desplazamiento suave)
-
Añade un enlace copiable junto a cada encabezado (si deseas enlazar a él)
-
Soporte para lectura de derecha a izquierda (RTL)
-
Los colores se basan en tu paleta de colores activa actual
¿Cómo funciona?
En resumen, busca los encabezados en los temas que están marcados para tener una tabla de contenidos (mediante el botón del editor) y, si resulta que el tema actual está marcado, toma todos los encabezados y los coloca en la tabla de contenidos (anidados según el nivel de encabezado) - esto significa que tu markdown debe ser sintácticamente correcto.
# encabezado 1
## encabezado 2
### encabezado 3
#### encabezado 4
##### encabezado 5
###### encabezado 6
Puedes subir y bajar en los niveles de encabezado libremente, pero el orden debe ser correcto.
# encabezado 2
## encabezado 3
## encabezado 3
### encabezado 4
## encabezado 3
# encabezado 2
etc...
Para que los enlaces en la tabla de contenidos funcionen, los encabezados deben tener atributos id. El componente comprobará si los encabezados ya tienen ids y, si los tienen, los respetará. Esto es útil si alguna vez has creado manualmente una tabla de contenidos.
Si los encabezados no tienen ids, el componente generará uno para cada encabezado basándose en su texto (se eliminan los caracteres no deseados).
Una vez hecho todo eso, también añadirá un enlace junto a cada botón que enlace directamente a esa sección:
Configuración
| Nombre | Descripción |
|---|---|
| Nivel de confianza mínimo para crear una tabla de contenidos | El nivel de confianza mínimo que debe tener un usuario para ver el botón de la tabla de contenidos en el editor |
| Texto del editor para la tabla de contenidos | Texto que aparece en la parte superior del panel de vista previa del editor para indicar que el tema tendrá una tabla de contenidos |
| Categorías con tabla de contenidos automática | Habilitar automáticamente la tabla de contenidos en temas de estas categorías |
| Etiquetas con tabla de contenidos automática | Habilitar automáticamente la tabla de contenidos en temas con estas etiquetas |
| Nivel mínimo de encabezado | Número mínimo de encabezados en un tema para que se muestre la tabla de contenidos |
Traducciones
| Traducción | Valor predeterminado |
|---|---|
| table_of_contents | tabla de contenidos |
| insert_table_of_contents | Insertar tabla de contenidos |
| jump_bottom | Ir al final |
| toggle_toc.show_timeline | Línea de tiempo |
| toggle_toc.show_toc | Contenidos |
El tema viene con tres cadenas de texto que puedes traducir o cambiar.
table_of_contents: "tabla de contenidos"
Esto se usa para el botón que abre la tabla de contenidos en dispositivos móviles.
insert_table_of_contents: "Insertar tabla de contenidos"
Esto se usa como el texto para el botón de la tabla de contenidos en el menú de engranajes del editor.
topic_will_contain_a_table_of_contents: "Este tema contendrá una tabla de contenidos"
Este es el texto que aparece en la vista previa del editor para indicar que se generará una tabla de contenidos para el tema.
¿Cómo creo una tabla de contenidos?
- Escribe un tema con encabezados sintácticamente correctos.
- Haz clic en el botón de la tabla de contenidos en el menú de engranajes (solo aparece al crear un tema regular; las respuestas y los mensajes privados se ignoran).
- Listo.
¿Qué sucede con el widget de progreso del tema cuando un tema tiene una tabla de contenidos?
Como probablemente puedas imaginar, no hay espacio para mostrar ambos a la vez, por lo que el funcionamiento de este componente es el siguiente:
En un tema con una tabla de contenidos, el widget de progreso del tema se oculta mientras la primera publicación está visible en la pantalla, y ves la tabla de contenidos en su lugar.
Una vez que te desplazas más allá de la primera publicación, la tabla de contenidos dejará de desplazarse contigo y se mostrará el progreso del tema en su lugar mientras lees las respuestas.
Por lo tanto, la primera publicación obtiene la tabla de contenidos, y las publicaciones subsiguientes obtienen el widget de progreso del tema habitual.
Esto ocurre tanto en escritorio como en móvil.
¿Hay alguna desventaja al usar este componente?
Ninguna que yo conozca; todos los cambios se realizan en el lado del cliente. Por lo tanto, puedes eliminar fácilmente el componente y tus publicaciones volverán a estar como estaban antes de instalarlo.
Limitaciones
Este componente asume la disposición estándar de los temas. Por lo tanto, no funcionará con temas que modifiquen esa disposición, como el tema Vincent. El soporte para temas populares que modifican la disposición llegará en una etapa posterior en forma de configuraciones del componente.
Créditos
Comencé con la biblioteca tocify.js de Greg Franko. Sin embargo, parece que no se ha actualizado en un tiempo, por lo que esto es esencialmente un hard-fork que elimina muchas funciones innecesarias e integra y estiliza el resto para Discourse.
Por lo tanto, no hay solicitudes externas y el tamaño total es de aproximadamente 4 kb comprimidos con gzip.
Un gran agradecimiento a @erlend_sh por sus valiosos comentarios y a @david por su ayuda con las traducciones.
¿Lo alojamos nosotros? Los componentes de tema están disponibles para usar en nuestros planes Pro, Business y Enterprise.