Xs's Blog

for test

Tue, 28 Apr 2026 01:28:00 GMT

Zen of Python（Python之禅）

Beautiful is better than ugly. （优美比丑陋好）<br>
Explicit is better than implicit.（清晰比晦涩好）<br>
Simple is better than complex.（简单比复杂好）<br>
Complex is better than complicated.（复杂比错综复杂好）<br>
Flat is better than nested.（扁平比嵌套好）<br>
Sparse is better than dense.（稀疏比密集好）<br>
Readability counts.（可读性很重要）<br>
Special cases aren't special enough to break the rules.（特殊情况也不应该违反这些规则）<br>
Although practicality beats purity.（但现实往往并不那么完美）<br>
Errors should never pass silently.（异常不应该被静默处理）<br>
Unless explicitly silenced.（除非你希望如此）<br>
In the face of ambiguity, refuse the temptation to guess.（遇到模棱两可的地方，不要胡乱猜测）<br>
There should be one-- and preferably only one --obvious way to do it.（肯定有一种通常也是唯一一种最佳的解决方案）<br>
Although that way may not be obvious at first unless you're Dutch.（虽然这种方案并不是显而易见的，因为你不是那个荷兰人[^1]）<br>
Now is better than never.（现在开始做比不做好）<br>
Although never is often better than *right* now.（不做比盲目去做好[^2]）<br>
If the implementation is hard to explain, it's a bad idea.（如果一个实现方案难于理解，它通常不是一个好的方案）<br>
If the implementation is easy to explain, it may be a good idea.（如果一个实现方案易于理解，它很有可能是一个好的方案）<br>
Namespaces are one honking great idea -- let's do more of those!（命名空间非常有用，我们应当多加利用）<br>

[^1]:这里指的是 Python 之父 Guido van Rossumm。 [^2]:极限编程中的YAGNI原则

如何取消 Guide for Template - Getting Started 的置顶

Tue, 28 Apr 2026 00:00:00 GMT

:::note 这篇文章专门说明如何取消模板示例文章 Guide for Template - Getting Started 的置顶，不会自动修改原文章内容。 :::

置顶是由哪个字段控制的

Twilight 的文章列表会优先显示 pinned: true 的文章。

目前模板里的 Getting Started 文章位于 [src/content/posts/guide/Getting Started.md](src/content/posts/guide/Getting Started.md)，它的 Front-matter 里有这一行：

pinned: true

只要这个值是 true，这篇文章就会排在文章列表顶部。

如何取消置顶

打开 [src/content/posts/guide/Getting Started.md](src/content/posts/guide/Getting Started.md)，把这一行：

pinned: true

改成：

pinned: false

保存后重新构建或重新部署站点，文章列表就会恢复为按发布时间排序，这篇文章也不会再显示置顶图标。

为什么这样改就生效

文章排序逻辑会先判断 pinned，再判断发布时间。也就是说：

pinned: true 的文章会优先排在前面。
当多篇文章都不是置顶时，才会继续按发布时间从新到旧排序。

如果你还想彻底移除这篇模板文章

除了取消置顶，你也可以直接：

修改这篇文章的标题和正文，改成你自己的内容。
或者直接删除 [src/content/posts/guide/Getting Started.md](src/content/posts/guide/Getting Started.md)。

这样首页就不会再显示模板默认教程。

Guide for Template - Advanced Customization

Sat, 10 Feb 2024 00:00:00 GMT

:::note 模板教学说明：这是一篇 Twilight 自带的进阶示例文章，主要用于演示主题配置、Markdown 扩展和卡片组件。实际建站时，你可以把这里的示例替换成自己的教程，或者在不需要时删除。 :::

This guide covers advanced customization options and features available in the Twilight template, from global configurations to specialized Markdown extensions.

中文翻译：本指南介绍 Twilight 模板的进阶能力，包括全局配置项、可视化效果、组件调整，以及 Markdown 扩展能力。

Global Configuration

中文翻译：全局配置主要通过 twilight.config.yaml 完成，涉及站点信息、主题样式、背景和侧边栏组件等。

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

中文翻译：这一节演示 Markdown 扩展功能，例如 GitHub 卡片、音乐卡片、提示块（admonitions）和 spoiler 语法。

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.

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

Create a GitHub repository card with the code ::github{repo="Spr-Aachen/Twilight"}.

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

Music Cards

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

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

Local ::music{title="深海之息" artist="Youzee Music" cover="https://p1.music.126.net/PhKOqFtljgHDDpKYM2ADUA==/109951169858309716.jpg" audio="assets/music/深海之息.m4a" lrc="assets/music/深海之息.lrc"}

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

:::note
Highlights information that users should take into account, even when skimming.
:::

:::tip
Optional information to help a user be more successful.
:::

Custom Titles

The title of the admonition can be customized. :::note[MY CUSTOM TITLE] This is a note with a custom title. :::
```
:::note[MY CUSTOM TITLE]
This is a note with a custom title.
:::
```
GitHub Syntax

[!TIP] The GitHub syntax is also supported.
```
> [!TIP]
> The GitHub syntax is also supported.
```
Spoiler

You can add spoilers to your text. The text also supports Markdown syntax.

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

For more details, check the Documentation.

中文翻译：更多完整用法请查看官方文档 Documentation。

Video Example

Thu, 02 Dec 2021 00:00:00 GMT

:::note 模板教学说明：这是一篇模板自带的示例文章，用来演示如何在 Markdown 文章里嵌入 YouTube、Bilibili 等视频。你可以继续保留它做测试，也可以按同样方式替换成你自己的视频教程。 :::

Instructions

Just copy the embed code from YouTube or other platforms, and paste it in the markdown file as below:

中文翻译：操作方式很简单，从 YouTube 或其他平台复制嵌入代码，直接粘贴到 Markdown 正文中即可。

---
title: Include Video in the Post
published: 2023-10-19
// ...
---

<iframe width="100%" height="468" src="https://www.youtube.com/embed/yrn7eInApnc?si=gGZeFbPcfMpJ1uV3_" title="YouTube video player" frameborder="0" allowfullscreen></iframe>

Examples

中文翻译：下面给出 YouTube 和 Bilibili 两种常见嵌入示例，你可以直接替换其中的链接地址使用。

YouTube

Bilibili

Mermaid Example

Wed, 02 Nov 2011 00:00:00 GMT

:::note 模板教学说明：这是一篇模板自带的 Mermaid 教学文章，用来演示流程图、时序图、甘特图等图表语法。你可以把它当作语法速查表，也可以删掉后改成自己的图表教程。 :::

Complete Guide to Markdown with Mermaid Diagrams

This article demonstrates how to create various complex diagrams using Mermaid in Markdown documents, including flowcharts, sequence diagrams, Gantt charts, class diagrams, and state diagrams.

中文翻译：本文演示如何在 Markdown 中使用 Mermaid 绘制常见图表，包括流程图、时序图、甘特图、类图、状态图和饼图。

Flowchart Example

Flowcharts are excellent for representing processes or algorithm steps.

中文翻译：流程图适合展示流程步骤和算法分支结构。

graph TD
    A[Start] --> B{Condition Check}
    B -->|Yes| C[Process Step 1]
    B -->|No| D[Process Step 2]
    C --> E[Subprocess]
    D --> E
    subgraph E [Subprocess Details]
        E1[Substep 1] --> E2[Substep 2]
        E2 --> E3[Substep 3]
    end
    E --> F{Another Decision}
    F -->|Option 1| G[Result 1]
    F -->|Option 2| H[Result 2]
    F -->|Option 3| I[Result 3]
    G --> J[End]
    H --> J
    I --> J

Sequence Diagram Example

Sequence diagrams show interactions between objects over time.

中文翻译：时序图用于表达多个对象在时间线上的交互顺序。

sequenceDiagram
    participant User
    participant WebApp
    participant Server
    participant Database

    User->>WebApp: Submit Login Request
    WebApp->>Server: Send Auth Request
    Server->>Database: Query User Credentials
    Database-->>Server: Return User Data
    Server-->>WebApp: Return Auth Result
    
    alt Auth Successful
        WebApp->>User: Show Welcome Page
        WebApp->>Server: Request User Data
        Server->>Database: Get User Preferences
        Database-->>Server: Return Preferences
        Server-->>WebApp: Return User Data
        WebApp->>User: Load Personalized Interface
    else Auth Failed
        WebApp->>User: Show Error Message
        WebApp->>User: Prompt Re-entry
    end

Gantt Chart Example

Gantt charts are perfect for displaying project schedules and timelines.

中文翻译：甘特图适合展示项目排期、任务持续时间和里程碑节点。

gantt
    title Website Development Project Timeline
    dateFormat  YYYY-MM-DD
    axisFormat  %m/%d
    
    section Design Phase
    Requirements Analysis      :a1, 2023-10-01, 7d
    UI Design                 :a2, after a1, 10d
    Prototype Creation        :a3, after a2, 5d
    
    section Development Phase
    Frontend Development      :b1, 2023-10-20, 15d
    Backend Development       :b2, after a2, 18d
    Database Design           :b3, after a1, 12d
    
    section Testing Phase
    Unit Testing              :c1, after b1, 8d
    Integration Testing       :c2, after b2, 10d
    User Acceptance Testing   :c3, after c2, 7d
    
    section Deployment
    Production Deployment     :d1, after c3, 3d
    Launch                    :milestone, after d1, 0d

Class Diagram Example

Class diagrams show the static structure of a system, including classes, attributes, methods, and their relationships.

中文翻译：类图用于描述系统的静态结构，包括类、属性、方法及其关系。

classDiagram
    class User {
        +String username
        +String password
        +String email
        +Boolean active
        +login()
        +logout()
        +updateProfile()
    }
    
    class Article {
        +String title
        +String content
        +Date publishDate
        +Boolean published
        +publish()
        +edit()
        +delete()
    }
    
    class Comment {
        +String content
        +Date commentDate
        +addComment()
        +deleteComment()
    }
    
    class Category {
        +String name
        +String description
        +addArticle()
        +removeArticle()
    }
    
    User "1" -- "*" Article : writes
    User "1" -- "*" Comment : posts
    Article "1" -- "*" Comment : has
    Article "1" -- "*" Category : belongs to

State Diagram Example

State diagrams show the sequence of states an object goes through during its life cycle.

中文翻译：状态图用于描述对象在生命周期中的状态变化过程。

stateDiagram-v2
    [*] --> Draft
    
    Draft --> UnderReview : submit
    UnderReview --> Draft : reject
    UnderReview --> Approved : approve
    Approved --> Published : publish
    Published --> Archived : archive
    Published --> Draft : retract
    
    state Published {
        [*] --> Active
        Active --> Hidden : temporarily hide
        Hidden --> Active : restore
        Active --> [*]
        Hidden --> [*]
    }
    
    Archived --> [*]

Pie Chart Example

Pie charts are ideal for displaying proportions and percentage data.

中文翻译：饼图适合展示占比和百分比类数据。

pie title Website Traffic Sources Analysis
    "Search Engines" : 45.6
    "Direct Access" : 30.1
    "Social Media" : 15.3
    "Referral Links" : 6.4
    "Other Sources" : 2.6

Conclusion

Mermaid is a powerful tool for creating various types of diagrams in Markdown documents. This article demonstrated how to use flowcharts, sequence diagrams, Gantt charts, class diagrams, state diagrams, and pie charts. These diagrams can help you express complex concepts, processes, and data structures more clearly.

To use Mermaid, simply specify the mermaid language in a code block and describe the diagram using concise text syntax. Mermaid will automatically convert these descriptions into beautiful visual diagrams.

Try using Mermaid diagrams in your next technical blog post or project documentation - they will make your content more professional and easier to understand!

中文翻译：Mermaid 能让技术文档与博客中的结构化信息更直观。你只需在代码块中使用 mermaid 语法，即可自动生成图表。建议在后续文章中尝试使用，以提升可读性与专业度。

Guide for Template - Getting Started

Tue, 02 Oct 2001 00:00:00 GMT

:::note 模板教学说明：这是一篇 Twilight 自带的入门示例文章，主要用于演示文章 Front-matter 和目录结构。你可以保留它作为参考，也可以在熟悉后改写成自己的内容，或者直接删除。 :::

Tip: For the things that are not mentioned in this guide, you may find the answers in the Astro Docs.

中文翻译：提示，如果本指南没有提到你遇到的问题，可以在 Astro 文档中继续查找答案。

Front-matter of Posts

中文翻译：这一节展示文章头部 Front-matter 的常用字段格式，创建新文章时可直接参考。

---
title: My First Blog Post
published: 2020-02-02
description: This is the first post of my new Astro blog.
cover: ./cover.jpg
coverInContent: false
tags: []
category: Guides
comment: true
draft: false
---

Attribute	Description
`title`	The title of the post.
`published`	The date the post was published.
`pinned`	Whether this post is pinned to the top of the post list.
`description`	A short description of the post. Displayed on index page.
`cover`	The cover image path of the post. <br/>1. Start with `http://` or `https://`: For web image <br/>2. Start with `/`: For image in `public` dir <br/>3. With none of the prefixes: Relative to the markdown file
`coverInContent`	Whether to show the cover image in the post content.
`tags`	The tags of the post.
`category`	The category of the post <br/>1. Single category: `category: Guides` <br/>2. Multi-category: `category: [Guides, Getting Started]`
`licenseName`	The license name for the post content.
`author`	The author of the post.
`sourceLink`	The source link or reference for the post content.
`comment`	Whether to enable comment for this post. Default is `true`.
`draft`	If this post is still a draft, which won't be displayed.

中文翻译：上表说明了常见字段的用途，其中 pinned 控制是否置顶，draft 为 true 时文章不会在正式环境显示。

Where to Place the Post Files

Your post files should be placed in src/content/posts/ directory. You can also create sub-directories to better organize your posts and assets.

中文翻译：文章文件建议放在 src/content/posts/ 目录中，也可以按主题建立子目录来整理文章与配图资源。

src/content/posts/
├── post-1.md
└── post-2/
    ├── cover.jpg
    └── index.md