下载按钮使用示例
438 字
2 分钟
下载按钮使用示例
本文演示 Firefly 的文章页下载按钮功能，支持两种调用方式，且每个下载项都可以单独设置访问密码。
方式一：frontmatter 声明
在文章头部用 downloads 字段声明下载项，文章渲染后会在正文下方自动生成「资源下载」区块：
---title: 我的文章downloads: - name: 示例压缩包 url: /downloads/demo.zip size: 4.2 MB password: your-password # 可选，独立于文章密码 hint: 提示信息 # 可选 icon: fa7-solid:file-zipper # 可选---支持字段：
| 字段 | 必填 | 说明 |
|---|---|---|
url | 是 | 文件地址，支持站内绝对路径 /xxx、相对路径与 http(s) 外链 |
name | 否 | 按钮文字，留空时使用 downloadConfig.defaultName |
size | 否 | 文件大小展示文本，如 4.2 MB |
password | 否 | 该下载项的独立密码，留空则不加密 |
hint | 否 | 密码提示，在密码框中显示 |
icon | 否 | 图标名，支持 Iconify 名或 zip / file / image / lock 关键字 |
方式二：正文指令
在正文任意位置插入 ::download 指令即可：
::download{name="内联下载按钮" url="/downloads/demo.zip" size="1.1 MB"}带密码的写法：
::download{name="加密资源" url="/downloads/protected.zip" password="firefly2025" hint="演示密码：firefly2025"}下面是一个实际渲染的按钮：
加密说明
- 设置
password后，构建期会将其转为 SHA-256 哈希，明文密码不会出现在任何输出文件中； - 点击按钮时弹出密码框，前端用 WebCrypto 计算同样的哈希并比对，校验通过才会触发下载；
- 该密码与文章本身的
password完全独立，互不影响； - 由于是纯静态站点，校验发生在浏览器端，因此它属于「访问门禁」而非强加密。如需真正的文件加密，可将文件预加密后放到 CDN，再把下载地址填入
url。
支持与分享
如果这篇文章对你有帮助，欢迎分享给更多人或打赏支持！
资源下载如果这篇文章对你有帮助，欢迎下载附件使用
欢迎来到我的博客！这是一则示例公告。
文章
15
分类
2
标签
21
总字数
17,864
运行时长
0 天
最后活动
0 天前
站点域名moci.cc
Fireflyv6.16.8
Astrov7.3.2
Nodev22.23.0
pnpmunknown
构建时间2026年10月20日 22:04:55
系统信息Linux / x86_64