| Resumen | Un componente de tema de Discourse para crear hermosos diseños de línea de tiempo | |
| Vista previa | https://meta.appinn.net/t/topic/76953 | |
| Repositorio | GitHub - scavin/discourse-qingwa-timelines | |
| Guía de instalación | Cómo instalar un tema o componente de tema | |
| ¿Nuevo en los temas de Discourse? | Guía para principiantes sobre el uso de temas de Discourse |
Instalar este componente de tema
¡Estoy emocionado de compartir un nuevo componente de tema que agrega elegantes diseños de línea de tiempo a tu comunidad de Discourse!
Este es mi primer componente de tema, construido con la ayuda de LLM.
¿Qué es?
Discourse Timelines es un componente de tema que implementa BBCode personalizado [timelines]...[/timelines] para crear hermosos y minimalistas diseños de línea de tiempo. Perfecto para hojas de ruta de proyectos, guías paso a paso, historiales de empresas, divisiones de capítulos y más.
Efecto de línea de tiempo publicado
Botón de barra de herramientas del editor
Vista del editor de Markdown
Características principales
BBCode personalizado - Sencilla sintaxis [timelines]
Botón de barra de herramientas del editor - ¡No es necesario escribir las etiquetas manualmente (resuelve el problema de escape de corchetes del nuevo editor!)
Diseño hermoso - Línea de gradiente vertical con una estética limpia y minimalista
Soporte de Markdown - Conserva todo el formato dentro de las líneas de tiempo
Multilingüe - Traducciones integradas para 9 idiomas (EN, ZH_CN, ZH_TW, DE, ES, FR, JA, KO, RU)
Compatible con temas - Funciona con modos claro y oscuro
Personalizable - Cambia fácilmente los colores a través de la configuración de administrador
Responsivo - Diseño adaptable a dispositivos móviles
Seguro - Protección XSS integrada
Sin dependencias - Utiliza solo las API nativas de Discourse
Uso
Usando el botón de la barra de herramientas (¡Lo más fácil!)
- Abre el editor
- Haz clic en el botón del menú “+” (opciones)
- Selecciona “Insertar línea de tiempo”
- Edita tu contenido
- ¡Publica!
El botón de la barra de herramientas resuelve el problema por el cual el nuevo editor de Discourse escapa automáticamente los corchetes escritos manualmente.
Ejemplo de sintaxis
[timelines]
## Enero 2024 - Lanzamiento del proyecto
El proyecto se inició oficialmente y se formó el equipo.
## Marzo 2024 - Primera versión
Se completó el desarrollo de la funcionalidad principal y comenzó la prueba beta.
## Junio 2024 - Versión 2.0
Actualización importante con nuevas características:
- Característica A
- Característica B
- Característica C
[/timelines]
Personalización
Todos los colores se pueden personalizar a través de la configuración del tema:
- timeline_gradient_start - Color del gradiente superior (predeterminado:
#ff7a18) - timeline_gradient_end - Color del gradiente inferior (predeterminado:
#ffb800) - timeline_heading_color - Color del texto del encabezado (predeterminado:
#d96d14) - timeline_dot_color - Color del punto de la línea de tiempo (predeterminado:
#ff7a18) - timeline_heading_color_dark - Color del encabezado en modo oscuro (predeterminado:
#ff9854) - timeline_dot_border_color_dark - Borde del punto en modo oscuro (opcional)
¡Espero que encuentres útil este componente! Por favor, házmelo saber si tienes alguna pregunta, comentario o sugerencia. ![]()




