個人博客：Dimple's Blog
前言
或許是對默認(rèn)的東西沒有好感，總覺得默認(rèn)的主題是很丑很丑的嗡善，完美控是接受不了這個東東的，還好hexo是可以修改主題的。這里首推NexT主題菩鲜，
精于心，簡于形標(biāo)語說的是真的不錯惦积。使用NexT主題的人比較多接校，這也說明這個主題確實很成熟了。優(yōu)化狮崩，配置蛛勉，擴(kuò)展很多都集成了，比較簡單睦柴。博文重質(zhì)量诽凌，弄的太花哨確實沒啥用。坦敌。侣诵。
讀者可以在https://hexo.io/themes/可以查看你喜歡的主題。 這里我主要說下NexT主題的相關(guān)配置狱窘。其他主題可以多看看官方文檔杜顺。
安裝主題
安裝的過程就一行代碼，你需要在博客根目錄出打開命令行輸入以下命令：
git clone https://github.com/theme-next/hexo-theme-next themes / next
以上代碼的意思是從 https://github.com/iissnan/hexo-theme-next將next下載到當(dāng)前目錄下的themes里面的next文件夾中蘸炸。
啟用主題
修改站點配置文件_config.yml
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next
主題設(shè)定
[圖片上傳失敗...(image-14d1eb-1516176234096)]
選擇 Scheme
Scheme 是 NexT 提供的一種特性躬络，借助于 Scheme，NexT 為你提供多種不同的外觀搭儒。同時穷当，幾乎所有的配置都可以 在 Scheme 之間共用提茁。目前 NexT 支持三種 Scheme，他們是：
- Muse - 默認(rèn) Scheme馁菜，這是 NexT 最初的版本茴扁，黑白主調(diào)，大量留白
- Mist - Muse 的緊湊版本火邓，整潔有序的單欄外觀
- Pisces - 雙欄 Scheme丹弱，小家碧玉似的清新
- Gemini - 左側(cè)網(wǎng)站信息及目錄，塊+片段結(jié)構(gòu)布局
cheme 的切換通過更改 主題配置文件铲咨，搜索 scheme 關(guān)鍵字躲胳。 你會看到有四行 scheme 的配置，將你需用啟用的 scheme 前面注釋 # 去除即可纤勒。
設(shè)置 語言
編輯站點配置文件坯苹， 將 language 設(shè)置成你所需要的語言。建議明確設(shè)置你所需要的語言摇天，例如選用簡體中文粹湃，配置如下：
language: zh-Hans
PS：這里提一下，你使用hexo s預(yù)覽的時候泉坐，你會發(fā)現(xiàn)是設(shè)置了語言之后界面還是英文为鳄，這個時候不要慌，使用hexo clean清理下database文件夾以及public文件夾就行了腕让。然后再使用hexo s 預(yù)覽孤钦。事實上，這個方法在遇到很多問題的時候都是通用的纯丸。
設(shè)置 菜單
菜單配置包括三個部分偏形，第一是菜單項（名稱和鏈接），第二是菜單項的顯示文本觉鼻，第三是菜單項對應(yīng)的圖標(biāo)俊扭。 NexT 使用的是 Font Awesome 提供的圖標(biāo)， Font Awesome 提供了 600+ 的圖標(biāo)坠陈，可以滿足絕大的多數(shù)的場景萨惑，同時無須擔(dān)心在 Retina 屏幕下 圖標(biāo)模糊的問題。
編輯 主題配置文件仇矾，修改以下內(nèi)容：
設(shè)定菜單內(nèi)容咒钟，對應(yīng)的字段是 menu。 菜單內(nèi)容的設(shè)置格式是：item name: link若未。其中 item name 是一個名稱，這個名稱并不直接顯示在頁面上倾鲫，它將用于匹配圖標(biāo)以及翻譯粗合。
設(shè)置標(biāo)簽萍嬉、分類的界面
設(shè)置菜單那里，我設(shè)置了顯示標(biāo)簽隙疚、分類壤追、關(guān)于幾個選項。如圖：
[圖片上傳失敗...(image-c9d4cc-1516176234096)]
但是點擊進(jìn)去供屉，卻報錯：Cannot GET /tags/行冰，不要慌，不能獲取tags伶丐，創(chuàng)建一個就OK悼做！
這里介紹創(chuàng)建page的語法：
hexo new page 'name' # name分別為tags、categories
這樣就創(chuàng)建了pages哗魂。
在控制臺輸入以下命令：
hexo new page 'tags' #創(chuàng)建tags子目錄
hexo new page 'categories' #創(chuàng)建categories子目錄
在你的網(wǎng)站根目錄下面的source文件夾會分別生成tags肛走、categories以及about文件夾。
分別修改這tags和categories文件夾中的index.md文件录别，新增type屬性朽色，如下：
---
title: tags
date: 2018-01-04 11:45:41
type: tags
---
categories的修改類似。
當(dāng)你新建一篇博文的時候组题，增加上tags和categories屬性值葫男，就能在tags和categories界面檢索到你的文章了。
個性化定制
添加fork me on github
在http://tholman.com/github-corners/或者https://github.com/blog/273-github-ribbons選擇合適的樣式復(fù)制代碼到themes/next/layout/_layout.swig崔列，在<div class="headband"></div>下面：
[圖片上傳失敗...(image-48c62e-1516176234096)]
動態(tài)背景
實現(xiàn)效果之一：
目前NexT主題最新的是V6.0版本梢褐，這個版本中可以有4種動態(tài)背景：
- Canvas-nest
- three_waves
- canvas_lines
- canvas_sphere
設(shè)置方法也很簡單，直接設(shè)置里需要的動態(tài)背景為true峻呕。
點擊出現(xiàn)桃心效果
瀏覽器輸入：http://7u2ss1.com1.z0.glb.clouddn.com/love.js
拷貝所有代碼利职，在/themes/next/source/js/src里面新建love.js，然后在\themes\next\layout\_layout.swig文件末尾添加以下代碼：
<script type="text/javascript" src="/js/src/love.js"></script>
文章底部帶#號的標(biāo)簽
[圖片上傳失敗...(image-ecfe06-1516176234096)]
去掉文章后面的標(biāo)簽前面的#號瘦癌。
修改模板/themes/next/layout/_macro/post.swig猪贪，搜索 rel="tag">#，將#換成<i class="fa fa-tag"></i>
在每篇文章末尾統(tǒng)一添加“本文結(jié)束”標(biāo)記
在路徑 \themes\next\layout\_macro 中新建 passage-end-tag.swig 文件,并添加以下內(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>
接著打開\themes\next\layout\_macro\post.swig文件讯私，在post-body 之后热押， 添加以下代碼：
<div>
{% if not is_index %}
{% include 'passage-end-tag.swig' %}
{% endif %}
</div>
添加位置如圖：
[圖片上傳失敗...(image-552c3e-1516176234096)]
然后打開主題配置文件（_config.yml),在末尾添加：
# 文章末尾添加“本文結(jié)束”標(biāo)記
passage_end_tag:
enabled: true
完成以上設(shè)置之后，在每篇文章之后都會添加如上效果圖的樣子斤寇。
側(cè)邊欄社交小圖標(biāo)設(shè)置
實現(xiàn)效果：
[圖片上傳失敗...(image-e0537-1516176234096)]
打開主題配置文件_config.yml桶癣，搜索social:, ||之后是在圖標(biāo)庫中對應(yīng)的圖標(biāo)。注意空格就行娘锁。
[圖片上傳失敗...(image-c203fc-1516176234096)]
圖標(biāo)庫鏈接：http://fontawesome.io/icons/
主頁文章加陰影
具體實現(xiàn)方法
打開\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);
}
添加熱度
具體實現(xiàn)方法
next主題集成leanCloud牙寞，打開/themes/next/layout/_macro/post.swig
在<span class="leancloud-visitors-count"></span>下添加一句：
<span>℃</span>
然后打開，/themes/next/languages/zh-Hans.yml
將visitors: 閱讀次數(shù)改為visitors: 熱度
設(shè)置網(wǎng)站圖標(biāo)
默認(rèn)的網(wǎng)站圖標(biāo)是一個N，當(dāng)然是需要制定一個圖了间雀，在網(wǎng)上找到圖后悔详，將其放在/themes/next/source/images里面，然后在主題配置文件中修改下圖所示圖片位置
[圖片上傳失敗...(image-63151b-1516176234096)]
還有一些就不詳細(xì)說了惹挟，另外注意下好多的東西已經(jīng)過時了茄螃。比如next主題已經(jīng)換了域了。很多教程還停留在3.0時代连锯，但是現(xiàn)在next的版本是V6.0归苍，截止我這篇教程發(fā)布的時期。
總結(jié)
這篇文章就只是簡單的介紹了下NexT主題运怖，關(guān)于這個主題呢拼弃，要達(dá)到個性化定制的話，還是需要再花點功夫的驳规。還有就是這個hexo s預(yù)覽效果確實不好肴敛，修改了網(wǎng)站內(nèi)容之后，需要重新hexo clean再hexo s才能看到效果吗购，有同樣問題的兄dei就不需要擔(dān)心自己的修改是錯的医男。
