Hexo-NexT配置超炫網(wǎng)頁(yè)效果

前言

Hexo安裝過(guò)后缺虐，默認(rèn)的主題是landscape，如果不喜歡比庄，我們也可以進(jìn)行更換唉工。本文主要講解NexT主題的使用研乒。先看下我博客網(wǎng)站的效果吧：blogwenbo.com

Hexo主題相關(guān)網(wǎng)址

Hexo官網(wǎng)

Theme

NexT

NexT安裝

切換主題

設(shè)置Menu

初始化對(duì)應(yīng)的Menu文件夾

設(shè)置動(dòng)態(tài)背景

在右上角或者左上角實(shí)現(xiàn)fork me on github

添加添加RSS

修改文章內(nèi)鏈接文本樣式

修改底部標(biāo)簽樣式

在文章末尾添加“文章結(jié)束”標(biāo)記

設(shè)置頭像并設(shè)置動(dòng)畫效果

修改代碼塊``自定義樣式

側(cè)邊欄社交小圖標(biāo)設(shè)置

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

網(wǎng)站底部加上訪問(wèn)量

添加熱度

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

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

實(shí)現(xiàn)文章統(tǒng)計(jì)功能

添加網(wǎng)頁(yè)頂部進(jìn)度加載條

添加來(lái)必力云跟帖功能

底部隱藏由Hexo強(qiáng)力驅(qū)動(dòng)、主題--NexT.Mist

去掉底部重復(fù)字?jǐn)?shù)統(tǒng)計(jì)

添加jiathis分享

博文置頂

修改字體大小

添加DaoVoice在線聯(lián)系

添加底部桃心

添加側(cè)欄推薦閱讀

在文章底部增加版權(quán)信息

Hexo博客添加站內(nèi)搜索

添加外鏈網(wǎng)易云音樂(lè)

NexT安裝

切換到Blog文件夾下（就是hexo init的文件夾）淋硝，查看文件

cd [Blog]

ls
_config.yml node_modules    scaffolds   themes
db.json     package.json    source

通過(guò)git安裝雹熬，前提是你的電腦安裝了git.

git clone https://github.com/iissnan/hexo-theme-next themes/next

查看標(biāo)簽列表

git tag -l
輸出：
...
v5.1.3
v5.1.4

切換到v5.1.4

git checkout tags/v5.1.4
輸出：
HEAD is now at 4f75fe5... 2018 NY update.

通過(guò)curl安裝NexT

mkdir themes/next
curl -s https://api.github.com/repos/iissnan/hexo-theme-next/releases/latest | grep tarball_url | cut -d '"' -f 4 | wget -i - -O- | tar -zx -C themes/next --strip-components=1

更新主題NexT

cd themes/next
git pull

切換成NexT主題，在hexo根文件夾下谣膳，編輯_config.yml文件

theme: next

//切換后竿报，用命令清除下緩存
hexo clean

//執(zhí)行hexo s本地產(chǎn)看NexT主題效果
hexo s

切換主題

在列表中選擇一款自己喜歡的主題風(fēng)格。

# Schemes
scheme: Muse  //默認(rèn)主題
#scheme: Mist
#scheme: Pisces
#scheme: Gemini

設(shè)置Menu

默認(rèn)只有兩個(gè)首頁(yè)和歸檔继谚，如下圖所示：

屏幕快照 2018-01-20 下午6.42.20.png
如果還要添加烈菌，編輯themes/next/_config.yml：

menu:
  home: / || home  //首頁(yè)
  about: /about/ || user  //關(guān)于
  tags: /tags/ || tags  //標(biāo)簽
  categories: /categories/ || th   //分類
  archives: /archives/ || archive //歸檔
  schedule: /schedule/ || calendar   //日程表
  sitemap: /sitemap.xml || sitemap   //站點(diǎn)地圖

將需要的Menu前面#號(hào)去掉。如下圖所示:

屏幕快照 2018-01-20 下午6.47.17.png

初始化對(duì)應(yīng)的Menu文件夾

沒(méi)有創(chuàng)建Menu對(duì)應(yīng)的文件夾，Blog/source文件目錄如下：

屏幕快照 2018-01-20 下午6.55.51.png
在博客網(wǎng)站點(diǎn)擊標(biāo)簽菜單可能會(huì)提示：

屏幕快照 2018-01-20 下午6.50.42.png
比如要?jiǎng)?chuàng)建標(biāo)簽文件夾芽世，終端中輸入（前提在Hexo文件路徑下）：

  hexo new page "tags"
輸出：
INFO  Created: ~/Desktop/MyBlog/Blog/source/tags/index.md

成功過(guò)后目錄如下：

屏幕快照 2018-01-20 下午6.58.01.png
編輯Blog/source/tags中index.md文件挚赊，添加type: "tags"，其他Menu也同理創(chuàng)建济瓢。

title: tags
date: 2018-01-20 18:57:48
type: "tags"

設(shè)置動(dòng)態(tài)背景

主題配置文件中找到canvas_nest荠割，設(shè)置成ture就OK啦。

# Canvas-nest
canvas_nest: ture

在右上角或者左上角實(shí)現(xiàn)fork me on github

效果圖如下圖所示：

屏幕快照 2018-01-20 下午7.49.45.png
在GitHub Ribbons或GitHub Corners選擇一款你喜歡的掛飾旺矾，拷貝方框內(nèi)的代碼：

屏幕快照 2018-01-20 下午7.41.10.png
將剛剛復(fù)制的掛飾代碼蔑鹦，添加到Blog/themes/next/layout/_layout.swig文件中，添加位置如下圖所示(放在<div class="headband"></div>下方)：

屏幕快照 2018-01-20 下午7.39.36.png

添加添加RSS

切換到Blog文件夾（hexo init的文件夾）下

cd [Blog]

安裝Hexo插件

 npm install --save hexo-generator-feed

安裝成功之后箕宙，編輯Blog/_config.yml文件嚎朽，在文件末尾添加

# Extensions
## Plugins: http://hexo.io/plugins/
plugins: hexo-generate-feed

配置主題_config.yml文件，command+f搜索rss柬帕，在后面加上/atom.xml

# Set rss to false to disable feed link.
# Leave rss as empty to use site's feed link.
# Set rss to specific value if you have burned your feed already.
rss: /atom.xml //注意：有一個(gè)空格

之后哟忍，終端輸入hexo s查看效果

hexo s

屏幕快照 2018-01-20 下午8.02.19.png

修改文章內(nèi)鏈接文本樣式

修改Blog/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; //鼠標(biāo)經(jīng)過(guò)顏色
    border-bottom: none;
    border-bottom: 1px solid #fc6423; //底部分割線顏色
  }
}

設(shè)置后雕崩，效果如下：

屏幕快照 2018-01-20 下午10.12.30.png

修改底部標(biāo)簽樣式

修改Blog\themes\next\layout\_macro\post.swig中文件魁索，command+f搜索rel="tag">#，將#替換成<i class="fa fa-tag"></i>盼铁。輸入以下命令，查看效果：

hexo clean
hexo s

屏幕快照 2018-01-20 下午10.21.15.png

在文章末尾添加“文章結(jié)束”標(biāo)記

在路徑Blog\themes\next\layout\_macro文件夾中新建passage-end-tag.swig文件尝偎。

//切換到路徑_macro
cd [_macro路徑]

//創(chuàng)建passage-end-tag.swig文件
touch passage-end-tag.swig

在passage-end-tag.swig添加以下內(nèi)容饶火，直接用文本編輯器打開(kāi)，粘貼以下內(nèi)容后保存

<div>
    {% if not is_index %}
        <div style="text-align:center;color: #ccc;font-size:14px;">-------------本文結(jié)束<i class="fa fa-paw"></i>感謝您的閱讀-------------</div>
    {% endif %}
</div>

打開(kāi)Blog\themes\next\layout\_macro\post.swig致扯，在post-body之后肤寝，post-footer之前（post-footer之前兩個(gè)DIV），添加以下代碼：

<div>
  {% if not is_index %}
    {% include 'passage-end-tag.swig' %}
  {% endif %}
</div>

添加位置抖僵，如下圖所示：

屏幕快照 2018-01-20 下午10.40.49.png
修改主題配置文件_config.yml鲤看，在末尾添加：

# 文章末尾添加“本文結(jié)束”標(biāo)記
passage_end_tag:
  enabled: true

配置完成之后，效果如下：

屏幕快照 2018-01-20 下午10.43.14.png

設(shè)置頭像并設(shè)置動(dòng)畫效果

在Blog/_config.yml中添加頭像鏈接地址：

//添加頭像地址
avatar: [ http://....]

設(shè)置頭像圓角并旋轉(zhuǎn)耍群，打開(kāi)Blog/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)畫 [animation: (play)動(dòng)畫名稱 (2s)動(dòng)畫播放時(shí)長(zhǎng)單位秒或微秒 (ase-out)動(dòng)畫播放的速度曲線為以低速結(jié)束 
    (1s)等待1秒然后開(kāi)始動(dòng)畫 (1)動(dòng)畫播放次數(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)畫 */
@-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);
  }
}

效果如下：

Untitled.gif

修改代碼塊``自定義樣式

打開(kāi)Blog\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;
}

側(cè)邊欄社交小圖標(biāo)設(shè)置

打開(kāi)主題配置文件_config.yml蹈垢，command+f搜索Social慷吊，將你有的社交賬號(hào)前面的#號(hào)去掉。格式為：

[社交平臺(tái)名]: [社交地址] || [圖標(biāo)名稱]

#social:
  GitHub: https://github.com/yourname || github
  簡(jiǎn)書: http://www.reibang.com/u/63445e24e8bf || heartbeat
  掘金: https://juejin.im/user/5a371ae551882512d0607108 || spinner
  #E-Mail: mailto:yourname@gmail.com || envelope
  #Google: https://plus.google.com/yourname || google
  #Twitter: https://twitter.com/yourname || twitter
  #FB Page: https://www.facebook.com/yourname || facebook
  #VK Group: https://vk.com/yourname || vk
  #StackOverflow: https://stackoverflow.com/yourname || stack-overflow
  #YouTube: https://youtube.com/yourname || youtube
  #Instagram: https://instagram.com/yourname || instagram
  #Skype: skype:yourname?call|chat || skype

效果圖如下：

屏幕快照 2018-01-20 下午11.40.09.png
圖標(biāo)可以去Font Awesome Icon網(wǎng)站去找曹抬，找到后復(fù)制名字到相應(yīng)的位置即可溉瓶。

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

打開(kāi)Blog\themes\next\source\css\_custom\custom.styl，添加以下代碼：

// 主頁(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);
  }

效果如下：

屏幕快照 2018-01-20 下午11.44.32.png

網(wǎng)站底部加上訪問(wèn)量

打開(kāi)Blog/themes/next/layout/_partials/footer.swig文件，在copyright加上如下代碼：

<script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>

屏幕快照 2018-01-20 下午11.48.10.png

在適當(dāng)?shù)奈恢锰砑语@示統(tǒng)計(jì)代碼

<div class="powered-by">
<i class="fa fa-user-md"></i><span id="busuanzi_container_site_uv">
  本站訪客數(shù):<span id="busuanzi_value_site_uv"></span>
</span>
</div>

屏幕快照 2018-01-20 下午11.54.05.png

設(shè)置統(tǒng)計(jì)方式

//pv的方式堰酿，單個(gè)用戶連續(xù)點(diǎn)擊n篇文章疾宏，記錄n次訪問(wèn)量
<span id="busuanzi_container_site_pv">
    本站總訪問(wèn)量<span id="busuanzi_value_site_pv"></span>次
</span>

//uv的方式，單個(gè)用戶連續(xù)點(diǎn)擊n篇文章触创，只記錄1次訪客數(shù)
<span id="busuanzi_container_site_uv">
  本站總訪問(wèn)量<span id="busuanzi_value_site_uv"></span>次
</span>

效果圖如下：

屏幕快照 2018-01-20 下午11.57.45.png

添加熱度

進(jìn)入LeanCloud官網(wǎng)灾锯，進(jìn)行賬號(hào)注冊(cè)。登錄后嗅榕，進(jìn)入控制臺(tái)顺饮，創(chuàng)建應(yīng)用，應(yīng)用名為Hexo如下圖所示：

屏幕快照 2018-01-21 上午12.47.11.png
創(chuàng)建應(yīng)用后凌那，點(diǎn)擊存儲(chǔ)兼雄，創(chuàng)建Class，Class命名為Counter帽蝶，操作如下圖所示：

屏幕快照 2018-01-21 上午12.48.03.png

屏幕快照 2018-01-21 上午12.48.48.png
查看AppID和AppKey赦肋，如下圖所示：

屏幕快照 2018-01-21 上午12.52.37.png
打開(kāi)Blog/themes/next/layout/_macro/post.swig，command+F搜索leancloud-visitors-count励稳，在圖片位置加入<span>℃</span>佃乘，如下圖所示：

屏幕快照 2018-01-21 上午12.44.04.png
編輯主題配置文件，command+f搜索leancloud_visitors驹尼，將其值設(shè)為：ture趣避，將AppID和AppKey粘貼到相應(yīng)位置：

# Show number of visitors to each article.
# You can visit https://leancloud.cn get AppID and AppKey.
leancloud_visitors:
  enable: ture
  app_id: app_id
  app_key: app_key

效果圖如下圖所示：

屏幕快照 2018-01-21 上午12.58.08.png

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

npm install hexo-wordcount --save

在Blog/themes/next/layout/_partials/footer.swig末尾添加代碼：

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

效果圖如下圖所示：

屏幕快照 2018-01-21 上午11.33.01.png

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

在圖標(biāo)網(wǎng)站找一張你喜歡的圖標(biāo)（大：32x32 行卖帷：16x16）程帕，圖標(biāo)網(wǎng)站：easyicon或者阿里巴巴矢量圖標(biāo)庫(kù)。將下載下來(lái)的小圖和中圖放在Blog/themes/next/source/images地啰，將默認(rèn)的兩張圖片替換掉愁拭。命名和默認(rèn)的一樣也可以自己定義：

屏幕快照 2018-01-21 上午11.44.04.png
修改主題配置文件，如果你自定義了圖片名字亏吝，需要做修改：

# For example, you put your favicons into `hexo-site/source/images` directory.
# Then need to rename & redefine they on any other names, otherwise icons from Next will rewrite your custom icons in Hexo.
favicon:
  small: /images/favicon-16x16-next.png  //16X16小圖
  medium: /images/favicon-32x32-next.png  //32X32大圖
  apple_touch_icon: /images/apple-touch-icon-next.png  //apple-touch-icon 
  safari_pinned_tab: /images/logo.svg 
  #android_manifest: /images/manifest.json
  #ms_browserconfig: /images/browserconfig.xml

修改后岭埠，效果如下：

屏幕快照 2018-01-21 下午12.01.32.png

實(shí)現(xiàn)文章統(tǒng)計(jì)功能

安裝Hexo插件，參考網(wǎng)站底部字?jǐn)?shù)統(tǒng)計(jì)蔚鸥。
編輯主題配置文件惜论，配置如下：

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

效果圖：

屏幕快照 2018-01-21 下午12.07.11.png

添加網(wǎng)頁(yè)頂部進(jìn)度加載條

編輯主題配置文件，command+F搜索pace株茶，將其值改為ture就可以了来涨，選擇一款你喜歡的樣式。

# Progress bar in the top during page loading.
pace: ture
# Themes list:
#pace-theme-big-counter
#pace-theme-bounce
#pace-theme-barber-shop
#pace-theme-center-atom
#pace-theme-center-circle
#pace-theme-center-radar
#pace-theme-center-simple
#pace-theme-corner-indicator
#pace-theme-fill-left
#pace-theme-flash
#pace-theme-loading-bar
#pace-theme-mac-osx
#pace-theme-minimal
# For example
# pace_theme: pace-theme-center-simple
pace_theme: pace-theme-minimal

添加來(lái)必力云跟帖功能

首先去來(lái)必力注冊(cè)賬號(hào)启盛，然后進(jìn)入后臺(tái)管理系統(tǒng)蹦掐，如下圖所示：

屏幕快照 2018-01-21 下午12.17.33.png

拷貝data-uid技羔，如下圖所示：

屏幕快照 2018-01-21 下午12.21.02.png
編輯主題配置文件，command+F搜索livere_uid卧抗，將剛剛拷貝的data-uid粘貼到相應(yīng)位置：

# Support for LiveRe comments system.
# You can get your uid from https://livere.com/insight/myCode (General web site)
livere_uid: livere_uid

之后部署查看效果：

屏幕快照 2018-01-21 下午12.51.32.png

底部隱藏由Hexo強(qiáng)力驅(qū)動(dòng)藤滥、主題--NexT.Mist

打開(kāi)Blog/themes/next/layout/_partials/footer.swig，注釋掉相應(yīng)代碼社裆。

//用下面的符號(hào)注釋拙绊，注釋代碼用下面括號(hào)括起來(lái)
<!-- -->

<!--
<span class="post-meta-divider">|</span>

{% if theme.footer.powered %}
  <div class="powered-by">{#
  #}{{ __('footer.powered', '<a class="theme-link" target="_blank" ) }}{#
#}</div>
{% endif %}

{% if theme.footer.powered and theme.footer.theme.enable %}
  <span class="post-meta-divider">|</span>
{% endif %}

{% if theme.footer.theme.enable %}
  <div class="theme-info">{#
  #}{{ __('footer.theme') }} &mdash; {#
  #}<a class="theme-link" target="_blank" >{#
    #}NexT.{{ theme.scheme }}{#
  #}</a>{% if theme.footer.theme.version %} v{{ theme.version }}{% endif %}{#
#}</div>
{% endif %}

{% if theme.footer.custom_text %}
  <div class="footer-custom">{#
  #}{{ theme.footer.custom_text }}{#
#}</div>
{% endif %}
-->

注釋掉后效果如下：

屏幕快照 2018-01-21 下午1.13.00.png

去掉底部重復(fù)字?jǐn)?shù)統(tǒng)計(jì)

未去掉前，如下圖所示：

屏幕快照 2018-01-21 下午1.15.30.png
注釋掉如下代碼：

<!--
  {% if theme.post_wordcount.totalcount %}
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item-icon">
      <i class="fa fa-area-chart"></i>
    </span>
    {% if theme.post_wordcount.item_text %}
      <span class="post-meta-item-text">{{ __('post.totalcount') }}&#58;</span>
    {% endif %}
    <span title="{{ __('post.totalcount') }}">{#
    #}{{ totalcount(site, '0,0.0a') }}{#
  #}</span>
  {% endif %}
-->

添加jiathis分享

編輯主題配置文件泳秀，將jiathis改為ture即可：

# Share
# This plugin is more useful in China, make sure you known how to use it.
# And you can find the use guide at official webiste: http://www.jiathis.com/.
# Warning: JiaThis does not support https.
jiathis: ture
  ##uid: Get this uid from http://www.jiathis.com/
#add_this_id:

效果如下圖所示：

屏幕快照 2018-01-21 下午1.25.15.png

博文置頂

修改hexo-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; // 都沒(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值嗜傅，值越大金句，越靠前：

---
title: Hexo-NexT主題配置
date: 2018-01-20 20:41:08
categories: Hexo
tags:
- Hexo
- NexT
top: 100
---

修改字體大小

編輯Blog/themes/next/source/css/_variables/base.styl，command+F搜索$font-size-base吕嘀，修改為你想要的大形ツ：

// Font size
$font-size-base           = 16px

添加DaoVoice在線聯(lián)系

首先到DaoVoice注冊(cè)賬號(hào)，登錄成過(guò)后偶房，進(jìn)入到后臺(tái)管理趁曼，點(diǎn)擊應(yīng)用設(shè)置——>安裝到網(wǎng)站查看安裝代碼和AppID。
將安裝代碼添加到Blog/themes/next/layout/_partials/head.swig中：

{% if theme.daovoice %}
  <script>
  (function(i,s,o,g,r,a,m){i["DaoVoiceObject"]=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;a.charset="utf-8";m.parentNode.insertBefore(a,m)})(window,document,"script",('https:' == document.location.protocol ? 'https:' : 'http:') + "http://widget.daovoice.io/widget/0f81ff2f.js","daovoice")
  daovoice('init', {
      app_id: "{{theme.daovoice_app_id}}"
    });
  daovoice('update');
  </script>
{% endif %}

屏幕快照 2018-01-21 下午1.50.23.png

編輯主題配置文件棕洋，添加如下代碼：

# Online contact 
daovoice: true
daovoice_app_id: daovoice_app_id

效果圖如下所示：

屏幕快照 2018-01-21 下午1.55.07.png

添加底部桃心

打開(kāi)Blog/themes/next/layout/_partials/footer.swig搜索with-love挡闰，在fontawesom找到你喜歡的圖標(biāo)，在如下位置替換即可：

屏幕快照 2018-01-21 下午2.13.15.png
效果如下圖所示：

屏幕快照 2018-01-21 下午2.14.33.png

添加側(cè)欄推薦閱讀

編輯主題配置文件拍冠，如下配置即可：

# Blog rolls
links_icon: link
links_title: 推薦閱讀
#links_layout: block
links_layout: inline
links:
  Swift 4: https://developer.apple.com/swift/
  Objective-C: https://developer.apple.com/documentation/objectivec

效果如下圖所示：

屏幕快照 2018-01-21 下午2.25.59.png

在文章底部增加版權(quán)信息

在目錄Blog/themes/next/layout/_macro/尿这，添加文件 my-copyright.swig，內(nèi)容如下：

{% if page.copyright %}
<div class="my_post_copyright">
  <script src="http://cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
  
  <!-- JS庫(kù) sweetalert 可修改路徑 -->
  <script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script>
  <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
  <p><span>本文標(biāo)題:</span><a href="{{ url_for(page.path) }}">{{ page.title }}</a></p>
  <p><span>文章作者:</span><a href="/" title="訪問(wèn) {{ theme.author }} 的個(gè)人博客">{{ theme.author }}</a></p>
  <p><span>發(fā)布時(shí)間:</span>{{ page.date.format("YYYY年MM月DD日 - HH:MM") }}</p>
  <p><span>最后更新:</span>{{ page.updated.format("YYYY年MM月DD日 - HH:MM") }}</p>
  <p><span>原始鏈接:</span><a href="{{ url_for(page.path) }}" title="{{ page.title }}">{{ page.permalink }}</a>
    <span class="copy-path"  title="點(diǎn)擊復(fù)制文章鏈接"><i class="fa fa-clipboard" data-clipboard-text="{{ page.permalink }}"  aria-label="復(fù)制成功庆杜！"></i></span>
  </p>
  <p><span>許可協(xié)議:</span><i class="fa fa-creative-commons"></i> <a rel="license"  target="_blank" title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商業(yè)性使用-禁止演繹 4.0 國(guó)際</a> 轉(zhuǎn)載請(qǐng)保留原文鏈接及作者。</p>  
</div>
<script> 
    var clipboard = new Clipboard('.fa-clipboard');
    $(".fa-clipboard").click(function(){
      clipboard.on('success', function(){
        swal({   
          title: "",   
          text: '復(fù)制成功',
          icon: "success", 
          showConfirmButton: true
          });
    });
    });  
</script>
{% endif %}

在目錄Blog/themes/next/source/css/_common/components/post/下添加文件my-post-copyright.styl碟摆，添加以下代碼：

.my_post_copyright {
  width: 85%;
  max-width: 45em;
  margin: 2.8em auto 0;
  padding: 0.5em 1.0em;
  border: 1px solid #d3d3d3;
  font-size: 0.93rem;
  line-height: 1.6em;
  word-break: break-all;
  background: rgba(255,255,255,0.4);
}
.my_post_copyright p{margin:0;}
.my_post_copyright span {
  display: inline-block;
  width: 5.2em;
  color: #b5b5b5;
  font-weight: bold;
}
.my_post_copyright .raw {
  margin-left: 1em;
  width: 5em;
}
.my_post_copyright a {
  color: #808080;
  border-bottom:0;
}
.my_post_copyright a:hover {
  color: #a3d2a3;
  text-decoration: underline;
}
.my_post_copyright:hover .fa-clipboard {
  color: #000;
}
.my_post_copyright .post-url:hover {
  font-weight: normal;
}
.my_post_copyright .copy-path {
  margin-left: 1em;
  width: 1em;
  +mobile(){display:none;}
}
.my_post_copyright .copy-path:hover {
  color: #808080;
  cursor: pointer;
}

在Blog/themes/next/source/css/_common/components/post/添加文件my-post-copyright.styl晃财，文件內(nèi)容如下：

.my_post_copyright {
  width: 85%;
  max-width: 45em;
  margin: 2.8em auto 0;
  padding: 0.5em 1.0em;
  border: 1px solid #d3d3d3;
  font-size: 0.93rem;
  line-height: 1.6em;
  word-break: break-all;
  background: rgba(255,255,255,0.4);
}
.my_post_copyright p{margin:0;}
.my_post_copyright span {
  display: inline-block;
  width: 5.2em;
  color: #b5b5b5;
  font-weight: bold;
}
.my_post_copyright .raw {
  margin-left: 1em;
  width: 5em;
}
.my_post_copyright a {
  color: #808080;
  border-bottom:0;
}
.my_post_copyright a:hover {
  color: #a3d2a3;
  text-decoration: underline;
}
.my_post_copyright:hover .fa-clipboard {
  color: #000;
}
.my_post_copyright .post-url:hover {
  font-weight: normal;
}
.my_post_copyright .copy-path {
  margin-left: 1em;
  width: 1em;
  +mobile(){display:none;}
}
.my_post_copyright .copy-path:hover {
  color: #808080;
  cursor: pointer;
}

修改Blog/themes/next/layout/_macro/post.swig，在如圖位置添加以下代碼：

<div>
      {% if not is_index %}
        {% include 'my-copyright.swig' %}
      {% endif %}
</div>

屏幕快照 2018-01-21 下午2.54.04.png

在Blog/themes/next/source/css/_common/components/post/post.styl文件最后加入下面的代碼：

@import "my-post-copyright"

在Markdown文章中加入copyright : ture：

---
title: Hexo-NexT主題配置
date: 2018-01-20 20:41:08
categories: Hexo
tags:
- Hexo
- NexT
top: 100
copyright: ture
---

配置根目錄下的_config.yml文件典蜕，配置為：

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://wenmobo.github.io/  //你的網(wǎng)站地址
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:

效果圖如下所示：

屏幕快照 2018-01-21 下午3.01.04.png

Hexo博客添加站內(nèi)搜索

NexT主題支持集成 Swiftype断盛、微搜索、Local Search 和 Algolia愉舔。下面介紹Local Search的安裝吧钢猛。
安裝 hexo-generator-search

npm install hexo-generator-search --save

安裝 hexo-generator-searchdb

npm install hexo-generator-searchdb --save

編輯站點(diǎn)配置文件，添加以下內(nèi)容

屏幕快照 2018-01-21 下午5.39.59.png

：

search:
  path: search.xml
  field: post
  format: html
  limit: 10000

編輯主題配置文件轩缤，設(shè)置Local searchenable為ture

# Local search
# Dependencies: https://github.com/flashlab/hexo-generator-search
local_search:
  enable: ture
  # if auto, trigger search by changing input
  # if manual, trigger search by pressing enter key or search button
  trigger: auto
  # show top n results per article, show all results by setting to -1
  top_n_per_article: 1

效果如下圖所示：

屏幕快照 2018-01-21 下午5.39.59.png

添加外鏈網(wǎng)易云音樂(lè)

打開(kāi)網(wǎng)易云音樂(lè)命迈，注冊(cè)并登陸你的賬號(hào)號(hào)贩绕，點(diǎn)擊右上角進(jìn)入我的主頁(yè)：

屏幕快照 2018-01-21 下午6.11.50.png
選擇一首你喜歡的歌曲或者創(chuàng)建一個(gè)喜歡的歌單，進(jìn)入詳情：

屏幕快照 2018-01-21 下午6.12.46.png
點(diǎn)擊生成外鏈播放器

屏幕快照 2018-01-21 下午6.12.56.png
進(jìn)入詳情壶愤，設(shè)置喜歡的樣式淑倾，拷貝代碼：

屏幕快照 2018-01-21 下午6.13.22.png
將代碼粘貼到一個(gè)合適的位置，我的粘貼在Blog/themes/next/layout/_macro/sidebar.swig文件下：

<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=310 height=110 src="http://music.163.com/outchain/player?type=0&id=371085186&auto=1&height=90"></iframe>

效果如下：

屏幕快照 2018-01-21 下午6.29.29.png

問(wèn)題解決

1征椒、博客集成來(lái)必力后娇哆，標(biāo)簽、分類勃救、分類顯示評(píng)論組件碍讨，這里需要隱藏

打開(kāi)根目錄，找到如下文件夾：

屏幕快照 2018-01-21 下午10.46.50.png
編輯index.md文件蒙秒，添加comments將其值設(shè)為false:

---
title: tags
date: 2018-01-20 18:57:48
type: "tags"
comments: false
---

然后執(zhí)行勃黍，就沒(méi)有評(píng)論框了：

hexo clean
hexo g
hexo d

總結(jié)

終于搭建好自己的小窩啦，這里是我的成果： blogwenbo.com税肪，從最開(kāi)始無(wú)從下手溉躲，到一步步搭建起各種效果，自己還是挺有成就感的益兄，雖然讓自己折騰了好幾天锻梳，但還是值得的，在搭建的過(guò)程中净捅，自己也參考了很多優(yōu)秀的博客疑枯，非常感謝博主的無(wú)私分享。如果以后有更多好看炫酷的效果蛔六，我也會(huì)在本篇博文中更新荆永。如果你也想開(kāi)始搭建自己的專屬靜態(tài)博客，就趕快行動(dòng)吧国章！

參考文章

hexo的next主題個(gè)性化教程:打造炫酷網(wǎng)站
hexo 搜索功能
hexo+next主題優(yōu)化之加入網(wǎng)易云音樂(lè)具钥、網(wǎng)易云跟帖、炫酷動(dòng)態(tài)背景
打造個(gè)性超贊博客Hexo+NexT+GithubPages的超深度優(yōu)化

最后編輯于：2019.04.15 22:02:06

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者

人面猴
序言：七十年代末液兽，一起剝皮案震驚了整個(gè)濱河市骂删，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌四啰，老刑警劉巖宁玫，帶你破解...
沈念sama閱讀 206,214評(píng)論 6贊 481
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場(chǎng)離奇詭異柑晒，居然都是意外死亡欧瘪，警方通過(guò)查閱死者的電腦和手機(jī)廷没，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 88,307評(píng)論 2贊 382
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門敲街，熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)，“玉大人，你說(shuō)我怎么就攤上這事室梅♂愎瑁” “怎么了栈暇？”我有些...
開(kāi)封第一講書人閱讀 152,543評(píng)論 0贊 341
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵宁脊，是天一觀的道長(zhǎng)。經(jīng)常有香客問(wèn)我撕彤，道長(zhǎng)鱼鸠，這世上最難降的妖魔是什么？我笑而不...
開(kāi)封第一講書人閱讀 55,221評(píng)論 1贊 279
?港島之戀（遺憾婚禮）
正文為了忘掉前任羹铅，我火速辦了婚禮蚀狰，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘职员。我一直安慰自己麻蹋，他們只是感情好，可當(dāng)我...
茶點(diǎn)故事閱讀 64,224評(píng)論 5贊 371
惡毒庶女頂嫁案：這布局不是一般人想出來(lái)的
文/花漫我一把揭開(kāi)白布焊切。她就那樣靜靜地躺著扮授，像睡著了一般。火紅的嫁衣襯著肌膚如雪专肪。梳的紋絲不亂的頭發(fā)上刹勃，一...
開(kāi)封第一講書人閱讀 49,007評(píng)論 1贊 284
城市分裂傳說(shuō)
那天，我揣著相機(jī)與錄音嚎尤，去河邊找鬼荔仁。笑死，一個(gè)胖子當(dāng)著我的面吹牛芽死，可吹牛的內(nèi)容都是我干的乏梁。我是一名探鬼主播，決...
沈念sama閱讀 38,313評(píng)論 3贊 399
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開(kāi)眼关贵，長(zhǎng)吁一口氣：“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼遇骑！你這毒婦竟也來(lái)了？” 一聲冷哼從身側(cè)響起揖曾，我...
開(kāi)封第一講書人閱讀 36,956評(píng)論 0贊 259
萬(wàn)榮殺人案實(shí)錄
序言：老撾萬(wàn)榮一對(duì)情侶失蹤质蕉，失蹤者是張志新（化名）和其女友劉穎，沒(méi)想到半個(gè)月后翩肌，有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體，經(jīng)...
沈念sama閱讀 43,441評(píng)論 1贊 300
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡禁悠，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 35,925評(píng)論 2贊 323
?白月光啟示錄
正文我和宋清朗相戀三年念祭，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片碍侦。...
茶點(diǎn)故事閱讀 38,018評(píng)論 1贊 333
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡粱坤，死狀恐怖隶糕，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情站玄，我是刑警寧澤枚驻，帶...
沈念sama閱讀 33,685評(píng)論 4贊 322
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布，位于F島的核電站株旷，受9級(jí)特大地震影響再登，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜晾剖，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 39,234評(píng)論 3贊 307
男人毒藥：我在死后第九天來(lái)索命
文/蒙蒙一锉矢、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧齿尽，春花似錦沽损、人聲如沸。這莊子的主人今日做“春日...
開(kāi)封第一講書人閱讀 30,240評(píng)論 0贊 19
一樁弒父案绵估，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽(yáng)。三九已至卡骂，卻和暖如春国裳，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背偿警。一陣腳步聲響...
開(kāi)封第一講書人閱讀 31,464評(píng)論 1贊 261
情欲美人皮
我被黑心中介騙來(lái)泰國(guó)打工躏救，沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留，地道東北人螟蒸。一個(gè)月前我還...
沈念sama閱讀 45,467評(píng)論 2贊 352
代替公主和親
正文我出身青樓盒使，卻偏偏與公主長(zhǎng)得像，于是被迫代替她去往敵國(guó)和親七嫌。傳聞我的和親對(duì)象是個(gè)殘疾皇子少办，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 42,762評(píng)論 2贊 345