前言：上一次已經(jīng)將hexo成功部署到了Mac上，接著就該選擇主題了。之前在Windows上采用的是 jacman主題，而這一次在Hexo官網(wǎng)主題庫中發(fā)現(xiàn)了一個更為精美的主題—— Materia
文章須知：
在 Hexo 中，通常有兩份配置文件，一個是站點根目錄下的 _config.yml；另外一個是主題目錄下的 _config.yml。為了描述方便，在以下說明中，將前者稱為 站點配置文件，后者稱為 主題配置文件。
此外推薦閱讀hexo官方文檔和Materia官方文檔，本文更多的對于前兩者的補充和解釋。
安裝Materia
方法一：Github
你可以在 Github 下載 穩(wěn)定的發(fā)布版本。
方法二：NPM
打開終端，cd 到 hexo 所在的目錄，執(zhí)行命令：
$ npm install hexo-material
安裝完畢后，首先在 hexo 目錄下的 themes 文件夾中新建一個文件夾 material ，之后在 hexo 目錄下的 node_modules 文件夾中找到 hexo-material 文件夾，然后把里面的全部文件復制到 materia 文件夾里。
hexo目錄結構：
|-- _config.yml
|-- node_modules
|-- package.json
|-- scaffolds
|-- scripts
|-- source
|-- _drafts
|-- _posts
|-- themes
注意?。?！
需要將 materia 主題下的配置文件 _config.template.yml 重命名為
_config.yml。
然后打開站點配置文件，查找 theme 參數(shù)并修改為 materia
theme: material
查找 language 參數(shù)并修改為 zh-CN
language: zh-CN
現(xiàn)在，運行 $ hexo s 并訪問 http://localhost:4000 確保站點正確運行。
基本配置
!!!注意
Material 主題中相對應的圖標可在 Material icons 查詢。
Material 主題中圖片調(diào)用地址為 /source/img/ 例：
" /img/favicon.png "
Material 主題配置文件（節(jié)選）
# Head info
head:
favicon: "/img/favicon.png" #網(wǎng)站的 favicon
high_res_favicon: "/img/favicon.png" #高清 favicon
apple_touch_icon: "/img/favicon.png" #iOS 主屏按鈕圖標
keywords: blog web 前端 #網(wǎng)站關鍵詞
# Jump Links Settings
url:
rss: #設置生成的 rss 或 atom url
daily_pic: "https://zhouxiaoyu1994.github.io/FCC2017/resume/index.html" #設置 daily_pic 模塊 點擊時跳轉(zhuǎn)的 url
logo: "https://github.com/zhouxiaoyu1994" #設置 logo 點擊時跳轉(zhuǎn)的 url
# ---------------------------------------------------------------
# Style Settings
# ---------------------------------------------------------------
# Schemes
scheme: Paradox #主題外觀（默認）
#scheme: Isolation #主題外觀（極簡）
# UI & UX: slogan, color, effect
uiux:
slogan: "前端作品集" #顯示在 blog_info 模塊中的標語，你可以設置單行標語或者多行標語：
theme_color: "#0097A7" #主題主要顏色。主題的大部分地方使用此顏色。
theme_sub_color: "#00838F" #主題輔助顏色。
hyperlink_color: "#00838F" #超鏈接顏色。
button_color: "#757575" #按鈕顏色，例如 toTop 或 menu_button。
android_chrome_color: "#0097A7" #安卓 Chrome 瀏覽器的地址欄顏色。
nprogress_color: "#29d" #頁面加載時頂部加載進度條的顏色。
nprogress_buffer: "800" #頁面加載時頂部加載進度條的緩沖時間。
# JS Effect Switches
js_effect: #用來控制 Material 主題中自帶的多種 js 特性。
fade: true #頁面加載時部分模塊的漸顯效果，默認為 true。
smoothscroll: false #頁面平滑滾動特效，默認為 false。
# Reading experience
reading: #用于設置閱讀體驗。
entry_excerpt: 80 #首頁文章輸出摘要的字符長度。默認為 80。
# Thumbnail Settings
thumbnail:
purecolor: #填入顏色代碼。如果文章內(nèi)無設置縮略圖，此項又不為空，則使用純色縮略圖。
random_amount: 19 #隨機圖片數(shù)量，根據(jù) 主題所在文件夾/source/img/random 中的圖片數(shù)量設置。Material 主題默認提供了 19 張 Material 風格的縮略圖。
# Background Settings
# bing available parameter:
# new | color= | type=
# color available value: black, blue, brown, green, multi, orange, pink, purple, red, white, yellow
# type available value: A (animal), C (culture), N (nature), S (space), T (travel)
background:
#purecolor: "#F5F5F5" #填入顏色代碼。則站點使用純色背景。
bgimg: "/img/bg.png" #背景地址，默認調(diào)用 主題文件夾 -> source -> img 中的 bg.png。可更換此圖片或者自己填入 url。
bing: #用于啟用“必應美圖”的圖片作為背景。
enable: false
parameter:
# Images Settings
img:
logo: "/img/logo.png" #顯示于 blog_info 模塊中。
avatar: "/img/avatar.png" #你的頭像設置。
daily_pic: "/img/daily_pic.png" #顯示于 daily_pic 模塊中。
sidebar_header: "/img/sidebar_header.png" #顯示于 sidebar 頂部。
footerico: "/img/footer/footer_ico-" #設置 footer 中 SNS 圖標的路徑。
random_thumbnail: "/img/random/material-" #隨機縮略圖的路徑。
footer_image: #你可以在側(cè)邊欄底部放置任何你想要的圖片。
#upyun_logo:
#link: "https://www.upyun.com/"
#src: "/img/upyun_logo.svg"
# Custom Fonts #用于設置站點的字體。
fonts: Roboto, "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微軟雅黑", Arial, sans-serif
# Card Elevation Level
card_elevation: 2 #用來設置主題卡片陰影。
# ---------------------------------------------------------------
# Menu Settings
# ---------------------------------------------------------------
# SNS Menu
sns: #用于填寫你的 SNS 信息，其中 email 會顯示在側(cè)邊欄，其他信息會以按鈕的形式顯示在 footer。
email: 363993481@qq.com
facebook:
twitter:
googleplus:
instagram:
tumblr:
bilibili:
telegram:
weibo: "http://weibo.com/p/1005055736438053/home?from=page_100505&mod=TAB&is_all=1#place"
github: "https://github.com/zhouxiaoyu1994"
linkedin: "http://www.linkedin.com/in/%E4%BF%8A%E9%98%B3-%E5%91%A8-811333136/"
zhihu: "https://www.zhihu.com/people/zhou-xiao-yu-1994/activities"
jianshu: "http://www.itdecent.cn/u/87b03448aa56"
# SNS Share Switch
sns_share: #用于定義分享菜單中的項目， false 的項將不會顯示在分享菜單中。
twitter: true
facebook: true
googleplus: false
weibo: true
linkedin: true
qq: true
telegram: false
# Sidebar Customize
sidebar:
dropdown: #用于設置 Paradox 側(cè)邊欄用戶下拉菜單，默認為空。
Email Me:
link: "mailto:363993481@qq.com"
icon: email
簡書:
link: "http://www.itdecent.cn/u/87b03448aa56"
icon: book
Linkedin:
link: "http://www.linkedin.com/in/%E4%BF%8A%E9%98%B3-%E5%91%A8-811333136/"
icon: Linkedin
homepage:
use: true #設置 true 時會在側(cè)邊欄顯示 “主頁” 按鈕.
icon: home #在 “主頁” 前面顯示一個 Material 圖標。為空和被注釋時則不顯示.
divider: false
archives:
use: true
icon: inbox
divider: false
categories:
use: true
icon: chrome_reader_mode
divider: false
pages:
標簽云: #該獨立頁面的名稱，請自行修改。
link: "/tags" #link 的參數(shù)為相對路徑，對應 hexo 目錄下的 source 文件夾內(nèi)的相應文件夾。
icon: cloud #icon 的參數(shù)為自定義的 Material 圖標，可用圖標可在 Material icons 查詢。
divider: false #設置成 true 后會在該條目底部增加一條分割線
映像:
link: "/gallery"
icon: images
divider: false
前端作品集:
link: "https://zhouxiaoyu1994.github.io/FCC2017/resume/index.html"
icon:
divider: false
友情鏈接:
link: "/links"
icon:
divider: false
article_num: #在主題的側(cè)邊欄顯示文章總數(shù)。
use: false #設置成 true 時會在側(cè)邊欄顯示文章總數(shù)。
divider: false
footer: #配置側(cè)邊欄的底部
divider: false
theme: false #設置成 true 后會在側(cè)邊欄底部增加一個指向 Material 主題的鏈接。
support: false
feedback: false
material: false
# Qrcode for redirect at other device
qrcode: true #用于在文章頁中顯示二維碼，掃描二維碼即可直接打開文章。需要 hexo-helper-qrcode 支持，使用 npm install hexo-helper-qrcode --save 進行安裝。
插件拓展
友情鏈接
Material 主題自帶有友情鏈接模塊 links
創(chuàng)建頁面
在 hexo 目錄下的 source 文件夾內(nèi)創(chuàng)建一個名為 links（只是建議，可根據(jù)自己喜好修改）的文件夾。
然后在文件內(nèi)創(chuàng)建一個名為 index.md 的 Markdown 文件。
在 index.md 文件內(nèi)寫入如下內(nèi)容即可。
---
title: links
date:
layout: links
---
!!!注意： title 可修改，layout 不可修改。
添加數(shù)據(jù)
同樣在在 hexo 目錄下的 source 文件夾內(nèi)創(chuàng)建一個名為 _data（禁止改名）的文件夾。然后在文件內(nèi)創(chuàng)建一個名為 links.yml 的文件。
在 links.yml 文件內(nèi)寫入如下內(nèi)容即可。
Name: #將 Name 改為友情鏈接的名字，例如 Viosey。
link: http://example.com #友情鏈接的地址。
avatar: http://example.com/avatar.png #友情鏈接的頭像。
descr: "這是一個描述" #為友情鏈接描述。
添加多個友情鏈接，只需要根據(jù)上面的格式重復填寫即可。
修改主題配置
打開主題配置文件，在 pages 參數(shù)下寫入如下內(nèi)容：
pages:
友情鏈接:
link: "/links"
icon:
divider: false
圖庫
Material 主題自帶有圖庫模塊 gallery
創(chuàng)建頁面
在 hexo 目錄下的 source 文件夾內(nèi)創(chuàng)建一個名為 gallery（只是建議，可根據(jù)自己喜好修改）的文件夾。然后在文件內(nèi)創(chuàng)建一個名為 index.md 的 Markdown 文件。
在 index.md 文件內(nèi)寫入如下內(nèi)容即可。
---
title: gallery
date:
layout: gallery
---
添加數(shù)據(jù)
同樣在在 hexo 目錄下的 source 文件夾內(nèi)創(chuàng)建一個名為 _data（禁止改名）的文件夾。然后在文件內(nèi)創(chuàng)建一個名為 gallery.yml 的文件。
在 gallery.yml 文件內(nèi)寫入如下內(nèi)容即可。
Name: #圖片名字，例如 Material
full_link: http://example.com/full-image.png #為完整圖片的地址。
thumb_link: http://example.com/thumb-image.png #為圖片縮略圖的地址，如果沒有縮略圖也可使用完整圖片的地址。
descr: "這是一個描述" #圖片描述。
修改主題配置
打開主題配置文件，在 pages 參數(shù)下寫入如下內(nèi)容：
圖庫: #可改名
link: "/gallery"
icon: images
divider: false
!!!注意 !!!注意 !!!注意
之前按照這樣設置完圖庫模塊后，發(fā)現(xiàn)不能正確加載圖片的縮略圖。
去Material主題 官方demo 查看、對比了一番，發(fā)現(xiàn)是因為缺少了一些CSS樣式。
知道問題后就比較簡單了，首先找到生成
gallery 頁面的文件（/material/layout/_widget/page-gallery.ejs）。
打開文件，在添加相應css代碼：
style="cursor: pointer;outline: 0px;display: block;background-image: url(<%= site.data.gallery[i].thumb_link %>);"
<!-- Main -->
<div id="main">
<% if (site.data.gallery) { %>
<% for (var i in site.data.gallery) { %>
<article class="thumb">
<a href="<%= site.data.gallery[i].full_link %>" class="image lazy" data-original="<%= site.data.gallery[i].thumb_link %>" style="cursor: pointer;outline: 0px;display: block;background-image: url(<%= site.data.gallery[i].thumb_link %>);"><img class="lazy" data-original="<%= site.data.gallery[i].thumb_link %>" alt="<%= i %>" /></a>
<h2><%= i %></h2>
<p><%= site.data.gallery[i].descr %></p>
</article>
<% } %>
<% } %>
</div>
標簽云
Material 主題自帶有標簽云模塊 tags
創(chuàng)建頁面
在 hexo 目錄下的 source 文件夾內(nèi)創(chuàng)建一個名為 tags（只是建議，可根據(jù)自己喜好修改）的文件夾。然后在文件內(nèi)創(chuàng)建一個名為 index.md 的 Markdown 文件。
在 index.md 文件內(nèi)寫入如下內(nèi)容即可。
---
title: tags
date:
layout: tags
---
topPost
使用該插件可以將指定文章置頂。需要按照先下載安裝 $ npm install hexo-helper-post-top --save
之后在您需要置頂文章的 .md 中，添加 top: true 即可置頂。
本地搜索
使用本地搜索需要安裝 hexo-generator-search 插件。
然后在 站點配置文件中添加
search:
path: search.xml
field: all
不蒜子
使用 不蒜子 瀏覽次數(shù)統(tǒng)計，僅需在 主題配置文件 中將 busuanzi: enable: 的值設置為 true。
- enable: 默認為 false。
- all_site_uv: 默認為 false。 #可統(tǒng)計全站的獨立訪客人數(shù)，即可在 blog_info 模塊的 Menu 菜單中看到。
- post_pv: 默認為 false。 # 統(tǒng)計每篇文章的頁面瀏覽次數(shù)，在文章頁的 分享按鈕 菜單中可看到。
- busuanzi_pure_mini_js: 統(tǒng)計 js。 #調(diào)用不蒜子統(tǒng)計 js 文件，可將該文件保存至你的 WebServer 或 CDN 中，然后在這里填入 URL。
結語
至此，Hexo深坑之旅也算告一段落了。作為一個輕量級博客管理工具 Hexo 無疑是非常強大的，不論是其便捷性、靈活性，還是可塑性，都是十分優(yōu)秀和精致。不過說到底他也只是一個工具，博客的核心始終還是文章，不能本末倒置。如今博客的框架已經(jīng)大致完成，雖然還不是特別完善，但是也該把精力投入到學習和寫作當中去了，至于 hexo 的其他優(yōu)化只用等到用到時，再進行更新。
