Hexo添加附件下载功能

某些情况下,文章需要提供附件下载功能

1. 尝试一

  • 站点配置文件修改post_asset_folder: true,开启资源文件功能

    提供的资源都放在与文章同名的文件夹下

  • 文章内通过[资源名](资源路径)的方式提供附件下载链接

举个例子,如图phaser.min.js文件放置在资源文件夹

资源文件夹


引用一:[phaser.min.js](./Next新增自定义游戏菜单/phaser.min.js)

文章内通过引用一的方式引用时,网站解析出来的路径为

1
http://127.0.0.1:4000/2023/07/06/posts/Next新增自定义游戏菜单/Next新增自定义游戏菜单/phaser.min.js

可以看到路径多了一层Next新增自定义游戏菜单

错误解析


引用二:[phaser.min.js](phaser.min.js)

文章内通过引用二的方式引用时,网站解析出来的路径为

1
http://127.0.0.1:4000/2023/07/06/posts/Next新增自定义游戏菜单/phaser.min.js

解析是正常解析了,但并不会跳出下载框,只是将文件的内容输出,也并没有达到理想的功能

正常解析


另外一个问题是,上面两处的链接都是在文章所在页面触发的,即下图标红处

1
http://127.0.0.1:4000/2023/07/06/posts/Next新增自定义游戏菜单/

文章页面


当在博客主页页面直接触发,即http://127.0.0.1:4000/时,上面两种解析方式都会失败

主页页面


1
2
3
引用一: [phaser.min.js](./Next新增自定义游戏菜单/phaser.min.js)
会解析为
http://127.0.0.1:4000/Next新增自定义游戏菜单/phaser.min.js

主页解析失败2


1
2
3
引用二: [phaser.min.js](phaser.min.js)
会解析为
http://127.0.0.1:4000/phaser.min.js

主页解析失败1


可以看到,对于[文件名](文件路径)的解析,hexo都是基于网页当前的路径,后面跟上括号中所填写的文件路径进行解析的,也就是相对路径,因此这些实现方案都不太理想


2. 尝试二

其余的基本上都是一些通过图床存储文件,云盘存储文件的形式进行在线分享,相比于在线的形式,笔者一直钟情于本地资源引用的方式,因此这些就不做考虑


3. 最终方案

通过html语言的<a>标签,实现对文件的下载

  • 博客目录/source/下新建一个download/文件夹

    此文件夹下用于存储整个博客需要下载的附件,如图

    下载文件夹

  • 文章内通过<a>标签进行资源引用

    <a href="/download/Next新增自定义游戏菜单/phaser.min.js" download>phaser.min.js</a>

    其中标签内的路径采用绝对路径,直接检索download下的资源,后面也要带上download标签,不然点击时不会跳出下载框

测试下载