Cloud-Blog/content/posts/showcase/index.md

title, published, date, updatedDate, description, image, alt, tags, categories

title	published	date	updatedDate	description	image	alt	tags	categories
示例展示：展示本博客所有功能	false	2025-12-31	2025-12-31	一篇演示文档，展示站点可用的组件、标记和布局用法，方便检视和测试。	https://img.rhen.cloud/file/Blog/1761401028478_PixPin_2025-10-03_15-44-52.png	示例展示	Demo Showcase Components	Development

目录

• 前言
• 组件：Github 卡片
• 提示/警告（Warning）
• 告警框（Alert）
• 代码块与文件名
• 图片与媒体
• 列表与表格
• 结语

---

前言

这篇文章用于演示本博客的常用功能与组件。你可以把它当作一个活的测试页来检查组件渲染、样式和 Markdown 支持。

组件：Github 卡片

下面使用新增的 GithubCard 组件来渲染一个公开仓库的信息（服务器端获取 GitHub API）：

你也可以把它嵌入到任意文章中：<GithubCard repo="owner/repo" />。

告警框（Alert）

Alert 组件支持多种类型，可以用来展示不同类型的通知信息：

这是一个问题类型的告警框，适合展示常见问题或疑问。 这是一个信息类型的告警框，适合展示一般性的提示或说明。 这是一个警告类型的告警框，使用了 `card` 属性来增加视觉突出度。 这是一个错误类型的告警框，使用了 `flat` 属性来展示扁平风格。

你也可以自定义图标和颜色：

这个 Alert 使用了自定义的图标和颜色。

代码块与文件名

支持带文件名的代码块：

echo "示例安装脚本"

以及高亮语言：

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）。