# Discourse Qingwa Timelines - BBCode personalizado para hermosos diseños de línea de tiempo

**URL:** https://meta.discourse.org/t/discourse-qingwa-timelines-custom-bbcode-for-beautiful-timeline-layouts/387954
**Category:** Theme component
**Created:** [8 Noviembre, 2025 22:18 UTC](https://meta.discourse.org/t/discourse-qingwa-timelines-custom-bbcode-for-beautiful-timeline-layouts/387954 "2025-11-08T22:18:20Z")
**Posts on this page:** 1
**Showing post:** 1

<div class="post-metadata">

### Author: ![scavin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/scavin/32/115938_2.png) [@scavin](https://meta.discourse.org/u/scavin)
#### Post date: [8 Noviembre, 2025 22:18 UTC](https://meta.discourse.org/t/discourse-qingwa-timelines-custom-bbcode-for-beautiful-timeline-layouts/387954/1 "2025-11-08T22:18:20Z")

</div>

| | | |
| --- | --- | --- |
| ℹ | **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](https://meta.appinn.net/t/topic/76953) |
| 🛠 | **Repositorio** | [GitHub - scavin/discourse-qingwa-timelines](https://github.com/scavin/discourse-qingwa-timelines) |
| ❓ | **Guía de instalación** | [Cómo instalar un tema o componente de tema](https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682) |
| 📖 | **¿Nuevo en los temas de Discourse?** | [Guía para principiantes sobre el uso de temas de Discourse](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) |

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

 ![qingwa-timelines-1](https://global.discourse-cdn.com/meta/original/4X/e/6/e/e6e2b3092c4dda47e6c8f0d6fcf8753ce4713249.jpeg)

### Botón de barra de herramientas del editor

 ![qingwa-timelines-button](https://global.discourse-cdn.com/meta/original/4X/1/5/f/15f3ad625aa1cd3ea689557f7106bb30ce978f83.jpeg)

### Vista del editor de Markdown

 ![qingwa-timelines-editor](https://global.discourse-cdn.com/meta/original/4X/8/0/4/804f2ee74417fe28853843393a4b8e5729b46e18.jpeg)

## 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!)

1. Abre el editor
2. Haz clic en el botón del menú **“+” (opciones)**
3. Selecciona **“Insertar línea de tiempo”**
4. Edita tu contenido
5. ¡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

```plaintext
[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. 😊

---

_[View the full topic](https://meta.discourse.org/t/discourse-qingwa-timelines-custom-bbcode-for-beautiful-timeline-layouts/387954)._