基于CentOS搭建Hexo博客--设置NexT主题及个性化定制

本文首发于个人我的博客： http://www.fogcrane.org

前言

本文将介绍的是Hexo的一个经典主题NexT的设置以及一些个性化定制。想了解该如何搭建博客的话能够前往个人上一篇博客：基于CentOS搭建Hexo博客。本文将延续上一篇博客进行展开。搭建完的效果就是个人博客效果,可点击传说门一睹为快~~

<!-- more -->

安装NexT

当你第一次初始化完Hexo时，默认的主题为landscape。本文将基于另外一个主题NexT进行讲解,因此,首先应该安装主题NexT。
切换到博客根目录,打开Git Bash窗口,而后克隆NexT主题。代码以下：

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

结果如图:

接下来到站点的设置文件_config.yml中启用主题NexT。修改如下字段：

theme: next

结果如图:

设置完毕以后，便可先在本地预览主题的运行效果。输入如下代码：

hexo clean
hexo g
hexo s

其中，hexo clean是为了清除数据库缓存等，每次修改了主题都须要进行此操做。hexo g是hexo generate的简写，做用是生成静态文件。hexo s是hexo server的简写，做用是把hexo部署在本地服务器。因此能够在浏览器经过http://localhost:4000/对博客进行访问。
效果如图:

这里看到的效果，就是NexT的主题效果了，因为NexT默认启用的是Muse方案，因此看到的与个人博客效果差别略大,也比较ugly哈哈。接下来就开始主题配置之路了。

配置NexT

这里为了不混淆，把博客根目录下的_config.yml文件称为站点配置文件，把themes/next目录下的_config.yml称为主题配置文件。配置工做正式开始。

开启NexT的Mist方案

打开主题设置文件themes/next/_config.yml,搜索字段scheme,而后把Mist对应的方案启用。效果以下图：


到这里，已经跟个人博客效果很接近了，接下来就是一些个性化定制了。

在右上角实现fork me on github

在右上角实现fork me on github,实现的效果以下图：

接下来讲一下实现的方法：
首先，点击这里挑选一个你喜欢的样式，而后把对应的代码复制下来。
接着，打开文件：themes/next/layout/_layout.swig,搜索<div class="headband"></div>。而后把你刚刚复制的代码，粘贴到此处下面，并修改href为你的github的对应地址。以下图：

在文章末尾添加“本文结束”标记

一、打开目录themes/next/layout/_macro，新建文件passage-end-tag.swig。打开文件并输入如下代码后保存退出：

二、打开文件：themes/next/layout/_macro/post.swig,搜索post-footer,在此代码以前添加以下代码,效果如图：

<!-- 本文结束标记 -->
<div>
  {% if not is_index %}
    {% include 'passage-end-tag.swig' %}
  {% endif %}
</div>
<!-- 本文结束标记END -->

三、打开主题配置文件themes/next/_config.yml,在文件末尾添加如下代码,效果如图：

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

实现的效果以下图：

给文章添加阴影效果

打开文件themes/next/source/css/_custom/custom.styl，输入如下代码，保存后退出。

// 主页文章 添加阴影效果
.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);
}

效果如图：

隐藏底部Hexo标志

打开文件themes/next/layout/_partials/footer.swig,将对应代码进行注释，以下图：

新增访客统计及网站字数统计

一、安装依赖包，切换到博客根目录，打开Git Bash，输入如下代码安装字数统计包

npm install hexo-wordcount --save

二、打开文件：themes/next/layout/_partials/footer.swig,输入如下代码后保存退出。

<!-- 新增访客统计代码 -->
<div class="copyright" >
  {% set current = date(Date.now(), "YYYY") %}
  &copy; {% if theme.since and theme.since != current %} {{ theme.since }} - {% endif %}
  <span itemprop="copyrightYear">{{ current }}</span>
  <span class="with-love">
    <i class="fa fa-balance-scale"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">{{ config.author }}</span>
</div>

<div class="busuanzi-count">
    <script async="" src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>
    <span class="site-uv">
      <i class="fa fa-user"></i>
      访问用户： <span class="busuanzi-value" id="busuanzi_value_site_uv"></span> 人
    </span>
    <div class="powered-by"></div>
    <span class="site-uv">
      <i class="fa fa-eye"></i>
      访问次数： <span class="busuanzi-value" id="busuanzi_value_site_pv"></span> 次
    </span>
    <!-- 博客字数统计 -->
    <span class="site-pv">
      <i class="fa fa-pencil"></i>
      博客全站共： <span class="post-count">{{ totalcount(site) }}</span> 字
    </span>
</div>
<!-- 新增访客统计代码 END-->

效果如图：

添加加载条

打开主题配置文件themes/next/_config.yml,搜索字段：pace，进行如下配置，如图:

添加宠物

一、安装依赖包，切换到博客根目录，打开Git Bash，输入如下代码安装live2d包

npm install --save hexo-helper-live2d

二、打开文件：themes/next/layout/_layout.swig,在</body>以前加入：{{ live2d() }},保存后退出。

三、打开站点配置文件，在末尾添加live2d的相关配置：

live2d:
  model: wanko
  width: 300
  height: 600
  horizontalOffset: 50
  position: left
  opacityDefault: 1
  scaling: 1.5
  mobileShow: false

效果如图：

关于live2d的配置，能够参考live2d的官方文档进行配置。

结语

目前只是配置了以上这些地方，更多个性化定制后续会持续更新，敬请留意~