基於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的官方文檔進行配置。

結語

目前只是配置了以上這些地方，更多個性化定製後續會持續更新，敬請留意~