Hexo使用记录(五):更换Next主题及优化

发表于 | 更新于: | 分类于
字数统计: 2.1k | 阅读时长 ≈ 9

前言：

这里只整理出我使用到的官网没给出的配置，具体配置及插件可参考 主题文档地址 ，插件地址。

安装主题：

进入本地网站根目录，打开Git Base窗口，输入下面命令。

1
git clone https://github.com/iissnan/hexo-theme-next themes/next

clone完成后，打开根目录下的themes文件夹，找到刚刚下载的next主题，复制文件夹名称，再打开站点配置文件，搜索theme字段并把后面的值改为你刚刚复制的文件夹名称，默认应该是next。

1
2
3
4
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

然后hexo s启动服务，打开 http://localhost:4000 成功与否自己看。

配置主题：

配置文件在根目录下/themes/next/_config.yml，注意与站点配置文件不同。

我大概用到的有整合标签页面到侧边栏，代码块复制功能，文章加密，搜索，去除底部由 Hexo 强力驱动，网易云外链整理，url优化，大概效果如下。

image-20200403172046572

网易云及标签

整合标签及网易云到侧边栏需修改\themes\next\layout_macro\sidebar.swig文件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!--网易云音乐播放-->
<div class="sidebar-inner"  style="height: 130px;">
    {% if theme.background_music %}
                 <div>
                    <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width="210" height="110" src="{{ theme.background_music }}"></iframe>
                 </div>
    {% endif %}
</div>
<!--标签页-->
<div class="sidebar-inner" style="margin-top:10px;margin-bottom: 20px;">
    <div class="tag-cloud-title" type>
        {{ _p('counter.tag_cloud', site.tags.length) }}
    </div>
    <div class="tag-cloud-tags">
        {{ tagcloud({min_font: 12, max_font: 30, amount: 300, color: true, start_color: '#000000', end_color: '#111'}) }}
    </div>
</div>

把上面的代码加到sidebar.swig文件中的以下位置。

1
2
3
4
5
6
7
8
9
10
11
<aside id="sidebar" class="sidebar">
{% if theme.sidebar.onmobile %}
  <div id="sidebar-dimmer"></div>
{% endif %}
    <div>  <!--加一层div-->
    <!--将上面的代码放在这层div的最顶部-->
        ----
        ----
        ----
    </div> <!--end-->
</aside>

获取到网易云外链，不会的自行百度，然后复制外链//后的内容，添加到_config.yml主题配置文件中，格式如下，位置任意。

1
2
#网易云音乐
background_music: //music.163.com/outchain/player?type=2&id=559829400&auto=1&height=66

代码块复制功能

三方插件 clipboardjs ，相关介绍和兼容性我就不赘述了，去它主页或github上看。

下载地址 ：clipboard.min.js 或 clipboard.js

保存文件clipboard.js 或 clipboard.min.js到目录如下：\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-globe"></i><span>copy</span>';
    copyHtml += '</button>';
    $(".highlight .code pre").before(copyHtml);
    new ClipboardJS('.btn-copy', {
        target: function(trigger) {
            return trigger.nextElementSibling;
        }
    });
  }
  initCopyCode();
}(window, document);

在\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;
}

修改\themes\next\layout_layout.swig文件中，添加引用（注：在 swig 末尾或 body 结束标签（``）之前添加）：

1
2
3
<!-- 代码块复制功能 -->
<script type="text/javascript" src="/js/src/clipboard.min.js"></script>  
<script type="text/javascript" src="/js/src/clipboard-use.js"></script>

文章加密插件

进入根目录，打开Git Bash输入下面的命令，安装插件，注意此插件会使本文章的复制代码功能失效。

1
npm install --save hexo-blog-encrypt

安装成功后，在站点配置文件(_config.yml)中任意位置加入以下配置。

1
2
3
4
encrypt:
    enable: true
    default_abstract: 是该博客的摘要，会显示在博客的列表页
    default_message: 这个是博客查看时，密码输入框上面的描述性文字

然后在你的文章的头部添加上对应的字段，如 password, abstract, message

1
2
3
4
5
6
7
8
9
10
11
12
title: '文章加密'
categories:
  - Other
tags:
  - Hexo
  - Next
abbrlink: 61e56c7e
date: 2020-04-03 14:38:40
keywords: 博客文章密码
password: TloveY
abstract: 是该博客的摘要，会显示在博客的列表页
message: 这个是博客查看时，密码输入框上面的描述性文字

注意在文章头部添加的message和abstract会覆盖站点配置文件中的内容。

搜索插件

进入根目录，打开Git Bash输入下面的命令，安装插件。安装之后，会在站点目录的 public 文件夹下创建一个 search.xml 文件。

1
npm install hexo-generator-search --save

安装成功后，在站点配置文件(_config.yml)中任意位置加入以下配置。

1
2
3
4
5
6
# Search 
search:
  path: search.xml # 索引文件的路径，相对于站点根目录
  field: post	# 搜索范围，默认是 post，还可以选择 page、all，设置成 all 表示搜索所有页面
  format: html
  limit: 10000	# 限制搜索的条目数

去除底部由 Hexo 强力驱动

修改\themes\next\layout_partials\footer.swig文件，用去测试该把哪里注释掉。

Url优化插件

进入根目录，打开Git Bash输入下面的命令，安装abbrlink插件。

1
npm install hexo-abbrlink --save

安装成功后，在站点配置文件(_config.yml)中搜索permalink定位，加入以下配置。

1
2
3
4
5
permalink: posts/:abbrlink.html
permalink_defaults:
abbrlink:
  alg: crc16   #算法： crc16(default) and crc32
  rep: hex     #进制： dec(default) and hex

crc16的最大帖子数是65535，生成的链接如下所示：

1
2
3
4
5
6
7
8
crc16 & hex
https://www.sbblog.top/posts/66c8.html
crc16 & dec
https://www.sbblog.top/posts/65535.html
crc32 & hex
https://www.sbblog.top/posts/8ddf18fb.html
crc32 & dec
https://www.sbblog.top/posts/1690090958.html

此插件会在你新建文章的时候在头部生成一个abbrlink，这个是唯一的，请不要删除或修改。

此外还要配置标签和分类的url，如果你能保证你的标签全是简短的英文，不配置也可以。

在站点配置文件(_config.yml)中搜索Category & Tag定位，配置形式如下，之后再文章头部写相应的中文就可以。

1
2
3
4
5
6
7
8
9
# Category & Tag
default_category: uncategorized
category_map: #分类别名
  SEO技术: seo
  娱乐放松: play

tag_map: #标签别名
  chrome插件: chrome-extensions
  typecho评论验证: typecho-comm

公益404页面

因为使用公益404插件有点小问题，所有我是在/source下新建404.html，加入以下代码。

1
2
3
4
5
6
7
<!DOCTYPE HTML>
<html>
<head>
  <title>公益404</title>
  <script type="text/javascript" src="//qzonestyle.gtimg.cn/qzone/hybrid/app/404/search_children.js" charset="utf-8" homePageUrl="你的url地址" homePageName="回到我的主页"></script>
</head>
</html>

分享按钮

详情请查看官方文档 ，下载needsharebutton.min.js和needsharebutton.min.css，保存位置随意，注意代码中的路径要和保存的位置相符合，我这里是在source文件夹下分别新建了css和js文件夹并将上述文件放入相应的文件夹，修改\themes\next\layout_macro\post.swig文件，把下面代码放入你认为合适的地方，我的是在在END POST BODY的第一个endif前，

1
2
3
4
5
6
7
8
<!-- needsharebutton Javascript file -->
<script src="/js/needsharebutton.min.js"></script>
<!-- needsharebutton CSS file -->
<link href="/css/needsharebutton.min.css" rel="stylesheet" />
<div style="text-align:center">
	<button  class="btn btn-default need-share-button">Share</button>
</div>
</div>

文章更新时间

修改（博客主题目录）主题配置文件，_config.yml文件，找到updated_at并把值改为true，然后在Front-matter（文章页头部）添加 updated 参数 ，默认为文件的修改日期。

1
2
3
4
5
6
# Post meta display settings
post_meta:
  item_text: true
  created_at: true
  updated_at: true
  categories: true

结语：

因为我这也是第一次使用，什么留言，打赏什么的我认为没必要就没配置，而上面这些也只是简单的配置了一下，建议多看看官方文档 ，里面有很多比较好的插件，也许就适合你的博客呢。