暮光指南:進階自訂
Guide for Template - Advanced Customization
本指南涵蓋 Twilight 模板中可用的進階自訂選項與功能,從全域設定到專門的 Markdown 擴充功能。
全域設定
twilight.config.yaml 檔案是您部落格設定的核心。以下是一些您可以調整的進階設定:
網站與在地化
-
語言與翻譯:使用
site.translate.enable啟用客戶端翻譯。您可以選擇不同的服務並設定自動偵測。 -
自訂字型:透過在
site.font下提供 CSS 連結或檔案路徑來新增您自己的字型。
視覺效果
-
主題顏色:調整
site.themeColor.hue(0-360)來變更部落格的主要顏色。 -
桌布模式:選擇
banner、fullscreen或none。您也可以啟用carousel來輪播多張桌布,並搭配kenBurns效果。 -
波浪效果:使用
site.wallpaper.banner.waves.enable切換橫幅上的動態水波漣漪效果。 -
粒子效果:使用
particle.enable啟用背景中的浮動粒子。
使用者介面
-
導覽列透明度:將
site.wallpaper.banner.navbar.transparentMode調整為semi、full或semifull。 -
側邊欄小工具:在
sidebar.components中重新排序或切換側邊欄元件,例如profile、announcement、categories、tags、toc和statistics。
Markdown 擴充功能
GitHub 儲存庫卡片
您可以新增連結到 GitHub 儲存庫的動態卡片,在頁面載入時,會從 GitHub API 擷取儲存庫資訊。
使用程式碼 ::github{repo="Spr-Aachen/Twilight"} 建立一個 GitHub 儲存庫卡片。
1::github{repo="Spr-Aachen/Twilight"}音樂卡片
- 線上
1::music{meting="https://meting.spr-aachen.com/api?server=netease&type=song&id=1390882521"}- 本地
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:::note2Highlights information that users should take into account, even when skimming.3:::45:::tip6Optional information to help a user be more successful.7::: -
自訂標題
可以自訂提示區塊的標題。
我的自訂標題這是一個帶有自訂標題的筆記。
1:::note[我的自訂標題]2這是一個帶有自訂標題的筆記。3::: -
GitHub 語法
TipGitHub 語法 也受支援。
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, 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.
此页面可能不是最新版本。