组件示例

import Timeline from '@/components/content/Timeline.astro'

<Timeline>
  <dt class="timeline-caption">时间标题</dt>
  <dd class="timeline-body">内容描述</dd>
  <dt class="timeline-caption">另一个时间</dt>
  <dd class="timeline-body">另一段内容</dd>
</Timeline>

import Tip from '@/components/content/Tip.astro'

<!-- 基础用法 -->
<Tip tip="提示的内容">小提示</Tip>

<!-- 没有图标 -->
<Tip icon={false} tip="提示内容">没有图标</Tip>

<!-- 点击复制 -->
<Tip copy>点击复制这段文字</Tip>

<!-- 自定义图标 -->
<Tip tip="自定义提示" icon="ri:information-line">带图标的提示</Tip>

import Tab from '@/components/content/Tab.astro'

<!-- 基础用法 -->
<Tab tabs={['选项卡1', '选项卡2']}>
  <div slot="tab1">选项卡1的内容</div>
  <div slot="tab2">选项卡2的内容</div>
</Tab>

<!-- 居中显示 -->
<Tab tabs={['选项卡1', '选项卡2']} center>
  <div slot="tab1">居中显示的选项卡</div>
  <div slot="tab2">内容</div>
</Tab>

<!-- 默认激活第二个选项卡 -->
<Tab tabs={['选项卡1', '选项卡2', '选项卡3']} active={2}>
  <div slot="tab1">第一个</div>
  <div slot="tab2">默认显示这个</div>
  <div slot="tab3">第三个</div>
</Tab>

import Quote from '@/components/content/Quote.astro'

<!-- 基础用法 -->
<Quote>有时候，有些话，有点意思。</Quote>

<!-- 自定义图标 -->
<Quote icon="ri:file-text-line">令图标有所指，引用亦有中心。</Quote>

<!-- 使用 Emoji/颜文字 -->
<Quote><span slot="icon">ヾ(•ω•`)o</span>图标插槽也可以是 Emoji 或颜文字。</Quote>

import ProseA from '@/components/content/ProseA.astro'

<!-- 内部链接 -->
<ProseA href="/posts/hello-world">内部链接</ProseA>

<!-- 外部链接（自动识别并添加图标） -->
<ProseA href="https://github.com">GitHub</ProseA>

<!-- 自定义图标 -->
<ProseA href="https://example.com" icon="ri:link">自定义图标</ProseA>

// 专门域名匹配（优先级高）
const specificDomainIcons: Record<string, string> = {
  'docs.microsoft.com': 'logos:microsoft-icon',
  'github.com': 'ri:github-fill',
  // ...
}

// 主域名匹配
const domainIcons: Record<string, string> = {
  'github': 'ri:github-fill',
  'bilibili': 'ri:bilibili-line',
  // ...
}

import Alert from '@/components/content/Alert.astro'

<!-- 基础用法 -->
<Alert type="success">你好</Alert>

<!-- 带标题 -->
<Alert type="question" title="问题标题">内容</Alert>

<!-- 卡片风格 -->
<Alert type="warning" variant="card">警告内容</Alert>

<!-- 扁平风格 -->
<Alert type="error" variant="flat">错误内容</Alert>

<!-- 自定义图标 -->
<Alert type="info" icon="ri:time-line" title="自定义图标" />

<!-- 标题插槽 -->
<Alert type="warning">
  <span slot="title">标题插槽的 **粗体** `code`</span>
  默认插槽内容
</Alert>

import Badge from '@/components/content/Badge.astro'

<!-- 普通带链接 -->
<Badge href="https://github.com">GitHub</Badge>

<!-- 纯文本 -->
<Badge text="纯文本" />

<!-- 纯文本指定圆形 -->
<Badge text="圆形" round />

<!-- 纯文本指定方形 -->
<Badge text="方形" square />

<!-- 带图片（默认圆形） -->
<Badge img="https://example.com/avatar.png">用户名</Badge>

<!-- 带图片指定方形 -->
<Badge img="https://example.com/avatar.png" square>用户名</Badge>

<!-- GitHub 链接自动获取头像 -->
<Badge href="https://github.com/username">用户名</Badge>

import BlogHeader from '@/components/content/BlogHeader.astro'

<!-- 默认用法 -->
<BlogHeader />

<!-- 指定标题标签 -->
<BlogHeader tag="h1" />

{
  "header": {
    "logo": "https://example.com/avatar.png",
    "title": "博客标题",
    "subtitle": "博客副标题",
    "emojiTail": ["🦌", "🍂", "🐟", "🌊"],
    "showTitle": true,
    "font": {
      "family": "AlimamaFangYuanTi, 'Noto Sans SC', sans-serif",
      "url": "https://chinese-font.netlify.app/packages/alimamafangyuanti/dist/AlimamaFangYuanTi/result.woff2"
    }
  }
}

import Blur from '@/components/content/Blur.astro'

<!-- 使用插槽 -->
<Blur>模糊文本内容</Blur>

<!-- 使用 text 属性 -->
<Blur text="模糊文本内容" />

import Chat from '@/components/content/Chat.astro'
import ChatItem from '@/components/content/ChatItem.astro'

<Chat>
  <!-- 系统消息：时间戳 -->
  <ChatItem type="system">2024-11-09 23:39:30</ChatItem>
  
  <!-- 右侧消息（自己发送） -->
  <ChatItem type="right">也许</ChatItem>
  <ChatItem type="right">我们可以聊聊天</ChatItem>
  
  <!-- 右侧消息带名字 -->
  <ChatItem type="right" name="纸鹿">我还可以有名字</ChatItem>
  
  <!-- 系统消息：撤回提示 -->
  <ChatItem type="system">纸鹿撤回了一条消息</ChatItem>
  
  <!-- 左侧消息（他人发送） -->
  <ChatItem type="left" name="用户 1">有趣</ChatItem>
  <ChatItem type="left" name="用户 1">我学到了。</ChatItem>
</Chat>

import Folding from '@/components/content/Folding.astro'

<!-- 基础用法 -->
<Folding title="折叠标题">
  折叠内容
</Folding>

<!-- 默认展开 -->
<Folding title="默认展开" open>
  默认展开的内容
</Folding>

<!-- 使用标题插槽（支持富文本） -->
<Folding>
  <span slot="title">带 **粗体** 和 <ProseA href="/">链接</ProseA> 的标题</span>
  内容
</Folding>

<!-- 嵌套使用 -->
<Folding title="外层折叠">
  外层内容
  <Folding title="内层折叠">
    内层内容
  </Folding>
</Folding>

import Key from '@/components/content/Key.astro'

<!-- 纯按键 -->
<Key code="Escape" />
<Key code="Enter" />

<!-- 自定义文本 -->
<Key text="空格" />

<!-- 修饰键（macOS 自动显示图标） -->
<Key shift />
<Key alt />
<Key ctrl />
<Key meta />

<!-- 智能适配 cmd：Windows用Ctrl，macOS用Cmd -->
<Key cmd code="k" />

<!-- 组合键 -->
<Key cmd shift code="a" />
<Key ctrl alt code="Delete" />

<!-- 强制使用/禁用图标 -->
<Key code="Control" icon />      <!-- 强制使用图标 -->
<Key code="Control" icon={false} />  <!-- 禁用图标 -->

import LinkBanner from '@/components/content/LinkBanner.astro'

<!-- 完整用法 -->
<LinkBanner
  banner="https://example.com/image.jpg"
  title="标题"
  description="描述文字"
  link="https://example.com"
/>

<!-- 不填描述时自动显示域名 -->
<LinkBanner
  banner="https://example.com/image.jpg"
  title="GitHub"
  link="https://github.com"
/>

<!-- 无图片 -->
<LinkBanner
  title="纯文字横幅"
  link="https://example.com"
/>

import LinkCard from '@/components/content/LinkCard.astro'

<!-- 完整用法 -->
<LinkCard
  title="标题"
  description="描述文字"
  icon="https://example.com/icon.jpg"
  link="https://example.com"
/>

<!-- 不填描述时自动显示域名 -->
<LinkCard
  title="GitHub"
  icon="https://github.com/favicon.ico"
  link="https://github.com"
/>

<!-- 无图标 -->
<LinkCard
  title="纯文字卡片"
  link="https://example.com"
/>

<!-- 使用插槽自定义图标 -->
<LinkCard title="自定义图标" link="https://example.com">
  <Icon name="ri:github-fill" slot="icon" />
</LinkCard>

import Pic from '@/components/content/Pic.astro'

<!-- 基础用法 -->
<Pic
  src="https://example.com/image.jpg"
  caption="图片说明文字"
/>

<!-- 使用 alt 作为说明 -->
<Pic
  src="https://example.com/image.jpg"
  alt="图片描述"
/>

<!-- 指定尺寸 -->
<Pic
  src="https://example.com/image.jpg"
  caption="指定宽度"
  width={400}
/>

<Pic
  src="https://example.com/image.jpg"
  caption="指定高度"
  height={300}
/>

<!-- 禁用灯箱功能 -->
<Pic
  src="https://example.com/image.jpg"
  caption="点击不会放大"
  zoom={false}
/>

<!-- 使用插槽自定义说明 -->
<Pic src="https://example.com/image.jpg">
  <span slot="caption">支持 <strong>富文本</strong> 说明</span>
</Pic>

import Poetry from '@/components/content/Poetry.astro'

<!-- 完整用法 -->
<Poetry
  title="诗有诗的标题"
  author="一名作者"
  footer="可选的落款"
>
如你所见，
我，
是一首——
诗。
</Poetry>

<!-- 仅标题和内容 -->
<Poetry title="静夜思" author="李白">
床前明月光，
疑是地上霜。
举头望明月，
低头思故乡。
</Poetry>

<!-- 仅内容 -->
<Poetry>
这是一首
没有标题的
小诗。
</Poetry>