博客功能完整测试

本文档整合了喵洛阁博客的所有功能测试，包括 Markdown 基础语法、Alert 提示框、数学公式、特殊样式、卡片组件等。

一、Markdown 基础语法

1.1 标题

使用 1-6 个井号 # 表示标题：

# 这是一级标题
## 这是二级标题
### 这是三级标题
#### 这是四级标题
##### 这是五级标题
###### 这是六级标题

渲染效果：

这是一级标题

这是二级标题

这是三级标题

这是四级标题

这是五级标题

这是六级标题

1.2 段落与换行

段落之间用空行分隔：

这是第一段。

这是第二段。

在行尾添加两个空格表示换行：

这是第一行  
这是第二行

1.3 文本样式

粗体：使用 **文本** 或 __文本__

斜体：使用 *文本* 或 _文本_

粗斜体：使用 ***文本***

删除线：使用 ~~文本~~

行内代码：使用 `代码`

1.4 列表

无序列表：

- 第一项
- 第二项
  - 嵌套项 A
  - 嵌套项 B

渲染效果：

• 第一项
• 第二项
  • 嵌套项 A
  • 嵌套项 B

有序列表：

1. 第一项
2. 第二项
   1. 嵌套项 A
   2. 嵌套项 B

渲染效果：

1. 第一项
2. 第二项
   1. 嵌套项 A
   2. 嵌套项 B

任务清单：

- [x] 已完成任务
- [ ] 未完成任务
- [ ] 另一个未完成任务

渲染效果：

• 已完成任务
• 未完成任务
• 另一个未完成任务

1.5 引用

使用 > 表示引用：

> 这是一段引用文本。
> 可以包含多行。

渲染效果：

这是一段引用文本。 可以包含多行。

嵌套引用：

> 外层引用
>
> > 内层引用

渲染效果：

外层引用

内层引用

1.6 代码块

使用三个反引号包裹代码，并指定语言：

```javascript
function greet(name) {
    return `Hello, ${name}!`;
}

console.log(greet('World'));
```

渲染效果：

function greet(name) {
    return `Hello, ${name}!`;
}

console.log(greet('World'));

1.7 表格

| 水果   | 颜色 | 口感 |
| ------ | ---- | ---- |
| 西瓜🍉 | 绿色 | 甜   |
| 葡萄🍇 | 紫色 | 酸   |

渲染效果：

对齐方式：

| 左对齐 | 居中  | 右对齐 |
| :----- | :---: | -----: |
| 内容   | 内容  |   内容 |

渲染效果：

1.8 链接与图片

链接：

[链接文本](https://example.com)
[带标题的链接](https://example.com "标题")

渲染效果：

链接文本

图片：

![图片描述](https://jsd.268682.xyz/gh/Kemeow0815/img@main/img/bg.webp)
![带标题的图片](https://jsd.268682.xyz/gh/Kemeow0815/img@main/img/bg.webp "这是标题")

渲染效果：

1.9 水平线

使用三个或更多星号、减号或下划线：

---
***
___

渲染效果：

二、Alert 提示框 展示

2.1 基础类型

2.2 多行内容

2.3 嵌套代码块

console.log('Hello from alert box!');

2.4 自定义标题

三、数学公式（KaTeX）

3.1 行内公式

使用 $公式$ 表示行内公式：

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

求和公式：$\sum_{i=1}^{n} x_i = X$

3.2 块级公式

使用 $$公式$$ 表示块级公式：

薛定谔方程：

3.3 复杂公式

麦克斯韦方程组：

3.4 矩阵

3.5 分段函数

3.6 极限与积分

极限：

高斯积分：

四、特殊样式

4.1 模糊效果

这是一个模糊效果。

对于桌面端，鼠标移入时会移除模糊效果，点击后会保持3秒清晰显示；对于移动设备，点击后移除模糊效果，当同时满足点击后超过3秒和页面滑动才会变为模糊状态。

4.2 拼音标注

拼pīn音yīn

君きみの名なは

4.3 彩虹文字

这是一个彩虹文字效果。

4.4 下划线

这个文字下面有下划线效果。

4.5 嵌套效果

上面的样式可以进行嵌套：

这是一个模糊并且带拼pīn音yīn的彩cǎi虹hóng

五、卡片组件

5.1 音乐卡片

5.2 GitHub 卡片

六、引用块

七、视频嵌入

使用 <iframe> 标签插入视频：

<iframe src="//player.bilibili.com/player.html?isOutside=true&aid=112823891921963&bvid=BV1n281ePEd9&cid=500001622491427&p=1" 
        scrolling="no" 
        frameborder="no" 
        framespacing="0" 
        allowfullscreen="true" 
        width="100%" 
        height="468">
</iframe>

八、Typst 渲染

基于 Typst.ts 实现的 Typst 渲染。

复杂示例（Waves）：

九、目录测试

9.1 一级标题

9.1.1 二级标题 A

9.1.2 二级标题 B

9.2 另一个一级标题

9.2.1 二级标题

9.2.1.1 三级标题

9.2.1.2 另一个三级标题

十、总结

本文档测试了喵洛阁博客的所有核心功能：

1. ✅ Markdown 基础语法
2. ✅ Alert 提示框组件
3. ✅ KaTeX 数学公式
4. ✅ 特殊文本样式（模糊、拼音、彩虹、下划线）
5. ✅ 卡片组件（音乐、GitHub）
6. ✅ 引用块
7. ✅ 视频嵌入
8. ✅ Typst 渲染
9. ✅ 目录生成

💡 提示: 更多功能详情请参考 Wiki 文档