Hexo主题Volantis个性化
1. 添加捐赠按钮
- 制作自己的捐赠按钮
- 通过
<iframe>
标签制作完成的捐赠按钮嵌入到博客中
制作自己的捐赠按钮
使用 Sponsor-Page 捐赠小部件,Sponsor-Page是一个开源的捐赠按钮样式,可以用于美化我们的博客。
最后制作完成就是一个静态可访问的连接:https://yywen.top/service/donate/drinks(单击可查看效果)
- 克隆 Github 项目
- 捐赠按钮修改
主要是修改自己对应的支付二维码图片(sponsor-page\simple\images)、PayPal(sponsor-page\simple\index.html和sponsor-page\drinks\index.html)链接和支付宝(sponsor-page\drinks\script.js)链接
如果有其他支付方式需求,自己按需修改即可。
先来看一下效果:
将捐赠按钮嵌入到博客中
- 首先,定位并修改 Volantis 主题的捐赠布局
themes\volantis\layout\_partial\article.ejs
修改前的代码
1
2
3
4
5
6
7
8
9
10<!-- 打赏组件 -->
<% if (['post'].includes(page.layout) && footer_widget.donate && footer_widget.donate.enable == true) { %>
<div class='donate'>
<div class='imgs'>
<% getList(footer_widget.donate.images).forEach(function(url){ %>
<img src='<%- url_for(url) %>'>
<% }) %>
</div>
</div>
<% } %>修改后的代码
1
2
3
4
5
6
7
8
9
10<!-- 打赏组件 -->
<% if (['post'].includes(page.layout) && footer_widget.donate && footer_widget.donate.enable == true) { %>
<div class='donate'>
<iframe src="https://yywen.top/service/donate/drinks"
style="overflow-x:hidden;overflow-y:hidden; border:0xp none #fff; min-height:240px; width:100%;"
frameborder="0"
scrolling="no">
</iframe>
</div>
<% } %>
- 将制作好的捐赠按钮添加到博客项目中,在博客目录中新建一个文件夹donate(blog/source/donate),用于存放
drinks
和simple
,我们只需要这两个文件夹就🆗了,然后再使用 skip_render 对 donate 目录下的文件进行不渲染处理,操作如下:
blog/source/_config.yml
1 | skip_render: |
使用 skip_render 后需要进行 hexo clean
,否则 skip_render 可能不会生效
- 捐赠按钮展示测试(可以用任意Html页面展示)
使用 hexo new post test
来新建一个 test.md 文章用于测试效果
blog/source/_posts/test.md
1 | --- |
- 制作自定义标签
经过上面几个步骤,打赏按钮已经可以使用了,但每次都需要在文章后面添加这一大坨代码的话,感觉即麻烦又不美观。为了方便使用,我们将其制作成自定义标签,新建 btndonate.js
文件并写入如下内容:
/volantis/scripts/tags/btndonate.js
1 | ; |
然后就可以使用标签来引入打赏了,使用方式:
1 | {% btndonate drinks %} |