Hexo博客搭建+主題優化+插件配置+經常使用操做+錯誤分析

時間 2019-11-29

標籤 hexo 博客搭建主題優化插件配置經常使用錯誤分析简体版

原文原文鏈接

博客搭建

準備環境

Node.js 下載，並安裝。詳細步驟：www.simon96.online/2018/11/10/…javascript
Git 下載，並安裝。詳細步驟：www.simon96.online/2018/11/10/…css
安裝Hexo，在命令行（即Git Bash）運行如下命令：html

npm install -g hexo-clijava

初始化Hexo，在命令行（即Git Bash）依次運行如下命令便可：node

如下，即存放Hexo初始化文件的路徑，即站點目錄。c++

1
2
3
複製代碼

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

新建完成後，在路徑下，會產生這些文件和文件夾：git

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

注：github

hexo相關命令均在站點目錄下，用Git Bash運行。web
站點配置文件：站點目錄下的_config.yml。npm
路徑爲<folder>\_config.yml
主題配置文件：站點目錄下的themes文件夾下的，主題文件夾下的_config.yml。
路徑爲<folder>\themes\<主題文件夾>\_config.yml

啓動服務器。在路徑下，命令行（即Git Bash）輸入如下命令，運行便可：

hexo server
瀏覽器訪問網址： http://localhost:4000/

至此，您的Hexo博客已經搭建在本地。

實施方案

方案一：GithubPages

建立Github帳號
建立倉庫，倉庫名爲：<Github帳號名稱>.github.io

將本地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
複製代碼

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

至此，您的Hexo博客已經搭建在GithubPages, 域名爲https://<Github帳號名稱>.github.io。

方案二：GithubPages + 域名

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

域名解析。
類型選擇爲 CNAME；
主機記錄即域名前綴，填寫爲www；
記錄值填寫爲<Github帳號名稱>.github.io；
解析線路，TTL 默認便可。
倉庫設置。
2.1. 打開博客倉庫設置：https://github.com/<Github帳號名稱>/<Github帳號名稱>.github.io/settings
2.2. 在Custom domain下，填寫自定義域名，點擊save。
2.3. 在站點目錄的source文件夾下，建立並打開CNAME.txt，寫入你的域名（如www.simon96.online），保存，並重命名爲CNAME。
等待10分鐘左右。
瀏覽器訪問自定義域名。
至此，您的Hexo博客已經解析到自定義域名，https://<Github帳號名稱>.github.io依然可用。

方案三：GithubPages + CodingPages + 域名

GithubPages 在國內較慢，百度不收錄，而CodingPages 在國外較快。因此在方案二的基礎上，添加CodingPages 。

建立Coding帳號
建立倉庫，倉庫名爲：<Coding帳號名稱>
進入項目裏『代碼』頁面，點擊『一鍵開啓靜態 Pages』，稍等片刻CodingPages便可部署成功。

將本地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初始化文件的路徑下）。文件末尾修改成：

# 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
複製代碼

域名解析
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，推薦如下主題：

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

應用主題

下載主題
將下載好的主題文件夾，粘貼到站點目錄的themes下。
更改站點配置文件_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 中添加以下代碼：

@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文件,在以前插入代碼：

<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
---
複製代碼

實現點擊出現桃心效果

在/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);
複製代碼

在\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文件，文件內容以下：

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/
複製代碼

博文置頂

安裝插件
$ 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
---
複製代碼

設置置頂標誌

打開：/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

選擇樣式GitHub Ribbons,
修改圖片跳轉連接,將<a href="https://github.com/you">中的連接換爲本身Github連接：
打開 themes/next/layout/_layout.swig 文件，把代碼複製到<div class="headband"></div>下面。

主頁文章添加邊框陰影效果

打開 themes/*/source/css/_custom/custom.styl ,向裏面加代碼:

// 主頁文章添加陰影效果
.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。方法相似：

註冊，複製廣告代碼

部署到網站。

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 %}
複製代碼

等待審覈經過。若是失敗，可再次申請。

添加萌萌噠

安裝插件

1
複製代碼

npm install --save hexo-helper-live2d
複製代碼

複製你喜歡的模型名字: Epsilon2.1
Gantzert_Felixander
haru
miku
ni-j
nico
nietzche
nipsilon
nito
shizuku
tsumiki
wanko
z16
hibiki
koharu
haruto
Unitychan
tororo
hijiki

將如下代碼添加到主題配置文件_config.yml，修改<你喜歡的模型名字>：

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.1. 在站點目錄下建文件夾live2d_models，
4.2. 再在live2d_models下建文件夾<你喜歡的模型名字>,
4.3. 再在<你喜歡的模型名字>下建json文件：<你喜歡的模型名字>.model.json
安裝模型。在命令行（即Git Bash）運行如下命令便可：

npm install --save live2d-widget-model-<你喜歡的模型名字>
在命令行（即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:

# 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』！
複製代碼

解決辦法：

找到主題調用不蒜子的swig文件。通常在」\themes*\layout_third-party\analytics\busuanzi-counter.swig」

更改域名

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>
複製代碼

百度統計

登陸百度統計，定位到站點的代碼獲取頁面
複製統計腳本 id，如圖：
編輯主題配置文件themes/*/_config.yml，修改字段 google_analytics，值設置成你的統計腳本 id。

內容分享服務

	推薦指數	優勢	缺點
百度分享	4	穩定	不太美觀
need-more-share2	4	美觀	更新不及時（好比微信分享API）

百度分享

編輯主題配置文件，添加/修改字段 baidushare，值爲 true便可。

1
2
複製代碼

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

need-more-share2

編輯主題配置文件，添加/修改字段 needmoreshare2，值爲 true便可。

1
2
複製代碼

needmoreshare2:
  enable: true
複製代碼

搜索服務

	推薦指數	優勢	缺點
Local Search	4	配置方便
Swiftype	2		需註冊
Algolia	2		需註冊

Local Search

添加百度/谷歌/本地自定義站點內容搜索

安裝 hexo-generator-searchdb，在站點的根目錄下執行如下命令：
1 複製代碼

$ npm install hexo-generator-searchdb --save 複製代碼

編輯站點配置文件，新增如下內容到任意位置：

1
2
3
4
5
複製代碼

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

編輯主題配置文件，啓用本地搜索功能：

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
複製代碼

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

1
2
複製代碼

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

字段後面的冒號必須爲英文冒號，如：last_updated:
字段冒號後面必須跟一個空格，如：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

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。

Error: ENOENT: no such file or directory

這個須要有必定的git的知識，由於多是因爲寫錯了標籤,類別,或文件名，致使本地和github衝突了，Git不能自動合併這一變化因此它打破了自動分支。

解決辦法：

檢查文章的標籤和類別,確保本地和github上是相同的。
合併分支（Commit）。
清除，重構。在站點目錄下，命令行（即Git Bash）運行hexo clean和hexo g
手動將站點目錄下的public文件夾複製到您的桌面
從你的master分支切換到部署在本地分支。
從桌面複製public文件夾到本地分支。
合併分支到github（Commit）。
切回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]能夠爲如下三種：

參數名	功能	文章路徑
post	新建博文	source/_posts
page	新建頁面（如404，分類）	source
draft	草稿	source/_drafts

草稿可經過一下命令發佈：

$ 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，並根據其內容創建文章。

修改參數
如下是您能夠在模版中使用的變量：

變量	描述
layout	佈局
title	標題
date	文件創建日期

Front-matter

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

默承認以使用的Front-matter：

參數	描述	默認值
`layout`	佈局
`title`	標題
`date`	創建日期	文件創建日期
`updated`	更新日期	文件更新日期
`comments`	開啓文章的評論功能	true
`tags`	標籤（不適用於分頁）
`categories`	分類（不適用於分頁）
`permalink`	覆蓋文章網址