标题测试

text

第一个一级标题

以下是 10种常见编程语言 的实用代码片段，均为经典入门场景（含语法特性、核心功能），可直接用于 Hugo 博客（配合代码高亮标识即可生效）：

Python（数据处理+列表推导）

# 功能：计算1-10的偶数平方和（体现列表推导、内置函数）
def calculate_even_square_sum():
    # 列表推导式筛选偶数并计算平方
    even_squares = [x*x for x in range(1, 11) if x % 2 == 0]
    return sum(even_squares)

# 调用函数并打印结果
result = calculate_even_square_sum()
print(f"1-10偶数的平方和：{result}")  # 输出：220

JavaScript（DOM操作+箭头函数）

// 功能：点击按钮修改页面文本（体现DOM操作、箭头函数、事件监听）
document.addEventListener('DOMContentLoaded', () => {
  // 获取按钮和文本元素
  const btn = document.getElementById('changeTextBtn');
  const textElem = document.getElementById('targetText');
  
  // 箭头函数绑定点击事件
  btn.addEventListener('click', () => {
    const newText = `更新时间：${new Date().toLocaleString()}`;
    textElem.textContent = newText; // 修改文本内容
    textElem.style.color = '#2c3e50'; // 修改样式
  });
});

// HTML结构（需配合使用）
/*
<button id="changeTextBtn">点击更新</button>
<p id="targetText">等待更新...</p>
*/

Go（结构体+接口）

// 功能：定义动物接口及实现（体现Go的接口隐式实现特性）
package main

import "fmt"

// 定义接口
type Animal interface {
	Sound() string // 接口方法
}

// 定义结构体
type Dog struct {
	Name string
}

type Cat struct {
	Name string
}

// Dog实现Animal接口
func (d Dog) Sound() string {
	return fmt.Sprintf("%s：汪汪汪", d.Name)
}

// Cat实现Animal接口
func (c Cat) Sound() string {
	return fmt.Sprintf("%s：喵喵喵", c.Name)
}

func main() {
	animals := []Animal{Dog{"旺财"}, Cat{"咪酱"}}
	for _, animal := range animals {
		fmt.Println(animal.Sound()) // 多态调用
	}
}

Java（类与继承）

// 功能：抽象类与子类实现（体现面向对象核心特性）
abstract class Shape {
    // 抽象方法（子类必须实现）
    public abstract double calculateArea();
}

// 圆形子类
class Circle extends Shape {
    private double radius;

    public Circle(double radius) {
        this.radius = radius;
    }

    @Override
    public double calculateArea() {
        return Math.PI * radius * radius; // 圆面积公式
    }
}

// 矩形子类
class Rectangle extends Shape {
    private double width;
    private double height;

    public Rectangle(double width, double height) {
        this.width = width;
        this.height = height;
    }

    @Override
    public double calculateArea() {
        return width * height; // 矩形面积公式
    }
}

public class Main {
    public static void main(String[] args) {
        Shape circle = new Circle(5);
        Shape rectangle = new Rectangle(4, 6);
        
        System.out.printf("圆面积：%.2f\n", circle.calculateArea()); // 78.54
        System.out.printf("矩形面积：%.2f\n", rectangle.calculateArea()); // 24.00
    }
}

C++（模板函数+STL）

// 功能：模板函数+向量容器（体现泛型编程与STL使用）
#include <iostream>
#include <vector>
#include <algorithm> // 用于sort函数

// 模板函数：打印任意类型的向量
template <typename T>
void printVector(const std::vector<T>& vec) {
    for (const auto& elem : vec) {
        std::cout << elem << " ";
    }
    std::cout << std::endl;
}

int main() {
    // 整数向量
    std::vector<int> nums = {3, 1, 4, 1, 5, 9};
    std::cout << "排序前：";
    printVector(nums);
    
    // STL排序函数
    std::sort(nums.begin(), nums.end());
    std::cout << "排序后：";
    printVector(nums);
    
    return 0;
}

C#（LINQ查询+面向对象）

// 功能：LINQ查询筛选对象列表（体现C# LINQ特性）
using System;
using System.Collections.Generic;
using System.Linq;

// 定义学生类
public class Student {
    public string Name { get; set; }
    public int Age { get; set; }
    public double Score { get; set; }
}

class Program {
    static void Main() {
        // 学生数据列表
        List<Student> students = new List<Student> {
            new Student { Name = "张三", Age = 18, Score = 92.5 },
            new Student { Name = "李四", Age = 19, Score = 88.0 },
            new Student { Name = "王五", Age = 18, Score = 95.0 }
        };

        // LINQ查询：筛选18岁且分数≥90的学生
        var qualifiedStudents = from s in students
                               where s.Age == 18 && s.Score >= 90
                               select new { s.Name, s.Score };

        // 打印结果
        Console.WriteLine("18岁高分学生：");
        foreach (var student in qualifiedStudents) {
            Console.WriteLine($"姓名：{student.Name}，分数：{student.Score}");
        }
    }
}

PHP（数组操作+文件读取）

<?php
// 功能：数组处理+读取文件内容（体现PHP数组特性与文件操作）
header("Content-Type: text/html; charset=utf-8");

// 关联数组：存储用户信息
$users = [
    ["name" => "小明", "gender" => "男", "age" => 22],
    ["name" => "小红", "gender" => "女", "age" => 20]
];

// 遍历数组并打印
echo "<h3>用户列表</h3>";
foreach ($users as $user) {
    echo "姓名：{$user['name']}，性别：{$user['gender']}，年龄：{$user['age']}<br>";
}

// 读取文件内容（需确保文件存在）
$filePath = "test.txt";
if (file_exists($filePath)) {
    $content = file_get_contents($filePath);
    echo "<h3>文件内容</h3>";
    echo nl2br($content); // 保留换行符
} else {
    echo "文件不存在！";
}
?>

Ruby（迭代器+哈希表）

# 功能：哈希表操作+迭代器（体现Ruby简洁语法）
# 定义哈希表：存储商品信息
products = {
  "apple" => { name: "苹果", price: 5.99, stock: 100 },
  "banana" => { name: "香蕉", price: 3.99, stock: 150 },
  "orange" => { name: "橙子", price: 4.99, stock: 80 }
}

# 迭代哈希表：打印库存≥100的商品
puts "库存充足的商品："
products.each do |code, info|
  if info[:stock] >= 100
    puts "#{info[:name]} - 价格：#{info[:price]}元，库存：#{info[:stock]}件"
  end
end

# 计算所有商品总价（假设各买一件）
total_price = products.sum { |code, info| info[:price] }
puts "\n各买一件的总价：#{total_price.round(2)}元"

TypeScript（接口+类型定义）

// 功能：接口定义+类型约束（体现TS静态类型特性）
// 定义用户接口
interface User {
  id: number;
  username: string;
  email: string;
  isActive?: boolean; // 可选属性
}

// 定义函数：格式化用户信息
function formatUser(user: User): string {
  const status = user.isActive ? "活跃" : "未活跃";
  return `ID：${user.id}，用户名：${user.username}，邮箱：${user.email}，状态：${status}`;
}

// 实例化用户对象
const user1: User = {
  id: 1,
  username: "johndoe",
  email: "john@example.com",
  isActive: true
};

// 调用函数并打印
console.log(formatUser(user1));
// 输出：ID：1，用户名：johndoe，邮箱：john@example.com，状态：活跃

HTML+CSS+JS（前端交互组件）

<!-- 功能：简单计数器组件（体现前端三剑客配合） -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>计数器</title>
    <style>
        .counter {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 18px;
            padding: 20px;
            max-width: 300px;
            margin: 20px auto;
            border: 1px solid #eee;
            border-radius: 8px;
        }
        .btn {
            padding: 8px 16px;
            border: none;
            border-radius: 4px;
            background: #2c3e50;
            color: white;
            cursor: pointer;
        }
        .btn:hover {
            background: #34495e;
        }
        #count {
            font-weight: bold;
            color: #e74c3c;
        }
    </style>
</head>
<body>
    <div class="counter">
        <button class="btn" id="decrease">-</button>
        <span>当前计数：<span id="count">0</span></span>
        <button class="btn" id="increase">+</button>
    </div>

    <script>
        let count = 0;
        const countElem = document.getElementById('count');
        const increaseBtn = document.getElementById('increase');
        const decreaseBtn = document.getElementById('decrease');

        // 增加计数
        increaseBtn.addEventListener('click', () => {
            count++;
            countElem.textContent = count;
        });

        // 减少计数（不小于0）
        decreaseBtn.addEventListener('click', () => {
            if (count > 0) count--;
            countElem.textContent = count;
        });
    </script>
</body>
</html>

以下是 完整的标准 Markdown 语法示例（含核心语法+常用扩展语法），所有示例均兼容 Hugo（及主流 Markdown 渲染器），可直接用于博客写作、文档编写，配合之前的代码高亮配置可完美渲染：

一、基础语法

标题（六级）

语法：# 一级标题 ~ ###### 六级标题（# 后需加空格）

# 一级标题（最大）
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题（最小）

渲染效果：

一级标题（最大）
二级标题
三级标题
四级标题
五级标题
六级标题（最小）

段落与换行

  • 段落：直接输入文字，段落间空一行分隔；
  • 换行：行尾加 2 个空格 + 回车（或直接空一行）。
这是第一个段落，包含普通文本内容。
行尾加两个空格  （这里有两个空格）
实现强制换行。

这是第二个段落（与上一段空一行分隔），Markdown 会自动处理段落间距。

渲染效果：

这是第一个段落，包含普通文本内容。
行尾加两个空格
实现强制换行。

这是第二个段落（与上一段空一行分隔），Markdown 会自动处理段落间距。

文本强调（粗体/斜体/删除线）

*斜体文本*（单星号）
_斜体文本_（单下划线）
**粗体文本**（双星号）
__粗体文本__（双下划线）
***粗斜体文本***（三星号）
___粗斜体文本___（三下划线）
~~删除线文本~~（双波浪线）

渲染效果：

斜体文本
斜体文本
粗体文本
粗体文本
粗斜体文本
粗斜体文本
删除线文本

列表（有序/无序/嵌套）

（1）无序列表

语法：-/*/+ + 空格（三者效果一致）

- 无序列表项 1（减号）
* 无序列表项 2（星号）
+ 无序列表项 3（加号）

渲染效果：

  • 无序列表项 1（减号）
  • 无序列表项 2（星号）
  • 无序列表项 3（加号）
（2）有序列表

语法：数字 + . + 空格（数字无需连续，渲染时自动排序）

1. 有序列表项 1
2. 有序列表项 2
5. 有序列表项 3（数字不连续，渲染仍为 3）

渲染效果：

  1. 有序列表项 1
  2. 有序列表项 2
  3. 有序列表项 3（数字不连续，渲染仍为 3）
（3）嵌套列表（缩进 4 空格或 1 个制表符）
- 外层无序列表
    1. 内层有序列表 1
    2. 内层有序列表 2
        - 内层嵌套无序列表
- 外层无序列表 2

渲染效果：

  • 外层无序列表
    1. 内层有序列表 1
    2. 内层有序列表 2
      • 内层嵌套无序列表
  • 外层无序列表 2

链接（内联/引用/锚点）

（1）内联链接（最常用）

语法：[链接文本](链接地址 "可选标题")（标题hover时显示）

[Hugo 官方文档](https://gohugo.io/ "Hugo 官方网站")
[我的博客](https://example.com)（无标题）

渲染效果：

Hugo 官方文档
我的博客（无标题）

（2）引用链接（复用链接）

语法：先定义 [链接标识]: 链接地址 "可选标题"，再使用 [链接文本][链接标识]

这是 [Hugo 文档][hugo-docs]，这是 [GitHub][github]。

[hugo-docs]: https://gohugo.io/ "Hugo Docs"
[github]: https://github.com/ "GitHub"

渲染效果：

这是 Hugo 文档，这是 GitHub。

（3）锚点链接（跳转到页面内标题）

语法：[跳转文本](#标题文本)（标题文本需小写，空格替换为 -）

[跳转到一级标题](#一级标题)
[跳转到列表部分](#4-列表有序无序嵌套)

渲染效果：点击后跳转到页面内对应标题位置（Hugo 自动生成锚点）。

图片（内联/引用）

语法：![alt文本](图片地址 "可选标题")（alt文本为图片加载失败时显示的内容）

# 内联图片（网络图片）
![Hugo -logo](https://gohugo.io/images/hugo-logo-wide.svg "Hugo 官方 Logo")

# 内联图片（本地图片，Hugo 中需放在 static 目录）
![本地图片示例](./images/photo.jpg "本地图片")

# 引用图片（复用地址）
![GitHub Logo][github-logo]
[github-logo]: https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png

渲染效果：显示图片，hover 显示标题，加载失败显示 alt 文本。

引用（块引用）

语法：> + 空格（支持嵌套，加多个 >）

> 这是一级引用（单箭头）
> 引用内容可以换行，只需在每行开头加 >
>> 这是二级引用（双箭头，嵌套）
>>> 这是三级引用（三箭头）
>
> 引用中可以包含其他语法：
> - 无序列表
> **粗体文本**

渲染效果：

这是一级引用（单箭头）
引用内容可以换行，只需在每行开头加 >

这是二级引用（双箭头，嵌套）

这是三级引用（三箭头）

引用中可以包含其他语法：

  • 无序列表
    粗体文本

代码（行内/代码块）

（1）行内代码

语法：`代码内容`（反引号包裹）

行内代码示例：`print("Hello Markdown")`、`const x = 10`

渲染效果：行内代码示例：print("Hello Markdown")、const x = 10

（2）代码块（支持语法高亮）

语法：+ 语言标识（如 python、javascript），结束用

```go
// Go 语言代码块（配合 Hugo 高亮）
package main
import "fmt"
func main() {
    fmt.Println("Hello Code Block!")
}

渲染效果：带语法高亮的代码块（需配合之前的 Chroma CSS）。

#### 9. 分隔线
语法：`---`/`***`/`___`（单独一行，前后空行，三者效果一致）
```markdown
文本上方的分隔线
---
文本中间的分隔线
***
文本下方的分隔线
___

二、扩展语法（Hugo 兼容）

表格（支持对齐）

语法：| 分隔列，第二行用 : 控制对齐（:--- 左对齐、---:右对齐、:---:居中对齐）

| 姓名   | 年龄 | 分数  |
|--------|------|-------|
| 张三   | 18   | 92.5  |
| 李四   | 19   | 88.0  |
| 王五   | 18   | 95.0  |

# 带对齐的表格
| 左对齐 | 右对齐 | 居中对齐 |
|:-------|-------:|:--------:|
| 文本1  | 数值1  | 内容1    |
| 文本2  | 数值2  | 内容2    |

渲染效果：

姓名年龄分数
张三1892.5
李四1988.0
王五1895.0
左对齐右对齐居中对齐
文本1数值1内容1
文本2数值2内容2

任务列表（复选框）

语法：- [ ] 未完成 / - [x] 已完成（[ ] 中需加空格，x 不区分大小写）

- [x] 完成 Markdown 语法学习
- [x] 编写代码片段
- [ ] 发布 Hugo 博客
- [ ] 优化网站样式

渲染效果：

  • 完成 Markdown 语法学习
  • 编写代码片段
  • 发布 Hugo 博客
  • 优化网站样式

脚注（注释说明）

语法：[^脚注标识] 定义引用，页面底部用 [^脚注标识]: 脚注内容 定义说明

这是需要注释的文本[^1]，这是另一个注释[^note]。

[^1]: 这是第一个脚注的详细说明（支持换行和链接：[Hugo](https://gohugo.io)）
[^note]: 这是第二个脚注的说明，标识可以是字母或数字

渲染效果：

这是需要注释的文本1，这是另一个注释2。

定义列表（术语+解释）

语法：术语 单独一行，下一行用 : + 空格 写解释（支持嵌套）

Markdown
: 一种轻量级标记语言，用于快速编写文档
: 兼容大部分博客平台和静态站点生成器（如 Hugo）

Hugo
: 静态站点生成器
    - 基于 Go 语言开发
    - 渲染速度快
    - 内置代码高亮

渲染效果：

Markdown
一种轻量级标记语言，用于快速编写文档
兼容大部分博客平台和静态站点生成器（如 Hugo）
Hugo
静态站点生成器
  • 基于 Go 语言开发
  • 渲染速度快
  • 内置代码高亮

转义字符（避免语法冲突）

当需要显示 Markdown 语法符号（如 #、*、[ 等）时，用 \ 转义：

  • 这不是斜体（* 被转义）
    链接文本（方括号被转义，显示原始文本）

Hugo 兼容说明

  1. 以上所有语法（包括扩展语法如表格、脚注、任务列表）均在 Hugo 中默认支持，无需额外配置；
  2. 代码块的语法高亮需配合之前提到的 Chroma CSS 引入，否则仅显示纯文本代码块；
  3. 部分主题可能对表格、任务列表的样式有自定义，可通过修改主题 CSS 调整；
  4. 若需使用更冷门的扩展语法（如数学公式、Mermaid 图表），Hugo 需安装对应插件或启用扩展渲染器（如 Goldmark）。

将这些语法示例直接复制到 Hugo 的 content 目录下的 .md 文件中，即可自动渲染为美观的网页内容，配合之前的代码高亮配置，完美适配博客写作需求！将这些语法示例直接复制到 Hugo 的 content 目录下的 .md 文件中，即可自动渲染为美观的网页内容，配合之前的代码高亮配置，完美适配博客写作需求！将这些语法示例直接复制到 Hugo 的 content 目录下的 .md 文件中，即可自动渲染为美观的网页内容，配合之前的代码高亮配置，完美适配博客写作需求！将这些语法示例直接复制到 Hugo 的 content 目录下的 .md 文件中，即可自动渲染为美观的网页内容，配合之前的代码高亮配置，完美适配博客写作需求！

额外测试

测试文字

  1. 将这些语法示例直接
  2. 将这些语法示例直接
  3. 将这些语法示例直接
  • 将这些语法示例直接
  • 将这些语法示例直接
  • 将这些语法示例直接
  • 将这些语法示例直接

图片测试

alt text

alt text

alt text

第二个一级标题

text

text

  1. 这是第一个脚注的详细说明（支持换行和链接：Hugo） ↩︎

  2. 这是第二个脚注的说明，标识可以是字母或数字 ↩︎