GitHub Pages+Hexo+NexT

Posted on In Views: Valine:
Symbols count in article: 9.9k Reading time ≈ 17 mins.

环境：

node.js 10.14.2

npm 6.4.1

hexo 3.8.0

NexT 6.6.0

Hexo常用命令

Hexo 最常用的几个命令

Hexo命令速记

hexo clean && hexo g && hexo s -s

NexT 主题的使用

hexo-theme-next

Theme NexT

推荐新入坑的兄弟使用第一种方式来获取NexT主题。

主题配置文件

Data Files

为了以后平滑升级，使用Hexo3.0的Data Files方式

NexT-Way

  1. 在hexo/source/_data目录（没有的话新建一个）下新建next.yml文件。
  2. 把主题配置文件中的选项全部 copy 到next.yml中。
  3. 在next.yml文件中设置override选项为true。
  4. 在站点配置文件中修改theme选项为next

主题设置

开始使用

主题优化

头像旋转

Hexo Next 头像圆形并旋转

注意stylus中文版参考文档之注释(Comments)

单行注释使用//,多行使用/* */

修改/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
61
62
63
64
.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;
  opacity: hexo-config('avatar.opacity') is a 'unit' ? hexo-config('avatar.opacity') : 1;
  // 头像圆形样式
  /* start */
  border-radius: 50%
  webkit-transition: 1.4s all;
  moz-transition: 1.4s all;
  ms-transition: 1.4s all;
  transition: 1.4s all;
  /* end */
}

if hexo-config('avatar.rounded') {
.site-author-image {
  border-radius: 100%;
}
}

if hexo-config('avatar.rotated') {
.site-author-image {
  -webkit-transition: -webkit-transform 1.0s ease-out;
  -moz-transition: -moz-transform 1.0s ease-out;
  -ms-transition: -ms-transform 1.0s ease-out;
  transition: transform 1.0s ease-out;
}

.site-author-image:hover {
  -webkit-transform: rotateZ(360deg);
  -moz-transform: rotateZ(360deg);
  -ms-transform: rotate(360deg);
  transform: rotateZ(360deg);
}
}

.site-author-name {
  margin: $site-author-name-margin;
  text-align: $site-author-name-align;
  color: $site-author-name-color;
  font-weight: $site-author-name-weight;
}

.site-description {
  margin-top: $site-description-margin-top;
  text-align: $site-description-align;
  font-size: $site-description-font-size;
  color: $site-description-color;
}

// 头像旋转事件
/* start */
.site-author-image:hover {
  background-color: #55DAE1;
  webkit-transform: rotate(360deg) scale(1.1);
  moz-transform: rotate(360deg) scale(1.1);
  ms-transform: rotate(360deg) scale(1.1);
  transform: rotate(360deg) scale(1.1);
}
/* end */

文章底部带#号的标签

文章底部带#号的标签

修改模板/themes/next/layout/_macro/post.swig，搜索 rel="tag">#，将#换成<i class="fa fa-tag"></i>

在每篇文章末尾统一添加“本文结束”标记

在每篇文章末尾统一添加“本文结束

  1. 在路径\themes\next\layout\_macro中新建passage-end-tag.swig文件,并添加以下内容：
1
2
3
4
5
<div>
{% if not is_index %}
    <div style="text-align:center;color: #ccc;font-size:14px;">-------------本文结束<i class="fa fa-paw"></i>感谢您的阅读-------------</div>
{% endif %}
</div>
  1. 打开\themes\next\layout\_macro\post.swig文件，在END POST BLOCK之后， 添加以下代码：
1
2
3
4
5
<div>
	{% if not is_index %}
		{% include 'passage-end-tag.swig' %}
	{% endif %}
</div>
  1. 打开主题配置文件next.yml,在末尾添加：
1
2
3
# 文章末尾添加“本文结束”标记
passage_end_tag:
  enabled: true

主页文章加阴影

主页文章加阴影

打开\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
2
3
post_meta:
  updated_at:
    enabled: true

要想具体显示到时分秒,则修改站点配置文件的

1
date_format: YYYY-MM-DD HH:mm:ss

代码添加复制按钮

Hexo NexT主题代码块添加复制功能

  1. 下载clipboard.js

  2. 保存文件clipboard.min.js 到目录\themes\next\source\js\src

  3. 在.\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);

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

  5. 在.\themes\next\layout\_layout.swig文件中，添加引用（注：在 swig 末尾或 body 结束标签（</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>

文章加密

hexo-blog-encrypt

  1. npm install --save hexo-blog-encrypt

  2. 在站点配置文件下添加如下配置：

    1
    2
    encrypt:
        enable: true

  3. 在需要加密的文章的头部添加上对应的字段，如 password, abstract, message

    1
    2
    3
    4
    5
    ---
    password: Mike
    abstract: Welcome to my blog, enter password to read.
    message: Welcome to my blog, enter password to read.
    ---

二次元看板娘

hexo-helper-live2d

  1. npm install --save hexo-helper-live2d

  2. npm install --save live2d-widget-model-wanko

  3. 向站点配置文件中添加如下配置：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    live2d:
      enable: true
      scriptFrom: local
      pluginRootPath: live2dw/
      pluginJsPath: lib/
      pluginModelPath: assets/
      tagMode: false
      debug: false
      model:
        use: live2d-widget-model-wanko
      display:
        position: right
        width: 150
        height: 300
      mobile:
        show: true

    注：在next.yml中配置时，width, height等参数不起作用。

加载条

Load bar at the top for NexT

  1. 将theme-next-pace克隆到本地一个空目录里。
  2. 删掉pace目录下的.git文件夹
  3. 将pace目录 copy 到themes/next/source/lib目录下
  4. 修改主题配置文件next.yml的pace属性值为true

显示文章浏览进度百分比

在主题配置文件中修改属性sidebar下scrollpercent的值为true

文章预览

在文章中使用截断标记<!-- more -->手动指定文章预览的内容。

评论系统

Gitalk

在hexo next主题上使用gitalk

Hexo NexT主题中集成gitalk评论系统

  1. Click here to sign up for a new OAuth Application

    Application name： # 应用名称，随意，如gitalk
    Homepage URL： # 网站URL，如https://username.github.io,username是 GitHub 账户名
    Application description # 描述，随意，如Comment System for Blog
    Authorization callback URL：# 网站URL，https://username.github.io,username是 GitHub 账户名

  2. 修改主题配置文件中的如下属性

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    # Gitalk 
    # Demo: https://gitalk.github.io
    # Reference: https://asdfv1929.github.io/2018/01/20/gitalk/, https://liujunzhou.cn/2018/8/10/gitalk-error/#more
    gitalk:
      enable: true
      github_id: username # Github repo owner
      repo: gitalk # Repository name to store issues.
      client_id: ****** # Github Application Client ID
      client_secret: ****** # Github Application Client Secret
      admin_user: gzhennaxia # GitHub repo owner and collaborators, only these guys can initialize github issues
      distraction_free_mode: true # Facebook-like distraction free mode

Valine

Comment Systems Valine

  1. Create an account or log into LeanCloud, and then click on the bottom left corner to create the application in dashboard.

  2. Go to the application you just created, select Settings -> Apply Key in the lower left corner, and you will see your APP ID and APP Key.

  3. Set the value enable to true, add the obtained APP ID (appid) and APP Key (appkey), and edit other configurations in valine section in the theme config file as following:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    # Valine.
    # You can get your appid and appkey from https://leancloud.cn
    # more info please open https://valine.js.org
    valine:
      enable: true # When enable is set to be true, leancloud_visitors is recommended to be closed for the re-initialization problem within different leancloud adk version.
      appid: ****** # your leancloud application appid
      appkey: ****** # your leancloud application appkey
      notify: false # mail notifier , https://github.com/xCss/Valine/wiki
      verify: false # Verification code
      placeholder: Just go go # comment box placeholder
      avatar: mm # gravatar style
      guest_info: nick,mail,link # custom comment header
      pageSize: 10 # pagination size
      visitor: false # leancloud-counter-security is not supported for now. When visitor is set to be true, appid and appkey are recommended to be the same as leancloud_visitors' for counter compatibility. Article reading statistic https://valine.js.org/visitor.html

Gitalk + Valine双评论系统

在完成各自配置后对themes\next\layout\_partials\comments.swig做如下修改：

Before

1
2
3
4
5
6
7
{% elseif theme.valine.enable and theme.valine.appid and theme.valine.appkey %}
	<div class="comments" id="comments">
	</div>

{% elseif theme.gitalk.enable %}
	<div id="gitalk-container">
	</div>

After

1
2
3
4
5
6
7
{% elseif theme.gitalk.enable %}
    <div id="gitalk-container">
    </div>
	{% if theme.valine.enable and theme.valine.appid and theme.valine.appkey %}
		<div class="comments" id="comments">
		</div>
	{% endif %}

自动部署

Continuous Integration

踩坑记录

npm install warnings

npm install warnings

1
2
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.1.3 (node_modules/hexo-cli/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

解决方法

忽略就好

Hexo g error

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
ERROR ENOENT: no such file or directory, open 'F:\Hexo\themes\next\layout\menu.swig'
Error: ENOENT: no such file or directory, open 'F:\Hexo\themes\next\layout\menu.swig'
    at Object.openSync (fs.js:439:3)
    at Object.readFileSync (fs.js:344:35)
    at Object.ret.load (F:\Hexo\node_modules\swig-templates\lib\loaders\filesystem.js:59:15)
    at exports.Swig.compileFile (F:\Hexo\node_modules\swig-templates\lib\swig.js:740:31)
    at Object.eval [as tpl] (eval at precompile (F:\Hexo\node_modules\swig-templates\lib\swig.js:537:13), <anonymous>:7:18)
    at compiled (F:\Hexo\node_modules\swig-templates\lib\swig.js:664:18)
    at Theme._View.View._compiled.locals [as _compiled] (F:\Hexo\node_modules\hexo\lib\theme\view.js:125:48)
    at Theme._View.View.View.render (F:\Hexo\node_modules\hexo\lib\theme\view.js:30:15)
    at route.set (F:\Hexo\node_modules\hexo\lib\hexo\index.js:394:29)
    at tryCatcher (F:\Hexo\node_modules\bluebird\js\release\util.js:16:23)
    at F:\Hexo\node_modules\bluebird\js\release\method.js:15:34
    at RouteStream._read (F:\Hexo\node_modules\hexo\lib\hexo\router.js:134:3)
    at RouteStream.Readable.read (_stream_readable.js:452:10)
    at resume_ (_stream_readable.js:899:12)
    at process._tickCallback (internal/process/next_tick.js:63:19)

场景再现

从releases下载的 NexT 主题，然后再通过修改目录名为next的方式使用该主题的时候，生成文件的时候报的错。

报错原因

未知

解决方法

Wget for windows——优雅地实现批量下载

换用命令行下载的方式就不会报这个错了。