340 Wörter

2 Min.

Leitfaden für Vorlage - Erweiterte Anpassung

Guide for Template - Advanced Customization

2024-02-10

Guides

Advanced Customization

Twilight

Astro

Customization

Series tags: Twilight

Astro

Guide

Serien: Twilight-Vorlagenguide

Übersetzungshinweis (Nicht geprüft)

Diese Seite wurde von einer KI übersetzt und kann Ungenauigkeiten enthalten.

Übersetzt aus: 🇬🇧 English （Deepseek）

Original ansehen Zurück zur Übersetzung

Dieser Leitfaden behandelt erweiterte Anpassungsoptionen und Funktionen, die in der Twilight-Vorlage verfügbar sind, von globalen Konfigurationen bis hin zu spezialisierten Markdown-Erweiterungen.

Globale Konfiguration

Die Datei twilight.config.yaml ist das Herzstück der Konfiguration Ihres Blogs. Hier sind einige erweiterte Einstellungen, die Sie anpassen können:

Website & Lokalisierung

Sprache & Übersetzung: Aktivieren Sie clientseitige Übersetzung mit site.translate.enable. Sie können verschiedene Dienste auswählen und die automatische Erkennung konfigurieren.
Benutzerdefinierte Schriftarten: Fügen Sie Ihre eigenen Schriftarten hinzu, indem Sie einen CSS-Link oder Dateipfad unter site.font angeben.

Visuelle Effekte

Themenfarbe: Ändern Sie die Primärfarbe Ihres Blogs, indem Sie den Wert site.themeColor.hue (0-360) anpassen.
Hintergrundmodi: Wählen Sie zwischen banner, fullscreen oder none. Sie können auch ein carousel für mehrere Hintergrundbilder mit dem kenBurns-Effekt aktivieren.
Welleneffekt: Schalten Sie den animierten Wasserwelleneffekt auf dem Banner mit site.wallpaper.banner.waves.enable um.
Partikeleffekte: Aktivieren Sie schwebende Partikel im Hintergrund mit particle.enable.

UI

Transparenz der Navigationsleiste: Passen Sie site.wallpaper.banner.navbar.transparentMode zwischen semi, full oder semifull an.
Seitenleisten-Widgets: Ordnen Sie Seitenleisten-Komponenten wie profile, announcement, categories, tags, toc und statistics in sidebar.components neu an oder blenden Sie sie ein/aus.

Markdown-Erweiterungen

GitHub-Repository-Karten

Sie können dynamische Karten hinzufügen, die auf GitHub-Repositories verlinken. Beim Laden der Seite werden die Repository-Informationen von der GitHub-API abgerufen.

Spr-Aachen

Twilight

Waiting for api.github.com...

00K

Waiting...

Erstellen Sie eine GitHub-Repository-Karte mit dem Code ::github{repo="Spr-Aachen/Twilight"}.

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

Musikkarten

Online

Loading lyrics...

0:00 / 0:00

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

Lokal

深海之息

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"}

Hinweise

Folgende Arten von Hinweisen werden unterstützt: note tip important warning caution

Note
Hebt Informationen hervor, die Benutzer auch beim Überfliegen beachten sollten.

Tip
Optionale Informationen, die dem Benutzer zu mehr Erfolg verhelfen.

Important
Wichtige Informationen, die für den Erfolg des Benutzers erforderlich sind.

Warning
Kritischer Inhalt, der aufgrund potenzieller Risiken sofortige Aufmerksamkeit erfordert.

Caution
Negative mögliche Folgen einer Handlung.

Grundlegende 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
:::

Benutzerdefinierte Titel

Der Titel des Hinweises kann angepasst werden.

MEIN BENUTZERDEFINIERTER TITEL
Dies ist ein Hinweis mit einem benutzerdefinierten Titel.
```
1
:::note[MEIN BENUTZERDEFINIERTER TITEL]
2
Dies ist ein Hinweis mit einem benutzerdefinierten Titel.
3
:::
```
GitHub-Syntax

Tip
Die GitHub-Syntax wird ebenfalls unterstützt.
```
1
> [!TIP]
2
> The GitHub syntax is also supported.
```
Spoiler

Du kannst Spoiler zu deinem Text hinzufügen. Der Text unterstützt ebenfalls Markdown-Syntax.

Der Inhalt ist versteckt ayyy!
```
1
The content :spoiler[is hidden **ayyy**]!
```

Für weitere Details siehe die Dokumentation.

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.

Leitfaden für Vorlage - Erweiterte Anpassung

/de-DE/posts/twilight-guide-advanced-customization/

Author

MuxBuffer

Published at

2024-02-10

License

CC BY-NC-SA 4.0

KI-Beteiligungsindex IIIA-0

Kategorie Ohne KI

Stufe 0

Beschreibung Gar keine KI verwendet

This page may not be the latest version.