title: github+hexo博客的主題安裝及優(yōu)化
categories: study
tags:
- study
- hexo
- github
description: github+hexo博客的主題安裝及優(yōu)化（github+hexo制作的個人博客的主題更換及美化）
date: 2017-05-30 18:34:59
之間通過github+hexo搭建個人博客雖然已經(jīng)初步完成未状，但是頁面卻不是很美觀，在hexo官網(wǎng)有很多比較不錯的主題推薦，可以在上面選擇自己喜歡的主題凉倚，然后進行相應(yīng)的個性化修改修壕，這是我使用的主題indigo衅码，下面我也是用這個主題作為教程定续。
主題安裝
選擇一款自己喜歡的主題粥脚，這將成為你個人博客模版窃肠。這里是主題安裝的教程，下面是我安裝時的經(jīng)驗及個人見解刷允。
主題安裝
安裝需確認你的 Hexo 版本在 3.0 以上冤留，以及 Node 版本為 6.x 以上，在 Hexo 根目錄树灶，執(zhí)行以下命令纤怒。
git clone git@github.com:yscoder/hexo-theme-indigo.git themes/indigo
這個命令要在博客文件夾的根目錄右擊鼠標打開Git Bash輸入命令，其中themes/indigo就是會在博客文件夾根目錄中的themes新建一個indigo文件夾存放clone下來的主題天通，以后的主題通常都是存放在這個目錄下泊窘。
通俗來說就是這樣git clone +通過主題的github中獲取的URL+ +themes/indigo
下圖是獲取URL的方式：
依賴安裝
教程中的“切換主題”我沒有懂，似乎不做也行像寒，沒有切換主題的效果烘豹。直接到依賴安裝，安裝一些插件诺祸。
安裝Less
主題默認使用 less 作為 css 預(yù)處理工具携悯。
npm install hexo-renderer-less --save
安裝Feed
用于生成 rss，但是我現(xiàn)在還不知道rss是干什么的筷笨，先跟著教程來憔鬼。
npm install hexo-generator-feed --save
Json-content
用于生成靜態(tài)站點數(shù)據(jù)，用作站內(nèi)搜索的數(shù)據(jù)源胃夏。這個我也還不懂轴或，后續(xù)完善吧。
npm install hexo-generator-json-content --save
QRCode
用于生成微信分享二維碼构订。網(wǎng)頁分享中微信可以動態(tài)生成該網(wǎng)頁的分享分二維碼侮叮。
npm install hexo-helper-qrcode --save
Hexo配置修改
修改hexo的默認配置及文件目錄
Hexo目錄介紹
.
├── .deploy #需要部署的文件
├── node_modules #Hexo插件
├── public #生成的靜態(tài)網(wǎng)頁文件
├── scaffolds #模板
├── source #博客正文和其他源文件, 404 favicon CNAME 等都應(yīng)該放在這里
| ├── _drafts #草稿
| └── _posts #文章
├── themes #主題
├── _config.yml #全局配置文件
└── package.json
Hexo新建文件
其中l(wèi)ayout可有可無，沒有時會有默認的設(shè)置悼瘾，PageName是自己設(shè)置文件名囊榜，其中l(wèi)ayout是通過scaffolds中的.md文件進行配置的，scaffolds中默認會有drafts.md亥宿、post.md卸勺、page.md三個文件，這就是模版烫扼；也可以自己設(shè)置模版曙求，其中只有通過page模版新建文件時，會在source文件夾下新建名為“PageName”的文件夾，并在自己生成的文件夾下生成名為“PageName.md”的文件悟狱。其他模版都會自動生成到_post文件夾下静浴，_post文件夾下的文件會自動加載。
hexo new [layout] "PageName"
開啟標簽頁
開啟標簽頁挤渐，會新建一個文件夾苹享，文件夾有一個index.md文件。
hexo new page tags
修改 hexo/source/tags/index.md 的元數(shù)據(jù)
layout: tags
comments: false
---
開啟分類頁
本主題中僅 card theme 支持浴麻。
hexo new page categories
修改 hexo/source/categories/index.md 的元數(shù)據(jù)
layout: categories
comments: false
---
會自動生成文件夾 如圖：
切換主題
主題配置好之后就等著主題的切換了得问，下面來切換主題
文件清理
清理之前在public文件夾中生成的文件
hexo clean
生成靜態(tài)文件
在public文件夾中生成html、css软免、xml等前臺靜態(tài)文件宫纬。
hexo g
開啟本地服務(wù)
開啟本地服務(wù)通過https://localhost:4000訪問。
hexo s --debug
上傳到github
hexo d
至此主題已經(jīng)更改完成膏萧。但是我現(xiàn)在還是很不清楚github的用法漓骚，分支和回退的用法等；還有是就是hexo的一些詳細操作向抢，如何單獨更新部分文件认境。
主題優(yōu)化
主題更換完成之后，接下來就是自己的個性化設(shè)置了挟鸠，設(shè)置成自己想要達到的效果叉信，下面我就大概說一下遇到困難的幾個地方和我自己的見解吧。
配置介紹
介紹一下配置文件的用處艘希，這里已經(jīng)介紹的很詳細了硼身。
添加評論
重點來了，因為某些情況覆享，評論這一塊我搞了好長一段時間佳遂，先來說一下添加評論吧，我這里添加的是第三方評論系統(tǒng)來必力撒顿。
評論系統(tǒng)的選擇
由于主題之實現(xiàn)了多說和disqus的第三方評論功能丑罪，這里不配置
因為多說6月份要關(guān)閉了；disqus需要翻墻訪問才行凤壁；還有友言不支持https協(xié)議吩屹，因為github使用的是https協(xié)議;網(wǎng)易云跟帖需要域名才行，所以Github Page不能用這個拧抖；搜狐暢言需要備案煤搜，更麻煩；其中還有一些像gitment和HashOver這兩個沒有去研究唧席，不知道怎樣擦盾。所以現(xiàn)在還是用了來必力嘲驾，來必力的缺點就是加載有點慢。這里是原鏈接迹卢。
indigo模版添加來必力
在indigo主題模版中添加來必力評論系統(tǒng)辽故。
注冊來必力
進入 LiveRe官網(wǎng)，注冊賬號腐碱。來必力是韓國的網(wǎng)站榕暇，注冊的時候可能會有一些問題，多試幾次喻杈。
LiveRe(來必力) 有兩個版本：
City 版：是一款適合所有人使用的免費版本；
Premium 版：是一款能夠幫助企業(yè)實現(xiàn)自動化管理的多功能收費版本狰晚。
我們 City 版就夠了筒饰。
獲取代碼：
修改主題配置文件
因為主題中沒有配置來必力評論系統(tǒng)，所以我們要手動配置壁晒。
在插件目錄“myblog\themes\indigo\layout_partial\plugins”下新建一個名為“l(fā)ivere.ejs”的文件瓷们，這就是來必力插件。
<% if (theme.livere_uid){ %>
<!-- 來必力City版安裝代碼 -->
<div id="lv-container" data-id="city" data-uid="MTAyMC8yODg4MC81NDUw">
<script type="text/javascript">
(function(d, s) {
var j, e = d.getElementsByTagName(s)[0];
if (typeof LivereTower === 'function') { return; }
j = d.createElement(s);
j.src = 'https://cdn-city.livere.com/js/embed.dist.js';
j.async = true;
e.parentNode.insertBefore(j, e);
})(document, 'script');
</script>
<noscript> 為正常使用來必力評論功能請激活JavaScript</noscript>
</div>
<!-- City版安裝代碼已完成 -->
<% } %>
在來必力中獲取的代碼替換一下即可秒咐。
然后在“D:\forJavaStudy\myblog\themes\indigo\layout_partial\post”目錄下修改“comment.ejs”文件谬晕，在文件末尾添加以下代碼：
<%- partial('../plugins/livere') %>
修改Hexo的配置文件，主題目錄“myblog\themes\indigo”下的“_config.yml”文件携取，在評論部分添加如下代碼攒钳，如下：
livere_uid: MTAyMC8yODg4MC81NDUw
這樣就完成了配置，更新一下即可雷滋。
hexo clean
hexo g
hexo d
總結(jié)
github學(xué)好了真的狠學(xué)到很多知識不撑，只是我現(xiàn)在還不懂，所以就下來對上github上看看晤斩，加深對git的學(xué)習(xí)焕檬，在我的博客中對添加一些其他一些優(yōu)秀博主的相關(guān)鏈接，有時候就是那些連接保存的不好澳泵，當時看到了实愚，之后就沒了。所以積累很重要兔辅。
也附上我博客的鏈接腊敲，歡迎大家多多訪問！
https://heartsxin.github.io
http://heartsxin.coding.me
http://unnow.cn
http://www.heartsxin.xyz
