Hexo主题修改日记

发表于 更新于 分类于 阅读次数： 本文字数： 1.2k 阅读时长 ≈ 4 分钟

1.添加背景动画

背景动画基于canvas，在\themes\pure\layout\layout.ejs中添加

1
2
3
4
5
6
7
8
<!-- 背景动画 -->
  <script type="text/javascript" color="0,0,0" opacity='0.8' zIndex="-2" count="88" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script>
  <!-- 
  color: 线条颜色，默认：‘0，0，0’；三个数字分别为(R,G,B),注意使用，分割
  opacity: 线条透明度0~1,默认0.5
  count: 线条总数量，默认150
  zIndex: 背景的z-Index属性，css用于控制所在层的位置，默认-1 
  -->

2.更改代码块样式

修改.\themes\pure\source\css\style.css

1
2
3
4
5
6
7
8
9
10
11
12
pre,
.highlight {
  background: #cfcbcb;
  margin: 10px 0;
  padding: 15px 10px;
  overflow: auto;
  font-size: 18px;
  font-family: "Consolas";
  font-weight: bold;
  color: #4d4d4c;
  line-height: 1.5;
}

3.添加代码块一键复制按钮[原文]

（1）、增加全局函数addLoadEvent

在/themes/pure/source/js目录下打开application.js，在文件最后追加

1
2
3
4
5
6
7
8
9
10
11
function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = func;
    } else {
        window.onload = function() {
            oldonload();
            func();
        }
    }
}

（2）、新增按钮

pure默认情况下是没有代码复制功能的，此时需要对hexo增加复制代码块功能。
首先在/themes/pure/layout/_partial目录下新增article-copy-code.ejs，增加以下内容：

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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<% if(theme.codeblock.copy_button.enable){ %>
  <style>
    .copy-btn {
      display: inline-block;
      padding: 6px 12px;
      font-size: 13px;
      font-weight: 700;
      line-height: 20px;
      color: #333;
      white-space: nowrap;
      vertical-align: middle;
      cursor: pointer;
      background-color: #eee;
      background-image: linear-gradient(#fcfcfc, #eee);
      border: 1px solid #d5d5d5;
      border-radius: 3px;
      user-select: none;
      outline: 0;
    }

    .highlight-wrap .copy-btn {
      transition: opacity .3s ease-in-out;
      opacity: 0;
      padding: 2px 6px;
      position: absolute;
      right: 4px;
      top: 8px;
      z-index: 2;
    }

    .highlight-wrap:hover .copy-btn,
        .highlight-wrap .copy-btn:focus {
      opacity: 1
    }

    .highlight-wrap {
      position: relative;
    }
  </style>
  
  <script>
    addLoadEvent(()=>{
      $('.highlight').each(function (i, e) {
        var $wrap = $('<div>').addClass('highlight-wrap')
        $(e).after($wrap)
        $wrap.append($('<button>').addClass('copy-btn').append('<%= __("codeblock.copy_button") %>').on('click', function (e) {
          var code = $(this).parent().find(".code")[0].innerText
          <% if(theme.codeblock.copyright.enable){ %>
              code += "<%= theme.codeblock.copyright.content %>"
          <% } %>
          var ta = document.createElement('textarea')
          document.body.appendChild(ta)
          ta.style.position = 'absolute'
          ta.style.top = '0px'
          ta.style.left = '0px'
          ta.value = code
          ta.select()
          ta.focus()
          var result = document.execCommand('copy')
          document.body.removeChild(ta)
          <% if(theme.codeblock.copy_button.result){ %>
            if(result)$(this).text('<%= __("codeblock.copy_success") %>')
            else $(this).text('<%= __("codeblock.copy_failure") %>')
          <% } %>
          $(this).blur()
        })).on('mouseleave', function (e) {
          var $b = $(this).find('.copy-btn')
          setTimeout(function () {
            $b.text('<%= __("codeblock.copy_button") %>')
          }, 300)
        }).append(e)
      })
    })
  </script>
<% } %>

（3）、插入到页面：
编辑/themes/pure/layout/layout.ejs，在</body>前面一行增加:

1
2
3
4
5
6
  <%- body %>
  <%- partial('_common/footer', null, {cache: !config.relative_link}) %>
  <%- partial('_common/script', {post: page}) %>
  <%- partial('_partial/article-copy-code') %>
</body>
</html>

（4）、增加语言文件：
在/themes/pure/languages目录下选择对应的语言文件，在文件后面增加：

1
2
3
4
codeblock:
  copy_button: 复制
  copy_success: 复制成功
  copy_failure: 复制失败

（5）、增加主题配置文件
打开themes/pure/_config.yml，在文件末尾添加

1
2
3
4
5
6
7
codeblock: 
  copy_button: 
    enable: true
    result: true
  copyright:
    enable: true
    content: false

4.代码块滚动条[原文]

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
.highlight::-webkit-scrollbar {
  /*滚动条整体样式*/
  /*高宽分别对应横竖滚动条的尺寸*/
  /*width: 10px;*/
  height: 8px;
}

 /* 代码块滚动条 */
.highlight::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 45px;
  /*background-color: #D62929;*/
  background-color: #6f6969;
  background-image: -webkit-linear-gradient(168deg,
      rgba(255, 255, 255, 0.2) 100%, /*12.5*/
      transparent 12.5%,
      transparent 25%,
      rgba(255, 255, 255, 0.2) 25%,
      rgba(255, 255, 255, 0.2) 37.5%,
      transparent 37.5%,
      transparent 50%,
      rgba(255, 255, 255, 0.2) 50%,
      rgba(255, 255, 255, 0.2) 62.5%,
      transparent 62.5%,
      transparent 75%,
      rgba(255, 255, 255, 0.2) 75%,
      rgba(255, 255, 255, 0.2) 87.5%,
      transparent 87.5%);
}

.highlight::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  background-color: #0f111a;
}

5.添加回到顶部 [ 原文 ]

文件位置：./themes/pure/layout/_common/script.ejs，在合适位置添加如下代码：

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
<div id="go-top"></div>
<style type="text/css">
#go-top {
 width:40px;height:36px;
 background-color:#DDA0DD;
 position:relative;
 border-radius:2px;
 position:fixed;right:10px;bottom:60px;
 cursor:pointer;display:none;
}
#go-top:after {
 content:" ";
 position:absolute;left:14px;top:14px;
 border-top:2px solid #fff;border-right:2px solid #fff;
 width:12px;height:12px;
 transform:rotate(-45deg);
}
#go-top:hover {
 background-color:#8A2BE2;
}
</style>
<script>
$(function () {
  var top=$("#go-top");
  $(window).scroll(function () {
    ($(window).scrollTop() > 300) ? top.show(300) : top.hide(200);
    $("#go-top").click(function () {
      $('body,html').animate({scrollTop:0});
      return false();
    })
  });
});
</script>

6.使文章图片居中[ 原文 ]

（1）、在./themes/pure/source/css/style.css下

（2）、125行img修改：

1
2
3
4
5
6
7
8
img {
  border: 0;
  box-sizing: border-box;
  margin: auto;
  padding: 3px;
  text-align: center;
  display: block;
}

7.添加鼠标点击特效

（1）、在/themes/pure/source/js/ 下新建文件click-word.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
var a_idx = 0;
jQuery(document).ready(function($) {
    $("body").click(function(e) {
        var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正" ,"法治", "爱国", "敬业", "诚信", "友善");
        var $i = $("<span />").text(a[a_idx]);
        a_idx = (a_idx + 1) % a.length;
        var x = e.pageX,
        y = e.pageY;
        $i.css({
            "z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
            "top": y - 20,
            "left": x,
            "position": "absolute",
            "font-weight": "bold",
            "color": "#ff6651"
        });
        $("body").append($i);
        $i.animate({
            "top": y - 180,
            "opacity": 0
        },
        1500,
        function() {
            $i.remove();
        });
    });
});

（2）、在/themes/pure/layout/_layout.ejs的body中添加如下代码：

1
2
3
<!-- 页面点击特效 -->
<script type="text/javascript" src="/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="/js/click-word.js"></script>

8.使用hexo-abbrlink插件优化博客路径，让网址不会带有标题

（1）、安装abbrlink插件

1
npm install hexo-abbrlink --save

（2）、_config.yml 中修改

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
permalink: posts/:year:month:day:hour:minute:second-:abbrlink.html     # 将原来文章的地址修改为这个
 
# 并添加如下配置：
abbrlink:
  alg: crc32      #support crc16(default) and crc32
  rep: hex        #support dec(default) and hex
  drafts: false   #(true)Process draft,(false)Do not process draft. false(default) 
  # Generate categories from directory-tree
  # depth: the max_depth of directory-tree you want to generate, should > 0
  auto_category:
     enable: true  #true(default)
     depth:        #3(default)
     over_write: false 
  auto_title: false #enable auto title, it can auto fill the title by path
  auto_date: false #enable auto date, it can auto fill the date by time today
  force: false #enable force mode,in this mode, the plugin will ignore the cache, and calc the abbrlink for every post even it already had abbrlink. This only updates abbrlink rather than other front variables.
permalink_defaults:
pretty_urls:
  trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: true # Set to false to remove trailing '.html' from permalinks