女朋友看了我的博客，說太LOW了，於是我搞了一天~

持續原創輸出，點擊上方藍字關注我

原創博客+1，點擊左下角閱讀原文進入

目錄

• 前言
• 如何下載？
• 配置文件的分類
• 基本信息配置
• 修改主題
• Next主題樣式設置
• 添加動態背景
• 修改鏈接的樣式
• 添加文章搜索功能
• 修改文章底部標籤的#的樣式
• 修改作者頭像並旋轉
• 修改``的樣式
• 添加全文閱讀的按鈕
• 添加站點訪問人數計數
• 去掉文章目錄標題的自動編號
• 主頁文章添加陰影卡片效果
• 網站底部字數統計
• 設置網站的圖標Favicon
• 添加文章字數統計功能
• 添加頂部動態加載條
• 文章設置置頂
• 文章加密訪問
• 總結

前言

陳某的獨立博客搭建已經有三年多時間了，使用Hexo+Git，一直使用的主題是jacman，前幾天女票看到說太LOW了，這哪能忍，必須換一個逼格高點的。

其實的三年前看到jacman這個主題還是挺喜歡的，但是現在的看看確實不怎地，哎，老了....

今天這篇文章來介紹下一款簡潔的主題NEXT以及配置方式。先來上一張個人的博客的截圖，如下：

如何下載？

NEXT這款主題源碼都直接託管在GitHub上，可以直接搜索，下載地址：https://github.com/theme-next/hexo-theme-next.git。

下載源碼之後，直接解壓到博客的themes的目錄下，比如我的主題目錄就是G:\hexo\themes\next。

配置文件的分類

hexo搭建的博客有兩個yml配置文件，一個稱之爲站點配置文件，是根目錄下的_config.yml，另一個是主題配置文件，是主題目錄下的_config.yml文件。

基本信息配置

基本信息包括：博客標題、作者、描述、語言等等。這些基本信息的配置都在站點配置文件中。如下：

title: 標題
subtitle: 副標題
description: 描述
author: 作者
language: 語言（簡體中文是zh-Hans）
timezone: 網站時區（Hexo 默認使用您電腦的時區，不用寫）

比如我的站點配置文件以上的配置如下：

# Site
title: 不才陳某技術博客
subtitle: 微信公衆號：碼猿技術專欄
description: 本站是不才陳某的技術分享博客。內容涵蓋Java後端技術、Spring Boot、微服務架構、系統安全、前端、系統監控等相關的研究與知識分享。
author: 不才陳某
language: zh-Hans
timezone:

修改主題

hexo博客的主題很多，想要切換也是很簡單，直接在站點配置文件中設置即可，如下：

# 切換next主題
theme: next

Next主題樣式設置

Next主題提供了4種風格供我們選擇，分別爲Muse、Mist、Pisces、Gemini。

以上4種風格大同小異，作者博客的風格是Gemini，大家可以根據自己的喜好任意切換，在主題配置文件中找到Scheme Settings，如下：

# 設置自己喜歡的風格
scheme: Gemini

添加動態背景

動態背景能瞬間提升博客的逼格，實現的效果如下：

配置起來也是很簡單，在主題配置文件中，修改如下：

# 設置爲true
canvas_nest: true

修改鏈接的樣式

默認的超鏈接的樣式是灰色的，可以修改成如下效果：

修改文件 themes\next\source\css\_common\components\post\post.styl ，在末尾添加如下css樣式：

// 文章內鏈接文本樣式
.post-body p a{
  color: #0593d3;
  border-bottom: none;
  border-bottom: 1px solid #0593d3;
  &:hover {
    color: #fc6423;
    border-bottom: none;
    border-bottom: 1px solid #fc6423;
  }
}

其中選擇.post-body 是爲了不影響標題，選擇p 是爲了不影響首頁閱讀全文的顯示樣式,顏色可以自己定義。

添加文章搜索功能

搜索這個功能是很非常重要的，文章很多的情況下怎樣才能快速篩選想要的文章呢？搜索的功能是少不了的。實現的效果如下：

Next主題添加搜索的功能很簡單，首先安裝搜索插件：

npm install hexo-generator-searchdb --save

插件安裝完成之後在站點配置文件中找到Extensions，在其下面添加如下內容：

# 搜索
search:
  path: search.xml
  field: post
  format: html
  limit: 10000

搜索功能很強大，但是第一次加載可能有點慢，大概十幾秒的時間才能出來搜索框，沒辦法，畢竟是靜態的。

修改文章底部標籤的#的樣式

默認的文章標籤的樣式是帶有#這個符號的，比如#Spring Boot，但是可以將#修改成標籤的icon，效果如下：

5

實現方法很簡單，修改模板/themes/next/layout/_macro/post.swig，搜索rel="tag">#，將#換成<i class="fa fa-tag"></i>。

修改作者頭像並旋轉

修改頭像很簡單，找一張尺寸合適、自己喜歡的圖片，放在themes\next\source\images下，隨後修改主題配置文件，將頭像重新設置即可，配置如下：

# 設置自己的頭像
avatar: /images/header.jpg

頭像默認是不帶旋轉的，想要實現鼠標放在頭像上方會自動旋轉，只需要在\themes\next\source\css\_common\components\sidebar\sidebar-author.styl文件下添加如下一段代碼：

.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;

  /* 頭像圓形 */
  border-radius: 80px;
  -webkit-border-radius: 80px;
  -moz-border-radius: 80px;
  box-shadow: inset 0 -1px 0 #333sf;

  /* 設置循環動畫 [animation: (play)動畫名稱 (2s)動畫播放時長單位秒或微秒 (ase-out)動畫播放的速度曲線爲以低速結束 
    (1s)等待1秒然後開始動畫 (1)動畫播放次數(infinite爲循環播放) ]*/
 

  /* 鼠標經過頭像旋轉360度 */
  -webkit-transition: -webkit-transform 1.0s ease-out;
  -moz-transition: -moz-transform 1.0s ease-out;
  transition: transform 1.0s ease-out;
}

img:hover {
  /* 鼠標經過停止頭像旋轉 
  -webkit-animation-play-state:paused;
  animation-play-state:paused;*/

  /* 鼠標經過頭像旋轉360度 */
  -webkit-transform: rotateZ(360deg);
  -moz-transform: rotateZ(360deg);
  transform: rotateZ(360deg);
}

/* Z 軸旋轉動畫 */
@-webkit-keyframes play {
  0% {
    -webkit-transform: rotateZ(0deg);
  }
  100% {
    -webkit-transform: rotateZ(-360deg);
  }
}
@-moz-keyframes play {
  0% {
    -moz-transform: rotateZ(0deg);
  }
  100% {
    -moz-transform: rotateZ(-360deg);
  }
}
@keyframes play {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(-360deg);
  }
}

以上配置完成之後，將鼠標懸停在頭像上方將會自動旋轉起來。

修改``的樣式

Next默認的主題樣式是灰色的，不太顯眼，顏色也不太好看，可以將其設置成自己喜歡的顏色，效果如下：

配置起來也是很簡單，只需要在\themes\next\source\css\_custom\custom.styl文件中添加如下代碼：

// Custom styles.
code {
    color: #ff7600;
    background: #fbf7f8;
    margin: 2px;
}
// 大代碼塊的自定義樣式
.highlight, pre {
    margin: 5px 0;
    padding: 5px;
    border-radius: 3px;
}
.highlight, code, pre {
    border: 1px solid #d6d6d6;
}

以上的顏色可以配置自己喜歡的，比如效果圖中的顏色是我個人比較喜歡的。

添加全文閱讀的按鈕

Next主題默認是沒有全文閱讀按鈕的，文章是全部展開形式的，但是可以設置成如下效果：

共有兩種配置方法，分別如下：

1. 在md文件中需要摺疊的地方添加<!--more-->，則在其下方的內容都將會摺疊起來，只有點擊閱讀全文按鈕纔會顯示出來。
2. 在主題配置文件中找到auto_excerpt，這個屬性可以設置爲自動摺疊，比如設置成只顯示300個字，這樣的後面的內容就會摺疊起來，配置如下：

auto_excerpt:
  enable: true
  length: 300

添加站點訪問人數計數

站點訪問計數有名的就是不蒜子，使用起來非常方便，安裝步驟也是很簡單。

將如下的代碼添加到themes/next/layout/_partial/footer.swig文件中：

<div>
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<span id="busuanzi_container_site_pv" style='display:none'>
    本站總訪問量 <span id="busuanzi_value_site_pv"></span> 次
    <span class="post-meta-divider">|</span>
</span>
<span id="busuanzi_container_site_uv" style='display:none'>
    有<span id="busuanzi_value_site_uv"></span>人看過我的博客啦
</span>
</div>

添加的位置如下圖，可自行根據個人喜好更換位置：

以上設置完畢後只是顯示整個站點的次數，並沒有顯示每篇文章的訪問次數，效果如下圖：

如果想要顯示每篇文章的訪問次數，在themes/next/layout/_macro/post.swig文件第一行增加is_pv字段，如下：

{% macro render(post, is_index, is_pv, post_extra_class) %}

然後將這段代碼插入到其中：

{% if is_pv %}
  <span class="post-meta-divider">|</span>
  <span id="busuanzi_value_page_pv"></span>次閱讀
{% endif %}

插入的位置如下圖：

然後再打開 themes/next/layout/post.swig，這個文件是文章的模板，給render方法傳入參數（對應剛纔添加的is_pv字段），如下圖：

最後再打開themes/next/layout/index.swig，這個文件是首頁的模板，給render方法傳入參數（對應剛纔添加的is_pv字段），如下圖：

至此即可配置成功，效果如下圖：

去掉文章目錄標題的自動編號

我們自己寫文章的時候一般都會自己帶上標題編號，但是默認的主題會給我們帶上編號，很是彆扭，如何去掉呢？

在主題配置文件中找到toc屬性，將其中的number屬性設置成false，如下：

toc:
  enable: true
  number: false
  wrap: false

最終實現的效果如下圖：

主頁文章添加陰影卡片效果

添加陰影卡片效果的效果圖如下：

實現方法只需要在\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);
  }

網站底部字數統計

實現的效果如下圖：

首先切換到根目錄，安裝插件，命令如下：

npm install hexo-wordcount --save

然後在/themes/next/layout/_partials/footer.swig文件尾部加上：

<div class="theme-info">
  <div class="powered-by"></div>
  <span class="post-count">博客全站共{{ totalcount(site) }}字</span>
</div>

設置網站的圖標Favicon

Next會有一個默認的網站圖標，但是的我們可以替換成自己喜歡的，效果如下圖：

實現方法很簡單，自己設計一張喜歡的logo，並將圖標名稱改爲favicon.ico，然後把圖標放在/themes/next/source/images裏，並且修改主題配置文件：

# Put your favicon.ico into `hexo-site/source/` directory.
favicon: /favicon.ico

添加文章字數統計功能

該功能能夠爲每篇文章計算字數以及閱讀大致需要的時間，效果如下：

在根目錄下安裝hexo-wordcount,執行命令如下：

npm install hexo-wordcount --save

安裝完成後在主題配置文件中的配置參數如下：

# Post wordcount display settings
# Dependencies: https://github.com/willin/hexo-wordcount
post_wordcount:
  item_text: true
  wordcount: true
  min2read: true

添加頂部動態加載條

實現的效果如下圖：

配置很簡單，只需要在主題配置文件中修改pace屬性爲true，如下：

pace: true

文章設置置頂

修改hero-generator-index 插件，把文件：node_modules/hexo-generator-index/lib/generator.js 內的代碼替換爲：

'use strict';
var pagination = require('hexo-pagination');
module.exports = function(locals){
  var config = this.config;
  var posts = locals.posts;
    posts.data = posts.data.sort(function(a, b) {
        if(a.top && b.top) { // 兩篇文章top都有定義
            if(a.top == b.top) return b.date - a.date; // 若top值一樣則按照文章日期降序排
            else return b.top - a.top; // 否則按照top值降序排
        }
        else if(a.top && !b.top) { // 以下是隻有一篇文章top有定義，那麼將有top的排在前面（這裏用異或操作居然不行233）
            return -1;
        }
        else if(!a.top && b.top) {
            return 1;
        }
        else return b.date - a.date; // 都沒定義按照文章日期降序排
    });
  var paginationDir = config.pagination_dir || 'page';
  return pagination('', posts, {
    perPage: config.index_generator.per_page,
    layout: ['index', 'archive'],
    format: paginationDir + '/%d/',
    data: {
      __index: true
    }
  });
};

在文章中添加 top 值，數值越大文章越靠前，如：

---
title: Spring Boot 與多數據源的那點事兒~
date: 2020-05-22 22:45:48
tags: Spring Boot進階
categories: Spring Boot
top: 100
---

文章加密訪問

有些文章涉及到隱私可能需要密碼才能訪問，此時就可以設置加密，效果如下圖：

在themes->next->layout->_partials->head.swig文件中的<meta>標籤之後插入以下代碼：

<script>
    (function () {
        if ('{{ page.password }}') {
            if (prompt('請輸入文章密碼') !== '{{ page.password }}') {
                alert('密碼錯誤！');
                if (history.length === 1) {
                    location.replace("https://chenjiabing666.github.io/"); // 這裏替換成你的首頁
                } else {
                    history.back();
                }
            }
        }
    })();
</script>

然後在文章的的MD文件上方添加一個password，如下：

---
title: Spring Boot 與多數據源的那點事兒~
date: 2020-05-22 22:45:48
tags: Spring Boot進階
categories: Spring Boot
top: 100
password: 123456
---

全部配置完成後，這篇文章必須輸入密碼123456才能訪問。

總結

本文主要介紹了Next主題美化的一些方法，關於Hexo博客搭建的教程網上很多，有不會的可以去網上搜搜教程。

作者的博客並沒有設置單獨的域名，完全是搭建的在Github上的，個人覺得沒必要一個單獨的域名，完全是自己的學習以及工作心得，因此沒搞這些，不喜勿噴，哈哈.........