title: github+hexo博客的主題安裝及優化
categories: study
tags:

• study
• hexo
• github

description: github+hexo博客的主題安裝及優化（github+hexo制作的個人博客的主題更換及美化）
date: 2017-05-30 18:34:59

之間通過github+hexo搭建個人博客雖然已經初步完成，但是頁面卻不是很美觀，在hexo官網有很多比較不錯的主題推薦，可以在上面選擇自己喜歡的主題，然后進行相應的個性化修改，這是我使用的主題indigo，下面我也是用這個主題作為教程。

主題安裝

選擇一款自己喜歡的主題，這將成為你個人博客模版。這里是主題安裝的教程，下面是我安裝時的經驗及個人見解。

主題安裝

安裝需確認你的 Hexo 版本在 3.0 以上，以及 Node 版本為 6.x 以上，在 Hexo 根目錄，執行以下命令。

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的方式：

獲取URL

依賴安裝

教程中的“切換主題”我沒有懂，似乎不做也行，沒有切換主題的效果。直接到依賴安裝，安裝一些插件。

安裝Less

主題默認使用 less 作為 css 預處理工具。

 npm install hexo-renderer-less --save

安裝Feed

用于生成 rss，但是我現在還不知道rss是干什么的，先跟著教程來。

  npm install hexo-generator-feed --save

Json-content

用于生成靜態站點數據，用作站內搜索的數據源。這個我也還不懂，后續完善吧。

  npm install hexo-generator-json-content --save

QRCode

用于生成微信分享二維碼。網頁分享中微信可以動態生成該網頁的分享分二維碼。

   npm install hexo-helper-qrcode --save

Hexo配置修改

修改hexo的默認配置及文件目錄

Hexo目錄介紹

.
├── .deploy #需要部署的文件
├── node_modules #Hexo插件
├── public #生成的靜態網頁文件
├── scaffolds #模板
├── source #博客正文和其他源文件, 404 favicon CNAME 等都應該放在這里
| ├── _drafts #草稿
| └── _posts #文章
├── themes #主題
├── _config.yml #全局配置文件
└── package.json

Hexo新建文件

其中layout可有可無，沒有時會有默認的設置，PageName是自己設置文件名，其中layout是通過scaffolds中的.md文件進行配置的，scaffolds中默認會有drafts.md、post.md、page.md三個文件，這就是模版；也可以自己設置模版，其中只有通過page模版新建文件時，會在source文件夾下新建名為“PageName”的文件夾，并在自己生成的文件夾下生成名為“PageName.md”的文件。其他模版都會自動生成到_post文件夾下，_post文件夾下的文件會自動加載。

 hexo new [layout] "PageName"

開啟標簽頁

開啟標簽頁，會新建一個文件夾，文件夾有一個index.md文件。

 hexo new page tags

修改 hexo/source/tags/index.md 的元數據

 layout: tags
  comments: false
  ---

開啟分類頁

本主題中僅 card theme 支持。

   hexo new page categories

修改 hexo/source/categories/index.md 的元數據

 layout: categories
  comments: false
  ---

會自動生成文件夾 如圖：

source文件夾介紹

切換主題

主題配置好之后就等著主題的切換了，下面來切換主題

文件清理

清理之前在public文件夾中生成的文件

  hexo clean

生成靜態文件

在public文件夾中生成html、css、xml等前臺靜態文件。

  hexo g

開啟本地服務

開啟本地服務通過https://localhost:4000訪問。

 hexo s --debug

上傳到github

 hexo d

至此主題已經更改完成。但是我現在還是很不清楚github的用法，分支和回退的用法等；還有是就是hexo的一些詳細操作，如何單獨更新部分文件。

主題優化

主題更換完成之后，接下來就是自己的個性化設置了，設置成自己想要達到的效果，下面我就大概說一下遇到困難的幾個地方和我自己的見解吧。

配置介紹

介紹一下配置文件的用處，這里已經介紹的很詳細了。

添加評論

重點來了，因為某些情況，評論這一塊我搞了好長一段時間，先來說一下添加評論吧，我這里添加的是第三方評論系統來必力。

評論系統的選擇

由于主題之實現了多說和disqus的第三方評論功能，這里不配置
因為多說6月份要關閉了；disqus需要翻墻訪問才行；還有友言不支持https協議，因為github使用的是https協議;網易云跟帖需要域名才行，所以Github Page不能用這個；搜狐暢言需要備案，更麻煩；其中還有一些像gitment和HashOver這兩個沒有去研究，不知道怎樣。所以現在還是用了來必力，來必力的缺點就是加載有點慢。這里是原鏈接。

indigo模版添加來必力

在indigo主題模版中添加來必力評論系統。

注冊來必力

進入 LiveRe官網，注冊賬號。來必力是韓國的網站，注冊的時候可能會有一些問題，多試幾次。

LiveRe(來必力) 有兩個版本：

City 版：是一款適合所有人使用的免費版本；
Premium 版：是一款能夠幫助企業實現自動化管理的多功能收費版本。
我們 City 版就夠了。

獲取代碼：

獲取代碼

修改主題配置文件

因為主題中沒有配置來必力評論系統，所以我們要手動配置。

在插件目錄“myblog\themes\indigo\layout_partial\plugins”下新建一個名為“livere.ejs”的文件，這就是來必力插件。

新建livers.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”文件，在評論部分添加如下代碼，如下：

修改comment.ejs

livere_uid: MTAyMC8yODg4MC81NDUw

這樣就完成了配置，更新一下即可。

 hexo clean
 hexo g
 hexo d

總結

github學好了真的狠學到很多知識，只是我現在還不懂，所以就下來對上github上看看，加深對git的學習，在我的博客中對添加一些其他一些優秀博主的相關鏈接，有時候就是那些連接保存的不好，當時看到了，之后就沒了。所以積累很重要。
也附上我博客的鏈接，歡迎大家多多訪問！
https://heartsxin.github.io
http://heartsxin.coding.me
http://unnow.cn
http://www.heartsxin.xyz