自己添加的一些组件的测试2

Tue, 13 Jan 2026 00:00:00 GMT

Tab 组件测试

基本用法

居中布局

指定默认激活标签

Timeline 组件测试

基本用法

多层时间线

Tip 组件测试

基本提示

带复制功能

带自定义图标

使用 text 属性

基本用法

使用 text 属性

混合使用

基本按键

组合按键

使用 cmd 属性

方向键

特殊按键

使用 text 属性

带图标

LinkBanner 组件测试

基本用法

带背景图片

无描述（显示域名）

LinkCard 组件测试

基本用法

带图标

无描述（显示域名）

使用自定义图标插槽

<LinkCard title="带自定义图标的网站" description="这是一个带自定义图标的链接卡片" link="https://example.com"

import Tab from '@/components/content/Tab.astro'; import Timeline from '@/components/content/Timeline.astro'; import Tip from '@/components/content/Tip.astro'; import Blur from '@/components/content/Blur.astro'; import Key from '@/components/content/Key.astro'; import LinkBanner from '@/components/content/LinkBanner.astro'; import LinkCard from '@/components/content/LinkCard.astro';

自己添加的一些组件的测试

Sun, 04 Jan 2026 00:00:00 GMT

import LinkWithIcon from '../../../components/content/LinkWithIcon.astro' import Badge from '../../../components/content/Badge.astro' import Poetry from '../../../components/content/Poetry.astro' import Alert from '../../../components/content/Alert.astro' import Chat from '../../../components/content/Chat.astro' import Folding from '../../../components/content/Folding.astro' import Pic from '../../../components/content/Pic.astro' import MediumZoom from '../../../components/content/MediumZoom.astro' import Quote from '../../../components/content/Quote.astro'

LinkWithIcon 组件测试

这是一个测试文档，用于演示 LinkWithIcon 组件的功能。

基本使用

GitHub

Twitter

YouTube

B站

知乎

自定义图标

使用 GitHub 图标的示例链接

使用 Twitter 图标的示例链接

使用 YouTube 图标的示例链接

自定义颜色和大小

GitHub (自定义颜色和大小)

Twitter (自定义颜色和大小)

自定义类名

GitHub (自定义类名)

Badge 组件测试

基本用法

超链接功能测试

基本文本徽章带链接

GitHub 链接（自动显示头像）

自定义图片徽章带链接

方形徽章带链接

圆形徽章带链接

外部链接强制标记

纯图标链接徽章

Poetry 诗歌组件测试

基本用法

带标题和作者

完整示例

<Poetry title="将进酒" author="李白" footer="《全唐诗》卷一百六十四"

君不见黄河之水天上来，奔流到海不复回。君不见高堂明镜悲白发，朝如青丝暮成雪。人生得意须尽欢，莫使金樽空对月。天生我材必有用，千金散尽还复来。烹羊宰牛且为乐，会须一饮三百杯。岑夫子，丹丘生，将进酒，杯莫停。与君歌一曲，请君为我倾耳听。钟鼓馔玉不足贵，但愿长醉不复醒。古来圣贤皆寂寞，惟有饮者留其名。陈王昔时宴平乐，斗酒十千恣欢谑。主人何为言少钱，径须沽取对君酌。五花马，千金裘，呼儿将出换美酒，与尔同销万古愁。

Alert 提示组件测试

基本用法

这是一个默认类型的提示框

不同类型的提示框

这是一个提示类型的提示框

这是一个信息类型的提示框

这是一个问题类型的提示框

这是一个警告类型的提示框

这是一个错误类型的提示框

带自定义标题的提示框

这是一个带自定义标题的提示框

这是一个带自定义标题的警告提示框

带卡片样式的提示框

这是一个带卡片样式的提示框

这是一个带卡片样式和自定义标题的信息提示框

带扁平样式的提示框

这是一个带扁平样式的提示框

这是一个带扁平样式和自定义标题的错误提示框

带自定义内容的提示框

带自定义图标和颜色的提示框

这是一个带自定义图标和颜色的提示框

这是一个带自定义图标、颜色和标题的提示框

Chat 聊天组件测试

基本用法

Markdown 渲染

HTML 渲染

撤回和删除消息

完整聊天示例

<Chat messages={[ { id: '15', side: 'left', content: '晚上好！', author: '小明', avatar: 'https://picsum.photos/200/200?random=1', }, { id: '16', side: 'right', content: '晚上好，小明！', author: '我', avatar: 'https://picsum.photos/200/200?random=2', }, { id: '17', side: 'left', content: '你今天学习了什么？', author: '小明', avatar: 'https://picsum.photos/200/200?random=1', }, { id: '18', side: 'right', content: '我今天学习了 Astro 组件开发，还创建了一个 Chat 组件。\n\n它支持：\n1. 左右消息布局\n2. Markdown 渲染\n3. HTML 渲染\n4. 撤回消息提示\n5. 删除消息提示\n6. 支持头像图片\n7. 支持显示名称', author: '我', avatar: 'https://picsum.photos/200/200?random=2', }, { id: '19', side: 'left', type: 'recall', author: '小明', avatar: 'https://picsum.photos/200/200?random=1', }, { id: '20', side: 'left', content: '听起来很厉害！能给我看看效果吗？', author: '小明', avatar: 'https://picsum.photos/200/200?random=1', }, { id: '21', side: 'right', type: 'delete', author: '我', avatar: 'https://picsum.photos/200/200?random=2', }, { id: '22', side: 'right', content: '当然可以！你现在看到的就是 Chat 组件的效果。', author: '我', avatar: 'https://picsum.photos/200/200?random=2', }, { id: '23', side: 'left', content: '太棒了！我也想学习 Astro 框架。', author: '小明', avatar: 'https://picsum.photos/200/200?random=1', }, { id: '24', side: 'right', content: '加油！ Astro 是一个很棒的框架，值得学习。\n\n> 学习如逆水行舟，不进则退。', author: '我', avatar: 'https://picsum.photos/200/200?random=2', }, ]} />

头像和名称示例

日期显示示例

Folding 折叠组件测试

基本用法

带有 Markdown 内容

粗体文本 和 斜体文本 也可以正常显示。

// 代码块也能正常工作
console.log("Hello, Folding Component!");

使用插槽自定义标题

使用不同标签作为标题

嵌套折叠面板

<Folding title="第三层折叠面板">
  这是第三层折叠面板的内容，嵌套层级可以根据需要继续扩展。
</Folding>

默认展开的折叠面板

这个面板在页面加载时就会自动展开
用户可以点击标题将其收起
可以用于展示重要信息或经常访问的内容

// 使用示例
<Folding title="默认展开" open>
  内容
</Folding>

钟神秀 | ZSX's Blog

自己添加的一些组件的测试2

Tab 组件测试

基本用法

居中布局

指定默认激活标签

Timeline 组件测试

基本用法

多层时间线

Tip 组件测试

基本提示

带复制功能

带自定义图标

使用 text 属性

基本用法

使用 text 属性

混合使用

基本按键

组合按键

使用 cmd 属性

方向键

特殊按键

使用 text 属性

带图标

LinkBanner 组件测试

基本用法

带背景图片

无描述（显示域名）

LinkCard 组件测试

基本用法

带图标

无描述（显示域名）

使用自定义图标插槽

自己添加的一些组件的测试

LinkWithIcon 组件测试

基本使用

自定义图标

自定义颜色和大小

自定义类名

Badge 组件测试

基本用法

超链接功能测试

基本文本徽章带链接

GitHub 链接（自动显示头像）

自定义图片徽章带链接

方形徽章带链接

圆形徽章带链接

外部链接强制标记

纯图标链接徽章

Poetry 诗歌组件测试

基本用法

带标题和作者

完整示例

Alert 提示组件测试

基本用法

不同类型的提示框

带自定义标题的提示框

带卡片样式的提示框

带扁平样式的提示框

带自定义内容的提示框

带自定义图标和颜色的提示框

Chat 聊天组件测试

基本用法

Markdown 渲染

HTML 渲染

撤回和删除消息

完整聊天示例

头像和名称示例

日期显示示例

Folding 折叠组件测试

基本用法

带有 Markdown 内容

使用插槽自定义标题

使用不同标签作为标题

嵌套折叠面板

默认展开的折叠面板

默认展开的插槽标题示例

带有 Alert 组件

Pic 图片组件测试

基本用法