基础排版
文字样式
这是一段普通文字。这是粗体，这是斜体，这是删除线，这是行内代码。
还可以使用 粗斜体 来同时强调。
无序列表
- 第一项
- 第二项
- 子项目 A
- 子项目 B
- 第三项
有序列表
- 安装 Hugo
- 创建站点
- 选择主题
- 开始写作
任务列表
- 搭建博客框架
- 配置主题
- 添加自定义功能
- 持续更新文章
引用
代码是写给人看的，附带能在机器上运行。
— Harold Abelson
嵌套引用：
第一层引用
第二层嵌套引用
第三层，兔子洞到底有多深？
分割线
代码高亮
普通代码块
def fibonacci(n: int) -> list[int]:
"""生成斐波那契数列"""
fib = [0, 1]
for i in range(2, n):
fib.append(fib[i-1] + fib[i-2])
return fib[:n]
print(fibonacci(10))带文件名的代码块
const express = require("express");
const app = express();
app.get("/", (req, res) => {
res.json({ message: "Hello, Hugo Blog!" });
});
app.listen(3000, () => {
console.log("Server running on port 3000");
});<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>我的博客</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>#!/bin/bash
hugo --minify
git add -A
git commit -m "deploy: $(date '+%Y-%m-%d %H:%M')"
git push origin master多语言测试
package main
import "fmt"
func main() {
fmt.Println("Hello, 世界!")
}:root {
--primary: #2563eb;
--radius: 8px;
}
.card {
border-radius: var(--radius);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}SELECT p.title, p.date, COUNT(c.id) AS comment_count
FROM posts p
LEFT JOIN comments c ON p.id = c.post_id
WHERE p.date >= '2026-01-01'
GROUP BY p.id
ORDER BY comment_count DESC
LIMIT 10;数学公式（KaTeX）
行内公式
质能方程 $E = mc^2$，欧拉公式 $e^{i\pi} + 1 = 0$，勾股定理 $a^2 + b^2 = c^2$。
块级公式
二次方程求根公式：
$$ x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a} $$
高斯积分：
$$ \int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi} $$
矩阵：
$$ \begin{pmatrix} a_{11} & a_{12} \ a_{21} & a_{22} \end{pmatrix} \begin{pmatrix} x_1 \ x_2 \end{pmatrix} = \begin{pmatrix} b_1 \ b_2 \end{pmatrix} $$
求和与连乘：
$$ \sum_{k=1}^{n} k = \frac{n(n+1)}{2}, \quad \prod_{k=1}^{n} k = n! $$
表格
基础表格
| 功能 | 状态 | 说明 |
|---|---|---|
| Markdown 渲染 | ✅ | 支持 GFM 扩展语法 |
| 代码高亮 | ✅ | Chroma 引擎，Monokai 主题 |
| 数学公式 | ✅ | KaTeX 渲染 |
| Mermaid 图表 | ✅ | 流程图/时序图/甘特图 |
| 图片灯箱 | ✅ | GLightbox 点击放大 |
| 加密内容 | ✅ | SHA-256 前端验证 |
对齐方式
| 左对齐 | 居中对齐 | 右对齐 |
|---|---|---|
| Hugo | 静态生成器 | Go |
| Vite | 构建工具 | JavaScript |
| Tailwind | CSS 框架 | Utility-first |
提示框（Alert）
hugo.toml 后需要重启服务才能生效。--disableLiveReload 以外的调试参数！折叠面板（Details）
点击展开：什么是 Hugo？
Hugo 是世界上最快的静态网站生成器，使用 Go 语言编写。它能在几毫秒内将 Markdown 文件转换为完整的 HTML 网站，无需数据库或运行时依赖。
核心优势：
- 构建速度极快（每秒 1000+ 页面）
- 丰富的模板系统
- 内置 Sass/SCSS 处理
- 多语言支持
点击展开：常用 Hugo 命令
hugo new posts/my-post.md # 创建新文章
hugo server -D # 启动开发服务器（含草稿）
hugo --minify # 生产构建（压缩输出）
hugo gen doc # 生成文档Mermaid 图表
流程图
graph TD
A[开始写作] --> B{文章完成?}
B -->|是| C[git add & commit]
B -->|否| A
C --> D[git push]
D --> E[自动部署]
E --> F[网站更新完成]时序图
sequenceDiagram
participant 用户
participant 浏览器
participant 服务器
用户->>浏览器: 输入网址
浏览器->>服务器: HTTP 请求
服务器-->>浏览器: 返回 HTML
浏览器-->>用户: 渲染页面甘特图
gantt
title 博客开发计划
dateFormat YYYY-MM-DD
section 基础搭建
安装 Hugo :done, a1, 2026-01-01, 1d
配置主题 :done, a2, after a1, 2d
section 功能开发
评论系统 :done, b1, 2026-01-05, 3d
搜索功能 :done, b2, after b1, 2d
自定义短代码 :active, b3, 2026-01-10, 5d
section 部署上线
配置域名 :c1, 2026-01-20, 2d
正式上线 :milestone, c2, 2026-01-22, 0d时间线（History）
加密内容
此内容已加密，请输入密码查看
B 站视频嵌入
图片与灯箱
点击下图可以放大查看（GLightbox 灯箱效果）：
链接测试
内部链接
外部链接
脚注测试
定义列表
- Hugo
- 静态网站生成器，用 Go 编写
- PaperMod
- Hugo 的极简响应式主题
- KaTeX
- 快速数学公式渲染库
特殊字符与转义
星号转义：*不是斜体*
反引号转义：`不是代码`
HTML 实体：& < > ©
长段落测试（阅读进度条）
这是一段较长的文字，用于测试阅读进度条的效果。当你向下滚动页面时，顶部应该会出现一个蓝紫渐变的进度条，显示当前的阅读进度。这个功能通过监听 scroll 事件，计算当前滚动位置与页面总高度的比例来实现。进度条使用了 CSS transition 来保证动画流畅，同时设置了较高的 z-index 确保始终显示在最顶层。
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
总结
本文测试了以下功能：
| # | 功能 | 测试方式 |
|---|---|---|
| 1 | 基础 Markdown | 标题/粗体/斜体/列表/引用 |
| 2 | 代码高亮 | 多语言 + 带文件名 |
| 3 | 数学公式 | 行内 + 块级 + 矩阵 |
| 4 | 表格 | 基础 + 对齐方式 |
| 5 | 提示框 | 4 种类型全覆盖 |
| 6 | 折叠面板 | 2 个示例 |
| 7 | Mermaid | 流程图/时序图/甘特图 |
| 8 | 时间线 | 4 个节点 |
| 9 | 加密内容 | 密码 1234 |
| 10 | B 站视频 | 嵌入播放器 |
| 11 | 图片灯箱 | 点击放大 |
| 12 | 内/外链接 | 跳转测试 |
| 13 | 脚注 | 2 个引用 |
| 14 | 阅读进度条 | 滚动页面观察顶部 |
| 15 | 目录 TOC | 右侧浮动 + 文内 |
| 16 | 版权声明 | 文末自动显示 |
| 17 | 相关文章 | 文末推荐 |
如果以上所有功能都正常显示，说明博客系统运行良好！
💬 评论