My First Post

Chifan 收录于 Draft

2026-01-06 2026-10-23 约 3000 字预计阅读 6 分钟 - 次阅读

这是我的第一篇文章，用来测试 Hugo 主题的各种功能。

Mermaid 流程图测试

流程图示例

图表代码

graph TD
    A[开始] --> B{是否登录?}
    B -->|是| C[显示主页]
    B -->|否| D[跳转登录页]
    D --> E[输入账号密码]
    E --> F{验证成功?}
    F -->|是| C
    F -->|否| G[显示错误信息]
    G --> E
    C --> H[结束]graph TD
    A[开始] --> B{是否登录?}
    B -->|是| C[显示主页]
    B -->|否| D[跳转登录页]
    D --> E[输入账号密码]
    E --> F{验证成功?}
    F -->|是| C
    F -->|否| G[显示错误信息]
    G --> E
    C --> H[结束]graph TD
    A[开始] --> B{是否登录?}
    B -->|是| C[显示主页]
    B -->|否| D[跳转登录页]
    D --> E[输入账号密码]
    E --> F{验证成功?}
    F -->|是| C
    F -->|否| G[显示错误信息]
    G --> E
    C --> H[结束]

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
graph TD
    A[开始] --> B{是否登录?}
    B -->|是| C[显示主页]
    B -->|否| D[跳转登录页]
    D --> E[输入账号密码]
    E --> F{验证成功?}
    F -->|是| C
    F -->|否| G[显示错误信息]
    G --> E
    C --> H[结束]

时序图示例

图表代码

sequenceDiagram
    participant 用户
    participant 浏览器
    participant 服务器
    participant 数据库

    用户->>浏览器: 输入URL
    浏览器->>服务器: 发送HTTP请求
    服务器->>数据库: 查询数据
    数据库-->>服务器: 返回结果
    服务器-->>浏览器: 返回HTML
    浏览器-->>用户: 渲染页面sequenceDiagram
    participant 用户
    participant 浏览器
    participant 服务器
    participant 数据库

    用户->>浏览器: 输入URL
    浏览器->>服务器: 发送HTTP请求
    服务器->>数据库: 查询数据
    数据库-->>服务器: 返回结果
    服务器-->>浏览器: 返回HTML
    浏览器-->>用户: 渲染页面sequenceDiagram
    participant 用户
    participant 浏览器
    participant 服务器
    participant 数据库

    用户->>浏览器: 输入URL
    浏览器->>服务器: 发送HTTP请求
    服务器->>数据库: 查询数据
    数据库-->>服务器: 返回结果
    服务器-->>浏览器: 返回HTML
    浏览器-->>用户: 渲染页面

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
sequenceDiagram
    participant 用户
    participant 浏览器
    participant 服务器
    participant 数据库

    用户->>浏览器: 输入URL
    浏览器->>服务器: 发送HTTP请求
    服务器->>数据库: 查询数据
    数据库-->>服务器: 返回结果
    服务器-->>浏览器: 返回HTML
    浏览器-->>用户: 渲染页面

类图示例

图表代码

classDiagram
    Animal <|-- Dog
    Animal <|-- Cat
    Animal : +String name
    Animal : +int age
    Animal : +eat()
    Animal : +sleep()

    class Dog{
        +String breed
        +bark()
    }

    class Cat{
        +String color
        +meow()
    }classDiagram
    Animal <|-- Dog
    Animal <|-- Cat
    Animal : +String name
    Animal : +int age
    Animal : +eat()
    Animal : +sleep()

    class Dog{
        +String breed
        +bark()
    }

    class Cat{
        +String color
        +meow()
    }classDiagram
    Animal <|-- Dog
    Animal <|-- Cat
    Animal : +String name
    Animal : +int age
    Animal : +eat()
    Animal : +sleep()

    class Dog{
        +String breed
        +bark()
    }

    class Cat{
        +String color
        +meow()
    }

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
classDiagram
    Animal <|-- Dog
    Animal <|-- Cat
    Animal : +String name
    Animal : +int age
    Animal : +eat()
    Animal : +sleep()

    class Dog{
        +String breed
        +bark()
    }

    class Cat{
        +String color
        +meow()
    }

状态图示例

图表代码

stateDiagram-v2
    [*] --> 待处理
    待处理 --> 处理中: 开始处理
    处理中 --> 已完成: 处理成功
    处理中 --> 失败: 处理异常
    失败 --> 待处理: 重试
    已完成 --> [*]
    失败 --> [*]: 放弃stateDiagram-v2
    [*] --> 待处理
    待处理 --> 处理中: 开始处理
    处理中 --> 已完成: 处理成功
    处理中 --> 失败: 处理异常
    失败 --> 待处理: 重试
    已完成 --> [*]
    失败 --> [*]: 放弃stateDiagram-v2
    [*] --> 待处理
    待处理 --> 处理中: 开始处理
    处理中 --> 已完成: 处理成功
    处理中 --> 失败: 处理异常
    失败 --> 待处理: 重试
    已完成 --> [*]
    失败 --> [*]: 放弃

1
2
3
4
5
6
7
8
stateDiagram-v2
    [*] --> 待处理
    待处理 --> 处理中: 开始处理
    处理中 --> 已完成: 处理成功
    处理中 --> 失败: 处理异常
    失败 --> 待处理: 重试
    已完成 --> [*]
    失败 --> [*]: 放弃

甘特图示例

图表代码

gantt
    title 项目开发计划
    dateFormat  YYYY-MM-DD
    section 设计阶段
    需求分析           :done,    des1, 2026-01-01,2026-01-05
    UI设计            :active,  des2, 2026-01-06, 7d
    section 开发阶段
    前端开发          :         dev1, after des2, 14d
    后端开发          :         dev2, after des2, 14d
    section 测试阶段
    集成测试          :         test1, after dev1, 7d
    性能测试          :         test2, after dev1, 5dgantt
    title 项目开发计划
    dateFormat  YYYY-MM-DD
    section 设计阶段
    需求分析           :done,    des1, 2026-01-01,2026-01-05
    UI设计            :active,  des2, 2026-01-06, 7d
    section 开发阶段
    前端开发          :         dev1, after des2, 14d
    后端开发          :         dev2, after des2, 14d
    section 测试阶段
    集成测试          :         test1, after dev1, 7d
    性能测试          :         test2, after dev1, 5dgantt
    title 项目开发计划
    dateFormat  YYYY-MM-DD
    section 设计阶段
    需求分析           :done,    des1, 2026-01-01,2026-01-05
    UI设计            :active,  des2, 2026-01-06, 7d
    section 开发阶段
    前端开发          :         dev1, after des2, 14d
    后端开发          :         dev2, after des2, 14d
    section 测试阶段
    集成测试          :         test1, after dev1, 7d
    性能测试          :         test2, after dev1, 5d

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
gantt
    title 项目开发计划
    dateFormat  YYYY-MM-DD
    section 设计阶段
    需求分析           :done,    des1, 2026-01-01,2026-01-05
    UI设计            :active,  des2, 2026-01-06, 7d
    section 开发阶段
    前端开发          :         dev1, after des2, 14d
    后端开发          :         dev2, after des2, 14d
    section 测试阶段
    集成测试          :         test1, after dev1, 7d
    性能测试          :         test2, after dev1, 5d

饼图示例

图表代码

pie title 编程语言使用占比
    "Python" : 35
    "JavaScript" : 25
    "Go" : 20
    "Rust" : 15
    "其他" : 5pie title 编程语言使用占比
    "Python" : 35
    "JavaScript" : 25
    "Go" : 20
    "Rust" : 15
    "其他" : 5pie title 编程语言使用占比
    "Python" : 35
    "JavaScript" : 25
    "Go" : 20
    "Rust" : 15
    "其他" : 5

1
2
3
4
5
6
pie title 编程语言使用占比
    "Python" : 35
    "JavaScript" : 25
    "Go" : 20
    "Rust" : 15
    "其他" : 5

数学公式测试

行内公式

这是一个行内公式： $E = mc^2$ ，爱因斯坦的质能方程。

勾股定理： $a^2 + b^2 = c^2$

块级公式

麦克斯韦方程组：

\begin{aligned} \nabla \cdot \mathbf{E} &= \frac{\rho}{\epsilon_0} \\ \nabla \cdot \mathbf{B} &= 0 \\ \nabla \times \mathbf{E} &= -\frac{\partial \mathbf{B}}{\partial t} \\ \nabla \times \mathbf{B} &= \mu_0\mathbf{J} + \mu_0\epsilon_0\frac{\partial \mathbf{E}}{\partial t} \end{aligned}

傅里叶变换：

F(\omega) = \int_{-\infty}^{\infty} f(t) e^{-i\omega t} dt

矩阵示例：

\begin{bmatrix} a_{11} & a_{12} & a_{13} \\ a_{21} & a_{22} & a_{23} \\ a_{31} & a_{32} & a_{33} \end{bmatrix}

代码高亮测试

Python 代码

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
def fibonacci(n):
    """计算斐波那契数列"""
    if n <= 1:
        return n
    return fibonacci(n-1) + fibonacci(n-2)

# 使用列表推导式
squares = [x**2 for x in range(10)]
print(f"前10个平方数: {squares}")

# 装饰器示例
def timer(func):
    import time
    def wrapper(*args, **kwargs):
        start = time.time()
        result = func(*args, **kwargs)
        print(f"执行时间: {time.time() - start:.4f}秒")
        return result
    return wrapper

JavaScript 代码

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// 异步函数示例
async function fetchUserData(userId) {
    try {
        const response = await fetch(`/api/users/${userId}`);
        const data = await response.json();
        return data;
    } catch (error) {
        console.error('获取用户数据失败:', error);
        throw error;
    }
}

// Promise 链式调用
fetchUserData(123)
    .then(user => console.log(user.name))
    .catch(err => console.error(err));

// ES6 箭头函数和解构
const users = [
    { name: 'Alice', age: 25 },
    { name: 'Bob', age: 30 }
];

const names = users.map(({ name }) => name);
console.log(names); // ['Alice', 'Bob']

Go 代码

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
package main

import (
    "fmt"
    "sync"
)

// 并发示例
func worker(id int, jobs <-chan int, results chan<- int, wg *sync.WaitGroup) {
    defer wg.Done()
    for job := range jobs {
        fmt.Printf("Worker %d 处理任务 %d\n", id, job)
        results <- job * 2
    }
}

func main() {
    jobs := make(chan int, 100)
    results := make(chan int, 100)
    var wg sync.WaitGroup

    // 启动3个worker
    for i := 1; i <= 3; i++ {
        wg.Add(1)
        go worker(i, jobs, results, &wg)
    }

    // 发送任务
    for j := 1; j <= 5; j++ {
        jobs <- j
    }
    close(jobs)

    wg.Wait()
    close(results)
}

表格测试

基础表格

编程语言	类型	发布年份	主要用途
Python	动态类型	1991	数据科学、Web开发
Go	静态类型	2009	云原生、微服务
Rust	静态类型	2010	系统编程、性能优化
TypeScript	静态类型	2012	前端开发

对齐方式表格

左对齐	居中对齐	右对齐
文本1	文本2	文本3
A	B	C
长文本	中等	短

引用和提示

普通引用

这是一段引用文字。
可以包含多个段落。
嵌套引用也是支持的。

提示框 (FixIt 主题特性)

注意

这是一个注意提示框。

小贴士

这是一个技巧提示框，包含有用的建议。

警告

这是一个警告提示框，请注意风险。

危险

这是一个危险提示框，严重警告！

列表测试

无序列表

第一项
- 嵌套项 1
- 嵌套项 2
  - 更深层嵌套
第二项
第三项

有序列表

第一步：准备环境
第二步：安装依赖
1. 安装 Node.js
2. 安装 npm 包
第三步：开始开发

任务列表

完成的任务
另一个完成的任务
待完成的任务
另一个待完成的任务

其他元素

水平分割线

行内样式

粗体文字 斜体文字 粗斜体 ~~删除线~~ 行内代码

链接

GitHub | Google

Emoji

😄 🚀 ❤️ ⭐ 🔥 👍