681 文字

3 分

Twilightガイド：高度なカスタマイズ

Guide for Template - Advanced Customization

2024-02-10

Guides

Advanced Customization

Twilight

Astro

Customization

Series tags: Twilight

Astro

Guide

シリーズ: Twilight テンプレートガイド

翻訳について (未レビュー)

このページはAI翻訳によるもので、不正確な部分がある可能性があります。

翻訳元: 🇬🇧 English （Deepseek）

原文を見る翻訳に戻る

このガイドでは、Twilightテンプレートで利用可能な高度なカスタマイズオプションと機能について、グローバル設定から特殊なMarkdown拡張までを網羅します。

グローバル設定

twilight.config.yaml ファイルは、ブログ設定の中核です。以下に調整可能な高度な設定をいくつか示します。

サイトとローカライゼーション

言語と翻訳: site.translate.enable を使用してクライアントサイド翻訳を有効にします。異なるサービスを選択し、自動検出を設定できます。
カスタムフォント: site.font の下にCSSリンクまたはファイルパスを指定して、独自のフォントを追加します。

視覚効果

テーマカラー: site.themeColor.hue (0-360) を調整して、ブログのメインカラーを変更します。
壁紙モード: banner、fullscreen、none から選択します。kenBurns エフェクトを使用して、複数の壁紙を表示する carousel を有効にすることもできます。
波エフェクト: site.wallpaper.banner.waves.enable を使用して、バナー上のアニメーションする水の波紋エフェクトを切り替えます。
パーティクルエフェクト: particle.enable を使用して、背景に浮遊するパーティクルを有効にします。

UI

ナビバーの透明度: site.wallpaper.banner.navbar.transparentMode を semi、full、semifull の間で調整します。
サイドバーウィジェット: sidebar.components で、profile、announcement、categories、tags、toc、statistics などのサイドバーコンポーネントの順序を変更したり、表示/非表示を切り替えたりできます。

Markdown拡張

GitHubリポジトリカード

GitHubリポジトリにリンクする動的なカードを追加できます。ページ読み込み時に、リポジトリ情報がGitHub APIから取得されます。

Spr-Aachen

Twilight

Waiting for api.github.com...

00K

Waiting...

GitHubリポジトリカードは、コード ::github{repo="Spr-Aachen/Twilight"} で作成します。

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

音楽カード

オンライン

Loading lyrics...

0:00 / 0:00

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

ローカル

深海之息

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

アドモニション

以下のタイプのアドモニションがサポートされています: note tip important warning caution

Note
ユーザーがざっと読む場合でも考慮すべき情報を強調表示します。

Tip
ユーザーがより成功するための任意の情報です。

Important
ユーザーが成功するために必要な重要な情報です。

Warning
潜在的なリスクのため、ユーザーの即時の注意を必要とする重要なコンテンツです。

Caution
アクションによる否定的な潜在的な結果です。

基本構文

1
:::note
2
ユーザーがざっと読む場合でも考慮すべき情報を強調表示します。
3
:::
4

5
:::tip
6
ユーザーがより成功するための任意の情報です。
7
:::

カスタムタイトル

アドモニションのタイトルはカスタマイズできます。

マイカスタムタイトル
これはカスタムタイトルが付いたノートです。
```
1
:::note[マイカスタムタイトル]
2
これはカスタムタイトルが付いたノートです。
3
:::
```
GitHub構文

Tip
GitHub構文もサポートされています。
```
1
> [!TIP]
2
> GitHub構文もサポートされています。
```
スポイラー

テキストにスポイラーを追加できます。テキストはMarkdown構文もサポートしています。

このコンテンツは隠されています えいっ!
```
1
このコンテンツは :spoiler[隠されています **えいっ**]!
```

詳細については、ドキュメントをご確認ください。

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.

Twilightガイド：高度なカスタマイズ

/ja-JP/posts/twilight-guide-advanced-customization/

Author

MuxBuffer

Published at

2024-02-10

License

CC BY-NC-SA 4.0

AI参加指数 IIIA-0

カテゴリ AI非使用

レベル 0

概要 AIを全く使用していない

This page may not be the latest version.