下载按钮使用示例
462 字
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" desc="正文内插入的单个下载项" size="1.1 MB"}带密码的写法：
::download{name="加密资源" url="/downloads/protected.zip" desc="需要密码才能下载" size="2.6 MB" code="x9y8" password="firefly2025" hint="演示密码：firefly2025"}下面是一个实际渲染的按钮：
内联下载按钮示例
加密说明
- 设置
password后，构建期会将其转为 SHA-256 哈希，明文密码不会出现在任何输出文件中； - 点击按钮时弹出密码框，前端用 WebCrypto 计算同样的哈希并比对，校验通过才会触发下载；
- 该密码与文章本身的
password完全独立，互不影响； - 由于是纯静态站点，校验发生在浏览器端，因此它属于「访问门禁」而非强加密。如需真正的文件加密，可将文件预加密后放到 CDN，再把下载地址填入
url。
支持与分享
如果这篇文章对你有帮助，欢迎分享给更多人或打赏支持！
资源下载
Firefly 主题压缩包
加密资源包（需密码）
相关文章智能推荐
1
下载按钮与加密下载
文章示例Firefly 文章页下载按钮的完整用法：frontmatter 声明、内联指令、独立密码、CDN 外链与常见问题。
2
在文章中嵌入视频
文章示例这篇文章演示如何在博客文章中嵌入视频。
3
Markdown 扩展功能
文章示例了解 Firefly 中的 Markdown 功能
4
Firefly 代码块示例
文章示例在Firefly中使用表达性代码的代码块在 Markdown 中的外观。
5
KaTeX 数学公式示例
文章示例展示 Firefly 主题对 KaTeX 数学公式的支持，包括行内公式、块级公式和复杂数学符号。
随机文章随机推荐
