🎴 卡片容器语法示例

本文档介绍纸鸢博客中支持的 VitePress 风格卡片容器语法，用于在文档中创建醒目的信息提示块。

💡 提示：本文档中的所有语法示例均已在纸鸢博客中测试通过，可直接复制使用。

🎯 卡片容器类型

纸鸢博客支持以下 5 种卡片容器类型：

📝 基础语法

1️⃣ Info 信息卡片

用于展示一般性的信息提示。

语法：

::: info
这是信息卡片的内容。
:::

效果：

带自定义标题：

::: info 自定义标题
这是带自定义标题的信息卡片。
:::

效果：

2️⃣ Tip 提示卡片

用于展示有用的技巧和建议。

语法：

::: tip
这是提示卡片的内容。
:::

效果：

带自定义标题：

::: tip 💡 最佳实践
这是带自定义标题的提示卡片。
:::

效果：

3️⃣ Warning 警告卡片

用于提醒用户注意潜在的问题。

语法：

::: warning
这是警告卡片的内容。
:::

效果：

带自定义标题：

::: warning ⚠️ 注意事项
这是带自定义标题的警告卡片。
:::

效果：

4️⃣ Danger 危险卡片

用于警告用户可能导致严重后果的操作。

语法：

::: danger
这是危险卡片的内容。
:::

效果：

带自定义标题：

::: danger 🚫 严重警告
这是带自定义标题的危险卡片。
:::

效果：

5️⃣ Details 详情卡片

用于创建可折叠的详情内容，点击标题可以展开或收起。

语法：

::: details 点击展开查看详情
这是可折叠的详情内容。

支持多行文本和 Markdown 格式：
- 列表项 1
- 列表项 2
- 列表项 3
:::

效果：

🎨 高级用法

1️⃣ 卡片内使用 Markdown

卡片容器支持所有 Markdown 语法：

::: tip 丰富的内容支持
卡片内支持多种 Markdown 元素：

**粗体文本** 和 *斜体文本*

- 无序列表项
- 另一个列表项

1. 有序列表项
2. 另一个有序项

> 引用块内容

行内代码 `const x = 1` 也支持
:::

效果：

2️⃣ 卡片内使用代码块

::: info 代码示例
以下是 JavaScript 代码示例：

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

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

效果：

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

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

3️⃣ 嵌套使用

卡片容器可以嵌套在其他元素中：

::: tip 使用步骤
按照以下步骤操作：

1. 第一步：准备工作
   ::: warning
   确保环境已正确配置
   :::
2. 第二步：执行命令
3. 第三步：验证结果
:::

效果：

4️⃣ 多个卡片连续使用

::: info 信息
这是第一条信息。
:::

::: tip 提示
这是第二条提示。
:::

::: warning 警告
这是第三条警告。
:::

效果：

💡 最佳实践

1️⃣ 选择合适的卡片类型

• 使用 info 展示一般性信息
• 使用 tip 分享有用的技巧
• 使用 warning 提醒潜在问题
• 使用 danger 标记严重警告
• 使用 details 隐藏可选内容

2️⃣ 标题使用建议

• 保持标题简洁明了
• 可以使用 emoji 增加视觉效果
• 自定义标题应准确描述内容

3️⃣ 内容长度控制

• 卡片内容不宜过长
• 复杂内容可使用 details 折叠
• 保持内容清晰易读

4️⃣ 视觉层次

• 避免连续使用过多卡片
• 合理搭配不同类型的卡片
• 保持文档整体美观

📝 完整示例模板

---
title: 文档标题
description: 文档描述
date: 2026-04-05
tags: 标签1、标签2
cover: /assets/cover-image.jpg
---

# 文档标题

::: info 概述
这是文档的概述部分，介绍文档的主要内容。
:::

## 主要章节

::: tip 💡 提示
这里有一些有用的技巧和建议。
:::

### 注意事项

::: warning ⚠️ 警告
这里是需要注意的事项。
:::

### 重要提醒

::: danger 🚫 危险
这里是严重的警告信息。
:::

## 高级用法

::: details 点击查看高级配置
这里是可以折叠的详细配置说明。

- 配置项 1
- 配置项 2
- 配置项 3
:::

🎨 样式特性

纸鸢博客的卡片容器具有以下样式特性：

• 玻璃拟态效果：半透明背景配合模糊效果
• 渐变色彩：每种类型都有独特的渐变配色
• 悬停动画：鼠标悬停时有轻微的上浮效果
• 暗色模式：自动适配系统的暗色模式偏好
• 响应式设计：在移动设备上自动调整布局

🕊️ 白木 原创开发 🔗 gl.baimu.live