高级组件

网页内容渲染#

Quote 随机语录#

Quote 用于在页脚等位置展示随机语录。

import { Quote } from 'astro-pure/advanced'

<Quote />

jsx

配置方式：

src/site.config.ts

export const integ: IntegrationUserConfig = {
  // 在页脚（如首页）显示随机语录
  quote: {
    // https://github.com/lukePeavey/quotable
    server: 'https://api.quotable.io/quotes/random?maxLength=60',
    target: `(data) => data[0].content || '获取失败'`
  }
}

Quotable 🌊 提供英文随机语录 API。

中文语录可使用一言 Hitokoto 🌊。

src/site.config.ts

export const integ: IntegrationUserConfig = {
  quote: {
    // https://developer.hitokoto.cn/sentence/#%E8%AF%B7%E6%B1%82%E5%9C%B0%E5%9D%80
    server: 'https://v1.hitokoto.cn/?c=i',
    target: `(data) => data.hitokoto || '获取失败'`
  }
}

GithubCard GitHub 仓库卡片#

在内容中嵌入 GitHub 仓库信息卡片。

cworld1 / astro-theme-pure

Waiting for api.github.com...

???

?????

import { GithubCard } from 'astro-pure/advanced'

<GithubCard repo='cworld1/astro-theme-pure' />

jsx

LinkPreview 链接预览#

对内容中的链接生成预览卡片。

Mozilla - Internet for people, not profit (US)

We’re working to put control of the internet back in the hands of the people using it. (mozilla.org)

Connect, protect, and build everywhere

Make employees, applications and networks faster and more secure everywhere, while reducing complexity and cost. (cloudflare.com)

import { LinkPreview } from 'astro-pure/advanced'

<LinkPreview href='https://www.cloudflare.com/' />
<LinkPreview href='https://www.cloudflare.com/' hideMedia />

jsx

数据与转换#

QRCode 二维码#

import { QRCode } from 'astro-pure/advanced'

// <QRCode /> 不传 content 时默认使用当前页链接
<QRCode
  content='https://github.com/cworld1/astro-theme-pure'
  class='inline-flex max-w-44 p-3 bg-muted rounded-lg border' />

jsx

Toast 提示#

点击试试

import { Button } from 'astro-pure/user'

<Button
  title='点击试试'
  onClick={`document.dispatchEvent(
    new CustomEvent('toast', {
      detail: { message: '来自 Toast 的问候！', time: 5000 }
    })
  )`} />

jsx

Medium Zoom 图片放大#

点击下方图片可体验放大效果。

在 site.config.ts 的 integ.mediumZoom 中可开启或配置图片点击放大行为。