女朋友看了我的博客，說(shuō)太LOW了，于是我折騰了一天~

原創(chuàng)博客+1，點(diǎn)擊左下角閱讀原文進(jìn)入

目錄

• 前言
• 如何下載？
• 配置文件的分類(lèi)
• 基本信息配置
• 修改主題
• Next主題樣式設(shè)置
• 添加動(dòng)態(tài)背景
• 修改鏈接的樣式
• 添加文章搜索功能
• 修改文章底部標(biāo)簽的#的樣式
• 修改作者頭像并旋轉(zhuǎn)
• 修改``的樣式
• 添加全文閱讀的按鈕
• 添加站點(diǎn)訪問(wèn)人數(shù)計(jì)數(shù)
• 去掉文章目錄標(biāo)題的自動(dòng)編號(hào)
• 主頁(yè)文章添加陰影卡片效果
• 網(wǎng)站底部字?jǐn)?shù)統(tǒng)計(jì)
• 設(shè)置網(wǎng)站的圖標(biāo)Favicon
• 添加文章字?jǐn)?shù)統(tǒng)計(jì)功能
• 添加頂部動(dòng)態(tài)加載條
• 文章設(shè)置置頂
• 文章加密訪問(wèn)
• 總結(jié)

前言

陳某的獨(dú)立博客搭建已經(jīng)有三年多時(shí)間了，使用Hexo+Git，一直使用的主題是jacman，前幾天女票看到說(shuō)太LOW了，這哪能忍，必須換一個(gè)逼格高點(diǎn)的。

其實(shí)的三年前看到jacman這個(gè)主題還是挺喜歡的，但是現(xiàn)在的看看確實(shí)不怎地，哎，老了....

今天這篇文章來(lái)介紹下一款簡(jiǎn)潔的主題NEXT以及配置方式。先來(lái)上一張個(gè)人的博客的截圖，如下：

如何下載？

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

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

配置文件的分類(lèi)

hexo搭建的博客有兩個(gè)yml配置文件，一個(gè)稱(chēng)之為站點(diǎn)配置文件，是根目錄下的_config.yml，另一個(gè)是主題配置文件，是主題目錄下的_config.yml文件。

基本信息配置

基本信息包括：博客標(biāo)題、作者、描述、語(yǔ)言等等。這些基本信息的配置都在站點(diǎn)配置文件中。如下：

title:?標(biāo)題
subtitle:?副標(biāo)題
description:?描述
author:?作者
language:?語(yǔ)言（簡(jiǎn)體中文是zh-Hans）
timezone:?網(wǎng)站時(shí)區(qū)（Hexo?默認(rèn)使用您電腦的時(shí)區(qū)，不用寫(xiě)）

比如我的站點(diǎn)配置文件以上的配置如下：

#?Site
title:?不才陳某技術(shù)博客
subtitle:?微信公眾號(hào)：碼猿技術(shù)專(zhuān)欄
description:?本站是不才陳某的技術(shù)分享博客。內(nèi)容涵蓋Java后端技術(shù)、Spring?Boot、微服務(wù)架構(gòu)、系統(tǒng)安全、前端、系統(tǒng)監(jiān)控等相關(guān)的研究與知識(shí)分享。
author:?不才陳某
language:?zh-Hans
timezone:

修改主題

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

#?切換next主題
theme:?next

Next主題樣式設(shè)置

Next主題提供了4種風(fēng)格供我們選擇，分別為Muse、Mist、Pisces、Gemini。

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

#?設(shè)置自己喜歡的風(fēng)格
scheme:?Gemini

添加動(dòng)態(tài)背景

動(dòng)態(tài)背景能瞬間提升博客的逼格，實(shí)現(xiàn)的效果如下：

配置起來(lái)也是很簡(jiǎn)單，在主題配置文件中，修改如下：

#?設(shè)置為true
canvas_nest:?true

修改鏈接的樣式

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

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

//?文章內(nèi)鏈接文本樣式
.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 是為了不影響標(biāo)題，選擇p 是為了不影響首頁(yè)閱讀全文的顯示樣式,顏色可以自己定義。

添加文章搜索功能

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

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

npm install hexo-generator-searchdb --save

插件安裝完成之后在站點(diǎn)配置文件中找到Extensions，在其下面添加如下內(nèi)容：

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

搜索功能很強(qiáng)大，但是第一次加載可能有點(diǎn)慢，大概十幾秒的時(shí)間才能出來(lái)搜索框，沒(méi)辦法，畢竟是靜態(tài)的。

修改文章底部標(biāo)簽的#的樣式

默認(rèn)的文章標(biāo)簽的樣式是帶有#這個(gè)符號(hào)的，比如#Spring Boot，但是可以將#修改成標(biāo)簽的icon，效果如下：

實(shí)現(xiàn)方法很簡(jiǎn)單，修改模板/themes/next/layout/_macro/post.swig，搜索rel="tag">#，將#換成。

修改作者頭像并旋轉(zhuǎn)

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

#?設(shè)置自己的頭像
avatar:?/images/header.jpg

頭像默認(rèn)是不帶旋轉(zhuǎn)的，想要實(shí)現(xiàn)鼠標(biāo)放在頭像上方會(huì)自動(dòng)旋轉(zhuǎn)，只需要在\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;

??/*?設(shè)置循環(huán)動(dòng)畫(huà)?[animation:?(play)動(dòng)畫(huà)名稱(chēng)?(2s)動(dòng)畫(huà)播放時(shí)長(zhǎng)單位秒或微秒?(ase-out)動(dòng)畫(huà)播放的速度曲線為以低速結(jié)束?
????(1s)等待1秒然后開(kāi)始動(dòng)畫(huà)?(1)動(dòng)畫(huà)播放次數(shù)(infinite為循環(huán)播放)?]*/
?

??/*?鼠標(biāo)經(jīng)過(guò)頭像旋轉(zhuǎn)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?{
??/*?鼠標(biāo)經(jīng)過(guò)停止頭像旋轉(zhuǎn)?
??-webkit-animation-play-state:paused;
??animation-play-state:paused;*/

??/*?鼠標(biāo)經(jīng)過(guò)頭像旋轉(zhuǎn)360度?*/
??-webkit-transform:?rotateZ(360deg);
??-moz-transform:?rotateZ(360deg);
??transform:?rotateZ(360deg);
}

/*?Z?軸旋轉(zhuǎn)動(dòng)畫(huà)?*/
@-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);
??}
}

以上配置完成之后，將鼠標(biāo)懸停在頭像上方將會(huì)自動(dòng)旋轉(zhuǎn)起來(lái)。

修改``的樣式

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

配置起來(lái)也是很簡(jiǎn)單，只需要在\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;
}

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

添加全文閱讀的按鈕

Next主題默認(rèn)是沒(méi)有全文閱讀按鈕的，文章是全部展開(kāi)形式的，但是可以設(shè)置成如下效果：

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

1. 在md文件中需要折疊的地方添加，則在其下方的內(nèi)容都將會(huì)折疊起來(lái)，只有點(diǎn)擊閱讀全文按鈕才會(huì)顯示出來(lái)。
2. 在主題配置文件中找到auto_excerpt，這個(gè)屬性可以設(shè)置為自動(dòng)折疊，比如設(shè)置成只顯示300個(gè)字，這樣的后面的內(nèi)容就會(huì)折疊起來(lái)，配置如下：

auto_excerpt:
??enable:?true
??length:?300

添加站點(diǎn)訪問(wèn)人數(shù)計(jì)數(shù)

站點(diǎn)訪問(wèn)計(jì)數(shù)有名的就是不蒜子，使用起來(lái)非常方便，安裝步驟也是很簡(jiǎn)單。

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

<script?async?src="http://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js">script>
<span?id="busuanzi_container_site_pv"?style='display:none'>
????本站總訪問(wèn)量?<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>人看過(guò)我的博客啦
span>
</div>

添加的位置如下圖，可自行根據(jù)個(gè)人喜好更換位置：

以上設(shè)置完畢后只是顯示整個(gè)站點(diǎn)的次數(shù)，并沒(méi)有顯示每篇文章的訪問(wèn)次數(shù)，效果如下圖：

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

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

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

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

插入的位置如下圖：

然后再打開(kāi) themes/next/layout/post.swig，這個(gè)文件是文章的模板，給render方法傳入?yún)?shù)（對(duì)應(yīng)剛才添加的is_pv字段），如下圖：

最后再打開(kāi)themes/next/layout/index.swig，這個(gè)文件是首頁(yè)的模板，給render方法傳入?yún)?shù)（對(duì)應(yīng)剛才添加的is_pv字段），如下圖：

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

去掉文章目錄標(biāo)題的自動(dòng)編號(hào)

我們自己寫(xiě)文章的時(shí)候一般都會(huì)自己帶上標(biāo)題編號(hào)，但是默認(rèn)的主題會(huì)給我們帶上編號(hào)，很是別扭，如何去掉呢？

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

toc:
??enable:?true
??number:?false
??wrap:?false

最終實(shí)現(xiàn)的效果如下圖：

主頁(yè)文章添加陰影卡片效果

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

實(shí)現(xiàn)方法只需要在\themes\next\source\css\_custom\custom.styl文件中添加如下內(nèi)容即可：

//?主頁(yè)文章添加陰影效果
?.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);
??}

網(wǎng)站底部字?jǐn)?shù)統(tǒng)計(jì)

實(shí)現(xiàn)的效果如下圖：

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

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>

設(shè)置網(wǎng)站的圖標(biāo)Favicon

Next會(huì)有一個(gè)默認(rèn)的網(wǎng)站圖標(biāo)，但是的我們可以替換成自己喜歡的，效果如下圖：

實(shí)現(xiàn)方法很簡(jiǎn)單，自己設(shè)計(jì)一張喜歡的logo，并將圖標(biāo)名稱(chēng)改為favicon.ico，然后把圖標(biāo)放在/themes/next/source/images里，并且修改主題配置文件：

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

添加文章字?jǐn)?shù)統(tǒng)計(jì)功能

該功能能夠?yàn)槊科恼掠?jì)算字?jǐn)?shù)以及閱讀大致需要的時(shí)間，效果如下：

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

npm install hexo-wordcount --save

安裝完成后在主題配置文件中的配置參數(shù)如下：

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

添加頂部動(dòng)態(tài)加載條

實(shí)現(xiàn)的效果如下圖：

配置很簡(jiǎn)單，只需要在主題配置文件中修改pace屬性為true，如下：

pace:?true

文章設(shè)置置頂

修改hero-generator-index 插件，把文件：node_modules/hexo-generator-index/lib/generator.js 內(nèi)的代碼替換為：

'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;?//?都沒(méi)定義按照文章日期降序排
????});
??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 值，數(shù)值越大文章越靠前，如：

---
title:?Spring?Boot?與多數(shù)據(jù)源的那點(diǎn)事兒~
date:?2020-05-22?22:45:48
tags:?Spring?Boot進(jìn)階
categories:?Spring?Boot
top:?100
---

文章加密訪問(wèn)

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

在themes->next->layout->_partials->head.swig文件中的標(biāo)簽之后插入以下代碼：

<strong id="7actg"></strong>

<table id="7actg"></table>

<address id="7actg"></address>
<address id="7actg"></address>
<object id="7actg"><tt id="7actg"></tt></object>

欧美毛片在线观看
|
伊人在线观看免费完整版
|
男插女免费|
国产精品久久久久久久久久久久午衣片
|
污污视频网址
|
一级A片日本
|
无码毛片免费在线观看
|
久久尻逼
|
粉嫩小仙女扒开腿喷水免费
|
色欲综合插插
|