女朋友看了我的部落格，說太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，效果如下：
實現方法很簡單，修改模板/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主題預設是沒有全文閱讀按鈕的，文章是全部展開形式的，但是可以設定成如下效果：
共有兩種配置方法，分別如下：
在 md檔案中需要摺疊的地方新增<!--more-->，則在其下方的內容都將會摺疊起來，只有點選閱讀全文按鈕才會顯示出來。在 主題配置檔案中找到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
---