hexo-next主题下的美化

Posted on | In
写在前面

因为hexo可以自定义的东西太多了，感觉还是整合到一篇post里会比较好。慢慢更新ing。

next主题下让头像旋转

两种方法让hexo next主题中的头像显示成圆形，且鼠标放上去有旋转效果。

很推荐使用第一种方法，因为最好不要去修改除了/next/source/css/_custom/文件夹之外的其他4个文件夹里的源码。修改了其他四个文件夹里的源码之后想要还原的话则又要去修改一遍源码，比较麻烦。如果你只修改了_custom/custom.styl中的源码且想要还原的话，只需将custom.styl这个文件里面的添加的代码删除即可。

方法1：直接在~/hexo/themes/next/source/css/_custom文件夹下的costom.styl文件内添加以下代码：

1
2
3
4
5
6
7
8
9
10
11
12
// 侧栏头像圆形及旋转效果
.site-author-image {
    border: 0px solid rgb(255, 255, 255);
    border-radius: 100%;
    transition: transform 1.0s ease-out;
}
img:hover {
    transform: rotateZ(360deg);
}
.posts-expand .post-body img:hover {
    transform: initial;
}

方法2：直接编辑~/hexo/themes/next/source/css/_common/components/sidebar
文件夹下的sidebar-author.styl文件即可：

将以下代码替换到其中的site-author-img属性。

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
.site-author-image {
  display: block;
  margin: 0 auto;
  padding: $site-author-image-padding;
  max-width: $site-author-image-width;
  height: $site-author-image-height;
  border: $site-author-image-border-width solid $site-author-image-border-color;

  /* 头像圆形 */
  border-radius: 80px;
  -webkit-border-radius: 80px;
  -moz-border-radius: 80px;
  box-shadow: inset 0 -1px 0 #333sf;


  /* 鼠标经过头像旋转360度 */
  -webkit-transition: -webkit-transform 1.0s ease-out;
  -moz-transition: -moz-transform 1.0s ease-out;
  transition: transform 1.0s ease-out;
}

img:hover {
  /* 鼠标经过停止头像旋转 
  -webkit-animation-play-state:paused;
  animation-play-state:paused; */

  /* 鼠标经过头像旋转360度 */
  -webkit-transform: rotateZ(360deg);
  -moz-transform: rotateZ(360deg);
  transform: rotateZ(360deg);
}

/* Z轴旋转动画 */
@-webkit-keyframes play {
  0% {
    -webkit-transform: rotateZ(0deg);
  }
  100% {
    -webkit-transform: rotateZ(-360deg);
  }
}
@-moz-keyframes play {
  0% {
    -moz-transform: rotateZ(0deg);
  }
  100% {
    -moz-transform: rotateZ(-360deg);
  }
}
@keyframes play {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(-360deg);
  }
}

可自行编辑其中自己想要的属性。

sidebar-author-img原代码备份：

1
2
3
4
5
6
7
8
.site-author-image {
  display: block;
  margin: 0 auto;
  padding: $site-author-image-padding;
  max-width: $site-author-image-width;
  height: $site-author-image-height;
  border: $site-author-image-border-width solid $site-author-image-border-color;
}

next主题下让页脚的heart-icon跳动起来

使用NexT主题后，默认的页脚icon会变成user。可以去Font Awesome自行查找替换。

在next文件下的主题配置文件中，找到footer，把icon后面替换成你在Font Awesome上找到的图标的名字就ok了（不必带 fa- 前缀）。

那么如何让页脚的❤icon跳动起来呢？

首先修改主题配置文件：

1
文件位置：~/hexo/themes/next/_config.yml
1
2
footer:
      icon: user修改成heart

然后修改footer.swig：

1
文件位置：~/hexo/themes/next/layout/_partials/footer.swig
1
<span class="with-love">修改成<span class="with-love" id="heart">

接着编辑custom.styl：

1
文件位置：~/hexo/themes/next/source/css/_custom/custom.styl

在其中加入

1
2
3
4
5
6
7
8
9
10
11
12
13
// 自定义页脚跳动的心样式
@keyframes heartAnimate {
    0%,100%{transform:scale(1);}
    10%,30%{transform:scale(0.9);}
    20%,40%,60%,80%{transform:scale(1.1);}
    50%,70%{transform:scale(1.1);}
}
#heart {
    animation: heartAnimate 1.33s ease-in-out infinite;
}
.with-love {
    color: rgb(0, 0, 0);
}

其中color的值可以改成你自己喜欢的，RGB颜色可以参考这里。

效果如下：

gif 1

hexo上修改代码块自定义样式

在next文件夹下的sidebar-author.styl文件中添加如下代码：

1
文件位置：~/hexo/themes/next/source/css/_custom/custom.styl

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// Custom styles.
code {
    color: #ff7600;  //代码颜色
    background: #fbf7f8;  //背景颜色
    margin: 2px;  //左右间距
    padding: 2px;  //上下间距
    border: 1px solid #D3D3D3; //边框线
}
// 大代码块的自定义样式
.highlight, pre {
    margin: 5px 0;
    padding: 5px;
    border-radius: 3px;
}
.highlight, code, pre {
    border: 1px solid #d6d6d6;
}

可以只修改小代码块。颜色代码可以参考这里。

next主题下修改字体

此特性在版本 5.0.1中引入，要使用此功能请确保所使用的 NexT 版本在此之后。

在主题配置文件中找到font并启用，配置如下：

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
font:
  enable: true

  # 外链字体库地址，例如 //fonts.googleapis.com (默认值)
  host:

  # 全局字体，应用在 body 元素上
  global:
    external: true
    family: Monda

  # 标题字体 (h1, h2, h3, h4, h5, h6)
  headings:
    external: true
    family: Roboto Slab

  # 文章字体
  posts:
    external: true
    family:

  # Logo 字体
  logo:
    external: true
    family: Lobster Two
    size: 24

  # 代码字体，应用于 code 以及代码块
  codes:
    external: true
    family: PT Mono

对应的family可在google fonts自行查找。

next主题下加入动态背景

我在用的最新版next主题版本自带5种动态背景。
编辑主题配置文件， 搜索Canvas-nest、three_waves、canvas_lines、canvas_sphere、Canvas-ribbon即可，根据自己的需求设置值为true或者false。

1
注意： three_waves 在版本 5.1.1 中引入。只能同时开启一种背景动画效果。

如果你有自己的背景代码想放在hexo上，那就继续往下看吧。

先在~/hexo/themes/next/layout中找到_layout.swig文件。

在其<body>里添加：

1
2
3
<div class="bg_content">
  <canvas id="canvas"></canvas>
</div>

仍是该文件，在末尾添加：

1
<script type="text/javascript" src="/js/src/dynamic_bg.js"></script>

接着在~/themes/next/source/js/src中新建文件dynamic_bg.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
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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var cw = canvas.width = window.innerWidth,
  cx = cw / 2;
var ch = canvas.height = window.innerHeight,
  cy = ch / 2;

ctx.fillStyle = "#000";
var linesNum = 16;
var linesRy = [];
var requestId = null;

function Line(flag) {
  this.flag = flag;
  this.a = {};
  this.b = {};
  if (flag == "v") {
    this.a.y = 0;
    this.b.y = ch;
    this.a.x = randomIntFromInterval(0, ch);
    this.b.x = randomIntFromInterval(0, ch);
  } else if (flag == "h") {
    this.a.x = 0;
    this.b.x = cw;
    this.a.y = randomIntFromInterval(0, cw);
    this.b.y = randomIntFromInterval(0, cw);
  }
  this.va = randomIntFromInterval(25, 100) / 100;
  this.vb = randomIntFromInterval(25, 100) / 100;

  this.draw = function() {
    ctx.strokeStyle = "#ccc";
    ctx.beginPath();
    ctx.moveTo(this.a.x, this.a.y);
    ctx.lineTo(this.b.x, this.b.y);
    ctx.stroke();
  }

  this.update = function() {
    if (this.flag == "v") {
      this.a.x += this.va;
      this.b.x += this.vb;
    } else if (flag == "h") {
      this.a.y += this.va;
      this.b.y += this.vb;
    }

    this.edges();
  }

  this.edges = function() {
    if (this.flag == "v") {
      if (this.a.x < 0 || this.a.x > cw) {
        this.va *= -1;
      }
      if (this.b.x < 0 || this.b.x > cw) {
        this.vb *= -1;
      }
    } else if (flag == "h") {
      if (this.a.y < 0 || this.a.y > ch) {
        this.va *= -1;
      }
      if (this.b.y < 0 || this.b.y > ch) {
        this.vb *= -1;
      }
    }
  }

}

for (var i = 0; i < linesNum; i++) {
  var flag = i % 2 == 0 ? "h" : "v";
  var l = new Line(flag);
  linesRy.push(l);
}

function Draw() {
  requestId = window.requestAnimationFrame(Draw);
  ctx.clearRect(0, 0, cw, ch);

  for (var i = 0; i < linesRy.length; i++) {
    var l = linesRy[i];
    l.draw();
    l.update();
  }
  for (var i = 0; i < linesRy.length; i++) {
    var l = linesRy[i];
    for (var j = i + 1; j < linesRy.length; j++) {
      var l1 = linesRy[j]
      Intersect2lines(l, l1);
    }
  }
}

function Init() {
  linesRy.length = 0;
  for (var i = 0; i < linesNum; i++) {
    var flag = i % 2 == 0 ? "h" : "v";
    var l = new Line(flag);
    linesRy.push(l);
  }

  if (requestId) {
    window.cancelAnimationFrame(requestId);
    requestId = null;
  }

  cw = canvas.width = window.innerWidth,
    cx = cw / 2;
  ch = canvas.height = window.innerHeight,
    cy = ch / 2;

  Draw();
};

setTimeout(function() {
  Init();

  addEventListener('resize', Init, false);
}, 15);

function Intersect2lines(l1, l2) {
  var p1 = l1.a,
    p2 = l1.b,
    p3 = l2.a,
    p4 = l2.b;
  var denominator = (p4.y - p3.y) * (p2.x - p1.x) - (p4.x - p3.x) * (p2.y - p1.y);
  var ua = ((p4.x - p3.x) * (p1.y - p3.y) - (p4.y - p3.y) * (p1.x - p3.x)) / denominator;
  var ub = ((p2.x - p1.x) * (p1.y - p3.y) - (p2.y - p1.y) * (p1.x - p3.x)) / denominator;
  var x = p1.x + ua * (p2.x - p1.x);
  var y = p1.y + ua * (p2.y - p1.y);
  if (ua > 0 && ub > 0) {
    markPoint({
      x: x,
      y: y
    })
  }
}

function markPoint(p) {
  ctx.beginPath();
  ctx.arc(p.x, p.y, 2, 0, 2 * Math.PI);
  ctx.fill();
}

function randomIntFromInterval(mn, mx) {
  return ~~(Math.random() * (mx - mn + 1) + mn);
}

然后在~/hexo/themes/next/source/css/_custom/custom.styl文件末尾添加以下内容：

1
2
3
4
5
6
7
.bg_content {
  position: fixed;
  top: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
}

最后hexo s刷新一下吧。

next主题下给每篇文章添加结束标语

在~/hexo/themes/next/layout/_macro中新建passage-end-tag.swig文件，添加以下代码至该文件中：

1
2
3
4
5
<div>
    {% if not is_index %}
        <div style="text-align:center;color: #FA8072;font-size:10px;">------------- End  <i class="fa fa-hourglass-end" aria-hidden="true"></i>  Thank For Your Reading -------------</div>
    {% endif %}
</div>

其中的icon可以去Font Awesome自行查找替换。字体大小修改其中的font-size，位置修改其中的text-align，颜色修改其中的color,可以参考这里。

接着打开~/hexo/themes/next/layout/_macro/post.swig文件，在post-body后，post-footer前，添加以下内容：

1
2
3
4
5
<div>
  {% if not is_index %}
    {% include 'passage-end-tag.swig' %}
  {% endif %}
</div>

然后打开主题配置文件，在末尾添加：

1
2
3
# 文章末尾添加“本文结束”标记
passage_end_tag:
  enabled: true

最后hexo s刷新一下吧。

hexo上给首页文章添加read-more/查看原文按钮

在文章中写成如下格式即可：

1
2
3
4
5
前言

<!-- more -->

全文

点击阅读全文之后，文章会自动定位到所在位置，想要修改成从头阅读需要修改主题配置文件 ：

1
2
# Automatically scroll page to section which is under <!-- more --> mark.
scroll_to_more: 默认true改为false即可

hexo上添加音频播放器

已归档于文章——hexo上的aplayer应用

hexo上添加视频播放器

已归档于文章——hexo上的dplayer应用与嵌入视频的响应式设置

hexo上添加看板娘

已归档于文章——hexo上的live2d应用

next主题下修改文章底部#号tag标签

在~hexo/themes/next/layout/_macro中找到post.swig文件，在内搜索el="tag">#，将#换成<i class="fa fa-tag"></i>即可，然后hexo s刷新预览吧。

想使用其他图标可在Fontawesome内自行查找。

前：image 后：image

hexo上给文章添加脚注

首先安装hexo-footnotes插件，进入站点根目录

1
npm install hexo-footnotes --save

如果hexo可以自动检测所有插件，则不需要修改_config.yml，

如果不能自动检测，那么在在站点配置文件中增加：

1
2
plugins:
  - hexo-footnotes

安装完成后按官方readme的方式书写。

1
2
3
4
5
6
7
8
9
10
basic footnote[^1]
here is an inline footnote[^2](inline footnote)
and another one[^3]
and another one[^4]

[^1]: basic footnote content
[^3]: paragraph
footnote
content
[^4]: footnote content with some [markdown](https://en.wikipedia.org/wiki/Markdown)

注脚的内容最好放在文章的最后面，否则可能会出错误。

next主题下添加本地搜索

首先安装hexo-generator-searchdb插件，进入站点根目录

1
npm install hexo-generator-searchdb --save

然后编辑站点配置文件，添加以下内容到任意位置：

1
2
3
4
5
search:
  path: search.xml
  field: post
  format: excerpt
  limit: 10000

各选项可按官方readme自行修改。

接着编辑主题配置文件，启用本地搜索功能：

1
2
3
# Local search
local_search:
  enable: true

最后hexo c&hexo s预览吧。

next主题下添加404页面

腾讯公益404页面

离家的路有千万条，但回家的路只有一条。

在~/hexo/themes/next/source目录下新建404.html页面，在新建页面内添加如下内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="content-type" content="text/html;charset=utf-8;"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="robots" content="all" />
  <meta name="robots" content="index,follow"/>
  <link rel="stylesheet" type="text/css" href="https://qzone.qq.com/gy/404/style/404style.css">
</head>
<body>
  <script type="text/plain" src="http://www.qq.com/404/search_children.js"
          charset="utf-8" homePageUrl="/"
          homePageName="回到我的主页">
  </script>
  <script src="https://qzone.qq.com/gy/404/data.js" charset="utf-8"></script>
  <script src="https://qzone.qq.com/gy/404/page.js" charset="utf-8"></script>
</body>
</html>

其中homePageUrl与homePageName可自定义。
预览效果：https://blog.yleao.com/wrongpage

自定义diy页面

也是和上面一样的方法，在~/hexo/themes/next/source文件夹下新建404.html页面。
自定义页面所需要的css和js分别放在~/hexo/themes/next/source/css文件夹与~/hexo/themes/next/source/js文件夹内。
预览效果：https://www.yleao.com/wrongpage

hexo上给文章添加锚点

锚点(anchor)：其实就是超链接的一种，一种特殊的超链接。

锚点可以在同一页面的不同位置间跳转，其实就是在元素间跳转，常用的场景就是，页面很长，让用户方便在页面不同部分间跳转，类似于脚注。可以用html的代码来书写。

同页面跳转

设置一个锚点链接<a href="#test">锚点</a>。（注意：href属性的属性值最前面要加#）

在页面中需要的位置设置目标，目标写法<p id="test">目标</p>。（注意：目标标签的属性值要与锚点链接中的href属性值一样，但不加#，例如我写的href属性值为#test，那么后面id对应的属性值为test）

案例：

1
2
3
<a href="#red">跳转到红色</a>

<p id="red">红色</p>

跳转到红色

红色

跨页面跳转

和同页面跳转差不多，同样设置锚点链接，在href中的要跳转到的页面路径后面追加#+属性值，
即<a href="跳转页面.html#test">锚点</a>。

在跳转页面中需要的位置设置目标，目标写法<p id="test">目标</p>。

案例：

跳转到颜色列表

next主题下给文章添加更新时间

个人用的next主题版本为5.1.4，此版本已添加此功能。

只需在主题配置文件中找到updated_at，默认为false，修改成true即可。

next主题下添加突破容器宽度限制的图片

当使用此标签引用图片时，图片将自动扩大 26%，并突破文章容器的宽度。 此标签使用于需要突出显示的图片, 图片的扩大与容器的偏差从视觉上提升图片的吸引力。 此标签有两种调用方式（详细参看底下示例）：

  • HTML方式：使用这种方式时，为 img 添加属性 class=”full-image”即可。

  • 标签方式：使用 fullimage 或者 简写 fi， 并传递图片地址、 alt 和 title 属性即可。 属性之间以逗号分隔。

标签方式要求 NexT 的版本在 0.4.5 或以上。 若你正在使用的版本比较低，可以选择使用 HTML 方式。
如果要在图片下显示图片的标题，请使用 标签方式 并给定 title 属性。

1
2
3
4
5
6
7
8
9
<!-- HTML方式: 直接在 Markdown 文件中编写 HTML 来调用 -->
<!-- 其中 class="full-image" 是必须的 -->
<img src="/image-url" class="full-image" />

<!-- 标签 方式，要求版本在0.4.5或以上 -->
{% fullimage /image-url, alt, title %}

<!-- 别名 -->
{% fi /image-url, alt, title %}

预览效果：

next主题下取消图片边框

直接在~/hexo/themes/next/source/css/_custom文件夹下的costom.styl文件内添加以下css代码：

1
2
3
4
5
6
7
8
// 去掉图片边框
.posts-expand .post-body img {
    border: none;
    padding: 0px;
}
.post-gallery .post-gallery-img img {
    padding: 3px;
}

next主题下侧边栏内容修改

直接在~/hexo/themes/next/layout/_macro文件夹下的sidebar.swig文件内增减代码即可，记得备份。

例如要删除分类一栏，则在sidebar.swig中找到categories，接着删除以下代码即可：

1
2
3
4
5
6
7
8
9
10
{% if site.categories.length > 0 %}
 {% set categoriesPageQuery = site.pages.find({type: 'categories'}, {lean: true}) %}
  {% set hasCategoriesPage = categoriesPageQuery.length > 0 %}
   <div class="site-state-item site-state-categories">
   {% if hasCategoriesPage %}<a href="{{ url_for(categoriesPageQuery[0].path) }}">{% endif %}
      <span class="site-state-item-count">{{ site.categories.length }}</span>
      <span class="site-state-item-name">{{ __('state.categories') }}</span>
    {% if hasCategoriesPage %}</a>{% endif %}
    </div>
{% endif %}

其他内容同理。若想要移动位置则移动对应代码顺序就可以。

next主题下点击侧边栏头像回到博客首页

首先要在主题配置文件中把头像路径配置好，比如我把头像avatar.png放在~/hexo/themes/next/source/uploads下，则修改如下：

1
2
3
4
5
# Sidebar Avatar
# in theme directory(source/images): /images/avatar.gif
# in site  directory(source/uploads): /uploads/avatar.gif
#avatar: /images/avatar.gif
avatar: /uploads/avatar.png

然后再编辑~/hexo/themes/next/layout/_macro文件夹下的sidebar.swig文件，在文件中找到如下代码：

1
2
3
<img class="site-author-image" itemprop="image"
    src="{{ url_for( theme.avatar | default(theme.images + '/avatar.gif') ) }}"
    alt="{{ theme.author }}" />

再其前后加上<a href="/"></a>即可，如下：

1
2
3
4
5
<a href="/">
   <img class="site-author-image" itemprop="image"
       src="{{ url_for( theme.avatar | default(theme.images + '/avatar.gif') ) }}"
       alt="{{ theme.author }}" />
</a>

next主题下添加文章置顶与置顶标志

安装hexo置顶插件

1
2
$ npm uninstall hexo-generator-index --save
$ npm install hexo-generator-index-pin-top --save

然后在需要置顶的文章的Front-matter中加上top: 10（数字＞1）即可，多篇置顶文章按top值排序，如下：

1
2
3
4
5
6
7
8
9
10
11
12
---
title: 遍地苦难尘
tags:
  - life
  - music
  - film
categories:
  - 生活拾空
abbrlink: 31015
date: 2018-10-11 14:11:08
top: 10
---

设置置顶标志

打开~/hexo/themes/next/layout/_macro目录下的post.swig文件，定位到<div class="post-meta">后，插入如下代码：

1
2
3
4
{% if post.top %}
    <font color=#FFFFFF><b style="background-color:#A9A9A9">　Top　</b></font>
    <span class="post-meta-divider">|</span>
{% endif %}

next主题下添加代码块复制功能

下载第三方插件clipboard.js：

clipboard.js

clipboard.min.js 推荐

保存文件clipboard.js或者clipboard.min.js 到目录~/hexo/themes/next/source/js/src下

在~/hexo/themes/next/source/js/src同目录下，创建clipboard-use.js，添加如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/*页面载入完成后，创建复制按钮*/
!function (e, t, a) { 
  /* code */
  var initCopyCode = function(){
    var copyHtml = '';
    copyHtml += '<button class="btn-copy" data-clipboard-snippet="">';
    copyHtml += '  <i class="fa fa-clipboard"></i><span>copy</span>';
    copyHtml += '</button>';
    $(".highlight .code pre").before(copyHtml);
    new ClipboardJS('.btn-copy', {
        target: function(trigger) {
            return trigger.nextElementSibling;
        }
    });
  }
  initCopyCode();
}(window, document);

在~/hexo/themes/next/source/css/_custom/custom.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
//代码块复制按钮
.highlight{
  //方便copy代码按钮（btn-copy）的定位
  position: relative;
}
.btn-copy {
    display: inline-block;
    cursor: pointer;
    background-color: #eee;
    background-image: linear-gradient(#fcfcfc,#eee);
    border: 1px solid #d5d5d5;
    border-radius: 3px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-appearance: none;
    font-size: 13px;
    font-weight: 700;
    line-height: 20px;
    color: #333;
    -webkit-transition: opacity .3s ease-in-out;
    -o-transition: opacity .3s ease-in-out;
    transition: opacity .3s ease-in-out;
    padding: 2px 6px;
    position: absolute;
    right: 5px;
    top: 5px;
    opacity: 0;
}
.btn-copy span {
    margin-left: 5px;
}
.highlight:hover .btn-copy{
  opacity: 1;
}

修改~/hexo/themes/next/layout/_layout.swig文件，向文件中</body>前一行插入如下代码：

1
2
<script type="text/javascript" src="/js/src/clipboard.min.js"></script>  
<script type="text/javascript" src="/js/src/clipboard-use.js"></script>

如下第22、23行效果：

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
<!DOCTYPE html>

{% set html_class = 'theme-next ' + theme.scheme %}
{% if theme.motion.enable %}
  {% set html_class = html_class + ' use-motion' %}
{% endif %}

<html class="{{ html_class | lower }}" lang="{{ config.language }}">
<head>
  {% include '_partials/head.swig' %}
  <title>{% block title %}{% endblock %}</title>
  {% include '_third-party/analytics/index.swig' %}
</head>

<body itemscope itemtype="http://schema.org/WebPage" lang="{{ page.lang || page.language || config.language }}">
    ...
    ...
    {% include '_third-party/mathjax.swig' %}
    {% include '_third-party/scroll-cookie.swig' %}
    {% include '_third-party/exturl.swig' %}

    <script type="text/javascript" src="/js/src/clipboard.min.js"></script>  
    <script type="text/javascript" src="/js/src/clipboard-use.js"></script>

</body>
</html>

代码复制功能到此添加完毕，所有文件添加及修改状态如下：

~/hexo/themes/next/source/js/src/clipboard.min.js　新增
~/hexo/themes/next/source/js/src/clipboard-use.js　新增
~/hexo/themes/next/source/css/_custom/custom.styl　修改
~/hexo/themes/next/layout/_layout.swig　修改

next主题下修改文章内超链接样式

直接在~/hexo/themes/next/source/css/_custom文件夹下的costom.styl文件内添加以下css代码：

1
2
3
4
5
6
7
8
9
10
11
12
//文章内链接文本样式
.post-body p a{
  color: #6495ED;
  font-weight: bold;//正常改为normal
  border-bottom: none;
  border-bottom: 1px solid #6495ED;
  &:hover {
    color: #fc6423;
    border-bottom: none;
    border-bottom: 1px solid #fc6423;
  }
}

next主题下修改侧边栏目录样式

直接在~/hexo/themes/next/source/css/_custom文件夹下的costom.styl文件内添加以下css代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//侧栏目录链接样式  
.post-toc ol a {
    color: rgb(192, 192, 192);
}
.post-toc ol a:hover {
    color: rgb(255, 255, 255);
}



// 侧栏次级目录链接样式
.post-toc .nav .active > a {
    color: rgb(255, 255, 255);
    border-bottom-color: rgb(255, 255, 255);
}
.post-toc .nav .active > a:hover {
    color: rgb(255, 255, 255);
}

hexo上给文章加密

首先npm install --save hexo-blog-encrypt下载插件。

下好插件后将password, abstract, message等字段添加到要加密文章的头部，如下：

1
2
3
4
5
6
7
---
title: Hello World
date: 2020-05-02 18:00:00
password: 设定的密码
abstract: 该博客的摘要，会显示在博客的列表页
message:  查看博客时，密码输入框上面的描述性文字
---

最后再使用hexo clean && hexo g && hexo s在本地预览加密的文章。

hexo上给文章添加折叠项

格式如下，其中内容可以是文字和图片等：

1
2
3
<details><summary>点此打开折叠项</summary><p>
内容
</p></details>

示例：

点此打开折叠项


此处为折叠的项目

hexo上给文章添加豆瓣卡片

插件github地址

首先npm install hexo-douban-card --save下载插件。

下好插件后在文章中使用以下语法即可：

1
2
3
4
5
{% douban movie 24745500 %}

{% douban book 30376420 %}

{% douban music 35099703 %}

第一项douban代表插件名

第二项可选:movie,book,music

第三项为豆瓣作品对应id，为豆瓣地址栏中subject后的数字

如想改动卡片样式，可在hexo\node_modules\hexo-douban-card\templates\assets里找到style.css修改即可，我把我自己修改的css贴出来可供参考：

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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
.douban-card-block {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-height: 400px;
}

.douban-card {
    display: flex;
    margin: 30px 10px;
    padding: 15px;
    border:2px solid #a1a1a1;
    border-radius: 15px;
    position: relative;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    color: antiquewhite;
    text-decoration: none;
}

.douban-card:hover {
    text-decoration: underline wavy black;//下划线颜色
}

.douban-card-bgimg {
    position: absolute;
    width: 115%;
    height: 115%;
    filter: opacity(0%);//值为0%则是完全透明
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
}

.douban-card-img {
    position: relative;
    height: 130px;
    width: 80px;
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
}

.douban-card-left:hover .douban-card-img {
    filter: blur(5px) brightness(0.6);
    transform: perspective(800px) rotateX(180deg);
}

.douban-card-left .douban-card-img {
    transition: all 500ms ease;
}

.douban-card-left {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.douban-card-left .douban-card-status {
    height: 130px;
    width: 80px;
    text-align: center;
    font-weight: bold;
    color: white;
    position: absolute;
    left: 0;
    top: 30%;
    transform: rotateX(180deg);
    backface-visibility: hidden;
    transition: all 500ms ease;
}

.douban-card-left:hover .douban-card-status {
    transform: perspective(800px) rotateX(0deg);
}

.douban-card-right {
    position: relative;
    display: flex;
    flex-direction: column;
    margin-left: 12px;
    font-size: 15px;
    font-family: "SimHei", Times,serif;
    font-weight: bold;
    line-height: 1.2;
    color: green;//字体颜色
}

.douban-card-item {
    margin-top: 4px;
}
　
-EOF-
0%