Guide Twilight - Personnalisation Avancée
Guide for Template - Advanced Customization
Avis de traduction (Non révisé)
Cette page a été traduite par IA et peut contenir des inexactitudes.
Traduit de: 🇬🇧 English (Deepseek)
Voir l'original Retour à la traductionCe guide couvre les options de personnalisation avancées et les fonctionnalités disponibles dans le modèle Twilight, des configurations globales aux extensions Markdown spécialisées.
Configuration Globale
Le fichier twilight.config.yaml est le cœur de la configuration de votre blog. Voici quelques paramètres avancés que vous pouvez ajuster :
Site et Localisation
-
Langue et Traduction : Activez la traduction côté client en utilisant
site.translate.enable. Vous pouvez choisir différents services et configurer la détection automatique. -
Polices Personnalisées : Ajoutez vos propres polices en fournissant un lien CSS ou un chemin de fichier sous
site.font.
Effets Visuels
-
Couleur du Thème : Modifiez la couleur principale de votre blog en ajustant
site.themeColor.hue(0-360). -
Modes de Fond d’Écran : Choisissez entre
banner,fullscreenounone. Vous pouvez également activer uncarouselpour plusieurs fonds d’écran avec l’effetkenBurns. -
Effet de Vagues : Activez ou désactivez l’effet d’ondulation d’eau animé sur la bannière avec
site.wallpaper.banner.waves.enable. -
Effets de Particules : Activez les particules flottantes en arrière-plan avec
particle.enable.
Interface Utilisateur
-
Transparence de la Barre de Navigation : Ajustez
site.wallpaper.banner.navbar.transparentModeentresemi,fullousemifull. -
Widgets de la Barre Latérale : Réorganisez ou activez/désactivez les composants de la barre latérale comme
profile,announcement,categories,tags,tocetstatisticsdanssidebar.components.
Extensions Markdown
Cartes de Dépôt GitHub
Vous pouvez ajouter des cartes dynamiques qui pointent vers des dépôts GitHub. Au chargement de la page, les informations du dépôt sont récupérées depuis l’API GitHub.
Créez une carte de dépôt GitHub avec le code ::github{repo="Spr-Aachen/Twilight"}.
1::github{repo="Spr-Aachen/Twilight"}Cartes Musicales
- En ligne
1::music{meting="https://meting.spr-aachen.com/api?server=netease&type=song&id=1390882521"}- Locale
1::music{title="深海之息" artist="Youzee Music" cover="https://p1.music.126.net/PhKOqFtljgHDDpKYM2ADUA==/109951169858309716.jpg" audio="assets/music/深海之息.m4a" lrc="assets/music/深海之息.lrc"}Admonitions
Les types d’admonitions suivants sont pris en charge : note tip important warning caution
NoteMet en évidence des informations que les utilisateurs devraient prendre en compte, même en survolant.
TipInformations facultatives pour aider un utilisateur à réussir davantage.
ImportantInformations cruciales nécessaires pour que les utilisateurs réussissent.
WarningContenu critique nécessitant une attention immédiate de l’utilisateur en raison de risques potentiels.
CautionConséquences négatives potentielles d’une action.
-
Syntaxe de Base
1:::note2Met en évidence des informations que les utilisateurs devraient prendre en compte, même en survolant.3:::45:::tip6Informations facultatives pour aider un utilisateur à réussir davantage.7::: -
Titres Personnalisés
Le titre de l’admonition peut être personnalisé.
MON TITRE PERSONNALISÉCeci est une note avec un titre personnalisé.
1:::note[MON TITRE PERSONNALISÉ]2Ceci est une note avec un titre personnalisé.3::: -
Syntaxe GitHub
TipLa syntaxe GitHub est également prise en charge.
1> [!TIP]2> La syntaxe GitHub est également prise en charge. -
Spoiler
Vous pouvez ajouter des spoilers à votre texte. Le texte prend également en charge la syntaxe Markdown.
Le contenu
est caché ayyy !1Le contenu :spoiler[est caché **ayyy**] !
Pour plus de détails, consultez la Documentation.
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, ornone. You can also enable acarouselfor multiple wallpapers with thekenBurnseffect. -
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.transparentModebetweensemi,full, orsemifull. -
Sidebar Widgets: Reorder or toggle sidebar components like
profile,announcement,categories,tags,toc, andstatisticsinsidebar.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.
Create a GitHub repository card with the code ::github{repo="Spr-Aachen/Twilight"}.
1::github{repo="Spr-Aachen/Twilight"}Music Cards
- Online
1::music{meting="https://meting.spr-aachen.com/api?server=netease&type=song&id=1390882521"}- Local
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
NoteHighlights information that users should take into account, even when skimming.
TipOptional information to help a user be more successful.
ImportantCrucial information necessary for users to succeed.
WarningCritical content demanding immediate user attention due to potential risks.
CautionNegative potential consequences of an action.
-
Basic Syntax
1:::note2Highlights information that users should take into account, even when skimming.3:::45:::tip6Optional information to help a user be more successful.7::: -
Custom Titles
The title of the admonition can be customized.
MY CUSTOM TITLEThis is a note with a custom title.
1:::note[MY CUSTOM TITLE]2This is a note with a custom title.3::: -
GitHub Syntax
TipThe 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 !1The content :spoiler[is hidden **ayyy**]!
For more details, check the Documentation.
This page may not be the latest version.