LOADING
631 語
3 分
テンプレートガイド - 高度なカスタマイズ

このガイドでは、Twilight テンプレートで利用できる高度なカスタマイズ設定と機能を、グローバル設定から専用の Markdown 拡張まで解説します。

グローバル設定

twilight.config.yaml はブログ設定の中心です。以下は調整できる高度な設定です。

サイトとローカライズ

  • 言語と翻訳: site.translate.enable でクライアントサイド翻訳を有効化できます。サービスの選択や自動検出の設定も可能です。

  • カスタムフォント: site.font に CSS リンクまたはファイルパスを指定して独自フォントを追加できます。

視覚効果

  • テーマカラー: site.themeColor.hue(0-360)を調整して、ブログのメインカラーを変更できます。

  • 壁紙モード: bannerfullscreennone から選択できます。複数壁紙には carousel を有効化し、kenBurns 効果も利用できます。

  • 波エフェクト: site.wallpaper.banner.waves.enable でバナー上の水面アニメーション効果を切り替えられます。

  • パーティクル効果: particle.enable で背景に浮遊パーティクルを表示できます。

UI

  • ナビゲーションバーの透明度: site.wallpaper.banner.navbar.transparentModesemifullsemifull から調整できます。

  • サイドバーウィジェット: sidebar.componentsprofileannouncementcategoriestagstocstatistics などの順序変更や表示切り替えができます。

Markdown 拡張

GitHub リポジトリカード

GitHub リポジトリへのリンクカードを動的に追加できます。ページ読み込み時に GitHub API からリポジトリ情報を取得します。

Spr-Aachen
/
Twilight
Waiting for api.github.com...
00K
0K
0K
Waiting...

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

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

音楽カード

  • オンライン
Loading...
Loading...
Loading lyrics...
0:00 / 0:00
::music{meting="https://api.i-meto.com/meting/api?server=netease&type=song&id=1390882521"}
  • ローカル
深海之息
Youzee Music
Loading lyrics...
0:00 / 0:00
::music{title="深海之息" artist="Youzee Music" cover="https://p1.music.126.net/PhKOqFtljgHDDpKYM2ADUA==/109951169858309716.jpg" audio="assets/music/深海之息.m4a" lrc="assets/music/深海之息.lrc"}

Admonitions

次の種類の Admonition をサポートしています: note tip important warning caution

NOTE

流し読みしている場合でも、ユーザーが考慮すべき情報を強調します。

TIP

ユーザーがよりうまく進めるための補足情報です。

IMPORTANT

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

WARNING

潜在的なリスクがあるため、ユーザーの即時注意を要する重要な内容です。

CAUTION

ある操作によって起こりうる望ましくない結果を示します。

  • 基本構文

    :::note
    流し読みしている場合でも、ユーザーが考慮すべき情報を強調します。
    :::
    :::tip
    ユーザーがよりうまく進めるための補足情報です。
    :::
  • カスタムタイトル

    Admonition のタイトルはカスタマイズできます。

    MY CUSTOM TITLE

    これはカスタムタイトル付きのノートです。

    :::note[MY CUSTOM TITLE]
    これはカスタムタイトル付きのノートです。
    :::
  • GitHub 構文

    TIP

    GitHub 構文 もサポートしています。

    > [!TIP]
    > GitHub 構文もサポートしています。
  • スポイラー

    テキストにスポイラーを追加できます。スポイラー内のテキストでも Markdown 構文を使えます。

    The content is hidden ayyy!

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

詳細は Documentation を確認してください。

テンプレートガイド - 高度なカスタマイズ
/posts/guide/advanced_guide_japanese/
著者
kinkinbeer135ml
公開日
2024-02-10
ライセンス
CC BY-NC-SA 4.0

一部の情報は古くなっている可能性があります

Profile Image of the Author
kinkinbeer135ml
SIerをやめて、プログラミングを勉強しています。
Announcement
Welcome to my blog!