富文本示例文档 #

这是一个综合性的富文本示例文档，展示了在Hugo Book主题中如何使用各种Markdown格式和功能。

📝 文本格式 #

基础文本样式 #

这是粗体文本，这是斜体文本，这是粗斜体文本。

这是删除线文本，这是行内代码。

这是高亮文本，这是下划线文本。

彩色文本 #

红色文本 | 青色文本 | 蓝色文本 | 绿色文本

文本对齐 #

特殊符号和Emoji #

• 版权符号：© ® ™
• 数学符号：∞ ∑ ∏ ∂ ∆ ∇
• 箭头符号：← → ↑ ↓ ↔ ⇐ ⇒ ⇔
• Emoji表情：🚀 💡 📊 🎯 ⚡ 🔥 💯 ✨

引用文本 #

这是一个引用块的示例。

引用可以包含多行内容，也可以包含其他格式，比如粗体和斜体。

— 作者名字

列表 #

无序列表 #

• 第一项
• 第二项
  • 子项目 1
  • 子项目 2
    • 更深层的子项目
• 第三项

有序列表 #

1. 第一步：规划
2. 第二步：设计
3. 第三步：开发
   1. 前端开发
   2. 后端开发
   3. 测试
4. 第四步：部署

任务列表 #

• 完成项目规划
• 设计系统架构
• 实现核心功能
• 编写测试用例
• 部署到生产环境

🖼️ 图片示例 #

横幅图片 #

带标题的图片 #

并排图片 #

示例图片 1

示例图片 2

居中图片 #

📊 表格示例 #

复杂表格 #

💻 代码示例 #

行内代码 #

使用 hugo server 命令启动开发服务器。

代码块 #

# Python 示例代码
def fibonacci(n):
    """计算斐波那契数列"""
    if n <= 1:
        return n
    else:
        return fibonacci(n-1) + fibonacci(n-2)

# 输出前10个斐波那契数
for i in range(10):
    print(f"F({i}) = {fibonacci(i)}")

// JavaScript 示例代码
class DataProcessor {
    constructor(data) {
        this.data = data;
    }
    
    process() {
        return this.data
            .filter(item => item.active)
            .map(item => ({
                ...item,
                processed: true,
                timestamp: new Date().toISOString()
            }))
            .sort((a, b) => a.priority - b.priority);
    }
}

const processor = new DataProcessor(rawData);
const result = processor.process();
console.log('处理结果:', result);

# Bash 脚本示例
#!/bin/bash

# 自动化部署脚本
echo "开始部署..."

# 检查环境
if [ ! -f "package.json" ]; then
    echo "错误：找不到 package.json 文件"
    exit 1
fi

# 安装依赖
npm install

# 运行测试
npm test

# 构建项目
npm run build

# 部署到服务器
rsync -av dist/ user@server:/var/www/html/

echo "部署完成！"

带高亮的代码 #

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

def calculate_metrics(data):
    # 这行会被高亮
    total = sum(data)
    # 这些行会被高亮
    average = total / len(data)
    maximum = max(data)
    minimum = min(data)
    
    return {
        'total': total,
        'average': average,
        'max': maximum,
        'min': minimum
    }

🎯 提示框和警告 #

**信息提示** 这是一个信息提示框，用于显示重要的补充信息。

**警告** 请注意这个操作可能会导致数据丢失，请提前备份。

**危险** 这个操作不可逆转，执行前请三思！

📈 图表和可视化 #

Mermaid 流程图 #

graph TD
    A[开始] --> B{条件判断}
    B -->|是| C[执行操作A]
    B -->|否| D[执行操作B]
    C --> E[记录日志]
    D --> E
    E --> F[结束]
    
    style A fill:#e1f5fe
    style F fill:#f3e5f5
    style B fill:#fff3e0

时序图 #

sequenceDiagram
    participant U as 用户
    participant F as 前端
    participant B as 后端
    participant D as 数据库
    
    U->>F: 提交登录表单
    F->>B: 发送登录请求
    B->>D: 验证用户信息
    D-->>B: 返回验证结果
    B-->>F: 返回登录状态
    F-->>U: 显示登录结果
    
    Note over U,D: 整个认证流程

📁 文件下载 #

文档下载 #

📄 下载示例PDF文档 - 演示文件下载功能

更多下载选项 #

• 📊 Excel模板 - 数据分析模板
• 📝 Word文档 - 报告模板
• 🎨 设计素材 - 图标和素材包
• 📊 示例数据文件 - JSON格式的示例数据

🔗 链接和引用 #

外部链接 #

• Hugo 官方文档
• Markdown 语法指南
• Book 主题文档

内部链接 #

• 回到首页
• 查看 AI Agent 文档
• 公司战略文档

脚注引用 #

这是一个包含脚注的段落¹，这里是另一个脚注²。

📐 数学公式 #

行内公式 #

爱因斯坦的质能方程：$E = mc^2$

圆的面积公式：$A = \pi r^2$

块级公式 #

$$ \begin{aligned} \nabla \times \vec{\mathbf{B}} -, \frac1c, \frac{\partial\vec{\mathbf{E}}}{\partial t} &= \frac{4\pi}{c}\vec{\mathbf{j}} \ \nabla \cdot \vec{\mathbf{E}} &= 4 \pi \rho \ \nabla \times \vec{\mathbf{E}}, +, \frac1c, \frac{\partial\vec{\mathbf{B}}}{\partial t} &= \vec{\mathbf{0}} \ \nabla \cdot \vec{\mathbf{B}} &= 0 \end{aligned} $$

复杂数学表达式 #

$$ \int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi} $$

$$ \sum_{n=1}^{\infty} \frac{1}{n^2} = \frac{\pi^2}{6} $$

🎨 自定义组件 #

按钮组件 #

标签页 #

详情折叠 #

📋 总结检查清单 #

完成这个富文本文档后，你应该能够：

• 理解基本的Markdown语法
• 使用各种文本格式
• 创建表格和列表
• 插入代码块和语法高亮
• 使用数学公式
• 创建流程图和时序图
• 添加提示框和警告
• 使用自定义组件
• 优化文档结构
• 添加更多交互元素

📊 统计数据展示 #

📅 项目时间线 #

🏷️ 彩色标签示例 #

📋 信息卡片 #

💡 小贴士 #

1. 性能优化：大型文档建议拆分成多个小文档
2. 图片优化：使用WebP格式，控制文件大小
3. 可访问性：为图片添加alt属性描述
4. SEO优化：合理使用标题层级和元数据
5. 移动适配：测试在移动设备上的显示效果

本文档展示了Hugo Book主题的各种功能，你可以复制这些格式来创建自己的富文本文档。