码猿技术专栏

微信公众号：码猿技术专栏

Hexo的Next主题优化教程

发表于 更新于 分类于 Valine：

前言

陈某的独立博客搭建已经有三年多时间了，使用Hexo+Git，一直使用的主题是jacman，前几天女票看到说太LOW了，这哪能忍，必须换一个逼格高点的。

其实的三年前看到jacman这个主题还是挺喜欢的，但是现在的看看确实不怎地，哎，老了….

今天这篇文章来介绍下一款简洁的主题NEXT以及配置方式。先来上一张个人的博客的截图，如下：

如何下载？

NEXT这款主题源码都直接托管在GitHub上，可以直接搜索，下载地址：https://github.com/theme-next/hexo-theme-next.git。

下载源码之后，直接解压到博客的themes的目录下，比如我的主题目录就是G:\hexo\themes\next。

配置文件的分类

hexo搭建的博客有两个yml配置文件，一个称之为站点配置文件，是根目录下的_config.yml，另一个是主题配置文件，是主题目录下的_config.yml文件。

基本信息配置

基本信息包括：博客标题、作者、描述、语言等等。这些基本信息的配置都在站点配置文件中。如下：

1
2
3
4
5
6
title: 标题
subtitle: 副标题
description: 描述
author: 作者
language: 语言（简体中文是zh-Hans）
timezone: 网站时区（Hexo 默认使用您电脑的时区，不用写）

比如我的站点配置文件以上的配置如下：

1
2
3
4
5
6
7
# Site
title: 不才陈某技术博客
subtitle: 微信公众号：码猿技术专栏
description: 本站是不才陈某的技术分享博客。内容涵盖Java后端技术、Spring Boot、微服务架构、系统安全、前端、系统监控等相关的研究与知识分享。
author: 不才陈某
language: zh-Hans
timezone:

修改主题

hexo博客的主题很多，想要切换也是很简单，直接在站点配置文件中设置即可，如下：

1
2
# 切换next主题
theme: next

Next主题样式设置

Next主题提供了4种风格供我们选择，分别为Muse、Mist、Pisces、Gemini。

以上4种风格大同小异，作者博客的风格是Gemini，大家可以根据自己的喜好任意切换，在主题配置文件中找到Scheme Settings，如下：

1
2
# 设置自己喜欢的风格
scheme: Gemini

添加动态背景

动态背景能瞬间提升博客的逼格，实现的效果如下：

配置起来也是很简单，在主题配置文件中，修改如下：

1
2
# 设置为true
canvas_nest: true

修改链接的样式

默认的超链接的样式是灰色的，可以修改成如下效果：

修改文件 themes\next\source\css\_common\components\post\post.styl ，在末尾添加如下css样式：

1
2
3
4
5
6
7
8
9
10
11
// 文章内链接文本样式
.post-body p a{
  color: #0593d3;
  border-bottom: none;
  border-bottom: 1px solid #0593d3;
  &:hover {
    color: #fc6423;
    border-bottom: none;
    border-bottom: 1px solid #fc6423;
  }
}

其中选择.post-body 是为了不影响标题，选择p 是为了不影响首页阅读全文的显示样式,颜色可以自己定义。

添加文章搜索功能

搜索这个功能是很非常重要的，文章很多的情况下怎样才能快速筛选想要的文章呢？搜索的功能是少不了的。实现的效果如下：

4

Next主题添加搜索的功能很简单，首先安装搜索插件：

1
npm install hexo-generator-searchdb --save

插件安装完成之后在站点配置文件中找到Extensions，在其下面添加如下内容：

1
2
3
4
5
6
# 搜索
search:
  path: search.xml
  field: post
  format: html
  limit: 10000

搜索功能很强大，但是第一次加载可能有点慢，大概十几秒的时间才能出来搜索框，没办法，毕竟是静态的。

修改文章底部标签的#的样式

默认的文章标签的样式是带有#这个符号的，比如#Spring Boot，但是可以将#修改成标签的icon，效果如下：

5

实现方法很简单，修改模板/themes/next/layout/_macro/post.swig，搜索rel="tag">#，将#换成<i class="fa fa-tag"></i>。

修改作者头像并旋转

修改头像很简单，找一张尺寸合适、自己喜欢的图片，放在themes\next\source\images下，随后修改主题配置文件，将头像重新设置即可，配置如下：

1
2
# 设置自己的头像
avatar: /images/header.jpg

头像默认是不带旋转的，想要实现鼠标放在头像上方会自动旋转，只需要在\themes\next\source\css\_common\components\sidebar\sidebar-author.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
60
.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;

  /* 设置循环动画 [animation: (play)动画名称 (2s)动画播放时长单位秒或微秒 (ase-out)动画播放的速度曲线为以低速结束 
    (1s)等待1秒然后开始动画 (1)动画播放次数(infinite为循环播放) ]*/
 

  /* 鼠标经过头像旋转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);
  }
}

以上配置完成之后，将鼠标悬停在头像上方将会自动旋转起来。

修改``的样式

Next默认的主题样式是灰色的，不太显眼，颜色也不太好看，可以将其设置成自己喜欢的颜色，效果如下：

配置起来也是很简单，只需要在\themes\next\source\css\_custom\custom.styl文件中添加如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// Custom styles.
code {
    color: #ff7600;
    background: #fbf7f8;
    margin: 2px;
}
// 大代码块的自定义样式
.highlight, pre {
    margin: 5px 0;
    padding: 5px;
    border-radius: 3px;
}
.highlight, code, pre {
    border: 1px solid #d6d6d6;
}

以上的颜色可以配置自己喜欢的，比如效果图中的颜色是我个人比较喜欢的。

添加全文阅读的按钮

Next主题默认是没有全文阅读按钮的，文章是全部展开形式的，但是可以设置成如下效果：

共有两种配置方法，分别如下：

  1. 在md文件中需要折叠的地方添加<!--more-->，则在其下方的内容都将会折叠起来，只有点击阅读全文按钮才会显示出来。
  2. 在主题配置文件中找到auto_excerpt，这个属性可以设置为自动折叠，比如设置成只显示300个字，这样的后面的内容就会折叠起来，配置如下：
    1
    2
    3
    auto_excerpt:
      enable: true
      length: 300

添加站点访问人数计数

站点访问计数有名的就是不蒜子，使用起来非常方便，安装步骤也是很简单。

将如下的代码添加到themes/next/layout/_partial/footer.swig文件中：

1
2
3
4
5
6
7
8
9
10
<div>
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<span id="busuanzi_container_site_pv" style='display:none'>
    本站总访问量 <span id="busuanzi_value_site_pv"></span> 次
    <span class="post-meta-divider">|</span>
</span>
<span id="busuanzi_container_site_uv" style='display:none'>
    有<span id="busuanzi_value_site_uv"></span>人看过我的博客啦
</span>
</div>

添加的位置如下图，可自行根据个人喜好更换位置：

以上设置完毕后只是显示整个站点的次数，并没有显示每篇文章的访问次数，效果如下图：

如果想要显示每篇文章的访问次数，在themes/next/layout/_macro/post.swig文件第一行增加is_pv字段，如下：

1
{% macro render(post, is_index, is_pv, post_extra_class) %}

然后将这段代码插入到其中：

1
2
3
4
{% if is_pv %}
  <span class="post-meta-divider">|</span>
  <span id="busuanzi_value_page_pv"></span>次阅读
{% endif %}

插入的位置如下图：

然后再打开 themes/next/layout/post.swig，这个文件是文章的模板，给render方法传入参数（对应刚才添加的is_pv字段），如下图：

最后再打开themes/next/layout/index.swig，这个文件是首页的模板，给render方法传入参数（对应刚才添加的is_pv字段），如下图：

至此即可配置成功，效果如下图：

去掉文章目录标题的自动编号

我们自己写文章的时候一般都会自己带上标题编号，但是默认的主题会给我们带上编号，很是别扭，如何去掉呢？

在主题配置文件中找到toc属性，将其中的number属性设置成false，如下：

1
2
3
4
toc:
  enable: true
  number: false
  wrap: false

最终实现的效果如下图：

主页文章添加阴影卡片效果

添加阴影卡片效果的效果图如下：

实现方法只需要在\themes\next\source\css\_custom\custom.styl文件中添加如下内容即可：

1
2
3
4
5
6
7
8
// 主页文章添加阴影效果
 .post {
   margin-top: 60px;
   margin-bottom: 60px;
   padding: 25px;
   -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
   -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
  }

网站底部字数统计

实现的效果如下图：

首先切换到根目录，安装插件，命令如下：

1
npm install hexo-wordcount --save

然后在/themes/next/layout/_partials/footer.swig文件尾部加上：

1
2
3
4
<div class="theme-info">
  <div class="powered-by"></div>
  <span class="post-count">博客全站共{{ totalcount(site) }}字</span>
</div>

设置网站的图标Favicon

Next会有一个默认的网站图标，但是的我们可以替换成自己喜欢的，效果如下图：

实现方法很简单，自己设计一张喜欢的logo，并将图标名称改为favicon.ico，然后把图标放在/themes/next/source/images里，并且修改主题配置文件：

1
2
# Put your favicon.ico into `hexo-site/source/` directory.
favicon: /favicon.ico

添加文章字数统计功能

该功能能够为每篇文章计算字数以及阅读大致需要的时间，效果如下：

在根目录下安装hexo-wordcount,执行命令如下：

1
npm install hexo-wordcount --save

安装完成后在主题配置文件中的配置参数如下：

1
2
3
4
5
6
# Post wordcount display settings
# Dependencies: https://github.com/willin/hexo-wordcount
post_wordcount:
  item_text: true
  wordcount: true
  min2read: true

添加顶部动态加载条

实现的效果如下图：

配置很简单，只需要在主题配置文件中修改pace属性为true，如下：

1
pace: true

文章设置置顶

修改hero-generator-index 插件，把文件：node_modules/hexo-generator-index/lib/generator.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
'use strict';
var pagination = require('hexo-pagination');
module.exports = function(locals){
  var config = this.config;
  var posts = locals.posts;
    posts.data = posts.data.sort(function(a, b) {
        if(a.top && b.top) { // 两篇文章top都有定义
            if(a.top == b.top) return b.date - a.date; // 若top值一样则按照文章日期降序排
            else return b.top - a.top; // 否则按照top值降序排
        }
        else if(a.top && !b.top) { // 以下是只有一篇文章top有定义，那么将有top的排在前面（这里用异或操作居然不行233）
            return -1;
        }
        else if(!a.top && b.top) {
            return 1;
        }
        else return b.date - a.date; // 都没定义按照文章日期降序排
    });
  var paginationDir = config.pagination_dir || 'page';
  return pagination('', posts, {
    perPage: config.index_generator.per_page,
    layout: ['index', 'archive'],
    format: paginationDir + '/%d/',
    data: {
      __index: true
    }
  });
};

在文章中添加 top 值，数值越大文章越靠前，如：

1
2
3
4
5
6
7
---
title: Spring Boot 与多数据源的那点事儿~
date: 2020-05-22 22:45:48
tags: Spring Boot进阶
categories: Spring Boot
top: 100
---

文章加密访问

有些文章涉及到隐私可能需要密码才能访问，此时就可以设置加密，效果如下图：

在themes->next->layout->_partials->head.swig文件中的<meta>标签之后插入以下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>
    (function () {
        if ('{{ page.password }}') {
            if (prompt('请输入文章密码') !== '{{ page.password }}') {
                alert('密码错误！');
                if (history.length === 1) {
                    location.replace("https://chenjiabing666.github.io/"); // 这里替换成你的首页
                } else {
                    history.back();
                }
            }
        }
    })();
</script>

然后在文章的的MD文件上方添加一个password，如下：

1
2
3
4
5
6
7
8
---
title: Spring Boot 与多数据源的那点事儿~
date: 2020-05-22 22:45:48
tags: Spring Boot进阶
categories: Spring Boot
top: 100
password: 123456
---

全部配置完成后，这篇文章必须输入密码123456才能访问。

总结

本文主要介绍了Next主题美化的一些方法，关于Hexo博客搭建的教程网上很多，有不会的可以去网上搜搜教程。

作者的博客并没有设置单独的域名，完全是搭建的在Github上的，个人觉得没必要一个单独的域名，完全是自己的学习以及工作心得，因此没搞这些，不喜勿喷，哈哈………

欢迎关注我的其它发布渠道