摘要：本文記錄了使用Hexo主題NexT搭建個(gè)人主頁的關(guān)鍵步驟啰劲，包括部署损搬、修改主題默認(rèn)樣式和事件起惕、域名配置等內(nèi)容。
環(huán)境
- git 2.16.1
- node 8.11.3
參考文檔
Hexo文檔地址：https://hexo.io/zh-cn/
NexT主題文檔地址：http://theme-next.iissnan.com/
NexT主題github地址：https://github.com/iissnan/hexo-theme-next/blob/master/README.cn.md
步驟概覽
1旺入、安裝git和node.js
- 安裝過程簡(jiǎn)單兑凿，略。
2茵瘾、配置github
- 在github新建倉庫
<githubUserName>.github.io - 注意事項(xiàng)
- 該倉庫只能建立一個(gè)
- 建立倉庫后留空備用礼华，不用建立任何默認(rèn)文件，如Readme拗秘、License等圣絮。這個(gè)庫只保留部署生成的代碼（不是源碼！）雕旨，Hexo發(fā)布網(wǎng)站時(shí)扮匠，push命令加了
--force參數(shù)捧请，每次提交都會(huì)強(qiáng)制覆蓋遠(yuǎn)程倉庫。 - 如果要在github保存源碼棒搜，最好是另外開一個(gè)倉庫疹蛉，這時(shí)就和常規(guī)開源項(xiàng)目一樣的操作了。
3力麸、建立工作文件夾
- 任意位置可款，名稱不限（遵循合法命名規(guī)則為前提）
4、初始化hexo環(huán)境
- 全局安裝hexo：
$ npm install -g hexo-cli - 進(jìn)入命令行克蚂，在工作文件夾下執(zhí)行命令：
$ hexo init闺鲸。初始化完成后，工作文件夾的結(jié)構(gòu)及主要文件（夾）描述如下：
.
├── _config.yml（站點(diǎn)配置文件）
├── package.json（應(yīng)用程序的信息）
├── scaffolds（模版文件夾埃叭。新建文章時(shí)摸恍，Hexo會(huì)根據(jù)scaffold來建立文件）
├── source（資源文件夾）
| ├── _drafts（草稿，初始化后不一定能看到赤屋，需要另行配置）
| └── _posts（保存文章）
└── themes（主題文件夾立镶。Hexo會(huì)根據(jù)主題來生成靜態(tài)頁面。）
├── node_modules
├── .gitignore
├── package-lock.json
- 驗(yàn)證默認(rèn)主題
- 工作文件夾下執(zhí)行啟動(dòng)服務(wù)器命令：
$ hexo server（可簡(jiǎn)寫為$ hexo s） - 瀏覽器訪問默認(rèn)地址
http://localhost:4000/类早，此時(shí)應(yīng)該能夠看到Hexo的默認(rèn)主題谜慌。
- 工作文件夾下執(zhí)行啟動(dòng)服務(wù)器命令：
5、引入NexT主題
- 在工作文件夾下右鍵進(jìn)入命令行莺奔，執(zhí)行命令：
$ git clone https://github.com/iissnan/hexo-theme-next themes/next - 打開
站點(diǎn)配置文件，找到theme字段变泄，并將其值更改為next令哟。 - 驗(yàn)證主題
- 工作文件夾下執(zhí)行啟動(dòng)服務(wù)器命令：
$ hexo server - 瀏覽器訪問默認(rèn)地址
http://localhost:4000/，若配置無誤妨蛹，即可看到NexT主題的默認(rèn)樣式屏富。
- 工作文件夾下執(zhí)行啟動(dòng)服務(wù)器命令：
6、發(fā)布
- 安裝git依賴蛙卤。工作文件夾下執(zhí)行命令
$ npm install hexo-deployer-git --save - 編輯
站點(diǎn)配置文件狠半，修改# Deployment條目下的內(nèi)容：
# Deployment
deploy:
type: git
repo: https://github.com/githubUserName/githubUserName.github.io.git（倉庫地址，這里用https或ssh均可）
branch: master（分支名稱）
- 工作文件夾下執(zhí)行命令
$ hexo clean颤难，清除緩存文件 (db.json) 和已生成的靜態(tài)文件 (public) - 工作文件夾下執(zhí)行命令
$ hexo generate（可簡(jiǎn)寫為$ hexo g）神年，生成靜態(tài)文件 - 工作文件夾下執(zhí)行命令
$ hexo deploy（可簡(jiǎn)寫為$ hexo d），發(fā)布到遠(yuǎn)程倉庫
修改默認(rèn)配置
?網(wǎng)站信息
- 編輯
站點(diǎn)配置文件行嗤，修改# Site條目下的內(nèi)容：
# Site
title: Hexo（網(wǎng)站標(biāo)題已日，默認(rèn)值：Hexo）
subtitle:（網(wǎng)站副標(biāo)題）
description:（網(wǎng)站描述，會(huì)顯示在側(cè)邊欄栅屏，若設(shè)置博客作者頭像飘千，默認(rèn)會(huì)顯示在頭像下方）
keywords:
author: John Doe（作者名字）
language:（設(shè)置語言）
timezone:
- description主要用于SEO堂鲜，告訴搜索引擎一個(gè)關(guān)于站點(diǎn)的簡(jiǎn)單描述，通常建議在其中包含網(wǎng)站的關(guān)鍵詞
- author參數(shù)用于主題顯示文章的作者
?語言
- 編輯
站點(diǎn)配置文件护奈，將language設(shè)置成所需語言缔莲，詳見NexT主題文檔。例如選用簡(jiǎn)體中文霉旗，配置如下：
language: zh-Hans
?導(dǎo)航菜單
導(dǎo)航欄項(xiàng)目均為可選
-
添加標(biāo)簽頁Tags page
- 工作文件夾下執(zhí)行命令：
$ hexo new page "tags",在source下建立tags文件夾痴奏，用于保存每篇文章的標(biāo)簽信息。 - 編輯
tags文件夾下的index.md - 設(shè)置頁面類型為
tags奖慌。index.md內(nèi)容如下：
title: All tags（點(diǎn)擊導(dǎo)航欄的標(biāo)簽后抛虫，顯示的文本） date: 2018-09-12 10:01:04（這一項(xiàng)，改與不改暫時(shí)沒發(fā)現(xiàn)有什么影響） type: "tags"- 在
主題配置文件中解開menu項(xiàng)目下的相應(yīng)注釋即可简僧。
# Value before `||` delimeter is the target link. # Value after `||` delimeter is the name of FontAwesome icon. If icon (with or without delimeter) is not specified, question icon will be loaded. menu: home: / || home #about: /about/ || user #tags: /tags/ || tags #categories: /categories/ || th archives: /archives/ || archive #schedule: /schedule/ || calendar #sitemap: /sitemap.xml || sitemap #commonweal: /404/ || heartbeat - 工作文件夾下執(zhí)行命令：
-
添加分類頁Categories page
- 同上條所述建椰，在
source下建立categories文件夾 - 修改
index.md - 在
主題配置文件中解開menu項(xiàng)目下的相應(yīng)注釋即可。
- 同上條所述建椰，在
標(biāo)簽頁數(shù)量岛马、分類數(shù)量棉姐、文章的數(shù)量如果大于0，默認(rèn)顯示位置在側(cè)邊欄啦逆。
?社交媒體Social Media
- 在
主題配置文件中解開social項(xiàng)目下相應(yīng)的注釋即可開啟伞矩。該部分的鏈接默認(rèn)顯示位置在側(cè)邊欄中。
social:
#GitHub: https://github.com/yourname || github
#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
修改默認(rèn)樣式和事件
?修改社交媒體列表的默認(rèn)位置
- 這里以
scheme: Muse的顯示模式為例 - 社交媒體開啟后默認(rèn)位置顯示在側(cè)邊欄夏志，現(xiàn)在將其移動(dòng)到頁面底部
- 先執(zhí)行
$ hexo s啟動(dòng)服務(wù)器乃坤，在瀏覽器開啟F12，定位到社交媒體的<span>標(biāo)簽沟蔑，發(fā)現(xiàn)樣式links-of-author-item
<div class="links-of-author motion-element" style="opacity: 1; display: block; transform: translateX(0px);">
<span class="links-of-author-item">
<a target="_blank" title="GitHub">
<i class="fa fa-fw fa-github"></i>GitHub</a>
</span>
</div>
- 在
themes/next/layout下使用通配符*.swig搜索全部swig文件湿诊，全選后用notepad++一并打開衙伶。注：這里不一定用notepad++做盅，只是一種參考途徑追城。 - 在全部已經(jīng)打開的文件中搜索
links-of-author-item释漆，即可定位有關(guān)社交媒體部分的源碼如下：
{% if theme.social %}
<div class="links-of-author motion-element">
{% for name, link in theme.social %}
<span class="links-of-author-item">
<a href="{{ link.split('||')[0] | trim }}" target="_blank" title="{{ name }}">
{% if theme.social_icons.enable %}
<i class="fa fa-fw fa-{{ link.split('||')[1] | trim | default('globe') }}"></i>{#
#}{% endif %}{#
#}{% if not theme.social_icons.icons_only %}{#
#}{{ name }}{#
#}{% endif %}{#
#}</a>
</span>
{% endfor %}
</div>
{% endif %}
- 邏輯很簡(jiǎn)單蹋艺，但是需要注意的是暖庄，需要把
default('globe')從樣式列表中移除犯眠，否則整個(gè)列表不顯示谊娇。至于其他的問題簿晓，字號(hào)眶拉、字體什么的，添加行內(nèi)樣式即可解決抢蚀。 - 同理镀层，F(xiàn)12查看腳注元素，在全部swig文件中搜索
copyright（找其他樣式也行）
<footer id="footer" class="footer">
<div class="footer-inner">
<div class="copyright">? <span itemprop="copyrightYear">2018</span>
<span class="with-love">
<i class="fa fa-user"></i>
</span>
<span class="author" itemprop="copyrightHolder">John Doe</span>
</div>
<div class="powered-by">Powered by <a class="theme-link" target="_blank" >Hexo</a></div>
<span class="post-meta-divider">|</span>
<div class="theme-info">Theme — <a class="theme-link" target="_blank" >NexT.Muse</a> v5.1.4</div>
</div>
</footer>
- 定位腳注部分的源碼
<div class="copyright">{#
#}{% set current = date(Date.now(), "YYYY") %}{#
#}© {% if theme.footer.since and theme.footer.since != current %}{{ theme.footer.since }} — {% endif %}{#
#}<span itemprop="copyrightYear">{{ current }}</span>
<span class="with-love">
<i class="fa fa-{{ theme.footer.icon }}"></i>
</span>
<span class="author" itemprop="copyrightHolder">{{ theme.footer.copyright || config.author }}</span>
…………（略）
- 接下來，將社交媒體的源碼移動(dòng)到腳注部分的適當(dāng)位置唱逢，完成吴侦。
?修改打賞按鈕樣式及二維碼動(dòng)畫
- 在
主題配置文件中解開# Reward項(xiàng)目下相應(yīng)的注釋即可開啟，付款二維碼自行準(zhǔn)備坞古。之后在每篇文章后备韧，會(huì)出現(xiàn)打賞按鈕，點(diǎn)擊則顯示支付二維碼痪枫。
# Reward
reward_comment: Donate comment here（打賞按鈕上方的描述性文字）
wechatpay: /images/wechatpay.jpg（微信）
alipay: /images/alipay.jpg（支付寶）
#bitcoin: /images/bitcoin.png（bitcoin）
- 首先修改打賞按鈕樣式织堂。在
themes/next/source/css下，使用通配符*.styl奶陈，以上例同樣的方式定位css如下易阳，按需修改即可。
#rewardButton {
cursor: pointer;
border: 0;
outline: 0;
border-radius: 5px;
padding: 0;
margin: 0;
letter-spacing: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
}
#rewardButton span {
display: inline-block;
width: 80px;
height: 35px;
border-radius: 5px;
color: #fff;
font-weight: 400;
font-style: normal;
font-variant: normal;
font-stretch: normal;
font-size: 18px;
font-family: "Microsoft Yahei";
background: #F44336;
}
#rewardButton span:hover{
background: #F7877F;
}
- 接下來修改二維碼動(dòng)畫吃粒。通過F12潦俺，發(fā)現(xiàn)打賞按鈕直接在屬性里用js實(shí)現(xiàn)了click事件，二維碼出現(xiàn)時(shí)比較生硬徐勃，沒有動(dòng)畫過渡
<button id="rewardButton" disable="enable" onclick="var qr = document.getElementById('QR'); if (qr.style.display === 'none') {qr.style.display='block';} else {qr.style.display='none'}">
<span>Donate</span>
</button>
- 在
themes/next/source/js/src下事示，定位post-details.js，添加jQuery代碼即可實(shí)現(xiàn)動(dòng)畫效果的小幅優(yōu)化
$("#rewardButton").on("click",function(){
var $btn=$("#QR");
if ($btn.css('display') === 'none') {
$btn.fadeIn("normal");
}
else {
$btn.slideUp("normal");
}
});
?修改主題的文字對(duì)齊方式
- 默認(rèn)有4個(gè)主題：
# Schemes
#scheme: Muse
#scheme: Mist
scheme: Pisces
#scheme: Gemini
- Pisces主題界面比較簡(jiǎn)練僻肖，但是對(duì)齊方式為justify（兩端對(duì)齊）肖爵，多行內(nèi)容展示時(shí)很不美觀；Gemini主題的對(duì)齊方式為left（左對(duì)齊）臀脏，但是界面不如前者簡(jiǎn)練劝堪。基于此需求揉稚，下面要將Pisces主題的對(duì)齊方式修改為left（左對(duì)齊）幅聘。
- 在
themes/next/source/css/schemes下對(duì)應(yīng)各主題的版式，定位：Pisces/_posts.styl - 將默認(rèn)齊方式j(luò)ustify修改為left
.post-body {
+mobile() {
text-align: left;
}
}
? hexo 3.0 以上版本引入圖片的原生方法
- 修改
_config.yml配置文件post_asset_folder項(xiàng)為 true窃植。 - 使用
hexo new <name>命令生成文章時(shí)，在source/_post目錄里面就會(huì)出現(xiàn)同名文件夾用于存放圖片資源荐糜。對(duì)于已經(jīng)存在的文章巷怜，新建同名文件夾即可。 - 引用圖片暴氏。例如延塑，要引用 test-pic.png 圖片文件，可插入如下內(nèi)容：
{% asset_img test-pic.png 圖片說明 %}
注：該方法支持 gif 動(dòng)圖答渔。
域名配置（需購買关带，可不備案。以阿里云為例）
- 進(jìn)入阿里云的域名服務(wù)，在
解析設(shè)置添加CNAME解析宋雏，將記錄值為<githubUserName>.github.io芜飘，其他設(shè)置按需填寫即可。
添加CNAME解析
- 在工作文件夾的source目錄新建CNAME文件（無擴(kuò)展名）磨总，文件內(nèi)容僅為購買的域名嗦明。
新建CNAME文件
- 重新生成部署代碼到github，此時(shí)進(jìn)入
<githubUserName>.github.io庫蚪燕，若在Settings中出現(xiàn)Your site is published at 域名的提示娶牌，說明配置成功
查看Setting
效果展示
MrDcheng's Notebook enters from here：http://www.dcheng.site
- 效果展示的顯示模式為
scheme: Pisces - 源碼已提交至GitHub：https://github.com/clxering/Blog-Hexo-NexT
