||||
-|-|
| 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 del 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 engranaje del editor
-
La tabla de contenidos siempre estará visible en la pantalla; se desplaza con el contenido, como el widget de progreso del tema
-
A medida que te desplzas más allá de las secciones en el tema, el elemento activo en la tabla de contenidos se marcará como activo (resaltado en azul)
-
Añade atributos de identificador (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 escritura de derecha a izquierda (RTL)
-
Los colores se basan en tu paleta de colores activa actual
¿Cómo funciona?
En resumen, 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 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 libremente en los niveles de encabezado, 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 de identificador (id). El componente comprobará si los encabezados ya tienen ids y, si los tienen, los respetará. 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 (se eliminan los caracteres no deseados).
Una vez hecho todo eso, 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 la 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 para la tabla de contenidos automática | Habilitar automáticamente la tabla de contenidos en temas de estas categorías
| Etiquetas para la tabla de contenidos automática | Habilitar automáticamente la tabla de contenidos en temas con estas etiquetas
| Nivel mínimo de encabezado para la tabla de contenidos | 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 | Ir al final
| toggle_toc.show_timeline | Línea de tiempo
| toggle_toc.show_toc | Contenido
El tema viene con tres cadenas que puedes traducir o cambiar.
table_of_contents: "tabla de contenidos"
Esto se utiliza para el botón que abre la tabla de contenidos en dispositivos móviles.
insert_table_of_contents: "Insertar tabla de contenidos"
Esto se utiliza como el texto para el botón de la tabla de contenidos 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 de la tabla de contenidos en el menú de engranaje (solo aparece al crear un tema normal; las respuestas y los MP 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 al mismo tiempo, 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 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 no se desplazará contigo y se mostrará el progreso del tema en su lugar mientras lees las respuestas.
Por lo tanto, las primeras publicaciones obtienen 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 de usar este componente?
Ninguna de la que tenga conocimiento; 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 ello, no funcionará con temas que modifiquen dicha disposición, como el tema Vincent. El soporte para temas populares que modifican la disposición llegará en una etapa posterior en forma de configuración del componente.
Créditos
Comencé con la biblioteca tocify.js de Greg Franko. Sin embargo, parece que no se ha actualizado en mucho tiempo, por lo que esto es esencialmente una bifurcación (fork) que elimina muchas funcionalidades 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 comprimido con gzip.
Un gran agradecimiento a @erlend_sh por sus valiosos comentarios 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!
