Hexo部落格搭建+主題優化+外掛配置+常用操作+錯誤分析

部落格搭建

準備環境

1. Node.js 下載，並安裝。詳細步驟：www.simon96.online/2018/11/10/…

2. Git 下載，並安裝。詳細步驟：www.simon96.online/2018/11/10/…

3. 安裝Hexo，在命令列（即Git Bash）執行以下命令：

   npm install -g hexo-cli

4. 初始化Hexo，在命令列（即Git Bash）依次執行以下命令即可：

   以下，即存放Hexo初始化檔案的路徑， 即站點目錄。

   1 2 3 複製程式碼

   $ hexo init <folder> $ cd <folder> $ npm install 複製程式碼

   新建完成後，在路徑下，會產生這些檔案和資料夾：

   1 2 3 4 5 6 7 8 複製程式碼

   . ├── _config.yml ├── package.json ├── scaffolds ├── source | ├── _drafts | └── _posts └── themes 複製程式碼

   注：

   • hexo相關命令均在站點目錄下，用Git Bash執行。

   • 站點配置檔案：站點目錄下的_config.yml。

     ​ 路徑為<folder>\_config.yml

   • 主題配置檔案：站點目錄下的themes資料夾下的，主題資料夾下的_config.yml。

     ​ 路徑為<folder>\themes\<主題資料夾>\_config.yml

5. 啟動伺服器。在路徑下，命令列（即Git Bash）輸入以下命令，執行即可：

   hexo server

6. 瀏覽器訪問網址： http://localhost:4000/

至此，您的Hexo部落格已經搭建在本地。

實施方案

方案一：GithubPages

1. 建立Github賬號

2. 建立倉庫， 倉庫名為：<Github賬號名稱>.github.io

3. 將本地Hexo部落格推送到GithubPages

   3.1. 安裝hexo-deployer-git外掛。在命令列（即Git Bash）執行以下命令即可：

   1 複製程式碼

   $ npm install hexo-deployer-git --save 複製程式碼

   3.2. 新增SSH key。

   • 建立一個 SSH key 。在命令列（即Git Bash）輸入以下命令， 回車三下即可：

     1 複製程式碼

     $ ssh-keygen -t rsa -C "郵箱地址" 複製程式碼

   • 新增到 github。 複製金鑰檔案內容（路徑形如C:\Users\Administrator\.ssh\id_rsa.pub），貼上到New SSH Key即可。

   • 測試是否新增成功。在命令列（即Git Bash）依次輸入以下命令，返回“You’ve successfully authenticated”即成功：

     1 2 複製程式碼

     $ ssh -T git@github.com $ yes 複製程式碼

   3.3. 修改_config.yml（在站點目錄下）。檔案末尾修改為：

   1 2 3 4 5 6 複製程式碼

   # Deployment ## Docs: https://hexo.io/docs/deployment.html deploy: type: git repo: git@github.com:<Github賬號名稱>/<Github賬號名稱>.github.io.git branch: master 複製程式碼

   注意：上面倉庫地址寫ssh地址，不寫http地址。

   3.4. 推送到GithubPages。在命令列（即Git Bash）依次輸入以下命令， 返回INFO Deploy done: git即成功推送：

   1 2 複製程式碼

   $ hexo g $ hexo d 複製程式碼

4. 等待1分鐘左右，瀏覽器訪問網址： https://<Github賬號名稱>.github.io

至此，您的Hexo部落格已經搭建在GithubPages, 域名為https://<Github賬號名稱>.github.io。

方案二：GithubPages + 域名

在方案一的基礎上，新增自定義域名（您購買的域名）。

1. 域名解析。

   型別選擇為 CNAME；

   主機記錄即域名字首，填寫為www；

   記錄值填寫為<Github賬號名稱>.github.io；

   解析線路，TTL 預設即可。

2. 倉庫設定。

   2.1. 開啟部落格倉庫設定：https://github.com/<Github賬號名稱>/<Github賬號名稱>.github.io/settings

   2.2. 在Custom domain下，填寫自定義域名，點選save。

   2.3. 在站點目錄的source資料夾下，建立並開啟CNAME.txt，寫入你的域名（如www.simon96.online），儲存，並重新命名為CNAME。

3. 等待10分鐘左右。

   瀏覽器訪問自定義域名。

   至此，您的Hexo部落格已經解析到自定義域名，https://<Github賬號名稱>.github.io依然可用。

方案三：GithubPages + CodingPages + 域名

GithubPages 在國內較慢，百度不收錄，而CodingPages 在國外較快。所以在方案二的基礎上，新增CodingPages 。

1. 建立Coding賬號

2. 建立倉庫， 倉庫名為：<Coding賬號名稱>

3. 進入專案裡『程式碼』頁面，點選『一鍵開啟靜態 Pages』，稍等片刻CodingPages即可部署成功。

4. 將本地Hexo部落格推送到CodingPages

   4.1. 鑑於建立GithubPages 時，已經生成過公鑰。可直接複製金鑰檔案內容（路徑形如C:\Users\Administrator\.ssh\id_rsa.pub）， 貼上到新增公鑰。

   4.2. 測試是否新增成功。在命令列（即Git Bash）依次輸入以下命令，返回“You’ve successfully authenticated”即成功：

   1 2 複製程式碼

   $ ssh -T git@git.coding.net $ yes 複製程式碼

   4.3. 修改_config.yml（在存放Hexo初始化檔案的路徑下）。檔案末尾修改為：

   1 2 3 4 5 6 7 8 9 複製程式碼

   # Deployment ## Docs: https://hexo.io/docs/deployment.html deploy: - type: git repo: git@github.com:<Github賬號名稱>/<Github賬號名稱>.github.io.git branch: master - type: git repo: git@git.dev.tencent.com:<Coding賬號名稱>/<Coding賬號名稱>.git branch: master 複製程式碼

   4.4. 推送到GithubPages。在命令列（即Git Bash）依次輸入以下命令， 返回INFO Deploy done: git即成功推送：

   1 2 複製程式碼

   $ hexo g $ hexo d 複製程式碼

5. 域名解析

   1. 新增 CNAME 記錄指向 <Coding賬號名稱>.coding.me

      型別選擇為 CNAME；

      主機記錄即域名字首，填寫為www；

      記錄值填寫為<Github賬號名稱>.coding.me；

      解析線路，TTL 預設即可。

   2. 新增 兩條A 記錄指向 192.30.252.153和192.30.252.154

      型別選擇為 A；

      主機記錄即域名字首，填寫為@；

      記錄值填寫為192.30.252.153和192.30.252.154；

      解析線路，境外或谷歌。

   3. 在『Pages 服務』設定頁（https://dev.tencent.com/u/<Coding賬號名稱>/p/<Coding賬號名稱>/git/pages/settings）中繫結自定義域名。

至此，您的Hexo部落格已經解析到自定義域名，https://<Github賬號名稱>.github.io和https://<Coding賬號名稱>.coding.me依然可用。

主題優化

選擇主題

Hexo預設的主題是landscape，推薦以下主題：

1. snippet
2. Hiero
3. JSimple
4. BlueLake

詳見：github.com/search?q=he…

應用主題

1. 下載主題
2. 將下載好的主題資料夾，貼上到站點目錄的themes下。
3. 更改站點配置檔案_config.yml 的theme欄位，為主題資料夾的名稱：

1
2
3
4
複製程式碼

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: <主題資料夾的名稱>
複製程式碼

主題優化

以上主題都有比較詳細的說明文件，本節主要解決主題優化的常見問題。

主題優化一般包括：

• 設定「RSS」

• 新增「標籤」頁面

• 新增「分類」頁面

• 設定「字型」

  問題：引用國外字型映象較慢。

  解決：可以改用國內的。將\themes\*\layout_partials\head external-fonts.swig檔案中fonts.google.com改成fonts.lug.ustc.edu.cn。

• 設定「程式碼高亮主題」

• 側邊欄社交連結

  問題：圖示哪裡找？

  解決：Font Awesome

• 開啟打賞功能

  問題：微信支付寶二維碼不美觀，規格不一。

  解決：線上生成二維碼

• 設定友情連結

• 騰訊公益404頁面

• 站點建立時間

• 訂閱微信公眾號

• 設定「動畫效果」

  問題：慢，需要等待 JavaScript 指令碼完全載入完畢後才會顯示內容。
  解決：將主題配置檔案_config.yml中，use_motion欄位的值設為 false 來關閉動畫。

• 設定「背景動畫」

主題優化還包括：

新增背景圖

在 themes/*/source/css/_custom/custom.styl 中新增如下程式碼：

1
2
3
4
5
6
7
複製程式碼

body{
    background:url(/images/bg.jpg);
    background-size:cover;
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:center;
}
複製程式碼

修改Logo字型

在 themes/*/source/css/_custom/custom.styl 中新增如下程式碼：

1
2
3
4
5
6
7
8
複製程式碼

@font-face {
    font-family: Zitiming;
    src: url('/fonts/Zitiming.ttf');
}
.site-title {
    font-size: 40px !important;
	font-family: 'Zitiming' !important;
}
複製程式碼

其中字型檔案在 themes/next/source/fonts 目錄下，裡面有個 .gitkeep 的隱藏檔案，開啟寫入你要保留的字型檔案，比如我的是就是寫入 Zitiming.ttf ，具體字型檔自己從網上下載即可。

修改內容區域的寬度

編輯主題的 source/css/_variables/custom.styl 檔案，新增變數：

1
2
3
4
5
複製程式碼

// 修改成你期望的寬度
$content-desktop = 700px

// 當視窗超過 1600px 後的寬度
$content-desktop-large = 900px
複製程式碼

網站標題欄背景顏色

開啟 themes/*/source/css/_custom/custom.styl ,在裡面寫下如下程式碼：

1
2
3
複製程式碼

.site-meta {
  background: $blue; //修改為自己喜歡的顏色
}
複製程式碼

自定義滑鼠樣式

開啟 themes/*/source/css/_custom/custom.styl ,在裡面寫下如下程式碼：

1
2
3
4
5
6
7
複製程式碼

// 滑鼠樣式
  * {
      cursor: url("http://om8u46rmb.bkt.clouddn.com/sword2.ico"),auto!important
  }
  :active {
      cursor: url("http://om8u46rmb.bkt.clouddn.com/sword1.ico"),auto!important
  }
複製程式碼

文章加密訪問

開啟 themes/*/layout/_partials/head.swig檔案,在 之前插入程式碼：

1
2
3
4
5
6
7
8
9
10
複製程式碼

<script>
    (function(){
        if('{{ page.password }}'){
            if (prompt('請輸入密碼') !== '{{ page.password }}'){
                alert('密碼錯誤');
                history.back();
            }
        }
    })();
</script>
複製程式碼

寫文章時加上password: *：

1
2
3
4
5
複製程式碼

---
title: 2018
date: 2018-10-25 16:10:03
password: 123456
---
複製程式碼

實現點選出現桃心效果

1. 在/themes/*/source/js/src下新建檔案click.js，接著把以下貼上到click.js檔案中。
   程式碼如下：

1
複製程式碼

!function(e,t,a){function n(){c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),o(),r()}function r(){for(var e=0;e<d.length;e++)d[e].alpha<=0?(t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale+=.004,d[e].alpha-=.013,d[e].el.style.cssText="left:"+d[e].x+"px;top:"+d[e].y+"px;opacity:"+d[e].alpha+";transform:scale("+d[e].scale+","+d[e].scale+") rotate(45deg);background:"+d[e].color+";z-index:99999");requestAnimationFrame(r)}function o(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),i(e)}}function i(e){var a=t.createElement("div");a.className="heart",d.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)}function c(e){var a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}function s(){return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var d=[];e.requestAnimationFrame=function(){return e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)}}(),n()}(window,document);
複製程式碼

1. 在\themes\*\layout\_layout.swig檔案末尾新增：

1
2
複製程式碼

<!-- 頁面點選小紅心 -->
<script type="text/javascript" src="/js/src/clicklove.js"></script>
複製程式碼

靜態資源壓縮

在站點目錄下：

1
複製程式碼

$ npm install gulp -g
複製程式碼

安裝gulp外掛：

1
2
3
4
5
複製程式碼

npm install gulp-minify-css --save
npm install gulp-uglify --save
npm install gulp-htmlmin --save
npm install gulp-htmlclean --save
npm install gulp-imagemin --save
複製程式碼

在 Hexo 站點下新建 gulpfile.js檔案，檔案內容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
複製程式碼

var gulp = require('gulp');
var minifycss = require('gulp-minify-css');
var uglify = require('gulp-uglify');
var htmlmin = require('gulp-htmlmin');
var htmlclean = require('gulp-htmlclean');
var imagemin = require('gulp-imagemin');
// 壓縮css檔案
gulp.task('minify-css', function() {
  return gulp.src('./public/**/*.css')
  .pipe(minifycss())
  .pipe(gulp.dest('./public'));
});
// 壓縮html檔案
gulp.task('minify-html', function() {
  return gulp.src('./public/**/*.html')
  .pipe(htmlclean())
  .pipe(htmlmin({
    removeComments: true,
    minifyJS: true,
    minifyCSS: true,
    minifyURLs: true,
  }))
  .pipe(gulp.dest('./public'))
});
// 壓縮js檔案
gulp.task('minify-js', function() {
    return gulp.src(['./public/**/.js','!./public/js/**/*min.js'])
        .pipe(uglify())
        .pipe(gulp.dest('./public'));
});
// 壓縮 public/demo 目錄內圖片
gulp.task('minify-images', function() {
    gulp.src('./public/demo/**/*.*')
        .pipe(imagemin({
           optimizationLevel: 5, //型別：Number  預設：3  取值範圍：0-7（優化等級）
           progressive: true, //型別：Boolean 預設：false 無失真壓縮jpg圖片
           interlaced: false, //型別：Boolean 預設：false 隔行掃描gif進行渲染
           multipass: false, //型別：Boolean 預設：false 多次優化svg直到完全優化
        }))
        .pipe(gulp.dest('./public/uploads'));
});
// 預設任務
gulp.task('default', [
  'minify-html','minify-css','minify-js','minify-images'
]);
複製程式碼

只需要每次在執行 generate 命令後執行 gulp 就可以實現對靜態資源的壓縮，壓縮完成後執行 deploy 命令同步到伺服器：

1
2
3
複製程式碼

hexo g
gulp
hexo d
複製程式碼

修改訪問URL路徑

預設情況下訪問URL路徑為：domain/2018/10/18/關於本站,修改為 domain/About/關於本站。 編輯 Hexo 站點下的 _config.yml 檔案，修改其中的 permalink欄位：

1
複製程式碼

permalink: :category/:title/
複製程式碼

博文置頂

1. 安裝外掛

   $ npm uninstall hexo-generator-index --save
   $ npm install hexo-generator-index-pin-top --save

然後在需要置頂的文章的Front-matter中加上top即可：

1
2
3
4
5
複製程式碼

---
title: 2018
date: 2018-10-25 16:10:03
top: 10
---
複製程式碼

1. 設定置頂標誌

開啟：/themes/*/layout/_macro/post.swig，定位到

1
2
3
4
5
複製程式碼

{% if post.top %}
  <i class="fa fa-thumb-tack"></i>
  <font color=7D26CD>置頂</font>
  <span class="post-meta-divider">|</span>
{% endif %}
複製程式碼

在右上角或者左上角實現fork me on github

1. 選擇樣式GitHub Ribbons,
2. 修改圖片跳轉連結,將<a href="https://github.com/you">中的連結換為自己Github連結：
3. 開啟 themes/next/layout/_layout.swig 檔案，把程式碼複製到<div class="headband"></div>下面。

主頁文章新增邊框陰影效果

開啟 themes/*/source/css/_custom/custom.styl ,向裡面加程式碼:

1
2
3
4
5
6
7
8
複製程式碼

// 主頁文章新增陰影效果
.post {
   margin-top: 0px;
   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);
}
複製程式碼

顯示當前瀏覽進度

修改themes/*/_config.yml，把 false 改為 true：

1
2
3
4
5
複製程式碼

# Back to top in sidebar
b2t: true

# Scroll percent label in b2t button
scrollpercent: true
複製程式碼

建立分類頁

在終端視窗下，定位到 Hexo 站點目錄下，新建：

1
2
複製程式碼

$ cd <站點目錄>
$ hexo new page categories
複製程式碼

加入 廣告

主要有兩種：百度SSP和谷歌Adsense。方法類似：

1. 註冊，複製廣告程式碼

2. 部署到網站。

   2.1. 新建 theme/*/layout/_custom/google_ad.swig，將 AdSense 上的程式碼貼上進去

   2.2. 頭部。在 theme/*/layout/_custom/head.swig 中也貼上一份

   2.3. 每篇部落格。在 theme/*/layout/post.swig 裡中在希望看到的地方加上：

   1 複製程式碼

   {% include '_custom/google_ad.swig' %} 複製程式碼

   例如：在 <div id="posts" class="posts-expand"> </div> 中間插入，總程式碼如下：

   1 2 3 4 5 6 複製程式碼

   {% block content %} <div id="posts" class="posts-expand"> {{ post_template.render(page) }} {% include '_custom/google_ad.swig' %} </div> {% endblock %} 複製程式碼

3. 等待稽核通過。如果失敗，可再次申請。

新增萌萌噠

1. 安裝外掛

   1 複製程式碼

   npm install --save hexo-helper-live2d 複製程式碼

2. 複製你喜歡的模型名字:  Epsilon2.1

   

   Gantzert_Felixander

   

   haru

   

   miku

   

   ni-j

   

   nico

   

   nietzche

   

   nipsilon

   

   nito

   

   shizuku

   

   tsumiki

   

   wanko

   

   z16

   

   hibiki

   

   koharu

   

   haruto

   

   Unitychan

   

   tororo

   

   hijiki

   

3. 將以下程式碼新增到主題配置檔案_config.yml，修改<你喜歡的模型名字>：

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 複製程式碼

   live2d: enable: true scriptFrom: local pluginRootPath: live2dw/ pluginJsPath: lib/ pluginModelPath: assets/ tagMode: false log: false model: use: live2d-widget-model-<你喜歡的模型名字> display: position: right width: 150 height: 300 mobile: show: true 複製程式碼

4. 建配置檔案

   4.1. 在站點目錄下建資料夾live2d_models，

   4.2. 再在live2d_models下建資料夾<你喜歡的模型名字>,

   4.3. 再在<你喜歡的模型名字>下建json檔案：<你喜歡的模型名字>.model.json

5. 安裝模型。在命令列（即Git Bash）執行以下命令即可：

   npm install --save live2d-widget-model-<你喜歡的模型名字>

6. 在命令列（即Git Bash）執行以下命令， 在http://127.0.0.1:4000/檢視測試結果:

   hexo clean && hexo g && hexo s

外掛配置

以下外掛（評論系統、資料統計與分析、內容分享服務、搜尋服務）各選一個即可。

評論系統

	推薦指數	優點	缺點
Valine	4	每天30000條評論，10GB的儲存	作者評論無標識
來必力/livere	4	多種賬號登入	評論無法匯出
暢言	3	美觀	必須備案域名
gitment	3	簡潔	只能登陸github評論
Disqus	1		需要翻*牆

Valine

1.1. 獲取APP ID 和 APP Key

請先登入或註冊 LeanCloud, 進入控制檯後點選左下角建立應用，

進入剛剛建立的應用，選擇左下角的設定>應用Key，然後就能看到你的APP ID和APP Key了。

1.2. 填寫APP ID 和 APP Key到主題配置檔案_config.yml

1.3. 執行hexo g&&hexo d推送到部落格。

來必力/livere

2.1. 登陸 來必力 獲取你的 LiveRe UID。

2.2. 填寫LiveRe UID到主題配置檔案_config.yml

暢言

3.1.獲取APP ID 和 APP Key

請先登入或註冊 暢言, 點選“立即免費獲取暢言”，

新建站點，點選管理，點選評論外掛>評論管理，

點選後臺總覽，然後就能看到你的APP ID和APP Key了。

3.2. 填寫APP ID 和 APP Key到主題配置檔案_config.yml

3.3. 執行hexo g&&hexo d推送到部落格。

gitment

4.1. 安裝外掛：

npm i --save gitment

4.2. 申請應用

在New OAuth App為你的部落格應用一個金鑰:

1 2 3 4 複製程式碼

Application name:隨便寫 Homepage URL:這個也可以隨意寫,就寫你的部落格地址就行 Application description:描述,也可以隨意寫 Authorization callback URL:這個必須寫你的部落格地址 複製程式碼

4.3. 配置

編輯主題配置檔案themes/*/_config.yml:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 複製程式碼

# Gitment # Introduction: https://imsun.net/posts/gitment-introduction/ gitment: enable: true mint: true # RECOMMEND, A mint on Gitment, to support count, language and proxy_gateway count: true # Show comments count in post meta area lazy: false # Comments lazy loading with a button cleanly: false # Hide 'Powered by ...' on footer, and more language: # Force language, or auto switch by theme github_user: {you github user id} github_repo: 公開的git倉庫,評論會作為那個專案的issue client_id: {剛才申請的ClientID} client_secret: {剛才申請的Client Secret} proxy_gateway: # Address of api proxy, See: https://github.com/aimingoo/intersect redirect_protocol: # Protocol of redirect_uri with force_redirect_pro 複製程式碼

Disqus

編輯 主題配置檔案themes/*/_config.yml， 將 disqus 下的 enable 設定為 true，同時提供您的 shortname。count 用於指定是否顯示評論數量。

1 2 3 4 複製程式碼

disqus: enable: false shortname: count: true 複製程式碼

資料統計與分析

	推薦指數	優點	缺點
不蒜子	4	可直接將訪問次數顯示在您在網頁上（也可不顯示）	只計數
百度統計	3		收錄慢

不蒜子

編輯 主題配置檔案 themes/*/_config.yml中的busuanzi_count的配置項即可。

• 當enable: true時，代表開啟全域性開關。
• 若site_uv（本站訪客數）、site_pv（本站訪客數）、page_pv（本文總閱讀量）的值均為false時，不蒜子僅作記錄而不會在頁面上顯示。

注意：

1
複製程式碼

不蒜子官方因七牛強制過期原有的『dn-lbstatics.qbox.me』域名（預計2018年10月初），與客服溝通數次無果，即使我提出為此付費也不行，只能更換域名到『busuanzi.ibruce.info』！
複製程式碼

解決辦法：

1. 找到主題呼叫不蒜子的swig檔案。一般在”\themes*\layout_third-party\analytics\busuanzi-counter.swig”

2. 更改域名

   1 2 3 4 複製程式碼

   把原有的： <script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script> 域名改一下即可： <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script> 複製程式碼

百度統計

1. 登入 百度統計，定位到站點的程式碼獲取頁面
2. 複製統計指令碼 id，如圖：
   ​
3. 編輯 主題配置檔案themes/*/_config.yml，修改欄位 google_analytics，值設定成你的統計指令碼 id。

內容分享服務

百度分享

編輯 主題配置檔案，新增/修改欄位 baidushare，值為 true即可。

1
2
複製程式碼

# 百度分享服務
baidushare: true
複製程式碼

need-more-share2

編輯 主題配置檔案，新增/修改欄位 needmoreshare2，值為 true即可。

1
2
複製程式碼

needmoreshare2:
  enable: true
複製程式碼

搜尋服務

Local Search

新增百度/谷歌/本地 自定義站點內容搜尋

1. 安裝 hexo-generator-searchdb，在站點的根目錄下執行以下命令：

   1 複製程式碼

   $ npm install hexo-generator-searchdb --save 複製程式碼

2. 編輯 站點配置檔案，新增以下內容到任意位置：

   1 2 3 4 5 複製程式碼

   search: path: search.xml field: post format: html limit: 10000 複製程式碼

3. 編輯 主題配置檔案，啟用本地搜尋功能：

   1 2 3 複製程式碼

   # Local search local_search: enable: true 複製程式碼

錯誤分析

如果你使用Hexo遇到同樣的問題,這裡有一些常見問題的解決方案。

YAML Parsing Error

1
2
複製程式碼

JS-YAML: incomplete explicit mapping pair; a key node is missed at line 18, column 29:
      last_updated: Last updated: %s
複製程式碼

1. 引數中包含冒號，請用加引號，如Last updated: %s

1
2
複製程式碼

JS-YAML: bad indentation of a mapping entry at line 18, column 31:
      last_updated："Last updated: %s"
複製程式碼

1. 欄位後面的冒號必須為英文冒號，如：last_updated:
2. 欄位冒號後面必須跟一個空格，如：last_updated: “Last updated: %s”

EMFILE Error

1
複製程式碼

Error: EMFILE, too many open files
複製程式碼

生成大量的檔案時，可能遇到EMFILE錯誤。

可以執行以下命令來增加允許同步I / O操作的數量。

1
複製程式碼

$ ulimit -n 10000
複製程式碼

Process Out of Memory

當hexo g時，遇到以下錯誤：

1
複製程式碼

FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - process out of memory
複製程式碼

如下，更改hexo-cli檔案的第一行，來增大nodejs堆記憶體.該bug已在新版本修復。

1
複製程式碼

#!/usr/bin/env node --max_old_space_size=8192
複製程式碼

Git Deployment Problems

1. RPC failed

1
2
3
複製程式碼

error: RPC failed; result=22, HTTP code = 403

fatal: 'username.github.io' does not appear to be a git repository
複製程式碼

確保你有你的電腦上設定git正確或嘗試使用HTTPS儲存庫URL。

1. Error: ENOENT: no such file or directory

這個需要有一定的git的知識，因為可能是由於寫錯了標籤,類別,或檔名，導致本地和github衝突了，Git不能自動合併這一變化所以它打破了自動分支。

解決辦法：

1. 檢查文章的標籤和類別,確保本地和github上是相同的。
2. 合併分支（Commit）。
3. 清除，重構。在站點目錄下，命令列（即Git Bash）執行hexo clean和hexo g
4. 手動將站點目錄下的public資料夾複製到您的桌面
5. 從你的master分支切換到部署在本地分支。
6. 從桌面複製public資料夾到本地分支。
7. 合併分支到github（Commit）。
8. 切回master分支。

Server Problems

1
複製程式碼

Error: listen EADDRINUSE
複製程式碼

你可能使用相同的埠，同時開啟了兩個Hexo伺服器。如果需要同時開啟，可以嘗試修改埠設定：

1
複製程式碼

$ hexo server -p 5000
複製程式碼

Plugin Installation Problems

1
複製程式碼

npm ERR! node-waf configure build
複製程式碼

這個錯誤可能發生在試圖安裝一個用Cc++或另一個javascript語言編寫的外掛。確保您已經安裝了正確的編譯器在您的計算機上。

Error with DTrace (Mac OS X)

1
2
3
複製程式碼

{ [Error: Cannot find module './build/Release/DTraceProviderBindings'] code: 'MODULE_NOT_FOUND' }
{ [Error: Cannot find module './build/default/DTraceProviderBindings'] code: 'MODULE_NOT_FOUND' }
{ [Error: Cannot find module './build/Debug/DTraceProviderBindings'] code: 'MODULE_NOT_FOUND' }
複製程式碼

DTrace安裝可能有問題，重灌:

1
複製程式碼

$ npm install hexo --no-optional
複製程式碼

詳見 #1326

Iterate Data Model on Jade or Swig

Hexo使用倉庫的資料模型。這不是一個陣列,所以你可能需要將物件轉換為iterable。

1
2
複製程式碼

{% for post in site.posts.toArray() %}
{% endfor %}
複製程式碼

Data Not Updated

一些資料不能更新或新生成的檔案的最後一個版本完全相同。清理快取，再試一次：

1
複製程式碼

$ hexo clean
複製程式碼

No command is executed

那個不能使用除help、init和version以外的命令列（即Git Bash）時, 有可能時站點目錄下的 package.json檔案，缺少hexo ，如下:

1
2
3
4
5
複製程式碼

{
  "hexo": {
    "version": "3.2.2"
  }
}
複製程式碼

Escape Contents

Hexo使用Nunjucks渲染的頁面. { { } }或{ % % }將解析和可能會引起麻煩， 如果要在博文中出現，必須使用三引號：

1
複製程式碼

​
複製程式碼

​

1
2
3
4
5
複製程式碼

```

#### ENOSPC Error (Linux)

如果執行命令`$ hexo server` 返回一個錯誤:
複製程式碼

Error: watch ENOSPC …

1
2
複製程式碼

可以通過執行`$ npm dedupe`或者以下命令列（即Git Bash）：
複製程式碼

$ echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

1
2
3
4
5
6
複製程式碼

來增加測試時，你可以看見的檔案數量。

#### EMPERM Error (Windows Subsystem for Linux)

如果在Windows Subsystem for Linux，執行命令`$ hexo server` 返回這個錯誤:
複製程式碼

Error: watch /path/to/hexo/theme/ EMPERM

1
2
3
4
複製程式碼

因為目前在Windows Subsystem for Linux中，有些內容更改時，還不能實時更新到hexo伺服器。

所以需要重新編譯，再啟動伺服器：
複製程式碼

$ hexo generate
$ hexo server -s

1
2
3
4
5
6
複製程式碼

#### Template render error

有時執行命令`$ hexo generate` 返回一個錯誤:
複製程式碼

FATAL Something’s wrong. Maybe you can find the solution here: hexo.io/docs/troubl…
Template render error: (unknown path)

1
2
3
4
複製程式碼

這意味著有些認不出來單詞在你的檔案，並且很可能在你的新博文,或者配置檔案`_config.yml`中，比如縮排錯誤：

錯誤例子：
複製程式碼

plugins:
hexo-generator-feed
hexo-generator-sitemap
`

常用操作

建立文章

命令：

$ hexo new [layout] <title>
複製程式碼

引數說明：

• [layout]可以為以下三種：

草稿可通過一下命令釋出：

$ hexo publish [layout] <title>
複製程式碼

• title注意：

  不是博文標題，

  是博文markdown檔案的名字，

  也是博文連結的字尾（如https://www.simon96.online/2018/10/12/hexo-tutorial/中的hexo-tutorial）

文章模版

• 建立模版

  在新建文章時，Hexo 會根據 scaffolds 資料夾內相對應的檔案來建立檔案，例如：

$ hexo new blog “simon”

​ 在執行這行指令時，Hexo 會嘗試在 scaffolds 資料夾中尋找 blog.md，並根據其內容建立文章。

• 修改引數

  以下是您可以在模版中使用的變數：

Front-matter

就是博文最上方以 --- 分隔的那部分。

預設可以使用的Front-matter：