digital

Hexo landscape 主题添加打赏功能

网上并没有适合于 Hexo 的默认主题 landscape 的打赏功能添加的相关分享。考虑到简洁性和一致性，我将打赏按钮和文章右下角的 Comments 按钮、 Share 按钮放在了一起。本文就介绍如何在 landscape 主题下添加打赏功能。

修改文章模板

修改 <hexo dir>/scaffolds/post.md 文件，在 --- 前添加一行 `` 。

修改文章布局

修改 <hexo dir>/themes/landscape/layout/_partial/article.ejs 文件，在 footer 内，post/tag 之前，添加 Reward 链接。部分代码修改后如下：

/themes/landscape/layout/_partial/article.ejs
1
2
3
4
<% if (post.reward){ %>
  <a class="article-reward-link">Reward</a>
<% } %>
<%- partial('post/tag') %>

修改样式

修改 <hexo dir>/themes/landscape/source/css/_partial/article.styl 文件，在最后添加如下代码：

/themes/landscape/source/css/_partial/article.styl
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
.article-reward-link
  cursor: pointer
  float: right
  color: #ed8371 !important
  &:before
    content: "\f164"
    font-family: font-icon
    padding-right: 8px
  &:hover
    color: #e75b43 !important

.article-reward-box
  position: absolute
  display: none
  background: #fff
  box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.2)
  border-radius: 3px
  margin-left: -145px
  overflow: hidden
  z-index: 1
  &.on
    display: block
 
 $article-reward-link
  width: 50px
  height: 36px
  display: block
  float: left
  position: relative
  color: #999
  text-shadow: 0 1px #fff
  &:before
    font-size: 20px
    font-family: font-icon
    absolute-center(@font-size)
    text-align: center
  &:hover
    color: #fff

.article-reward-links
  @extend $base-style
  clearfix()
  color: color-default
  padding: 0 article-padding
  text-align: center
  p
    line-height: line-height
    margin: line-height 0
  a
    color: color-link
    text-decoration: none
    margin-bottom: 0.6em
    &:hover
      text-decoration: underline
  img
    max-width: 80%
    height: auto
    display: block
    margin: auto

修改 js 文件

修改 <hexo dir>/themes/landscape/source/js/script.js 文件，在 //Share 那一整块之后添加 //Reward，内容部分可自定义修改，本例为：

/themes/landscape/source/js/script.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
// Reward
$('body').on('click', function(){
  $('.article-reward-box.on').removeClass('on');
}).on('click', '.article-reward-link', function(e){
  e.stopPropagation();

  var $this = $(this),
    id = 'article-reward-box-' + $this.attr('data-id'),
    offset = $this.offset();

  if ($('#' + id).length){
    var box = $('#' + id);

    if (box.hasClass('on')){
      box.removeClass('on');
      return;
    }
  } else {
    var html = [
      '<div id="' + id + '" class="article-reward-box">',
        '<div class="article-reward-links">',
          '<p>投我以木瓜，报之以琼琚</p>',
          '<img src="/images/payment.png" alt="Payment QR-code">',
          '<p>请使用支付宝（推荐）、微信扫码打赏</p>',
          '<p>也想拥有类似的专属个人博客？',
          '<br>您可<a href="https://item.taobao.com/item.htm?id=584941734114" class="article-reward-taobao" target="_blank" title="Tabao">点击这里</a>查看搭建服务</p>',
        '</div>',
      '</div>'
    ].join('');

    var box = $(html);

    $('body').append(box);
  }

  $('.article-reward-box.on').hide();

  box.css({
    top: offset.top + 25,
    left: offset.left + 35
  }).addClass('on');
}).on('click', '.article-reward-box', function(e){
  e.stopPropagation();
}).on('click', '.article-reward-box-link', function(e){
  e.preventDefault();
  e.stopPropagation();

  window.open(this.href, 'article-reward-box-window-' + Date.now(), 'width=500,height=450');
});

关于二维码

修改的 js 文件里有这样一行： <img src="/images/payment.png" alt="Payment QR-code"> ，这里的 payment.jpg 是一个集成支付宝和微信支付的二维码，具体制作方法请参考这篇文章。

至此，功能已经添加完毕，可以重新构建并部署，新建文章默认启用打赏功能，过往文章如需启用，应在 Front-matter 中添加一行 reward: true 。

Mastodon