主题组件
在内容页中复用 UI 与样式，让页面更易扩展、更富交互
组件可以让你在站点中一致地复用同一块 UI 或样式。不仅能在 .astro 文件中使用，也可以在 .mdx 文件中使用。
在 .astro 中可直接导入并使用组件，首节会给出示例。
容器类#
Card 卡片#
import { Card } from 'astro-pure/user'
<Card
as='a'
href='#card'
heading='Lorem ipsum'
subheading='Lorem ipsum dolor sit amet, vidit suscipit at mei.'
date='August 2021'
>
You can even contain a list here
</Card>---
import { Card } from 'astro-pure/user'
---
<!-- ... -->
<Card
as='a'
href='#card'
heading='Lorem ipsum'
subheading='Lorem ipsum dolor sit amet, vidit suscipit at mei.'
date='August 2021'
>
You can even contain a list here
</Card>Collapse 折叠#
import { Collapse } from 'astro-pure/user'
<Collapse title='Lorem ipsum'> Lorem ipsum dolor sit amet, vidit suscipit at mei. </Collapse>
<Collapse title='Lorem ipsum'>
<div slot='before' class='mt-2'>Are you sure you want to see?</div>
<div>Lorem ipsum dolor sit amet, vidit suscipit at mei.</div>
</Collapse>Aside 旁注#
import { Aside } from 'astro-pure/user'
<Aside>不指定 type 时默认为「note」。😉</Aside>
<Aside type="tip">
旁注内也支持其他内容！😍
// ```js
// 例如代码片段
// ```
</Aside>
<Aside type='caution' title='注意'>代码又出 bug 了吗？🤨</Aside>
<Aside type='danger'>你用过 `rm -rf` 清理电脑吗？😡</Aside>该组件也有基于 remark 的写法（可直接在 .md 中使用），本主题未内置。可参考 Starlight asides 🌊。
:::tip
本主题作者是好人。
:::Tabs 标签页#
import { Tabs, TabItem } from 'astro-pure/user';
<Tabs>
<TabItem label="Stars">Sirius, Vega, Betelgeuse</TabItem>
<TabItem label="Moons">Io, Europa, Ganymede</TabItem>
</Tabs>MDX Repl#
Hello
<p>Hello</p>import { MdxRepl } from 'astro-pure/user'
// Width is optional; using width parameter to set
// all elements inside the MDX Repl component.
// (slot desc is not included this parameter)
<MdxRepl width='100%'>
<p>Hello</p>
<Fragment slot='desc'>
```html
<p>Hello</p>
```
</Fragment>
</MdxRepl>插槽 desc 内可组合任意其他组件。<Fragment> 不会渲染为实际的父级 HTML 容器。
列表类#
CardList 卡片列表#
A list
- Lorem ipsum
-
Dolor sit amet
import { CardList } from 'astro-pure/user'
<CardList title='A list' list={
[{title: 'I am hidden!'}]
} collapse />
<CardList title='A list' list={
[
{ title: 'Lorem ipsum', link: '#list' },
{ title: 'Dolor sit amet', children: [{
title: 'Vidit suscipit', link: '#'
}] }
]
} />Timeline 时间线#
- August 2021Hello
- August 2022World!
import { Timeline } from 'astro-pure/user'
<Timeline events={
[
{ date: 'August 2021', content: 'Hello' },
{ date: 'August 2022', content: '<i>World!</i>' },
]
} />Steps 步骤#
How to Yi Jian San Lian:
-
Dian Zan
-
Tou Bi
-
Shou Cang
Or GuanZhu sometimes.
import { Steps } from 'astro-pure/user'
How to Yi Jian San Lian:
<Steps>
1. Dian Zan
2. Tou Bi
3. Shou Cang
Or GuanZhu sometimes.
</Steps>文本与简单渲染#
Button 按钮#
import { Button } from 'astro-pure/user'
<div class='flex gap-x-2'>
<Button as='div' title='Simple' />
<Button as='a' href='#button' title='Link style' variant='ahead' class='not-prose' />
<Button as='div' title='Back' variant='back' />
<Button as='div' title='Pill style' variant='pill' />
<Button as='div' variant='pill'><i>Italic</i></Button>
</div>Spoiler 剧透遮挡#
No one can find me. But I am exposed here.
import { Spoiler } from 'astro-pure/user'
<Spoiler>没人能找到我。</Spoiler>但这里会暴露出来。FormattedDate 格式化日期#
import { FormattedDate } from 'astro-pure/user'
<FormattedDate date={new Date('2077-01-01')} dateTimeOptions={{ month: 'short' }} />Label 标签#
Hello
import { Label } from 'astro-pure/user'
<Label title='Hello' />Svg 内联 SVG#
import { Svg } from 'astro-pure/user'
<Svg src={import('@/assets/icons/key.svg?raw')} />资源与图标#
Icon 图标#
单次使用：
预览所有可用图标（点击按钮复制名称）：
import { Icon } from 'astro-pure/user'
单次使用：<Icon name='rss' class='inline' />
预览所有可用图标（点击按钮复制名称）：
import { Icons as allIcons } from 'astro-pure/libs'
import { Button } from 'astro-pure/user'
<div class='flex flex-wrap gap-2'>
{
Object.keys(allIcons).map(icon => {
const script = `navigator.clipboard.writeText('${icon}');document.dispatchEvent(new CustomEvent('toast',{detail:{message:'已复制 "${icon}"'}}))`
return (
<Button as='button' type='button' class='cursor-pointer' onclick={script}>
<Icon slot='before' name={icon} />
<span>{icon}</span>
</Button>
)
})
}
</div>更多能力可参考 高级组件。祝使用愉快！