update

content/blogs/showcase/index.md

@@ -0,0 +1,119 @@
+---
+title: "示例展示：展示本博客所有功能"
+published: true
+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）：
+
+<!-- <GithubCard repo="RhenCloud/Cloud-Home" /> -->
+
+你也可以把它嵌入到任意文章中：`<GithubCard repo="owner/repo" />`。
+
+## 提示/警告（Warning）
+
+使用站内 `Warning` 组件展示一个警告框（支持命名 title 槽或 props 回退）：
+
+::Warning{title="注意"}
+这是通过 `::Warning` 区块语法渲染的示例警告。
+::
+
+或者使用组件语法（支持 slot 或 props）：
+
+<Warning title="另一个警告">这里是警告内容（slot）示例。</Warning>
+
+## 告警框（Alert）
+
+`Alert` 组件支持多种类型，可以用来展示不同类型的通知信息：
+
+<Alert type="question" title="这是什么？">
+这是一个问题类型的告警框，适合展示常见问题或疑问。
+</Alert>
+
+<Alert type="info" title="提示信息">
+这是一个信息类型的告警框，适合展示一般性的提示或说明。
+</Alert>
+
+<Alert type="warning" title="警告消息" card>
+这是一个警告类型的告警框，使用了 `card` 属性来增加视觉突出度。
+</Alert>
+
+<Alert type="error" title="错误提示" flat>
+这是一个错误类型的告警框，使用了 `flat` 属性来展示扁平风格。
+</Alert>
+
+你也可以自定义图标和颜色：
+
+<Alert type="info" icon="ph:files-duotone" color="var(--c-accent)" title="自定义样式">
+这个 Alert 使用了自定义的图标和颜色。
+</Alert>
+
+## 代码块与文件名
+
+支持带文件名的代码块：
+
+```bash [install.sh]
+echo "示例安装脚本"
+```
+
+以及高亮语言：
+
+```python [test.py]
+def hello():
+  print("Hello from showcase")
+
+hello()
+```
+
+## 图片与媒体
+
+普通图片插入：
+
+![示例截图](https://img.rhen.cloud/file/Blog/1761401002178_PixPin_2025-10-03_15-29-07.png)
+
+如果需要展示外部嵌入或本地图片，确保把资源放入 `public/` 或 `content/` 对应位置。
+
+## 列表与表格
+
+无序列表：
+
+- 项目 A
+- 项目 B
+  - 子项 B1
+- 项目 C
+
+表格示例：
+
+| 名称 | 描述 |
+| --- | --- |
+| GithubCard | 渲染仓库信息 |
+| Warning | 显示警告/提示 |
+
+## 结语
+
+这篇示例文章覆盖了：组件嵌入（GithubCard、Warning、Alert）、命名槽与默认槽、代码块、图片、列表与表格。若需我把这篇文章在本地 dev 环境中打开并截图验证渲染，请告诉我运行命令（`pnpm dev` / `npm run dev` / `yarn dev`）。