高级组件

网页内容渲染#

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 || 'Error'`
  }
}

Quotable ↗是一个开源API，提供随机英文语录。

对于中文语录，你可以使用一言 ↗。

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 || 'Error'`
  }
}

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

数据转换#

二维码（QRCode）#

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

图片放大（Medium Zoom）#

尝试点击下面的图片。

参见其他集成#medium-zoom。