Spoiler 剧透遮罩
盖住一段文字,读者想看时再打开:答案、剧情、解法。
读者可能想先自己想一想的内容。只是篇幅长的内容不要用它,用 details 类型的提示块收起来。
文章里怎么写
Section titled “文章里怎么写”找不到匹配时,这个函数返回 :spoiler[一个空数组]。
:::spoiler完整的答案,可以有好几句话。:::文字的位置上是一块纯色的遮罩,文字颜色和遮罩一样。没有模糊效果,因为这个系统没有模糊层。
variant |
盖住 |
|---|---|
inline |
句子里的几个词,就是 :spoiler[...] |
block |
一整段,就是 :::spoiler |
tone="dark" 用深色表面的遮罩。
先盖住,打开后就一直打开,直到页面刷新。revealed 让它一开始就是打开的。
盖住时它是一个按钮,名字是 “Reveal”(或者 label),可以用 Tab 走到,点击、Enter 或空格打开,aria-expanded 会报告变化。读屏软件读到的是按钮的名字,不是被盖住的文字。打开后就是普通文字。
Spoiler.astro。props 和交付包一样,只是没有 onReveal:打开的动作由页面里的一小段脚本完成。
details 类型的 Admonition 提示块,用于可看可不看的细节。