hexo+next配置

发表于 更新于 阅读次数：

说明

记录下制作该博客时候的一些配置修改，默认已经有hexo+next环境，如果没有该环境，请自行搜索教程

博客好久没更新了，发现原来的版本hexo(3.x)部署之后页面都为空，最后升级了下hexo和next到最新版本。升级过程也挺坎坷的，最后走了最傻的版本，重新新建了一个hexo和next博客项目，然后迁移博客数据过来。

升级过程中发现之前写的一些东西已经没法用了，包括添加顶部加载条, 代码样式, 增加阅读统计, 腾讯移动分析。所以配置教程基本上没什么用了

next样式修改

next提供三种样式，在next/_config.yml中直接搜索Schemes，通过开关注释进行修改，我用的是Mist

1
2
3
4
# Schemes
#scheme: Muse
scheme: Mist
#scheme: Pisces

隐藏网页底部powered By Hexo / 强力驱动

打开themes/next/layout/_partials/footer.swig, 使用注释，或直接删除以下代码

1
2
3
4
5
6
7
8
9
10
11
12
{% if theme.copyright %}
<div class="powered-by">
  {{ __('footer.powered', '<a class="theme-link" href="https://hexo.io">Hexo</a>') }}
</div>

<div class="theme-info">
  {{ __('footer.theme') }} -
  <a class="theme-link" href="https://github.com/iissnan/hexo-theme-next">
    NexT.{{ theme.scheme }}
  </a>
</div>
{% endif %}

添加顶部加载条

打开/themes/next/layout/_partials/head.swig文件，前三行之后增加：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script src="//cdn.bootcss.com/pace/1.0.2/pace.min.js"></script>
<link href="//cdn.bootcss.com/pace/1.0.2/themes/pink/pace-theme-flash.css" rel="stylesheet">

<style>
    .pace .pace-progress {
        background: #1E92FB; /*进度条颜色*/
        height: 3px;
    }
    .pace .pace-progress-inner {
         box-shadow: 0 0 10px #1E92FB, 0 0 5px     #1E92FB; /*阴影颜色*/
    }
    .pace .pace-activity {
        border-top-color: #1E92FB;    /*上边框颜色*/
        border-left-color: #1E92FB;    /*左边框颜色*/
    }
</style>

修改文章底部的那个带#号的标签

修改模板/themes/next/layout/_macro/post.swig，搜索rel=”tag”>#，将#替换成如下：

1
<i class="fa fa-tag"></i>

代码样式

在next/_config.yml中直接搜索highlight_theme，提供四种代码样式，可以自行修改找到合适自己的样式，我用的是night eighties

1
2
3
4
5
# Code Highlight theme
# Available value:
#    normal | night | night eighties | night blue | night bright
# https://github.com/chriskempson/tomorrow-theme
highlight_theme: night eighties

主页文章添加阴影效果

打开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);
}

增加阅读统计

leancloud注册账号

进入leancloud注册账号

创建应用

image

创建class

image
class名字一定得失Counter，为了避免权限问题，选择无限制

获取app id和app key

image

设置app id和app key

打开next/_config.yml，搜索leancloud_visitors，将enable设置为true，appi_id和app_key设置为上一步获取到的值

1
2
3
4
leancloud_visitors:
  enable: true
  app_id: xxxx
  app_key: xxxx

增加评论功能（来必力）

来必力注册账号

进入来必力注册账号

安装

选择免费的city版
image

获取uid

进入到 管理页面 -> 代码管理 -> 一般网站 代码中，在一堆js代码里面，搜索data-uid，后面的值即为uid

设置uid

打开next/_config.yml，搜索livere_uid，将livere_uid设置为上一步获取到的值

增加本地搜索功能

1
npm install hexo-generator-searchdb --save

配置搜索功能

在根目录的_config.yml最后加入

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

在next/_config.yml中搜索local_search，将enable设置为true

1
2
local_search:
  enable: true

搜索效果可以参考我的博客的搜索功能

增加腾讯移动分析

腾讯移动分析注册账号

进入腾讯移动分析注册账号，可以直接qq登录

创建应用

image

获取app id

image

设置app id

打开next/_config.yml，搜索tencent_mta，将tencent_mta设置为上一步获取到的app id