 |
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 |
 |
¿Nuevo en los temas de Discourse? | Guía para principiantes sobre el uso de temas de Discourse |
Instalar este componente de tema
Ejemplos
Escritorio
Móvil
Características
toc = tabla de contenidos
-
Genera automáticamente toda la tabla de contenidos mediante un botón en el menú de engranaje del editor
-
La tabla de contenidos siempre estará en pantalla: se desplazará con el contenido como el widget de progreso del tema
-
A medida que te desplazas por las secciones del tema, el elemento activo en la tabla de contenidos se marcará como activo (resaltado en azul)
-
Añade atributos id a 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 RTL (de derecha a izquierda)
-
Los colores se basan en tu paleta de colores activa actual
¿Cómo funciona?
En pocas palabras, busca 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 los encabezados). Esto significa que tu markdown debe ser sintácticamente correcto.
# encabezado 1
## encabezado 2
### encabezado 3
#### encabezado 4
##### encabezado 5
###### encabezado 6
Puedes alternar libremente entre niveles de encabezados, pero el orden debe ser correcto.
# encabezado 2
## encabezado 3
## encabezado 3
### encabezado 4
## encabezado 3
# encabezado 2
etc...
Para que los enlaces de la tabla de contenidos funcionen, los encabezados deben tener atributos id. El componente verificará si los encabezados ya tienen ids y, si es así, se respetarán. Esto es útil si alguna vez creaste manualmente una tabla de contenidos.
Si los encabezados no tienen ids, generará un id para cada encabezado basado en su texto (los caracteres no deseados se eliminan).
Una vez que todo esto se haya completado, también añadirá un enlace junto a cada botón que enlaza directamente a esa sección:
Configuración
| Nombre | Descripción |
|---|---|
| nivel de confianza mínimo para crear TOC | El nivel de confianza mínimo que debe tener un usuario para ver el botón TOC en el editor |
| texto toc del editor | 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 automáticas TOC | Habilitar automáticamente TOC en temas de estas categorías |
| etiquetas automáticas TOC | Habilitar automáticamente TOC en temas con estas etiquetas |
| encabezado mínimo TOC | Número mínimo de encabezados en un tema para que se muestre la tabla de contenidos |
Traducciones
| Traducción | Predeterminado |
|---|---|
| table_of_contents | tabla de contenidos |
| insert_table_of_contents | Insertar tabla de contenidos |
| jump_bottom | Saltar al final |
| toggle_toc.show_timeline | Cronología |
| toggle_toc.show_toc | Contenido |
El tema incluye tres cadenas que puedes traducir o modificar.
table_of_contents: "tabla de contenidos"
Esto se usa para el botón que abre la tabla de contenidos en móviles.
insert_table_of_contents: "Insertar tabla de contenidos"
Esto se usa como texto para el botón TOC en el menú de engranaje 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 TOC en el menú de engranaje (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 adivines, no hay espacio para mostrar ambos al mismo tiempo, por lo que la forma en que funciona este componente es la siguiente:
En un tema con una tabla de contenidos, el widget de progreso del tema se oculta mientras el primer mensaje está en pantalla, y en su lugar ves la tabla de contenidos.
Una vez que te desplazas más allá del primer mensaje, la tabla de contenidos ya no se desplazará contigo y el progreso del tema se mostrará mientras lees cualquier respuesta.
Por lo tanto, los primeros mensajes obtienen la tabla de contenidos, y los mensajes subsiguientes obtienen el widget regular de progreso del tema.
Esto ocurre tanto en escritorio como en móviles.
¿Hay alguna desventaja al usar este componente?
Nada que yo sepa; todos los cambios se realizan en el lado del cliente. Por lo tanto, puedes eliminar fácilmente el componente y tus mensajes volverán a estar como estaban antes de instalarlo.
Limitaciones
Este componente asume la estructura estándar de los temas. Por lo tanto, no funcionará con temas que modifiquen esa estructura, como el tema Vincent. El soporte para temas populares que modifican la estructura 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 fork duro que elimina muchas características innecesarias, integra y estila el resto para Discourse.
Por lo tanto, no hay solicitudes externas y el tamaño total es de aproximadamente 4 kb gzip.
Muchas gracias a @erlend_sh por su valiosa retroalimentación y a @david por su ayuda con las traducciones.
¿Alojado por nosotros? Los componentes de tema están disponibles para usar en nuestros planes Pro, Business y Enterprise.
¡gracias!
