高级组件 • Jerry's Blog

Web 内容渲染#

随机引用#

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 || '错误'`
  }
}

GitHub 卡片#

GithubCard 组件是一个简单的组件，用于显示 GitHub 用户卡片。

cworld1 / astro-theme-pure

Waiting for api.github.com...

???

?????

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

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

jsx

链接预览#

预览内容中插入的任何链接。

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/' />
// `zoomable` 选项将控制 mediumzoom 标签
// <LinkPreview href='https://www.cloudflare.com/' zoomable={false} />
<LinkPreview href='https://www.cloudflare.com/' hideMedia />

jsx

数据转换器#

二维码#

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

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

jsx

提示消息#

点击我

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

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

jsx

Medium Zoom#

尝试点击下面的图片。

参见其他集成#medium-zoom。