Hexo + GitHub 搭建記錄

作為第一篇記錄，圖片等之後確認圖床再補上。
官網 https://hexo.io/

安裝 Git 和 Node.js

主要參者作者：lyyybz、Xuanwo
必需先裝好 Git 和 Node.js 。

安裝和設定 Git

Git 是一款免費、開源的分佈式版本控制系統。
Git 的安裝詳細可參考在 Windows 平台必裝的三套 Git 工具一文，在此簡述必要的動作。

到官網，點擊 Download 下載，預設安裝即可
，安裝好後開啟 CMD ，輸入 git --version 確認安裝版本。

設定使用者名稱及電子郵件。 Git 的提交會使用這些資訊，而且提交後不能再被修改。
詳細可參考開始-初次設定-Git

git config --global user.name "名稱"
git config --global user.email Email地址

可用 git config --global --list 確認是否設定正確

安裝 Node.js

Node.js 是一款開源且跨平台的伺服器端和網路應用，使用 JavaScript 開發。
到官網下載 https://nodejs.org/en/ ，默認安裝即可。

完成後可以在 cmd 輸入以下指令確認

node -v
npm -v

配置 Github

至 https://github.com/ 申請一個帳號。
登陸之後，點擊頁面右上角的加號，選擇New repository (建立儲存庫)

Repository name 下填寫 yourname.github.io (yourname 是 github 帳號)
Description (optional) 下填寫一些簡單的描述（不寫也沒有關係）

開啟 gh-pages 功能
點擊界面右側的 Settings，你將會打開這個庫的 setting 頁面，向下拖動，直到看見GitHub Pages

點擊 Automatic page generator，Github 將會創建出一個 gh-pages 的頁面。如果配置沒有問題，那麼大約 15 分鐘之後，yourname.github.io這個網址就可以正常訪問了~ 如果yourname.github.io已經可以正常訪問了，那麼 Github 一側的配置已經全部結束了。

配置 SSH Key

來源
輸入指令

ssh-keygen -t rsa -C "your_email@your_mail.com"

過程中需要輸入一個 passphrase，如不想輸入直接按下 Enter 鍵即可。

SSH-key

此時顯示的是你 SSH Key 的 randomart image，開啟 C:\Users\使用者名/.ssh/id_rsa.pub ，複製全部內容，到 Github ，點帳號頭像→setting→SSH and GPG keys→New SSH key ，貼上即可。

配置 Hexo

先決定好要放置 blog 文件的資料夾，此文均假設是 D://Github/blug，建立好後該資料後在位置列輸入 cmd ，用當前目錄開啟 CMD

於 CMD　中輸入

npm install hexo-cli -g
npm install hexo --save
npm install hexo-deployer-git --save

安裝好後輸入以下指令確認安裝結果

hexo -v

初始化 Hexo

輸入以下指令在當前資料夾初始化 Hexo 相關檔案

hexo init
npm install

生成靜態網頁

hexo g

本機測試

hexo s

打在 http://localhost:4000/ ，可以看到當前的網頁

使用 Hexo

可以在 _config.yml 中修改大部份的配置。

配置 Deployment

用文字編輯器修改 D://Github/blog (範例用)下的 _config.yml ，找到 Deployment ，按照如下

deploy:
  type: git
  repo: git@github.com:yourname/yourname.github.io.git
  branch: master

在該目錄下開啟CMD，輸入

hexo d

開始佈署

添加新文章

打開 Hexo 目錄下的source文件夾，所有的文章都會以 md 形式保存在_post文件夾中，只要在_post文件夾中新建 md 類型的文檔，就能在執行hexo g的時候被渲染。新建的文章頭需要添加一些 yml 資訊，如下所示：

1
2
3

title: hello-world   //在此處添加你的標題。
date: 2014-11-7 08:55:29   //在此處輸入你編輯這篇文章的時間。
categories: Exercise   //在此處輸入這篇文章的分類。

顯示閱讀全文按鈕

在文章中添加 more 標籤即可，形式如下：

<!--more-->

標籤以上的內容將以摘要的形式在首頁顯示，並出現閱讀全文的按鈕。

Markdown 記錄

編輯格式是用 markdown ，留一下參考連結
http://markdown.tw/
https://hyxxsfwy.github.io/2016/01/15/Hexo-Markdown-%E7%AE%80%E6%98%8E%E8%AF%AD%E6%B3%95%E6%89%8B%E5%86%8C/

HTML 錨點跳轉

來源：Charlotte.HonG
在文章中可用以下放式建立跳轉

<span id="First">跳轉到的地方</span>

相對應的跳轉方式就是

[點我跳轉](#First)

添加代碼折疊功能

作者：Ryan Miao ²²

themes/next/source/js/src/post-details.js,
在裡面找合適的位置，添加如下代碼：

:file:///D:/Github/blog/themes/next/source/js/src/post-details.js

$(document).ready(function(){
    $(document).on('click', '.fold_hider', function(){
        $('>.fold', this.parentNode).slideToggle();
        $('>:first', this).toggleClass('open');
    });
    //默認情況下摺疊
    $("div.fold").css("display","none");
});

在主題scripts下添加一個tags.js, 位於themes/next/scripts/tags.js

:file:///D:/Github/blog/themes/next/scripts/tags.js

/*
  @haohuawu
  修復 Nunjucks 的 tag 裡寫 ```代碼塊```，最終都會渲染成 undefined 的問題
  https://github.com/hexojs/hexo/issues/2400
*/
const rEscapeContent = /<escape(?:[^>]*)>([\s\S]*?)<\/escape>/g;
const placeholder = '\uFFFD';
const rPlaceholder = /(?:<|&lt;)\!--\uFFFD(\d+)--(?:>|&gt;)/g;
const cache = [];
function escapeContent(str) {
  return '<!--' + placeholder + (cache.push(str) - 1) + '-->';
}
hexo.extend.filter.register('before_post_render', function(data) {
  data.content = data.content.replace(rEscapeContent, function(match, content) {
    return escapeContent(content);
  });
  return data;
});
hexo.extend.filter.register('after_post_render', function(data) {
  data.content = data.content.replace(rPlaceholder, function() {
    return cache[arguments[1]];
  });
  return data;
});

再繼續添加一個fold.js

:file:///D:/Github/blog/themes/next/scripts/fold.js

/* global hexo */
// Usage: {% fold ???? %} Something {% endfold %}
function fold (args, content) {
    var text = args[0];
    if(!text) text = "點擊顯/隱";
    return '<div><div class="fold_hider"><div class="close hider_title">' + text + '</div></div><div class="fold">\n' + hexo.render.renderSync({text: content, engine: 'markdown'}) + '\n</div></div>';
}
hexo.extend.tag.register('fold', fold, {ends: true});

最後，添加幾個自定義樣式，位置themes/next/source/css/_custom/custom.styl

:file:///D:/Github/blog/themes/next/source/css/_custom/custom.styl

.hider_title{
    font-family: "Microsoft Yahei";
    cursor: pointer;
}
.close:after{
    content: "▼";
}
.open:after{
    content: "▲";
}

最後，在文章中我們需要摺疊的地方前後添加便簽，示例用法：

1
2
3

{% fold 點擊顯/隱內容 %}
something you want to fold, include code block.
{% endfold %}

增加注解功能

安裝 hexo-footnotes

npm install hexo-footnotes --save

安裝完成即自動啟用，如果沒啟用，可以修改 _config.yml 添加以下資料：

1
2

plugins:
  - hexo-footnotes

使用方法為(去除反除線)

[^\1]
[^\1]: 注解1

文章連結唯一化

Hexo 的文章連結預設是採用發佈時間或標題來使用，如果變更會導至連結改變，不利分享或 SEO，可安裝 hexo-abbrlink 解決
作者

npm install hexo-abbrlink --save

更改主文牛的 _config.yml

permalink: posts/:abbrlink/

再 config.yml 下加上

# abbrlink config
abbrlink:
  alg: crc32  #support crc16(default) and crc32
  rep: hex    #support dec(default) and hex

效果如下

crc16 & hex
https://post.zz173.com/posts/66c8.html

crc16 & dec
https://post.zz173.com/posts/65535.html
crc32 & hex
https://post.zz173.com/posts/8ddf18fb.html

crc32 & dec
https://post.zz173.com/posts/1690090958.html

crc16 最大的數量為 65535 ，對一個個人部落格而言是非常足夠

部署時保證 README.md 不被渲染

來源：Godlike
一般 Git 倉庫下面都有一個README.md來表現這個倉庫設立的目的，但是運用 hexo 佈置的時候會被自動渲染，接下來要介紹部署時保證README.md不被渲染的方法。

在 Hexo 目錄下的source根目錄下添加一個,README.md。修改 Hexo 目錄下的_config.yml。將skip_render參數的值設置上。skip_render: README.md保存退出即可。

修改主題為 Next

作者：zhiho
在 blog 資料夾下使用命令下載 Next 主題到 themes 目錄中

git clone https://github.com/iissnan/hexo-theme-next themes/next

修改站點配置文件_config.yml 中的 theme 標籤：

theme: next

修改成功後，重新啟動 Server 就能夠看到修改後的效果。
Next 主題一共有三種樣式，可以通過修改 Next 主題的配置文件_config.yml 來修改：

# ---------------------------------------------------------------
# Scheme Settings
# ---------------------------------------------------------------
# Schemes
scheme: Muse
#scheme: Mist
#scheme: Pisces

Gitalk 評論系統

作者：asdfv1020
一個基於 Github Issue 和 Preact 開發的評論插件，所有要修改的檔案都是在 D:\GitHub\blog\themes\next (範例目錄的\themes\next) 之下
詳情 Demo 可見：https://gitalk.github.io/

註冊新應用

在 GitHub 上註冊新應用，鏈結：https://github.com/settings/applications/new

參數說明：
Application name： # 應用名稱，隨意
Homepage URL： # 網站 URL，如 https://ppundsh.github.io ，不是 repo
Application description # 描述，隨意
Authorization callback URL：# 網站 URL，https://ppundsh.github.io ，不是 repo

點擊註冊後，頁面跳轉，其中Client ID和Client Secret在後面的配置中需要用到，到時複製粘貼即可

comments.swig

修改 /layout/_partials/comments.swig，添加內容在最下面：

1
2
3

{% if theme.gitalk.enable %}
  <div id="gitalk-container"></div>
{% endif %}

index.swig

修改layout/_third-party/comments/index.swig，在最後一行添加內容：

{% include 'gitalk.swig' %}

gitalk.styl

新建/source/css/_common/components/third-party/gitalk.styl文件，添加內容：

:file:///D:/Github/blog/theme/next/source/css/_common/components/third-party/gitalk.styl

.gt-header a, .gt-comments a, .gt-popup a
  border-bottom: none;
.gt-container .gt-popup .gt-action.is--active:before
  top: 0.7em;

third-party.styl

修改/source/css/_common/components /third-party/third-party.styl，在最後一行上添加內容，引入樣式：

:file:///D:/Github/blog/theme/next/source/css/_common/components/third-party/third-party.styl

@import "gitalk";

Md5 加密 id 避免中文編碼過長

參考資料與作者：qhh0205、uolcano
post 檔名為中文時，容易造成編碼出 github issue lables 50 字符限制而出現 Error: Validation Failed. ，解決方法為使用 md5 加密 id 來縮短長度。

在此把 md5 加密的 js 放在 gist 上托管，在主頁面上右上角的頭像，點一下選 your gist
Gist description ：說明，選填
Filename including extension ：md5.min.js
內容請貼上以下 js 源碼點開後的內容：點我

完成後點右下的 Create public gist 以創建。

創建成功後，點擊右邊的 RAW ，將網址的 gist.githubusercontent.com 替換為 rawgit.com ，即 https://rawgit.com/ppundsh/f359785730acb0fbfdee07eb12522623/raw/15ce7e5ea97e7afb71792d58a21978f225195a12/md5.min.js

以上即為 md5 js gist 嵌入鏈結

gitalk.swig

新建 /layout/_third-party/comments/gitalk.swig 文件，並添加內容：
第二行 <scrip scrc= 替換為自已的 md5 js gist 嵌入鏈結

{% if page.comments && theme.gitalk.enable %}
  <link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">
  <script src="https://unpkg.com/gitalk/dist/gitalk.min.js"></script>
  <script src="https://rawgit.com/qhh0205/78e9e0b1f3114db6737f3ed8cdd51d3a/raw/3894c5be5aa2378336b1f5ee0f296fa0b22d06e9/md5.min.js"></script>
   <script type="text/javascript">
        var gitalk = new Gitalk({
          clientID: '{{ theme.gitalk.ClientID }}',
          clientSecret: '{{ theme.gitalk.ClientSecret }}',
          repo: '{{ theme.gitalk.repo }}',
          owner: '{{ theme.gitalk.githubID }}',
          admin: ['{{ theme.gitalk.adminUser }}'],
          id: md5(location.pathname),
          distractionFreeMode: '{{ theme.gitalk.distractionFreeMode }}'
        })
        gitalk.render('gitalk-container')           
       </script>
{% endif %}

關閉不須要的評論

D:\GitHub\blog\source\tags\inedx.md
在 type: 下加入

comments: false

_config.yml

在主題配置文件next/_config.yml中添加如下內容：

gitalk:
  enable: true
  githubID: github帳號  # 例：ppundsh  
  repo: 倉庫名稱   # 例：ppundsh.github.io
  ClientID: Client ID
  ClientSecret: Client Secret
  adminUser: github帳號 #指定可初始化評論賬戶 例：ppundsh
  distractionFreeMode: true

以上就是 NexT 中添加 gitalk 評論的配置，博客上傳到 GitHub 上後，打開頁面進入某一博客內容下，就可看到評論處。

Next 其它功能完善

主題寬度調節

作者：ehlxr

編輯 themes/next/source/css/_variables/custom.styl 文件，新增變量：

// 修改成你期望的寬度
$content-desktop = 700px
// 當視窗超過 1600px 後的寬度
$content-desktop-large = 900px

以上方法不適用 Pisces Scheme

Pisces Scheme 編輯 themes/next/source/css/_schemes/Picses/_layout.styl 文件，更改以下 css 選項定義值：

1
2
3

.header{ width: 1150px; }
.container .main-inner { width: 1150px; }
.content-wrap { width: calc(100% - 260px); }

載入動畫

https://github.com/theme-next/theme-next-pace

在 themes/next 下輸入以下指令

:file:///.themes/next

git clone https://github.com/theme-next/theme-next-pace source/lib/pace

修改 config.yml

pace: true

圖片特效

https://github.com/theme-next/theme-next-fancybox3
參考²³

在 themes/next 下輸入以下指令

:file:///.themes/next

git clone https://github.com/theme-next/theme-next-fancybox3 source/lib/fancybox

修改 config.yml

fancybox: true

搜索功能

作者：Alliot
　　推薦使用 Local Search 作為站內搜索，搜索速度快，同時比較簡潔，啟用方法如下：

1、安裝插件
　　安裝 hexo-generator-searchdb 插件
　　打開 Node.js command prompt，在站點的根目錄下執行以下命令：

npm install hexo-generator-searchdb --save

2、更改配置文件
更改站點配置文件，新增如下內容於任意位置：

search:
  path: search.xml
  field: post
  format: html
  limit: 10000

更改 NexT 主題配置文件，開啟 Local Search 作為站內搜索：

1
2
3

# Local search
local_search:
  enable: true

功能表設置

NexT 主題功能表設置，用於設置博客上方導航欄，在主題配置文件中修改。

menu:
  home: /                       #主頁
  categories: /categories	#分類頁（需手動創建）
  #about: /about		#關於頁面（需手動創建）
  archives: /archives		#歸檔頁
  tags: /tags			#標籤頁（需手動創建）
  #commonweal: /404.html        # 404 （需手動創建）

只是在 menu 選項中設置還不能讓標籤頁面、分類頁面生效，需要我們手動創建

標籤頁面

運行以下命令

hexo new page "tags"

同時，在 / source 目錄下會生成一個 tags 文件夾，裡面包含一個index.md文件

修改 / source/tags 目錄下的index.md文件

title: tags
date: 2015-09-29 14:37:02
type: "tags"
---

修改主題配置文件

去掉 tags 的註釋

menu:
  home: /                       #主頁
  categories: /categories	#分類頁（需手動創建）
  #about: /about		#關於頁面（需手動創建）
  archives: /archives		#歸檔頁
  tags: /tags			#標籤頁（需手動創建）
  #commonweal: /404.html        #公益 404 （需手動創建）

標籤雲

參閱官方教學
進入到 hexo 的根目錄，然後在 package.json 中添加依賴(注意此為 json 格式，最後一個項目以外行尾都要加上“,”): “hexo-tag-cloud”: “2.0.*”
然後執行 npm install 命令

添加在側邊欄

對於 ejs 的用戶

這裡以默認主題 landscape 為例。
tagcloud 範本文件為 hexo/themes/landscape/layout/_widget/tagcloud.ejs
將這個文件修改為如下內容：

<% if (site.tags.length) { %>
    <script type="text/javascript" charset="utf-8" src="/js/tagcloud.js"></script>
    <script type="text/javascript" charset="utf-8" src="/js/tagcanvas.js"></script>
    <div class="widget-wrap">
        <h3 class="widget-title">Tag Cloud</h3>
        <div id="myCanvasContainer" class="widget tagcloud">
            <canvas width="250" height="250" id="resCanvas" style="width=100%">
                <%- tagcloud() %>
            </canvas>
        </div>
    </div>
<% } %>

對於 swig 用戶

這裡以 Next 主題為例。
找到文件 next/layout/_macro/sidebar.swig, 然後添加如下內容。

{% if site.tags.length > 1 %}
<script type="text/javascript" charset="utf-8" src="/js/tagcloud.js"></script>
<script type="text/javascript" charset="utf-8" src="/js/tagcanvas.js"></script>
<div class="widget-wrap">
    <h3 class="widget-title">Tag Cloud</h3>
    <div id="myCanvasContainer" class="widget tagcloud">
        <canvas width="250" height="250" id="resCanvas" style="width=100%">
            {{ list_tags() }}
        </canvas>
    </div>
</div>
{% endif %}

添加在標籤頁

以 Next 主題為例。
在 Blog\themes\next\layout\page.swig 中，修改並添加以下內容：

{% if page.type === "tags" %}
  <div class="tag-cloud">
    <div class="tag-cloud-title">
        {% set visibleTags = 0 %}
        {% for tag in site.tags %}
          {% if tag.length %}
            {% set visibleTags += 1 %}
          {% endif %}
        {% endfor %}
        {{ _p('counter.tag_cloud', visibleTags) }}
    </div>
   {#<div class="tag-cloud-tags">
      {{ tagcloud({min_font: 12, max_font: 30, amount: 300, color: true, start_color: '#ccc', end_color: '#111'}) }}
    </div>#}
      
    {% if site.tags.length > 1 %}
    <script type="text/javascript" charset="utf-8" src="/js/tagcloud.js"></script>
    <script type="text/javascript" charset="utf-8" src="/js/tagcanvas.js"></script>
      <div class="widget-wrap">
        <div id="myCanvasContainer" class="widget tagcloud">
          <canvas width="500" height="500" id="resCanvas" style="width=100%">
            {{ list_tags() }}
          </canvas>
        </div>
      </div>
    {% endif %}
  </div>
{% elif page.type === 'categories' %}

最後一步

完成安裝和顯示，可以通過 hexo clean && hexo g && hexo s 來進行本地預覽, hexo clean 為必須選項。
**PS: 不要使用 hexo g -d 或者 hexo d -g 這類組合命令。

雖然有看到這則教學，但測試下失敗了，而同時加入側邊欄和標籤頁的話 Tag 會變兩倍，有空在來想要怎麼解決。

自定義

現在 hexo-tag-cloud 插件支援自定義啦。非常簡單的步驟就可以改變你的標籤雲的字體和顏色，還有突出高亮。

在你的博客根目錄，找到 _config.yml 文件然後添加如下的配置項:

# hexo-tag-cloud
tag_cloud:
    textFont: Trebuchet MS, Helvetica
    textColour: \#333
    textHeight: 25
    outlineColour: \#E2E1D1

分類頁面

運行以下命令

hexo new page "categories"

同時，在 / source 目錄下會生成一個 categories 文件夾，裡面包含一個index.md文件

修改 / source/categories 目錄下的index.md文件

title: categories
date: 2015-09-29 14:47:21
type: "categories"
---

修改主題配置文件
去掉 categories 的註釋

menu:
  home: /                       #主頁
  categories: /categories	#分類頁（需手動創建）
  #about: /about		#關於頁面（需手動創建）
  archives: /archives		#歸檔頁
  tags: /tags			#標籤頁（需手動創建）

側邊欄頭像設置

編輯站點配置文件，增加 avatar 欄位

頭像
avatar: /images/avatar.png
頭像圖片須放置在主題的 /source/images / 目錄下

開啟“更新時間”

在 D:\GitHub\Blog\themes\next_config.yml 中修改以下內容開啟功能：

# Post meta display settings
post_meta:
  item_text: true
  created_at: true
  updated_at: true
  # Only show 'updated' if different from 'created'. 當更新時間和創建時間不同時才顯示
  updated_diff: true

修改文章底部的 tag 為 #號的標籤

作者：Moorez
修改範本/themes/next/layout/_macro/post.swig，搜索 rel=”tag”>#，將 # 換成

文章字數統計

切換到根目錄下，然後運行如下代碼

npm install hexo-symbols-count-time --save

在根目錄下的 _config.yml 加上：

symbols_count_time:
  symbols: true
  time: true
  total_symbols: true
  total_time: true

在 D:\GitHub\Blog\themes\next_config.yml 中修改以下內容開啟功能：

symbols_count_time:
  separated_meta: true #是否要跳行
  item_text_post: true
  item_text_total: false
  awl: 1 #平均單字長度
  wpm: 200 #每分鐘閱讀速度

設置網站的圖示 Favicon

具體方法實現
在 EasyIcon 中找一張（32*32）的ico圖示, 或者去別的網站下載或者製作，並將圖示名稱改為favicon.ico，然後把圖示放在/themes/next/source/images裡，並且修改主題配置文檔：

# Put your favicon.ico into `hexo-site/source/` directory.
favicon: /favicon.ico

隱藏網頁底部 powered By Hexo / 強力驅動

打開themes/next/layout/_partials/footer.swig, 使用”” 隱藏之間的代碼即可，或者直接刪除。位置搜尋 “powered-by”

文章加密訪問

####不用 Plug 的方式
作者：Alliot
原文點此這裡搬運過來做備份 (這種方式是不安全的，詳情請點擊 hexo 文章密碼訪問的” 破解” 方法)

head.swig

找到 themes->next->layout->_partials->head.swig 文件。添加如下代碼 (推薦加在所有的標籤之後):

<script>
	(function(){
		if('{{ page.password }}'){
			if (prompt('請輸入文章密碼','') !== '{{ page.password }}'){
				alert('密碼錯誤！');
				history.back();
			}
		}
	})();
</script>

發文

發文的時候頂部的頁面變量添加”password: 密碼” 即可，如:

title: '2017-01-01'
permalink: post/111111111.html
tags:
  - TEST
date: 2017-01-01 00:00:00
password: 123

hexo-blog-encrypt

安裝

在 D:\Github\Blog 下，找到 package.json 加上
“hexo-blog-encrypt”: “2.0.”
需注意此為 json 格式，除了最後一筆以外都句尾都要有 “ , ”

在此目錄下，開啟 CMD ，執行
npminstall

_config.yml

在 D:\Github\Blog 下，修改 _config.yml ，加入以下字句

1
2
3

# Secutity
encrypt:
  enable:true

可在 D:\GitHub\Blog\scaffolds\post.md 下加入

1
2

password: #密碼
abstract: #加密時顯示在文章列表的摘要

之後只要填寫 password: 後的密碼，該文即會被加密

動態背景

參考：Xujian、canvas-nest.js for NexT

修改主題配置文件

在根目錄 blog 中輸入

git clone https://github.com/theme-next/theme-next-canvas-nest source/lib/canvas-nest

再開啟主題配置文件，文件位址：blog/theme/next/_config.yml
將文件中的 canvas_nest: false 為 canvas_nest: true 即可。

配置項說明

若覺得線條太多或想自行設定，可開啟 D:\GitHub\Hexo\ppundsh.github.io\themes\next\source\lib\canvas-nest\canvas-nest.min.js 找到以下參數：

z: o(v, "zIndex", -1), //背景的 z-index 屬性，css 屬性用於控制所在層的位置, 默認: -1
o: o(v, "opacity", 0.3), //線條透明度（0~1）, 默認: 0.5
c: o(v, "color", "0,0,0"), //線條顏色, 默認: ‘0,0,0’；三個數字分別為 (R,G,B)
n: o(v, "count", 70) //線條的總數量, 默認: 150

文章下設置版權訊息

預設功能

作者：Crocutax

# Declare license on posts
post_copyright:
  enable: false
  license: CC BY-NC-SA 3.0
  license_url: https://creativecommons.org/licenses/by-nc-sa/3.0/

直接把enable 改為true即可開啟。

自訂授權內容

# Declare license on posts
post_copyright:
  enable: false
  license: CC BY-NC-SA 3.0
  license: <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/3.0/tw/">創用 CC 姓名標示-非商業性-相同方式分享 3.0 台灣 授權條款</a> 授權<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/3.0/tw/"><img alt="創用 CC 授權條款" style="border-width:0" src="https://i.creativecommons.org/l/by-nc-sa/3.0/tw/88x31.png" align="right"/></a>

並修改 lang 內容

license_content: "本網誌所有文章除特別聲明外，均採用 %s "

文章末顯示 —THE END—

來源
找到themes/next/layout/_macro/post.swig，添加在

class

```json
<div>
  {% if not is_index %}
    <div style="text-align:center;color: #ccc;font-size:14px;">------ 本文結束 ------</div>
  {% endif %}
</div>

SEO 優化

為了讓搜尋影擎更方便索引，可以有以下設置。

站點地圖

作者：姜正宏的網路日誌、際富
可以方便搜尋影擎索引

安裝插件

安裝 google sitemap

npm install hexo-generator-sitemap --save

安裝百度 sitemap

npm install hexo-generator-baidu-sitemap --save

修改站點_config.yml 文件
增加以下內容

sitemap:
    path: sitemap.xml
baidusitemap:
    path: baidusitemap.xml

注意縮進。

執行hexo g後，public 目錄下就會生成 sitemap.xml 和 baidusitemap.xml 兩個文件了。

在 Google 站點工具設置

個人使用 google 推薦的方試一直失敗，參考此文後能成功
作者: iissnan
設置 Google 站點管理工具的驗證字串，用於提交 sitemap

獲取 google site verification code

登錄 Google Webmaster Tools，導航到驗證方法，並選擇 HTML Tag。將會獲取到一段代碼：

<meta name="google-site-verification" content="XXXXXXXXXXXXXXXXXXXXXXX" />

將 content 裡面的 XXXXXXXXXXXXXXXXXXXXXXX 複製出來。

設置主題

編輯站點的 _config.yml，新增欄位 google_site_verification

google_site_verification: XXXXXXXXXXXXXXXXXXXXXXX

hexo-autonofollow

因垃圾外鍵會降低 SEO 的權重，加上此插件可以將除了友站以外的連結加上 nofollow
Install
npm install hexo-autonofollow –save
Options
You can configure this plugin in _config.yml.

nofollow:
	enable: true
	exclude:
    - exclude1.com
    - exclude2.com

其它

壓縮代碼加速載入

在生成時會慢一點，但可以加速載入
CMD 進入博客根目錄，執行以下命令

npm install hexo-neat --save

打開站點配置文件_config.yml，添加以下內容：

#hexo-neat 加速
neat_enable: true
neat_html:
  enable: true
  exclude:
  
neat_css:
  enable: true
  exclude:
    - '*.min.css'
neat_js:
  enable: true
  mangle: true
  output:
  compress:
  exclude:
    - '*.min.js'

圖片沿後載入來加速頁面載入速度

作者 ²¹

圖片懶載入是提升網站性能和用戶體驗的一個非常很好方式，並且幾乎所有的大型網站都使用到了，比如微博，僅把用戶可見的部分顯示圖片，其餘的都暫時不載入，做法就是：讓所有圖片元素 src 指向一個小的站位圖片比如 loading，並新增一個屬性 (如 data-original) 存放真實圖片位址。每當頁面載入（或者卷軸滾動），使用 JS 腳本將可視區域內的圖片 src 替換回真實位址，並做請求重新載入。

安裝步驟：
npm install hexo-lazyload-image –save
然後修改 _config.yml 文件

lazyload:
  enable: true 
  onlypost: false
  loadingImg: # eg. ./images/loading.png

圖片附加說明

https://github.com/wayou/hexo-image-caption

file:///.

npm install --save hexo-image-caption

修改 _config.yml 啟用

file:///._config.yml

# add caption for iamges
image_caption:
  enable: true #false to disable
  class_name: #if you wanna customize the style for the caption,you can assign a class name, default is 'image-caption'