---
title: "示例展示：展示本博客所有功能"
published: false
date: 2025-12-31
updatedDate: 2025-12-31
description: "一篇演示文档，展示站点可用的组件、标记和布局用法，方便检视和测试。"
image: https://img.rhen.cloud/file/Blog/1761401028478_PixPin_2025-10-03_15-44-52.png
alt: "示例展示"
tags: ["Demo", "Showcase", "Components"]
categories: ["Development"]
---
## 目录
- 前言
- 组件：Github 卡片
- 提示/警告（Warning）
- 告警框（Alert）
- 代码块与文件名
- 图片与媒体
- 列表与表格
- 结语
---
## 前言
这篇文章用于演示本博客的常用功能与组件。你可以把它当作一个活的测试页来检查组件渲染、样式和 Markdown 支持。
## 组件：Github 卡片
下面使用新增的 `GithubCard` 组件来渲染一个公开仓库的信息（服务器端获取 GitHub API）：
你也可以把它嵌入到任意文章中：``。
## 告警框（Alert）
`Alert` 组件支持多种类型，可以用来展示不同类型的通知信息：
这是一个问题类型的告警框，适合展示常见问题或疑问。
这是一个信息类型的告警框，适合展示一般性的提示或说明。
这是一个警告类型的告警框，使用了 `card` 属性来增加视觉突出度。
这是一个错误类型的告警框，使用了 `flat` 属性来展示扁平风格。
你也可以自定义图标和颜色：
这个 Alert 使用了自定义的图标和颜色。
## 代码块与文件名
支持带文件名的代码块：
```bash [install.sh]
echo "示例安装脚本"
```
以及高亮语言：
```python [test.py]
def hello():
print("Hello from showcase")
hello()
```
## 图片与媒体
普通图片插入：
如果需要展示外部嵌入或本地图片，确保把资源放入 `public/` 或 `content/` 对应位置。
## 列表与表格
无序列表：
- 项目 A
- 项目 B
- 子项 B1
- 项目 C
表格示例：
| 名称 | 描述 |
| ---------- | ------------- |
| GithubCard | 渲染仓库信息 |
| Warning | 显示警告/提示 |
## 结语
这篇示例文章覆盖了：组件嵌入（GithubCard、Warning、Alert）、命名槽与默认槽、代码块、图片、列表与表格。若需我把这篇文章在本地 dev 环境中打开并截图验证渲染，请告诉我运行命令（`pnpm dev` / `npm run dev` / `yarn dev`）。