108 lines
2.8 KiB
Markdown
108 lines
2.8 KiB
Markdown
---
|
||
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）：
|
||
|
||
<!-- <GithubCard repo="RhenCloud/Cloud-Home" /> -->
|
||
|
||
你也可以把它嵌入到任意文章中：`<GithubCard repo="owner/repo" />`。
|
||
|
||
## 告警框（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()
|
||
```
|
||
|
||
## 图片与媒体
|
||
|
||
普通图片插入：
|
||
|
||
|
||
|
||
如果需要展示外部嵌入或本地图片，确保把资源放入 `public/` 或 `content/` 对应位置。
|
||
|
||
## 列表与表格
|
||
|
||
无序列表：
|
||
|
||
- 项目 A
|
||
- 项目 B
|
||
- 子项 B1
|
||
- 项目 C
|
||
|
||
表格示例：
|
||
|
||
| 名称 | 描述 |
|
||
| --- | --- |
|
||
| GithubCard | 渲染仓库信息 |
|
||
| Warning | 显示警告/提示 |
|
||
|
||
## 结语
|
||
|
||
这篇示例文章覆盖了：组件嵌入（GithubCard、Warning、Alert）、命名槽与默认槽、代码块、图片、列表与表格。若需我把这篇文章在本地 dev 环境中打开并截图验证渲染，请告诉我运行命令（`pnpm dev` / `npm run dev` / `yarn dev`）。
|