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

:information_source: Resumen Un componente de tema de Discourse para crear hermosos diseños de línea de tiempo
:eyeglasses: Vista previa https://meta.appinn.net/t/topic/76953
:hammer_and_wrench: Repositorio GitHub - scavin/discourse-qingwa-timelines
:question: Guía de instalación Cómo instalar un tema o componente de tema
:open_book: ¿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

:white_check_mark: BBCode personalizado - Sencilla sintaxis [timelines]
:white_check_mark: 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!)
:white_check_mark: Diseño hermoso - Línea de gradiente vertical con una estética limpia y minimalista
:white_check_mark: Soporte de Markdown - Conserva todo el formato dentro de las líneas de tiempo
:white_check_mark: Multilingüe - Traducciones integradas para 9 idiomas (EN, ZH_CN, ZH_TW, DE, ES, FR, JA, KO, RU)
:white_check_mark: Compatible con temas - Funciona con modos claro y oscuro
:white_check_mark: Personalizable - Cambia fácilmente los colores a través de la configuración de administrador
:white_check_mark: Responsivo - Diseño adaptable a dispositivos móviles
:white_check_mark: Seguro - Protección XSS integrada
:white_check_mark: 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

[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. :blush:

20 Me gusta

¡Este es un componente muy agradable! Muy útil.

3 Me gusta

¿Esto también soporta fotos/videos?

Sí, admite imágenes y vídeos.

Aquí tienes una demostración rápida[ENLACE DE DEMOSTRACIÓN]

Screen-20251114144915@2x
Screen-20251114144924@2x

1 me gusta

Muy dulce, de hecho. ¡Excelente trabajo!