 |
Resumen | Añade llamadas de estilo Obsidian como alternativa a las citas en markdown. |
 |
Vista previa | Theme Creator |
 |
Repositorio | GitHub - Arkshine/discourse-quote-callouts · GitHub |
 |
Guía de instalación | Cómo instalar un tema o componente de tema |
 |
¿Nuevo en temas de Discourse? | Guía para principiantes sobre el uso de temas de Discourse |
Instalar este componente de tema
Este componente de tema añade soporte para llamadas de estilo Obsidian en Discourse como alternativa a las citas en markdown.
Las llamadas son una excelente manera de resaltar contenido y añadir notas, advertencias u otros mensajes especiales a tus publicaciones.
Uso
Para crear una llamada, tienes varias opciones.
Sintaxis de markdown
Añade [!tipo] a la primera línea de una cita, donde tipo es el identificador del tipo. El identificador determina cómo se verá y sentirá la llamada. Para ver todos los tipos disponibles, consulta Tipos compatibles.
> [!tip]
> **Consejo**: Usa `fragmentos de código` para mejorar la legibilidad. Proporcionan claridad y precisión.
Vista previa
Puedes cambiar el tipo haciendo clic en el icono:
Editor de texto enriquecido
Ahora es totalmente compatible, consulta la sección Soporte del editor de texto enriquecido.
Atajo de teclado
- Ctrl + q — Insertar una llamada vacía
Barra de herramientas
Chat
Hay un botón en la barra de herramientas para insertar una llamada predeterminada.
Título personalizado
Por defecto, el título de la llamada es su identificador de tipo en formato de título. Puedes cambiarlo añadiendo texto después del identificador:
> [!question] Etiqueta personalizada 🤗
> Las etiquetas de las llamadas pueden personalizarse.
> [!abstract] [date=2032-12-22 timezone="Europe/Paris"]
> También pueden contener formato en línea especial, como fechas dinámicas.
También puedes crear llamadas solo con título:
> [!success] Resuelto.
Llamadas plegables
Puedes hacer que una llamada sea plegable añadiendo un signo más + o un signo menos - directamente después del identificador del tipo.
+expande la llamada por defecto-la contrae en su lugar
> [!todo]- Mi lista de tareas
>
> - [x] Escribir documentación
> - [ ] Añadir pruebas
> - [ ] Revisar código
> [!todo]+ Mi lista de tareas expandida
>
> - [x] Crear repositorio
> - [ ] Configurar CI/CD
> - [ ] Desplegar en producción
Llamadas anidadas
Puedes anidar llamadas en múltiples niveles.
> [!question] ¿Se pueden anidar las llamadas?
>
> > [!todo] ¡Sí!, se pueden.
> >
> > > [!example] Incluso puedes usar múltiples capas de anidación.
> [!tip]
> Aquí tienes un consejo útil
>
> > [!info]
> > Con información adicional
> >
> > > [!example]
> > > Y un ejemplo anidado
>
> De vuelta al consejo principal
Tipos predeterminados compatibles
Puedes usar varios tipos y alias de llamadas.
Cada tipo viene con un color de fondo y un icono diferentes.
Consulta la configuracióncallouts.
note. Consulta la sección Desplazamientos predeterminados para más información.
| Tipo | Descripción | Alias |
|---|---|---|
note |
Para notas e información general | - |
abstract |
Para resúmenes o secciones abstractas | summary, tldr |
info |
Para contenido informativo | - |
todo |
Para listas de tareas o elementos pendientes | - |
tip |
Para consejos e información importante | hint, important |
success |
Para mensajes de éxito | check, done |
question |
Para preguntas y preguntas frecuentes | help, faq |
warning |
Para advertencias | caution, attention |
failure |
Para notificaciones de fallo | fail, missing |
danger |
Para mensajes de peligro o error | error |
bug |
Para informes de errores o problemas conocidos | - |
example |
Para ejemplos | - |
quote |
Para citas | cite |
Personalización
Icono
Puedes usar un icono de FontAwesome o proporcionar directamente un elemento SVG.
Elemento SVG
Aunque la versión gratuita de FontAwesome ofrece muchas opciones, a veces puedes sentirte limitado.
Puedes proporcionar un elemento SVG <svg>...</svg>.
Ejemplo: Iconos Lucide – Es un conjunto excelente con la ventaja de poder elegir el grosor del trazo.
- Selecciona un icono
- Ajusta el grosor del trazo
- Haz clic en Copiar SVG
- Ve a la configuración del componente del tema y pega el contenido
Desplazamientos predeterminados
Puedes establecer valores predeterminados cuando no se encuentra un tipo de llamada especificado con las siguientes configuraciones:
callout_fallback_typecallout_fallback_iconcallout_fallback_color
> [!discourse es fantástico]
> Sí.
Configuración global
Puedes personalizar varios aspectos de las llamadas a través de:
- Opacidad del fondo
- Propiedades del borde (ancho, estilo, color, radio)
- Relleno
- Propiedades de la fuente del título (tamaño, grosor)
- Espacio entre el icono y el título
Configuración por llamada
Cada tipo de llamada puede personalizarse con:
- Icono personalizado
- Texto del título
- Esquema de colores
- Propiedades del borde
Consulta la sección Configuración a continuación.
Configuración
Lista
| Configuración | Descripción |
|---|---|
| callouts | Define las llamadas. |
| callout_fallback_type | El tipo de llamada predeterminado a usar cuando no se encuentra el tipo especificado. Valor predeterminado: note |
| callout_fallback_icon | El icono predeterminado a usar cuando no se encuentra el tipo especificado. Valor predeterminado: far-pen-to-square |
| callout_fallback_color | El color predeterminado a usar cuando no se encuentra el tipo especificado. Valor predeterminado: #027aff |
| callout_background_opacity | La opacidad de fondo global para la llamada (1 a 100). Valor predeterminado: 10 |
| callout_border_width | El ancho del borde global para la llamada. Valor predeterminado: empty |
| callout_border_style | El estilo del borde global para la llamada. Valor predeterminado: empty |
| callout_border_color | El color del borde global para la llamada. Valor predeterminado: empty |
| callout_border_radius | El radio del borde global para la llamada. Valor predeterminado: var(--d-border-radius) |
| callout_padding | El relleno global para la llamada. Valor predeterminado: 0.75em 0.75em 0.75em 1.5em |
| callout_title_font_size | El tamaño de fuente global para el título de la llamada. Valor predeterminado: inherit |
| callout_title_font_weight | El grosor de fuente global para el título de la llamada. Valor predeterminado: bold |
| callout_title_gap | El espacio global entre el icono y el título de la llamada. Valor predeterminado: 0.5em |
| callout_icon_sizep | El tamaño global para el icono de la llamada. |
| callout_transition_duration_ms | La duración de la animación de apertura y cierre (ms). |
| svg_icons | Lista de iconos de FontAwesome 6 utilizados en este componente de tema. |
Página de configuración por llamada:
| Configuración | Descripción |
|---|---|
| Tipo* | El tipo de la llamada. Este identificador se utilizará en la sintaxis de la llamada: [!tipo] |
| Alias | Los alias para la llamada, separados por |.Ejemplo: cite|quote |
| Icono | El icono de fontawesome para la llamada. Es posible que necesites añadirlo a la configuración svg_icons si no está disponible en el subconjunto predeterminado.Alternativamente, puedes proporcionar directamente un elemento SVG, por ejemplo, <svg>...</svg> |
| Tamaño del icono | El tamaño para el icono de la llamada. Nota: Usa solo valores CSS válidos, por ejemplo, 1em, 16px, 1.5rem |
| Título | El título para la llamada. Si no se proporciona un título en la llamada, se utilizará esta configuración. Nota: si ambos están vacíos, el título será el tipo de llamada. |
| Color | El color para la llamada. Se utilizará para el fondo, el título y el icono. Nota: Usa solo códigos de color hexadecimales, por ejemplo, #027aff |
| Ancho del borde | El ancho del borde para la llamada. |
| Estilo del borde | El estilo del borde para la llamada. |
| Color del borde | El color del borde para la llamada. Importante: si estás usando funciones CSS para producir un valor alfa, como rgba, asegúrate de no usar espacios entre los valores, por ejemplo, rgba(145,145,145,0.1) |
| Radio del borde | El radio del borde para la llamada. |
* Configuración requerida
Soporte del editor de texto enriquecido
Este componente ahora soporta el editor de texto enriquecido de Discourse, lo que facilita la creación, edición y organización de llamadas.
Creación de llamadas
Puedes insertar llamadas de varias formas:
- Atajo de teclado: Ctrl + Q
- Botón de la barra de herramientas
- Reglas de entrada:
/callout<:tipo>!!<tipo>
- Soporte de pegado
Video
Edición de llamadas
Los controles para editar una llamada aparecen solo cuando la seleccionas antes.
-
Selector de tipo
Al hacer clic en el icono, aparecerá un menú flotante. -
Título personalizado
Soporta formato en línea y emojis -
Plegado
Establece las llamadas como colapsables. Se puede acceder desde el menú de opciones.
Video
Controles de movimiento
-
Escritorio
- Arrastrar y soltar usando un controlador
-
Dispositivos táctiles
- Mover llamadas arriba/abajo
- Anidar dentro de llamadas adyacentes
- Desactivado por defecto (puede activarse en opciones)
Video
Navegación por teclado
Mejora la navegación dentro de las llamadas anidadas:
- ← al inicio del título abre el selector de tipo
- ↑ / ↓ dentro de áreas vacías crea/elimina párrafos
- Enter en el título mueve el cursor al cuerpo
Video
Clic para insertar
- Haz clic en áreas vacías para crear un párrafo
- Botones opcionales permiten insertar contenido dentro o fuera de las llamadas
Video
Hoja de ruta
Los planes de desarrollo futuro podrían incluir:
- Autocompletado de tipos al escribir
Créditos
- @StefanoCecere – Solicitud de característica, Style blockquotes as callouts in Obsidian
Es posible que su sitio no funcione porque un tema / componente tiene errores.
