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

╰半橙微兮° 2022-06-01 09:53 267阅读 0赞

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

![雪景][cover]

# 前言 #

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

# 安装NexT #

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

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

结果如图:  
![克隆NexT][NexT]  
接下来到站点的设置文件`_config.yml`中启用主题NexT。修改以下字段：

theme: next

结果如图:  
![启用NexT][NexT 1]

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

hexo clean
    hexo g
    hexo s

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

这里看到的效果，就是NexT的主题效果了，由于NexT默认启用的是`Muse`方案，所以看到的与我的博客效果差异略大,也比较ugly哈哈。接下来就开始主题配置之路了。

# 配置NexT #

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

## 开启NexT的Mist方案 ##

打开主题设置文件`themes/next/_config.yml`,搜索字段`scheme`,然后把Mist对应的方案启用。效果如下图：  
![启用Mist][Mist]  
![Mist效果][Mist 1]  
到这里，已经跟我的博客效果很接近了，接下来就是一些个性化定制了。

## 在右上角实现fork me on github ##

在右上角实现fork me on github,实现的效果如下图：  
![fork me][]  
接下来说一下实现的方法：  
首先，点击[这里][Link 1]挑选一个你喜欢的样式，然后把对应的代码复制下来。  
接着，打开文件：`themes/next/layout/_layout.swig`,搜索`<div class="headband"></div>`。然后把你刚刚复制的代码，粘贴到此处下面，并修改`href`为你的github的对应地址。如下图：  
![添加form me代码][form me]

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

1、打开目录`themes/next/layout/_macro`，新建文件`passage-end-tag.swig`。打开文件并输入以下代码后保存退出：  
![code][]

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

<div>
      {% if not is_index %}
        {% include 'passage-end-tag.swig' %}
      {% endif %}
    </div>

![结束标记][optimize]

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

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

![config passage\_end\_tag][config passage_end_tag]

实现的效果如下图：  
![optimize 1][]

## 给文章添加阴影效果 ##

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

效果如图：  
![文章阴影][post-shadow.png]

## 隐藏底部Hexo标志 ##

打开文件`themes/next/layout/_partials/footer.swig`,将对应代码进行注释，如下图：  
![hide-hexo][]

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

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

npm install hexo-wordcount --save

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

<div class="copyright" >
      {% set current = date(Date.now(), "YYYY") %}
      © {% 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>

效果如图：  
![optimize 2][]

## 添加加载条 ##

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

## 添加宠物 ##

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

npm install -save hexo-helper-live2d

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

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

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

效果如图：  
![萌宠][cutepet.png]

关于live2d的配置，可以参考live2d的[官方文档][Link 2]进行配置。

# 结语 #

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

[http_www.fogcrane.org]: http://fogcrane.org
[cover]: http://ow74m25lk.bkt.clouddn.com/snow.jpg/cover
[CentOS_Hexo]: http://fogcrane.org/use-centos-hexo-build-blog.html/
[NexT]: http://ow74m25lk.bkt.clouddn.com/clone_next.png/optimize
[NexT 1]: http://ow74m25lk.bkt.clouddn.com/open_NexT.png/optimize
[next]: http://ow74m25lk.bkt.clouddn.com/hexo_next.png/optimize
[Mist]: http://ow74m25lk.bkt.clouddn.com/open_mist.png/optimize
[Mist 1]: http://ow74m25lk.bkt.clouddn.com/hexo_Mist.png/optimize
[fork me]: http://ow74m25lk.bkt.clouddn.com/fork_me.png/optimize
[Link 1]: http://tholman.com/github-corners/
[form me]: http://ow74m25lk.bkt.clouddn.com/add_fork%20me.png/optimize
[code]: http://ow74m25lk.bkt.clouddn.com/code-end-tag.png
[optimize]: http://ow74m25lk.bkt.clouddn.com/passage-end-tag.png/optimize
[config passage_end_tag]: http://ow74m25lk.bkt.clouddn.com/config-end-tag.png/optimize
[optimize 1]: http://ow74m25lk.bkt.clouddn.com/result-end-tag.png/optimize
[post-shadow.png]: http://ow74m25lk.bkt.clouddn.com/post-shadow.png
[hide-hexo]: http://ow74m25lk.bkt.clouddn.com/hide-hexo.png
[optimize 2]: http://ow74m25lk.bkt.clouddn.com/view-count.png/optimize
[optimize 3]: http://ow74m25lk.bkt.clouddn.com/pace-config.png/optimize
[cutepet.png]: http://ow74m25lk.bkt.clouddn.com/cutepet.png
[Link 2]: https://www.npmjs.com/package/hexo-helper-live2d