🎨 新功能展示

本文展示博客优化后的各种新功能。

1. Mermaid 流程图

系统架构图

1
2
3
4
5
6

graph LR
    A[用户] --> B[Nginx]
    B --> C[Hugo 静态站点]
    C --> D[文章内容]
    C --> E[图片资源]
    B --> F[SSL/TLS]

部署流程

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

sequenceDiagram
    participant Dev as 开发者
    participant Git as GitHub
    participant Server as 服务器
    participant Nginx as Nginx

    Dev->>Git: git push
    Server->>Git: git pull
    Server->>Server: hugo build
    Server->>Nginx: rsync 部署
    Nginx->>Dev: 访问验证

状态机

1
2
3
4
5
6

stateDiagram-v2
    [*] --> 草稿
    草稿 --> 审核中: 提交
    审核中 --> 已发布: 通过
    审核中 --> 草稿: 驳回
    已发布 --> [*]

2. 表格支持

功能对比表

功能优化前优化后说明
文章目录❌✅自动生成 TOC
流程图❌✅Mermaid 支持
相关文章❌✅智能推荐
代码高亮基础✅Monokai 主题
响应式基础✅移动端优化

性能数据

指标数值单位
文章总数276篇
加载时间<1秒
代码覆盖95%-

3. 任务列表

已完成功能

  • 文章目录（TOC）
  • Mermaid 流程图
  • 相关文章推荐
  • 系列文章导航
  • 代码高亮优化
  • 响应式设计

待添加功能

  • 评论系统（giscus）
  • 访问统计（umami）
  • 全文搜索增强
  • 暗色模式优化

4. 代码块增强

Bash 脚本

1
2
3
4
5
6
7
8

#!/bin/bash
# 部署脚本示例

echo "开始部署..."
git pull origin main
hugo --minify
rsync -av public/ /var/www/
echo "部署完成！"

Python 代码

1
2
3
4
5
6
7
8
9

def fibonacci(n):
    """计算斐波那契数列"""
    if n <= 1:
        return n
    return fibonacci(n-1) + fibonacci(n-2)

# 测试
for i in range(10):
    print(f"F({i}) = {fibonacci(i)}")

Go 代码

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

package main

import "fmt"

func main() {
    // 并发示例
    ch := make(chan int)
    go func() {
        ch <- 42
    }()
    fmt.Println(<-ch)
}

5. 引用块

提示：这是一个优化后的引用块样式。

支持多行内容，并且有更好的视觉效果。

警告：重要的安全提示会以这种方式展示。

6. 脚注支持

这是一个带脚注的句子1，还有另一个脚注2。

7. 内联代码

使用 hugo server 命令启动本地预览，配置文件是 hugo.toml。

8. 图片展示

示例图片

图片会自动添加圆角和阴影效果

总结

博客现在支持：

  1. ✅ Mermaid 流程图 - 可视化系统架构和流程
  2. ✅ 增强表格 - 更好的数据展示
  3. ✅ 任务列表 - 清晰的待办事项
  4. ✅ 代码高亮 - Monokai 主题
  5. ✅ 引用块 - 优化的视觉样式
  6. ✅ 脚注 - 学术风格支持
  7. ✅ 响应式 - 移动端友好

最后更新: 2026-02-12

  1. 这是第一个脚注的内容。 ↩︎

  2. 这是第二个脚注，可以包含更多详细信息。 ↩︎