391 palabras

2 min

Guía de personalización avanzada de Twilight

Guide for Template - Advanced Customization

2024-02-10

Guides

Advanced Customization

Twilight

Astro

Customization

Series tags: Twilight

Astro

Guide

Series: Guia de la plantilla Twilight

Aviso de traducción (No revisado)

Esta página fue traducida por IA y puede contener imprecisiones.

Traducido de: 🇬🇧 English （Deepseek）

Ver original Volver a la traducción

Esta guía cubre opciones avanzadas de personalización y características disponibles en la plantilla Twilight, desde configuraciones globales hasta extensiones especializadas de Markdown.

Configuración global

El archivo twilight.config.yaml es el corazón de la configuración de tu blog. Aquí tienes algunos ajustes avanzados que puedes modificar:

Sitio y localización

Idioma y traducción: Habilita la traducción del lado del cliente usando site.translate.enable. Puedes elegir diferentes servicios y configurar la detección automática.
Fuentes personalizadas: Añade tus propias fuentes proporcionando un enlace CSS o una ruta de archivo en site.font.

Efectos visuales

Color del tema: Cambia el color principal de tu blog ajustando site.themeColor.hue (0-360).
Modos de fondo de pantalla: Elige entre banner, fullscreen o none. También puedes habilitar un carousel para múltiples fondos de pantalla con el efecto kenBurns.
Efecto de ondas: Activa el efecto animado de ondas de agua en el banner usando site.wallpaper.banner.waves.enable.
Efectos de partículas: Habilita partículas flotantes en el fondo con particle.enable.

Interfaz de usuario

Transparencia de la barra de navegación: Ajusta site.wallpaper.banner.navbar.transparentMode entre semi, full o semifull.
Widgets de la barra lateral: Reordena o activa/desactiva componentes de la barra lateral como profile, announcement, categories, tags, toc y statistics en sidebar.components.

Extensiones de Markdown

Tarjetas de repositorios de GitHub

Puedes añadir tarjetas dinámicas que enlacen a repositorios de GitHub. Al cargar la página, la información del repositorio se obtiene de la API de GitHub.

Spr-Aachen

Twilight

Waiting for api.github.com...

00K

Waiting...

Crea una tarjeta de repositorio de GitHub con el código ::github{repo="Spr-Aachen/Twilight"}.

1
::github{repo="Spr-Aachen/Twilight"}

Tarjetas de música

En línea

Loading lyrics...

0:00 / 0:00

1
::music{meting="https://meting.spr-aachen.com/api?server=netease&type=song&id=1390882521"}

Local

深海之息

Youzee Music

Loading lyrics...

0:00 / 0:00

1
::music{title="深海之息" artist="Youzee Music" cover="https://p1.music.126.net/PhKOqFtljgHDDpKYM2ADUA==/109951169858309716.jpg" audio="assets/music/深海之息.m4a" lrc="assets/music/深海之息.lrc"}

Advertencias

Se admiten los siguientes tipos de advertencias: note tip important warning caution

Note
Destaca información que los usuarios deben tener en cuenta, incluso al hojear.

Tip
Información opcional para ayudar al usuario a tener más éxito.

Important
Información crucial necesaria para que los usuarios tengan éxito.

Warning
Contenido crítico que requiere atención inmediata del usuario debido a posibles riesgos.

Caution
Posibles consecuencias negativas de una acción.

Sintaxis básica

1
:::note
2
Destaca información que los usuarios deben tener en cuenta, incluso al hojear.
3
:::
4

5
:::tip
6
Información opcional para ayudar al usuario a tener más éxito.
7
:::

Títulos personalizados

El título de la advertencia se puede personalizar.

MI TÍTULO PERSONALIZADO
Esta es una nota con un título personalizado.
```
1
:::note[MI TÍTULO PERSONALIZADO]
2
Esta es una nota con un título personalizado.
3
:::
```
Sintaxis de GitHub

Tip
La sintaxis de GitHub también es compatible.
```
1
> [!TIP]
2
> La sintaxis de GitHub también es compatible.
```
Spoiler

Puedes añadir spoilers a tu texto. El texto también admite sintaxis Markdown.

¡El contenido está oculto ayyy!
```
1
¡El contenido :spoiler[está oculto **ayyy**]!
```

Para más detalles, consulta la Documentación.

This guide covers advanced customization options and features available in the Twilight template, from global configurations to specialized Markdown extensions.

Global Configuration

The twilight.config.yaml file is the heart of your blog’s configuration. Here are some advanced settings you can tweak:

Site & Localization

Language & Translation: Enable client-side translation using site.translate.enable. You can choose different services and configure auto-detection.
Custom Fonts: Add your own fonts by providing a CSS link or file path under site.font.

Visual Effects

Theme Color: Change the primary color of your blog by adjusting the site.themeColor.hue (0-360).
Wallpaper Modes: Choose between banner, fullscreen, or none. You can also enable a carousel for multiple wallpapers with the kenBurns effect.
Waves Effect: Toggle the animated water ripple effect on the banner using site.wallpaper.banner.waves.enable.
Particle Effects: Enable floating particles in the background with particle.enable.

UI

Navbar Transparency: Adjust site.wallpaper.banner.navbar.transparentMode between semi, full, or semifull.
Sidebar Widgets: Reorder or toggle sidebar components like profile, announcement, categories, tags, toc, and statistics in sidebar.components.

Markdown Extensions

GitHub Repository Cards

You can add dynamic cards that link to GitHub repositories, on page load, the repository information is pulled from the GitHub API.

Spr-Aachen

Twilight

Waiting for api.github.com...

00K

Waiting...

Create a GitHub repository card with the code ::github{repo="Spr-Aachen/Twilight"}.

1
::github{repo="Spr-Aachen/Twilight"}

Music Cards

Online

Loading lyrics...

0:00 / 0:00

1
::music{meting="https://meting.spr-aachen.com/api?server=netease&type=song&id=1390882521"}

Local

深海之息

Youzee Music

Loading lyrics...

0:00 / 0:00

1
::music{title="深海之息" artist="Youzee Music" cover="https://p1.music.126.net/PhKOqFtljgHDDpKYM2ADUA==/109951169858309716.jpg" audio="assets/music/深海之息.m4a" lrc="assets/music/深海之息.lrc"}

Admonitions

Following types of admonitions are supported: note tip important warning caution

Note
Highlights information that users should take into account, even when skimming.

Tip
Optional information to help a user be more successful.

Important
Crucial information necessary for users to succeed.

Warning
Critical content demanding immediate user attention due to potential risks.

Caution
Negative potential consequences of an action.

Basic Syntax

1
:::note
2
Highlights information that users should take into account, even when skimming.
3
:::
4

5
:::tip
6
Optional information to help a user be more successful.
7
:::

Custom Titles

The title of the admonition can be customized.

MY CUSTOM TITLE
This is a note with a custom title.
```
1
:::note[MY CUSTOM TITLE]
2
This is a note with a custom title.
3
:::
```
GitHub Syntax

Tip
The GitHub syntax is also supported.
```
1
> [!TIP]
2
> The GitHub syntax is also supported.
```
Spoiler

You can add spoilers to your text. The text also supports Markdown syntax.

The content is hidden ayyy!
```
1
The content :spoiler[is hidden **ayyy**]!
```

For more details, check the Documentation.

Guía de personalización avanzada de Twilight

/es-ES/posts/twilight-guide-advanced-customization/

Author

MuxBuffer

Published at

2024-02-10

License

CC BY-NC-SA 4.0

Índice de participación de IA IIIA-0

Categoría Sin IA

Nivel 0

Descripción Sin uso de IA

This page may not be the latest version.