暮光指南:高级自定义
Guide for Template - Advanced Customization
本指南涵盖了暮光模板中可用的高级自定义选项和功能,从全局配置到专门的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:::note2突出显示用户即使在浏览时也应注意的信息。3:::45:::tip6帮助用户更成功的可选信息。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.
此页面可能不是最新版本。