博客功能测试

这篇文章用于测试博客模板的各种功能，包括基本的Markdown语法、数学公式渲染、图表显示等。

1. 基础Markdown语法测试

文本格式化

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

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

列表测试

无序列表

• 第一项
• 第二项
  • 嵌套项目1
  • 嵌套项目2
• 第三项

有序列表

1. 第一步
2. 第二步
   1. 子步骤A
   2. 子步骤B
3. 第三步

链接和图片

这是一个链接

引用块

这是一个引用块。

引用可以包含多行内容。

这是嵌套引用。

表格

2. 代码块测试

Python代码

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

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

JavaScript代码

// 打赏功能JavaScript
function showRewardModal() {
    const modal = document.getElementById('rewardModal');
    if (modal) {
        modal.classList.add('show');
        document.body.style.overflow = 'hidden';
    }
}

// 数组操作示例
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(x => x * 2);
console.log(doubled); // [2, 4, 6, 8, 10]

CSS样式

.reward-button {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
    border: none;
    border-radius: 8px;
    padding: 1rem 2rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.reward-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 25px -5px rgba(137, 138, 196, 0.3);
}

3. KaTeX数学公式测试

行内公式

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

块级公式

二次方程求根公式

$$x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$$

傅里叶变换

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

矩阵表示

$$\begin{bmatrix} a & b \ c & d \end{bmatrix} \begin{bmatrix} x \ y \end{bmatrix} = \begin{bmatrix} ax + by \ cx + dy \end{bmatrix}$$

求和公式

$$\sum_{i=1}^{n} i = \frac{n(n+1)}{2}$$

积分

$$\int_0^1 x^2 dx = \left[\frac{x^3}{3}\right]_0^1 = \frac{1}{3}$$

希腊字母和特殊符号

$$\alpha + \beta = \gamma \quad \forall \epsilon > 0, \exists \delta > 0$$

4. Mermaid图表测试

流程图

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 数据库
    
    用户->>浏览器: 访问博客
    浏览器->>服务器: 请求页面
    服务器->>数据库: 查询文章
    数据库-->>服务器: 返回数据
    服务器-->>浏览器: 返回HTML
    浏览器-->>用户: 显示页面

类图

---
title: Animal example
---
classDiagram
    note "From Duck till Zebra"
    Animal <|-- Duck
    note for Duck "can fly\ncan swim\ncan dive\ncan help in debugging"
    Animal <|-- Fish
    Animal <|-- Zebra
    Animal : +int age
    Animal : +String gender
    Animal: +isMammal()
    Animal: +mate()
    class Duck{
        +String beakColor
        +swim()
        +quack()
    }
    class Fish{
        -int sizeInFeet
        -canEat()
    }
    class Zebra{
        +bool is_wild
        +run()
    }

饼图

pie title 博客文章分类分布
    "技术文章" : 45
    "生活随笔" : 25
    "学习笔记" : 20
    "项目分享" : 10

5. 任务列表

• 完成博客基础框架
• 添加Markdown支持
• 集成KaTeX数学公式
• 添加Mermaid图表支持
• 优化移动端体验
• 添加搜索功能
• 实现评论系统
• 添加RSS订阅

6. 警告框和提示

注意： 这是一个重要的提示信息。

提示： 记得测试打赏功能是否正常工作。

警告： 请确保所有功能在不同浏览器中都能正常运行。