寫在前面
本文主要是NexT主題配置以及頁(yè)面的樣式優(yōu)化民傻，參考了許多大佬的文章以及配置文件没龙。
本文參考的文章都會(huì)直接給出原文鏈接或者以注腳的形式標(biāo)記出處僻爽，但 Google 參考了實(shí)在太多太多了，如有遺漏谨垃，歡迎指出垢袱。
前期整個(gè)博客優(yōu)化配置過程中收藏了許多很好的博客墓拜，回頭可以貼個(gè)友情鏈接大家可以去看看。
本文內(nèi)容會(huì)在后續(xù)的優(yōu)化中慢慢補(bǔ)充完整：
新建日期: 2018-10-16更新日期: 2018-10-17更新日期: 2018-10-19更新日期: 2018-10-23- 更新日期: 2018-10-30
由于本文是發(fā)布在簡(jiǎn)書请契，許多樣式效果無法展現(xiàn)咳榜，可移步Hexo+NexT 打造一個(gè)炫酷博客 查看具體的效果。
致謝大佬
本文吸收了以下大佬的內(nèi)容爽锥，搭建博客容易涌韩，后續(xù)的補(bǔ)充功能、優(yōu)化繁瑣至極氯夷，下面的幾篇文章都是比較全面臣樱，有很大的參考意義 ：
- 打造個(gè)性超贊博客Hexo+NexT+GitHubPages的超深度優(yōu)化
- 基于Hexo搭建個(gè)人博客——進(jìn)階篇(從入門到入土)
- hexo next主題設(shè)置與完善
基本定義
在 Hexo 中有兩份主要的配置文件，其名稱都是 _config.yml腮考。 其中雇毫，一份位于站點(diǎn)根目錄下，主要包含 Hexo 本身的配置秸仙；另一份位于主題目錄下嘴拢，這份配置由主題作者提供桩盲，主要用于配置主題相關(guān)的選項(xiàng)寂纪。
為了描述方便，在以下說明中赌结，將前者稱為 <span id="inline-blue">站點(diǎn)配置文件</span>捞蛋， 后者稱為 <span id="inline-purple">主題配置文件</span>。
~/hexo/_config.yml
~/hexo/themes/next/_config.yml
博客搭建
博客的搭建方式可參考這篇博文【Hexo+Gitee 搭建獨(dú)立博客】
初級(jí) 基礎(chǔ)功能篇
站點(diǎn)配置文件
最權(quán)威的當(dāng)然是先看Hexo官方文檔
下面是我在用的配置文件:
## 站點(diǎn)設(shè)置
title: 雜言非語
subtitle: 成為一個(gè)厲害得普通人
description: 小人物,碼農(nóng)
keywords:
author: Sun XY
language: zh-Hans
timezone:
#主題設(shè)置
theme: next
# 博客地址
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://sun-xyu.github.io/
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:
# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:
# 寫作文章設(shè)置
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight:
enable: true
line_number: true
auto_detect: false
tab_replace:
# Home page setting
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
path: ''
per_page: 5
order_by: -date
# Category & Tag
default_category: uncategorized
category_map:
tag_map:
# 日期格式/時(shí)間格式
date_format: YYYY-MM-DD
time_format: HH:mm:ss
# 分頁(yè)設(shè)置
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page
#RSS訂閱是設(shè)置
plugin: hexo-generator-feed
#Feed Atom
feed:
type: atom
path: atom.xml
limit: 20
# 發(fā)布部署地址設(shè)置
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repo: https://gitee.com/Sun_xy/blog.git
branch: master
# 博客搜索功能配置
search:
path: search.xml
field: post
format: html
limit: 10000
# 文章推薦功能,需要安裝插件
recommended_posts:
server: https://api.truelaurel.com #后端推薦服務(wù)器地址
timeoutInMillis: 10000 #服務(wù)時(shí)長(zhǎng)柬姚，超過此時(shí)長(zhǎng)拟杉，則使用離線推薦模式
internalLinks: 3 #內(nèi)部文章數(shù)量
externalLinks: 1 #外部文章數(shù)量
fixedNumber: false
autoDisplay: false #自動(dòng)在文章底部顯示推薦文章
excludePattern: []
titleHtml: <h1>推薦文章</h1> #自定義標(biāo)題
主題配置文件
最權(quán)威的當(dāng)然是先看NexT使用文檔
下面是我在用的配置文件: 由于內(nèi)容太長(zhǎng)無法發(fā)布，所以刪掉了量承，直接看鏈接吧搬设。
配置文件參考了reuixiy大佬的配置
進(jìn)階 網(wǎng)頁(yè)樣式篇
需要了解的
瀏覽器按 F12 即可，建議用Google Chrome 瀏覽器調(diào)試撕捍。
自定義樣式文件 : themes\next\source\css\_custom\custom.styl
修改文件后直接保存拿穴，刷新頁(yè)面即可查看效果。
修改文章頁(yè)寬
打開themes/next/source/css/_variables/base.styl忧风，找到以下字段并修改為合適的寬度：
- $content-desktop-large = 900px
+ $content-desktop-large = 1000px
修改小型代碼塊顏色
修改\themes\next\source\css\ _variables\base.styl文件默色，加入自定義顏色：
$black-deep = #222
$red = #ff2a2a
$blue-bright = #87daff
$blue = #0684bd
$blue-deep = #262a30
$orange = #fc6423
// 自定義的顏色
+ $my-code-foreground = #dd0055 // 用``圍出的代碼塊字體顏色
+ $my-code-background = #eee // 用``圍出的代碼塊背景顏色
修改$code-background和$code-foreground的值：
// Code & Code Blocks
$code-font-family = $font-family-monospace
$code-font-size = 13px
$code-font-size = unit(hexo-config('font.codes.size'), px) if hexo-config('font.codes.size') is a 'unit'
$code-border-radius = 4px
- $code-foreground = $black-light
- $code-background = $gainsboro
+ $code-background = $my-code-background
+ $code-foreground = $my-code-foreground
修改themes\next\source\css\_custom\custom.styl文件，加入自定義樣式
// 文章``代碼塊的自定義樣式
code {
margin: 0px 3px;
border: 1px solid #999;
}
修改鏈接文字樣式
修改themes\next\source\css\_custom\custom.styl文件狮腿，加入自定義樣式
//文章內(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;
}
}
修改[Read More]按鈕樣式
修改themes\next\source\css\_custom\custom.styl文件腿宰，加入自定義樣式
// [Read More]按鈕樣式
.post-button .btn {
color: #555 !important;
background-color: rgb(255, 255, 255);
border-radius: 3px;
font-size: 15px;
box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.35);
border: none !important;
transition-property: unset;
padding: 0px 15px;
}
.post-button .btn:hover {
color: rgb(255, 255, 255) !important;
border-radius: 3px;
font-size: 15px;
box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.35);
background-image: linear-gradient(90deg, #a166ab 0%, #ef4e7b 25%, #f37055 50%, #ef4e7b 75%, #a166ab 100%);
}
修改標(biāo)簽云（tagcloud）的顏色
修改themes/next/layout/page.swig文件呕诉，加入自定義樣式:
- {{ tagcloud({min_font: 12, max_font: 30, amount: 300, color: true, start_color: '#ccc', end_color: '#111'}) }}
+ {{ tagcloud({min_font: 13, max_font: 31, amount: 1000, color: true, start_color: '#9733EE', end_color: '#FF512F'}) }}
修改對(duì)應(yīng)參數(shù)值即可，參數(shù)說明見 Hexo官方文檔
修改文章底部#號(hào)標(biāo)簽,改為圖標(biāo)
修改模板/themes/next/layout/_macro/post.swig吃度，搜索 rel="tag">#甩挫，將 # 換成<i class="fa fa-tag"></i>
頭像設(shè)置圓形,停留旋轉(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;
//設(shè)置圓形
+ border-radius: 50%;
+ transition: 2s all;
}
//旋轉(zhuǎn)
+ .site-author-image:hover{
+ transform: rotate(360deg);
+ }
隱藏底部"強(qiáng)力驅(qū)動(dòng)"內(nèi)容
修改themes/next/_config.yml文件,將powered和enable設(shè)置為false
# 頁(yè)腳
footer:
# Specify the date when the site was setup.
# If not defined, current year will be used.
since: 2018
# Icon between year and copyright info.
# icon: user
icon: sun-o
# If not defined, will be used `author` from Hexo main config.
copyright:
# -------------------------------------------------------------
# Hexo link (Powered by Hexo).
- powered: true
+ powered: false
theme:
# Theme & scheme info link (Theme - NexT.scheme).
- enable: true
+ enable: false
# Version info of NexT after scheme info (vX.X.X).
version: true
文章末尾添加"本文結(jié)束"標(biāo)記
修改在themes/next/layout/_macro/post.swig中，在wechat-subscriber.swig之前添加如下代碼：
+ <div style="text-align:center;color: #ccc;font-size:14px;">---------------- The End ----------------</div>
{% if theme.wechat_subscriber.enabled and not is_index %}
<div>
{% include 'wechat-subscriber.swig' %}
</div>
{% endif %}
文章末尾追加版權(quán)信息
增加版權(quán)有兩種方式
- 修改主題
配置文件,搜索post_copyright
post_copyright:
- enable: false
+ enable: true
license: CC BY-NC-SA 3.0
license_url: https://creativecommons.org/licenses/by-nc-sa/3.0/
- 如果覺得默認(rèn)不好看,則可以自定義樣式,找到
themes/next/layout/_macro/post.swig椿每，在footer之前添加如下代碼(添加之前確保已添加樣式)：
<div>
<p id="div-border-left-red">
<b>本文基于<a target="_blank" title="Creative Commons Attribution-ShareAlike 4.0 International (CC BY-SA 4.0)" > 知識(shí)共享署名-相同方式共享 4.0 </a>國(guó)際許可協(xié)議發(fā)布</b><br/>
<span>
<b>本文地址：</b><a href="{{ url_for(page.path) }}" title="{{ page.title }}">{{ page.permalink }}</a><br/><b>轉(zhuǎn)載請(qǐng)注明出處捶闸，謝謝！</b>
</span>
</p>
</div>
添加背景圖片
通過 jquery-backstretch拖刃，具體操作呢删壮，編輯文件/themes/next/layout/_layout.swig：
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-backstretch/2.0.4/jquery.backstretch.min.js"></script>;
+ <script>
+ $("body").backstretch("https://背景圖.jpg");
+ </script>
</body>
加入到文件最后面</body>前面即可。
移動(dòng)端顯示 back-to-top 按鈕和側(cè)欄
具體手機(jī)顯示可用手機(jī)訪問我的博客
我的博客主題是Muse兑牡，主題的設(shè)計(jì)模版是 Muse 或 Mist央碟，就可以直接在主題配置文件中配置：
修改主題配置themes/next/_config.yml
# Enable sidebar on narrow view
onmobile: true
如何調(diào)試手機(jī)樣式頁(yè)面，請(qǐng)參照下圖
頁(yè)面調(diào)試好之后將代碼復(fù)制到:themes\next\source\css\_custom\custom.styl
具體可參考我的custom.styl樣式文件
~~ 附上我的custom.styl樣式文件~~
不建議全部復(fù)制粘貼使用均函，最好是F12打開亿虽，根據(jù)關(guān)鍵ID找到對(duì)應(yīng)的樣式，復(fù)制到自己的文件中苞也。
由于內(nèi)容太長(zhǎng)已刪除樣式洛勉，請(qǐng)查看鏈接。
樣式文件參考了reuixiy大佬的配置
進(jìn)階 高級(jí)功能配置
設(shè)置動(dòng)態(tài)title
themes/next/source/js/src下創(chuàng)建dytitle.js：
var OriginTitile = document.title;
var titleTime;
document.addEventListener('visibilitychange', function () {
if (document.hidden) {
$('[rel="shortcut icon"]').attr('href', "/TEP.png");
document.title = 'w(?Д?)w 出BUG啦Ｈ绯佟Ｊ蘸痢！殷勘！';
clearTimeout(titleTime);
}
else {
$('[rel="shortcut icon"]').attr('href', "/favicon.png");
document.title = '?(^?^*)又好了此再。。玲销。 ' + OriginTitile;
titleTime = setTimeout(function () {
document.title = OriginTitile;
}, 2000);
}
});
修改themes/next/layout/layout.swing,在 </body> 之前添加：
<script type="text/javascript" src="/js/src/dytitle.js"></script>
側(cè)欄加入已運(yùn)行的時(shí)間
修改文件:themes/next/layout/_custom/sidebar.swig输拇，加入一下代碼：
BirthDay=new Date("05/27/2017 15:13:14"); 日期修改為自己的
<div id="days"></div>
<script>
function show_date_time(){
window.setTimeout("show_date_time()"， 1000);
BirthDay=new Date("05/27/2017 15:13:14");
today=new Date();
timeold=(today.getTime()-BirthDay.getTime());
sectimeold=timeold/1000
secondsold=Math.floor(sectimeold);
msPerDay=24*60*60*1000
e_daysold=timeold/msPerDay
daysold=Math.floor(e_daysold);
e_hrsold=(e_daysold-daysold)*24;
hrsold=setzero(Math.floor(e_hrsold));
e_minsold=(e_hrsold-hrsold)*60;
minsold=setzero(Math.floor((e_hrsold-hrsold)*60));
seconds=setzero(Math.floor((e_minsold-minsold)*60));
document.getElementById('days').innerHTML="已運(yùn)行"+daysold+"天"+hrsold+"小時(shí)"+minsold+"分"+seconds+"秒";
}
function setzero(i){
if (i<10)
{i="0" + i};
return i;
}
show_date_time();
</script>
修改文件themes/next/layout/_macro/sidebar.swig
{# Blogroll #}
{% if theme.links %}
<div class="links-of-blogroll motion-element {{ "links-of-blogroll-" + theme.links_layout | default('inline') }}">
<div class="links-of-blogroll-title">
<i class="fa fa-fw fa-{{ theme.links_icon | default('globe') | lower }}"></i>
{{ theme.links_title }}
<i class="fa fa-fw fa-{{ theme.links_icon | default('globe') | lower }}"></i>
</div>
<ul class="links-of-blogroll-list">
{% for name, link in theme.links %}
<li class="links-of-blogroll-item">
<a href="{{ link }}" title="{{ name }}" target="_blank">{{ name }}</a>
</li>
{% endfor %}
</ul>
+ {% include '../_custom/sidebar.swig' %}
</div>
{% endif %}
- {% include '../_custom/sidebar.swig' %}
側(cè)欄增加歌曲
在網(wǎng)易云音樂中搜索我們想要插入的音樂贤斜，然后點(diǎn)擊生成外鏈播放器
復(fù)制外鏈iframe代碼:
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="http://music.163.com/outchain/player?type=2&id=22742146&auto=1&height=66"></iframe>
修改文件layout/_macro/sidebar.swig
{# Blogroll #}
{% if theme.links %}
<div class="links-of-blogroll motion-element {{ "links-of-blogroll-" + theme.links_layout | default('inline') }}">
<div class="links-of-blogroll-title">
<i class="fa fa-fw fa-{{ theme.links_icon | default('globe') | lower }}"></i>
{{ theme.links_title }}
</div>
<ul class="links-of-blogroll-list">
{% for name, link in theme.links %}
<li class="links-of-blogroll-item">
<a href="{{ link }}" title="{{ name }}" target="_blank" rel="external nofollow">{{ name }}</a>
</li>
{% endfor %}
</ul>
{% include '../_custom/sidebar.swig' %}
+ <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="http://music.163.com/outchain/player?type=2&id=22742146&auto=1&height=66"></iframe>
</div>
{% endif %}
添加最近文章欄目
修改themes/next/layout/_macro/sidebar.swig 策吠。找到theme.social板塊代碼，在該板塊最后的endif后隔一行添加如下代碼瘩绒。
{# recent posts #}
{% if theme.recent_posts %}
<div class="links-of-blogroll motion-element {{ "links-of-blogroll-" + theme.recent_posts_layout }}">
<div class="links-of-blogroll-title">
<!-- modify icon to fire by szw -->
<i class="fa fa-history fa-{{ theme.recent_posts_icon | lower }}" aria-hidden="true"></i>
{{ theme.recent_posts_title }}
</div>
<ul class="links-of-blogroll-list">
{% set posts = site.posts.sort('-date') %}
{% for post in posts.slice('0', '5') %}
<li class="recent_posts_li">
<a href="{{ url_for(post.path) }}" title="{{ post.title }}" target="_blank">{{ post.title }}</a>
</li>
{% endfor %}
</ul>
</div>
{% endif %}
編輯themes/next/source/css/_common/components/sidebar/sidebar-blogroll.styl
li.recent_posts_li {
text-align: cengter;
display: block;
word-break: keep-all;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
主題配置文件themes/next/_config.yml,添加如下代碼
recent_posts_title: 近期文章
recent_posts_layout: block
recent_posts: true
點(diǎn)擊出現(xiàn)愛心效果
在/themes/next/source/js/love.js下新建文件love.js猴抹，接著把該鏈接下的代碼拷貝粘貼到love.js文件中
!function (e, t, a) { function n() { c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"), o(), r() } function r() { for (var e = 0; e < d.length; e++)d[e].alpha <= 0 ? (t.body.removeChild(d[e].el), d.splice(e, 1)) : (d[e].y-- , d[e].scale += .004, d[e].alpha -= .013, d[e].el.style.cssText = "left:" + d[e].x + "px;top:" + d[e].y + "px;opacity:" + d[e].alpha + ";transform:scale(" + d[e].scale + "," + d[e].scale + ") rotate(45deg);background:" + d[e].color + ";z-index:99999"); requestAnimationFrame(r) } function o() { var t = "function" == typeof e.onclick && e.onclick; e.onclick = function (e) { t && t(), i(e) } } function i(e) { var a = t.createElement("div"); a.className = "heart", d.push({ el: a, x: e.clientX - 5, y: e.clientY - 5, scale: 1, alpha: 1, color: s() }), t.body.appendChild(a) } function c(e) { var a = t.createElement("style"); a.type = "text/css"; try { a.appendChild(t.createTextNode(e)) } catch (t) { a.styleSheet.cssText = e } t.getElementsByTagName("head")[0].appendChild(a) } function s() { return "rgb(" + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + ")" } var d = []; e.requestAnimationFrame = function () { return e.requestAnimationFrame || e.webkitRequestAnimationFrame || e.mozRequestAnimationFrame || e.oRequestAnimationFrame || e.msRequestAnimationFrame || function (e) { setTimeout(e, 1e3 / 60) } }(), n() }(window, document);
在\themes\next\layout\_layout.swig文件末尾添加：
{% include '_third-party/exturl.swig' %}
</body>
</html>
+ <!-- 頁(yè)面點(diǎn)擊小紅心 -->
+ <script type="text/javascript" src="/js/src/love.js"></script>
點(diǎn)擊頭像回到博客首頁(yè)
修改文件/themes/next/layout/_macro/sidebar.swig,增加以下代碼:
+ <a href="/">
<img class="site-author-image" itemprop="image"
src="{{ url_for( theme.avatar | default(theme.images + '/avatar.gif') ) }}"
alt="{{ theme.author }}" />
+ </a>
增加內(nèi)容分享服務(wù)
修改themes/next/_config.yml主題配置文件，搜索關(guān)鍵字needmoreshare2草讶，找到如下代碼并做以下修改:
# 文章分享功能
needmoreshare2:
enable: true
postbottom:
enable: true
options:
iconStyle: default
boxForm: horizontal
position: bottomCenter
networks: Weibo,Wechat,Douban,QQZone,Twitter,Facebook
float:
enable: true
options:
iconStyle: default
boxForm: vertical
position: topRight
networks: Weibo,Wechat,Douban,QQZone,Twitter,Facebook
關(guān)于分享中的微信二維碼圖片加載失敗,感謝Qcmoke大佬的解決方案
next 5.1.4版本中微信加載不出二維碼,應(yīng)該是封裝好的微信分享鏈接失效了洽糟。我是通過老版本的倉(cāng)庫(kù)
https://github.com/iissnan/hexo-theme-next 安裝的，所以有這個(gè)問題，而新版本的next是沒有這個(gè)問題的坤溃。新版本倉(cāng)庫(kù)已經(jīng)搬遷到了https://github.com/theme-next
輸入以下命令：
rm -rf themes/next/source/lib/needsharebutton
git clone https://github.com/theme-next/theme-next-needmoreshare2 themes/next/source/lib/needsharebutton
增加站內(nèi)文章搜索功能
安裝插件hexo-generator-searchdb,執(zhí)行以下命令:
npm install hexo-generator-searchdb --save
修改hexo/_config.yml站點(diǎn)配置文件,末尾新增以下代碼:
search:
path: search.xml
field: post
format: html
limit: 10000
修改themes/next/_config.yml主題配置文件拍霜，搜索關(guān)鍵字local_search找到如下代碼，將enable設(shè)置為true薪介，如下：
local_search:
enable: true
增加文章字?jǐn)?shù)統(tǒng)計(jì)及閱讀時(shí)常功能
安裝插件hexo-wordcount,執(zhí)行以下命令:
npm install hexo-wordcount --save
修改themes/next/_config.yml主題配置文件祠饺，搜索關(guān)鍵字post_wordcount,修改如下:
post_wordcount:
item_text: true
wordcount: true #單篇文章字?jǐn)?shù)
min2read: true #單篇閱讀時(shí)長(zhǎng)
totalcount: true #站點(diǎn)總字?jǐn)?shù)
separated_meta: true
增加站點(diǎn)訪問統(tǒng)計(jì)功能
next主題默認(rèn)集成了第三方訪問統(tǒng)計(jì)插件。
修改themes/next/_config.yml主題配置文件汁政，搜索關(guān)鍵字busuanzi_count:
# 不蒜子統(tǒng)計(jì)道偷，用于在頁(yè)腳顯示總訪客數(shù)和總瀏覽量，將 false 改為 true 就能直接使用
busuanzi_count:
# count values only if the other configs are false
enable: true
# custom uv span for the whole site
site_uv: true
site_uv_header: <i class="fa fa-user"></i>
site_uv_footer:
# custom pv span for the whole site
site_pv: true
site_pv_header: <i class="fa fa-eye"></i>
site_pv_footer:
# custom pv span for one page only
# 頁(yè)面瀏覽量记劈，不建議開啟勺鸦，建議用上面的 leancloud_visitors
# 首先 leancloud 更穩(wěn)定，其次 leancloud 便于管理
# 最后目木，可以利用 leancloud 的 api 建立 TopX 頁(yè)面
page_pv: false
page_pv_header: <i class="fa fa-eye"></i>
page_pv_footer:
<div class="note warning"><p>
目前不蒜子『dn-lbstatics.qbox.me』域名過期换途，更換域名到『busuanzi.ibruce.info』！故你可能需要修改>以下文件相關(guān)信息：
</p></div>
修改themes/next/layout/_third-party/analytics/busuanzi-counter.swig文件刽射，找到dn-lbstatics.qbox.me,修改代碼：
> <script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
>
文章置頂功能
移除默認(rèn)安裝的插件：
npm uninstall hexo-generator-index --save
安裝新插件:
npm install hexo-generator-index-pin-top --save
最后編輯有這需求的相關(guān)文章時(shí)军拟，在Front-matter（文件最上方以---分隔的區(qū)域）加上一行：
top: true
如果你置頂了多篇，怎么控制順序呢誓禁？設(shè)置top的值（大的在前面）懈息，比如：
# Post a.md
title: a
top: 1
# Post b.md
title: b
top: 10
文章 b 便會(huì)顯示在文章 a 的前面。
LeanCloud統(tǒng)計(jì)文章閱讀數(shù)
已有大佬提供,具體詳情請(qǐng)戳進(jìn) Hexo博客-NexT主題：使用leancloud進(jìn)行頁(yè)面訪客統(tǒng)計(jì)
文章底部添加打分系統(tǒng)
我是一個(gè)搬運(yùn)工,具體詳情請(qǐng)戳進(jìn) 超深度優(yōu)化-5.6小節(jié)
添加 TopX 頁(yè)面
懶了懶了,具體詳情請(qǐng)戳進(jìn) 超深度優(yōu)化-5.8小節(jié)
博客靜態(tài)資源壓縮優(yōu)化
用hexo生成靜態(tài)文件時(shí)摹恰，默認(rèn)生成的靜態(tài)文件存在大量空白辫继，而且css、js都未經(jīng)壓縮戒祠，這在一定程度上會(huì)影響頁(yè)面的加載骇两，所以在網(wǎng)上所搜有沒有辦法來優(yōu)化這些問題？
答案肯定是有姜盈，當(dāng)然大部分博客都提到了使用gulp來精簡(jiǎn)代碼，而我今天所要跟大家介紹的是hexo-neat插件 配阵。我為啥不選擇gulp而使用hexo-neat呢馏颂？因?yàn)橛胓ulp需要在每次生成靜態(tài)文件后，即hexo g后棋傍，都要另外執(zhí)行g(shù)ulp命令才能壓縮靜態(tài)文件救拉；而使用hexo-neat則無須另外執(zhí)行其他命令即可自動(dòng)完成壓縮功能，即方便了使用習(xí)慣瘫拣。
在站點(diǎn)的根目錄下執(zhí)行以下命令：
npm install hexo-neat --save
打開blog/_config.yml全局配置文件添加如下配置：
#靜態(tài)資源壓縮優(yōu)化
# hexo-neat
neat_enable: true # 啟用neat
# 對(duì)html優(yōu)化
neat_html:
enable: true
exclude:
# 對(duì)css優(yōu)化
neat_css:
enable: true
exclude:
- '*.min.css'
# 對(duì)js優(yōu)化
neat_js:
enable: true
mangle: true
output:
compress:
exclude:
- '*.min.js'
評(píng)論系統(tǒng)
如果上面你已經(jīng)注冊(cè)了LeanCloud(沒有注冊(cè)的點(diǎn)這里),那么只要把appid和appkey設(shè)置下即可,修改主題配置文件:
# 評(píng)論系統(tǒng)
# Valine.
# You can get your appid and appkey from https://leancloud.cn
# more info please open https://valine.js.org
valine:
enable: true
appid: #your id
appkey: #your key
notify: false # mail notifier , https://github.com/xCss/Valine/wiki
verify: false # Verification code
placeholder: Just go go # comment box placeholder
avatar: mm # gravatar style
guest_info: nick,mail,link # custom comment header
pageSize: 10 # pagination size
關(guān)于主題更新升級(jí)
對(duì)于升級(jí)主題亿絮，我們需要重新配置主題配置文件，那么每次升級(jí)都要這么干嗎？超麻煩派昧！
NexT作者給我們的建議就是使用Data Files黔姜，具體詳情請(qǐng)戳進(jìn) Theme configurations using Hexo data files #328
貼出以下總結(jié):
- 請(qǐng)先確保你所使用的 Hexo 版本在 3 以上
- 在站點(diǎn)的 source/_data 目錄下新建 next.yml 文件（_data目錄可能需要新建）
- 遷移站點(diǎn)配置文件和主題配置文件中的配置到 next.yml 中
所有主題相關(guān)的配置都可以寫到 next.yml 文件中。 主題目錄下的 _config.yml 可以不用做任何修改蒂萎。
若你是新安裝的秆吵，可以將主題的 _config.yml 里面的內(nèi)容整個(gè)拷貝過去，然后修改即可
若是之前有將配置寫在站點(diǎn)的 _config.yml 里五慈，把這個(gè)文件里主題相關(guān)的配置剪切到 next.yml 里去;同時(shí)將主題下 _config.yml 里面的配置也拷貝過去纳寂，相當(dāng)于是全部合并到 next.yml 中去了。
每次修改 _next.yml 需要重啟 hexo server 才能生效
進(jìn)階 搜索引擎篇
博客文章寫好之后總是無人問津,那是因?yàn)樗阉饕娌⑽词珍浳覀兊奈恼?/p>
想要搜索引擎收錄文章泻拦，首先得擁有自己的域名毙芜，如何購(gòu)買域名可參考這篇文章
參考這篇【域名綁定篇】大佬的配置
關(guān)于如何優(yōu)化請(qǐng)直接參考這篇【搜索優(yōu)化】Hexo-next百度和谷歌搜索優(yōu)化大佬的配置
上一篇好像要翻墻才能訪問，看這篇也行【搜索優(yōu)化】hexo高階教程：想讓你的博客被更多的人在搜索引擎中搜到嗎争拐？大佬的配置
寫在最后
由于本文是發(fā)布在簡(jiǎn)書爷肝，許多樣式效果無法展現(xiàn)，完整的博客文章可移步Hexo+NexT 打造一個(gè)炫酷博客 查看陆错。
太累了 ~ 灯抛，雖然這篇文章自己寫的很少，大部分都是參考大佬的音瓷，但是文中的所有配置我都用到了自己博客中对嚼，算是都試了個(gè)遍，然后重新排版绳慎。如果對(duì)文中的功能有不清楚的也可以留言纵竖。文章最后貼出了參考的文章，Google的實(shí)在太多了杏愤，如有遺漏請(qǐng)見諒~
已經(jīng)打造了一副好皮囊靡砌，接下來的任務(wù)就是賦予它一個(gè)有趣的靈魂了。
搭建博客的原因就是為了能讓自己保持不斷地思考珊楼，將所學(xué)所得持續(xù)輸出通殃，保持好奇，學(xué)無止境~各位共勉厕宗！
參考:
- http://yangbingdong.com/2017/build-blog-hexo-advanced/
- https://reuixiy.github.io/technology/computer/computer-aided-art/2017/06/09/hexo-next-optimization.html
- http://www.ehcoo.com/seo.html
- https://www.qcmoke.site/hexo_next.html
- https://almostover.ru/2016-01/hexo-theme-next-test/#Tab-tag-test
- https://blog.csdn.net/u012443858/article/details/60812982
- https://blog.csdn.net/w_ngzeqi/article/details/73863543
- https://blog.csdn.net/sunshine940326/article/details/70936988
- https://lfwen.site/2016/05/31/add-count-for-hexo-next/
以上內(nèi)容歡迎大家轉(zhuǎn)載画舌，但請(qǐng)注明出處來源~感謝閱讀
