博客功能测试文章

这是一篇用于测试博客所有功能的文章。下面我们将测试各种 Markdown 语法和自定义组件。

1. 文本格式化

这是粗体文本，这是斜体文本，这是粗斜体文本。这是~~删除线文本~~，这是行内代码。

2. 列表测试

无序列表：

第一项
第二项
- 子项 1
- 子项 2
第三项

有序列表：

第一步
第二步
1. 子步骤 1
2. 子步骤 2
第三步

3. 引用测试

这是一段引用文本

这是第二行引用这是嵌套引用

4. 代码块测试

JavaScript/TypeScript

// JavaScript 代码示例
function hello(name) {
  console.log("Hello, " + name + "!");
  return true;
}

// 测试函数
const result = hello("World");

// TypeScript 接口定义
interface User {
  id: number;
  name: string;
  email?: string;
}

// 类实现
class UserService {
  private users: User[] = [];

  addUser(user: User): void {
    this.users.push(user);
  }

  getUser(id: number): User | undefined {
    return this.users.find(user => user.id === id);
  }
}

Python

# Python 类示例
class Calculator:
    def __init__(self):
        self.value = 0

    def add(self, x):
        self.value += x
        return self

    def subtract(self, x):
        self.value -= x
        return self

    def get_result(self):
        return self.value

# 链式调用示例
calc = Calculator()
result = calc.add(5).subtract(3).add(10).get_result()
print(f"Result: {result}")  # 输出: Result: 12

HTML/CSS

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试页面</title>
    <style>
        .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        .card {
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 15px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="card">
            <h1>Hello World</h1>
            <p>这是一个测试页面</p>
        </div>
    </div>
</body>
</html>

SQL

-- 创建用户表
CREATE TABLE users (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    username VARCHAR(50) NOT NULL UNIQUE,
    email VARCHAR(100) NOT NULL,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

-- 插入测试数据
INSERT INTO users (username, email) VALUES
    ('test_user', '[email protected]'),
    ('admin', '[email protected]');

-- 查询示例
SELECT u.username, COUNT(p.id) as post_count
FROM users u
LEFT JOIN posts p ON u.id = p.user_id
GROUP BY u.id
HAVING post_count > 0;

Shell 脚本

#!/bin/bash

# 检查目录是否存在
check_directory() {
    if [ -d "$1" ]; then
        echo "目录 $1 存在"
        return 0
    else
        echo "目录 $1 不存在"
        return 1
    fi
}

# 备份文件
backup_files() {
    local source_dir="$1"
    local backup_dir="$2"

    echo "开始备份..."
    tar -czf "$backup_dir/backup_$(date +%Y%m%d).tar.gz" "$source_dir"

    if [ $? -eq 0 ]; then
        echo "备份完成"
    else
        echo "备份失败"
    fi
}

# 使用示例
check_directory "/tmp" && backup_files "/home/user/docs" "/backup"

Go

package main

import (
    "fmt"
    "sync"
)

// 并发安全的计数器
type Counter struct {
    mu    sync.Mutex
    count int
}

func (c *Counter) Increment() {
    c.mu.Lock()
    defer c.mu.Unlock()
    c.count++
}

func (c *Counter) GetCount() int {
    c.mu.Lock()
    defer c.mu.Unlock()
    return c.count
}

func main() {
    counter := &Counter{}
    var wg sync.WaitGroup

    // 启动多个 goroutine 并发增加计数
    for i := 0; i < 1000; i++ {
        wg.Add(1)
        go func() {
            defer wg.Done()
            counter.Increment()
        }()
    }

    wg.Wait()
    fmt.Printf("Final count: %d\n", counter.GetCount())
}

JSON

{
  "config": {
    "name": "测试配置",
    "version": "1.0.0",
    "features": {
      "darkMode": true,
      "analytics": false
    },
    "endpoints": [
      {
        "name": "api",
        "url": "https://api.example.com",
        "timeout": 5000
      },
      {
        "name": "backup",
        "url": "https://backup.example.com",
        "timeout": 10000
      }
    ]
  }
}

YAML

version: '3'
services:
  web:
    image: nginx:alpine
    ports:
      - "80:80"
    volumes:
      - ./www:/usr/share/nginx/html
    environment:
      - NODE_ENV=production
      - API_KEY=${API_KEY}
    depends_on:
      - db
      - redis

  db:
    image: postgres:13
    environment:
      POSTGRES_USER: admin
      POSTGRES_PASSWORD: secret
      POSTGRES_DB: myapp
    volumes:
      - db_data:/var/lib/postgresql/data

volumes:
  db_data:

5. 表格测试

功能	支持情况	备注
Markdown	✓	基础语法
MDX	✓	扩展语法
代码高亮	✓	多语言
响应式设计	✓	移动端适配

6. 链接测试

7. 图片测试

普通图片：

测试图片

带链接的图片：

8. 任务列表

9. 自定义组件测试

💡

这是一个提示框组件，用于显示重要信息。

MDX优势

支持React组件

支持JSX语法

可扩展性强

维护方便

You might not use MDX if...

需要额外配置

学习曲线较陡

构建时间较长

10. 水平线测试

11. 脚注测试

这里有一个脚注¹，这里还有另一个脚注²。

12. 折叠内容

点击展开详细内容

这是折叠的内容部分，可以包含任何 Markdown 格式的文本。

列表项 1
列表项 2
列表项 3

最后

这篇文章包含了大多数常用的 Markdown 语法和自定义组件，可以用来测试博客的渲染功能是否正常工作。如果你发现任何渲染问题，请及时反馈。

Footnotes

这是第一个脚注的内容 ↩
这是第二个脚注的内容 ↩

博客功能测试文章

这是一篇用于测试博客所有功能的文章。下面我们将测试各种 Markdown 语法和自定义组件。

1. 文本格式化

这是粗体文本，这是斜体文本，这是粗斜体文本。这是~~删除线文本~~，这是行内代码。

2. 列表测试

无序列表：

第一项
第二项
- 子项 1
- 子项 2
第三项

有序列表：

第一步
第二步
1. 子步骤 1
2. 子步骤 2
第三步

3. 引用测试

这是一段引用文本

这是第二行引用这是嵌套引用

4. 代码块测试

JavaScript/TypeScript

// JavaScript 代码示例
function hello(name) {
  console.log("Hello, " + name + "!");
  return true;
}

// 测试函数
const result = hello("World");

// TypeScript 接口定义
interface User {
  id: number;
  name: string;
  email?: string;
}

// 类实现
class UserService {
  private users: User[] = [];

  addUser(user: User): void {
    this.users.push(user);
  }

  getUser(id: number): User | undefined {
    return this.users.find(user => user.id === id);
  }
}

Python

# Python 类示例
class Calculator:
    def __init__(self):
        self.value = 0

    def add(self, x):
        self.value += x
        return self

    def subtract(self, x):
        self.value -= x
        return self

    def get_result(self):
        return self.value

# 链式调用示例
calc = Calculator()
result = calc.add(5).subtract(3).add(10).get_result()
print(f"Result: {result}")  # 输出: Result: 12

HTML/CSS

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试页面</title>
    <style>
        .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        .card {
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 15px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="card">
            <h1>Hello World</h1>
            <p>这是一个测试页面</p>
        </div>
    </div>
</body>
</html>

SQL

-- 创建用户表
CREATE TABLE users (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    username VARCHAR(50) NOT NULL UNIQUE,
    email VARCHAR(100) NOT NULL,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

-- 插入测试数据
INSERT INTO users (username, email) VALUES
    ('test_user', '[email protected]'),
    ('admin', '[email protected]');

-- 查询示例
SELECT u.username, COUNT(p.id) as post_count
FROM users u
LEFT JOIN posts p ON u.id = p.user_id
GROUP BY u.id
HAVING post_count > 0;

Shell 脚本

#!/bin/bash

# 检查目录是否存在
check_directory() {
    if [ -d "$1" ]; then
        echo "目录 $1 存在"
        return 0
    else
        echo "目录 $1 不存在"
        return 1
    fi
}

# 备份文件
backup_files() {
    local source_dir="$1"
    local backup_dir="$2"

    echo "开始备份..."
    tar -czf "$backup_dir/backup_$(date +%Y%m%d).tar.gz" "$source_dir"

    if [ $? -eq 0 ]; then
        echo "备份完成"
    else
        echo "备份失败"
    fi
}

# 使用示例
check_directory "/tmp" && backup_files "/home/user/docs" "/backup"

Go

package main

import (
    "fmt"
    "sync"
)

// 并发安全的计数器
type Counter struct {
    mu    sync.Mutex
    count int
}

func (c *Counter) Increment() {
    c.mu.Lock()
    defer c.mu.Unlock()
    c.count++
}

func (c *Counter) GetCount() int {
    c.mu.Lock()
    defer c.mu.Unlock()
    return c.count
}

func main() {
    counter := &Counter{}
    var wg sync.WaitGroup

    // 启动多个 goroutine 并发增加计数
    for i := 0; i < 1000; i++ {
        wg.Add(1)
        go func() {
            defer wg.Done()
            counter.Increment()
        }()
    }

    wg.Wait()
    fmt.Printf("Final count: %d\n", counter.GetCount())
}

JSON

{
  "config": {
    "name": "测试配置",
    "version": "1.0.0",
    "features": {
      "darkMode": true,
      "analytics": false
    },
    "endpoints": [
      {
        "name": "api",
        "url": "https://api.example.com",
        "timeout": 5000
      },
      {
        "name": "backup",
        "url": "https://backup.example.com",
        "timeout": 10000
      }
    ]
  }
}

YAML

version: '3'
services:
  web:
    image: nginx:alpine
    ports:
      - "80:80"
    volumes:
      - ./www:/usr/share/nginx/html
    environment:
      - NODE_ENV=production
      - API_KEY=${API_KEY}
    depends_on:
      - db
      - redis

  db:
    image: postgres:13
    environment:
      POSTGRES_USER: admin
      POSTGRES_PASSWORD: secret
      POSTGRES_DB: myapp
    volumes:
      - db_data:/var/lib/postgresql/data

volumes:
  db_data:

5. 表格测试

功能	支持情况	备注
Markdown	✓	基础语法
MDX	✓	扩展语法
代码高亮	✓	多语言
响应式设计	✓	移动端适配

6. 链接测试

7. 图片测试

普通图片：

测试图片

带链接的图片：

8. 任务列表

9. 自定义组件测试

💡

这是一个提示框组件，用于显示重要信息。

MDX优势

支持React组件

支持JSX语法

可扩展性强

维护方便

You might not use MDX if...

需要额外配置

学习曲线较陡

构建时间较长

10. 水平线测试

11. 脚注测试

这里有一个脚注¹，这里还有另一个脚注²。

12. 折叠内容

点击展开详细内容

这是折叠的内容部分，可以包含任何 Markdown 格式的文本。

列表项 1
列表项 2
列表项 3

最后

这篇文章包含了大多数常用的 Markdown 语法和自定义组件，可以用来测试博客的渲染功能是否正常工作。如果你发现任何渲染问题，请及时反馈。

Footnotes

这是第一个脚注的内容 ↩
这是第二个脚注的内容 ↩