抱歉,您的浏览器无法访问本站
本页面需要浏览器支持(启用)JavaScript
了解详情 >
L
O
A
D
I
N
G

Hexo主题Volantis个性化

1. 添加捐赠按钮

  1. 制作自己的捐赠按钮
  2. 通过 <iframe> 标签制作完成的捐赠按钮嵌入到博客中
制作自己的捐赠按钮

使用 Sponsor-Page 捐赠小部件,Sponsor-Page是一个开源的捐赠按钮样式,可以用于美化我们的博客。
最后制作完成就是一个静态可访问的连接:https://yywen.top/service/donate/drinks(单击可查看效果)

  1. 克隆 Github 项目
  2. 捐赠按钮修改
    主要是修改自己对应的支付二维码图片(sponsor-page\simple\images)、PayPal(sponsor-page\simple\index.html和sponsor-page\drinks\index.html)链接和支付宝(sponsor-page\drinks\script.js)链接
    如果有其他支付方式需求,自己按需修改即可。

先来看一下效果:

将捐赠按钮嵌入到博客中
  1. 首先,定位并修改 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>
    <% } %>
  1. 将制作好的捐赠按钮添加到博客项目中,在博客目录中新建一个文件夹donate(blog/source/donate),用于存放 drinkssimple ,我们只需要这两个文件夹就🆗了,然后再使用 skip_render 对 donate 目录下的文件进行不渲染处理,操作如下:
blog/source/_config.yml
1
2
skip_render: 
- 'donate/**'

使用 skip_render 后需要进行 hexo clean ,否则 skip_render 可能不会生效

  1. 捐赠按钮展示测试(可以用任意Html页面展示)

使用 hexo new post test 来新建一个 test.md 文章用于测试效果

blog/source/_posts/test.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
---
title: test
date: 2023-03-12 11:32:38
---

测试捐赠按钮

<!-- more -->

## 捐赠按钮

<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>

  1. 制作自定义标签

经过上面几个步骤,打赏按钮已经可以使用了,但每次都需要在文章后面添加这一大坨代码的话,感觉即麻烦又不美观。为了方便使用,我们将其制作成自定义标签,新建 btndonate.js 文件并写入如下内容:

/volantis/scripts/tags/btndonate.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
'use strict';

function btndonate(args) {
args = args.join(' ').split(',');
return `<div>
<iframe src="https://yywen.top/service/donate/${args}/"
style="overflow-x:hidden;overflow-y:hidden; border:0xp none #fff; min-height:240px; width:100%;"
frameborder="0"
scrolling="no">
</iframe>
</div>`;
}
// 注意:把上面 <iframe> 标签中的 src 换成自己的
hexo.extend.tag.register('btndonate', btndonate)

然后就可以使用标签来引入打赏了,使用方式:

1
2
{% btndonate drinks %}
{% btndonate simple %}

评论