Embed

Embed 会直接渲染已经提供的 metadata。如果信息不完整，它会依次尝试受支持的 oEmbed provider、指定网站的 Schema.org 数据，最后再读取 OpenGraph。

Prosefly

Astro Theme Lotus

A documentation theme for Astro, built for expressive content.

导入

import { Embed } from '@prosefly/astro-components';

显式提供 Metadata

直接传入展示信息可以让构建结果完全确定。显式 props 总会覆盖自动解析的数据。

<Embed
  kind="link"
  url="https://astro-theme-lotus.prosefly.dev/"
  title="Astro Theme Lotus"
  description="A documentation theme for Astro, built for expressive content."
  image="/images/og.png"
  siteName="Prosefly"
/>

自动解析 URL

只传入 URL 时，Embed 会在 Astro 渲染期间解析受支持的 provider，并将结果缓存 到 .astro/prosefly/embed。

<Embed url="https://www.youtube.com/watch?v=-a0ecQMq-rM" />

支持的 oEmbed provider 包括 YouTube、Vimeo、Spotify、SoundCloud、Apple Music、Apple Podcasts、X、Bluesky 和 Flickr。指定的 App Store、Google Play、 Product Hunt、Letterboxd 和 Rotten Tomatoes 页面会使用 Schema.org 数据。 其他 URL 会依次回退到 OpenGraph 和普通链接卡片。

如果只想渲染不完整的显式信息，而不发起远程请求，请设置 fetch={false}。

<Embed
  url="https://example.com/article"
  title="A deliberately minimal card"
  fetch={false}
/>

Props