PostShare 分享

文章末尾的两个按钮。Copy link 复制网址并提示一句。Share poster 打开一个对话框，里面是这篇文章的海报：封面、标题、摘要、网站名和日期，以及网址的二维码，可以下载，也可以交给系统的分享。

它的部件都能单独用：

什么时候用

每篇文章一次，在版权卡片下面。

页面里怎么写

<PostShare title={title} description={description} url={url} site="Field Notes"
  date="2026-03-04" cover={coverUrl} filename="hairlines" />

<Button variant="secondary" iconLeft="link">Copy link</Button>
<Dialog id="note" title="A title">…<Fragment slot="actions">…</Fragment></Dialog>
<Snackbar id="toast" />   <!-- toast.show("Saved") -->

结构

海报 1080 × 1440，颜色跟着它所在的主题，切换主题时重画：上面按宽度 9:16 放封面，没有封面就是奶油色卡片；标题用衬线字，最多三行；摘要用无衬线字；再是一条细线、网站名、日期、一小段珊瑚色，右边是二维码，始终是浅色方块上的深色码，因为不是所有扫码程序都认得深底浅码。海报是 SharePoster：在 PostShare 里，第一次打开对话框、字体加载好之后才画；单独用时马上画，元素有 draw() 和 blob()。

Dialog 是从对角线翻转进来的居中卡片。Snackbar 是底部一行字，用反色底。

类型

属性	取值
cover	封面的网址；没有就用奶油色卡片
filename	PNG 的文件名
variant（Button）	primary、secondary、secondary-on-dark 或 text
size（Dialog）	sm（420px）、md（560px）或 lg（720px）
depth（Dialog）	tilt、lift 或 none

状态

状态	变化
复制了链接	“Link copied” 显示四秒；浏览器拒绝时是 “Couldn’t copy the link”
能分享文件	对话框里多一个 Share，打开系统的分享

无障碍

海报的 canvas 是一张以文章命名的图片。对话框是原生模态，名字是它的标题；Escape、遮罩和关闭按钮都能关。提示条是礼貌的实时区域。

API

PostShare.astro、SharePoster.astro、Button.astro、Dialog.astro、Snackbar.astro。Button、Dialog、Snackbar 从交付包移植；交付包没有分享组件。二维码用 qrcode 包生成。

相关

PostLicense 版权卡片。