1.Hexo簡單實用
hexo中文文檔：https://hexo.io/zh-cn/docs/
1.1什么是hexo？
Hexo 是一個快速、簡潔且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在幾秒內，即可利用靚麗的主題生成靜態網頁。
1.2安裝hexo
1.hexo基於node.js,所以需要先安裝node.js
這里關於node.js與npm使用不做介紹。
2.安裝 Hexo
(1)全局安裝hexo
cnpm install hexo -g
(2)查看版本
$ hexo -v hexo-cli: 3.1.0 os: Windows_NT 6.3.9600 win32 x64 node: 12.13.1 v8: 7.7.299.13-node.16 uv: 1.33.1 zlib: 1.2.11 brotli: 1.0.7 ares: 1.15.0 modules: 72 nghttp2: 1.39.2 napi: 5 llhttp: 1.1.4 http_parser: 2.8.0 openssl: 1.1.1d cldr: 35.1 icu: 64.2 tz: 2019c unicode: 12.1
1.3Hexo使用
1.建站：(創建一個基本的hexo項目)
hexo init hexo_test
cd hexo_test
npm install
上面是克隆一個項目並且用npm下載相關依賴。
新建完成后，指定文件夾的目錄如下：
.
├── _config.yml
├── package.json
├── scaffolds
├── source
| ├── _drafts
| └── _posts
└── themes
(1)_config.yml：網站的配置信息，可以在此配置大部分的參數。
(2)package.json：應用程序的信息。EJS, Stylus 和 Markdown renderer 已默認安裝。
(3)scaffolds：模版 文件夾。當您新建文章時，Hexo 會根據 scaffold 來建立文件。
Hexo的模板是指在新建的文章文件中默認填充的內容。例如，如果您修改scaffold/post.md中的Front-matter內容，那么每次新建一篇文章時都會包含這個修改。
(4)source：資源文件夾是存放用戶資源的地方。除 _posts 文件夾之外，開頭命名為 _ (下划線)的文件 / 文件夾和隱藏的文件將會被忽略。Markdown 和 HTML 文件會被解析並放到 public 文件夾，而其他文件會被拷貝過去
(5)themes：主題 文件夾。Hexo 會根據主題來生成靜態頁面。
2.命令簡介
1. init
hexo init [folder]
新建一個網站。如果沒有設置 folder ，Hexo 默認在目前的文件夾建立網站。
2. new
hexo new [layout] <title>
新建一篇文章。layout支持的參數有：post, page, draft。如果沒有設置 layout 的話，默認使用 _config.yml 中的 default_layout 參數代替。如果標題包含空格的話，請使用引號括起來。
hexo new "post title with whitespace"
| 參數 | 描述 |
|---|---|
-p, --path |
自定義新文章的路徑 |
-r, --replace |
如果存在同名文章，將其替換 |
-s, --slug |
文章的 Slug，作為新文章的文件名和發布后的 URL |
默認情況下，Hexo 會使用文章的標題來決定文章文件的路徑。對於獨立頁面來說，Hexo 會創建一個以標題為名字的目錄，並在目錄中放置一個 index.md 文件。你可以使用 --path 參數來覆蓋上述行為、自行決定文件的目錄：
hexo new page --path about/me "About me"
以上命令會創建一個 source/about/me.md 文件，同時 Front Matter 中的 title 為 "About me"。title 是必須指定的！
3. generate 可以簡寫為g
hexo generate
生成靜態文件。也就是將md文件生成靜態的html文件，有點類似於vue-cli的用法，將vue文件生成最終的靜態文件。
| 選項 | 描述 |
|---|---|
-d, --deploy |
文件生成后立即部署網站 |
-w, --watch |
監視文件變動 |
-b, --bail |
生成過程中如果發生任何未處理的異常則拋出異常 |
-f, --force |
強制重新生成文件 Hexo 引入了差分機制，如果 public 目錄存在，那么 hexo g 只會重新生成改動的文件。使用該參數的效果接近 hexo clean && hexo generate |
-c, --concurrency |
最大同時生成文件的數量，默認無限制 |
4. publish
hexo publish [layout] <filename>
發表草稿。
5. server 可以簡寫為s
hexo server
啟動服務器。默認情況下，訪問網址為： http://localhost:4000/。
| 選項 | 描述 |
|---|---|
-p, --port |
重設端口 |
-s, --static |
只使用靜態文件 |
-l, --log |
啟動日記記錄，使用覆蓋記錄格式 |
6. deploy 可以簡寫為d
hexo deploy
部署網站。
| 參數 | 描述 |
|---|---|
-g, --generate |
部署之前預先生成靜態文件 |
7. list
hexo list <type>
列出網站資料。type支持的參數為：page, post, route, tag, category
例如：
$ hexo list post INFO Start processing Date Title Path Category Tags 2020-01-07 Hello World _posts/hello-world.md
3.啟動服務進行訪問測試
Administrator@MicroWin10-1535 MINGW64 ~/Desktop/hexo_test $ hexo s INFO Start processing INFO Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.
訪問：
4.修改默認配置
/hexo_test/_config.yml 簡單修改作者信息：
# Hexo Configuration ## Docs: https://hexo.io/docs/configuration.html ## Source: https://github.com/hexojs/hexo/ # Site title: "QiaoZhi's Blog" subtitle: '簡單的記錄，莫大的方便!!!' description: '沒有最好，只有更好!!!' keywords: author: QiaoZhi # 簡體中文 language: zh-Hans # 上海時區 timezone: Asia/Shanghai # URL ## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/' url: http://yoursite.com root: / permalink: :year/:month/:day/:title/ permalink_defaults: pretty_urls: trailing_index: true # Set to false to remove trailing 'index.html' from permalinks trailing_html: true # Set to false to remove trailing '.html' from permalinks # Directory source_dir: source public_dir: public tag_dir: tags archive_dir: archives category_dir: categories code_dir: downloads/code i18n_dir: :lang skip_render: # Writing new_post_name: :title.md # File name of new posts default_layout: post titlecase: false # Transform title into titlecase external_link: enable: true # Open external links in new tab field: site # Apply to the whole site exclude: '' filename_case: 0 render_drafts: false post_asset_folder: false relative_link: false future: true highlight: enable: true line_number: true auto_detect: false tab_replace: '' wrap: true hljs: false # Home page setting # path: Root path for your blogs index page. (default = '') # per_page: Posts displayed per page. (0 = disable pagination) # order_by: Posts order. (Order by date descending by default) index_generator: path: '' per_page: 10 order_by: -date # Category & Tag default_category: uncategorized category_map: tag_map: # Metadata elements ## https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta meta_generator: true # Date / Time format ## Hexo uses Moment.js to parse and display date ## You can customize the date format as defined in ## http://momentjs.com/docs/#/displaying/format/ date_format: YYYY-MM-DD time_format: HH:mm:ss ## Use post's date for updated date unless set in front-matter use_date_for_updated: false # Pagination ## Set per_page to 0 to disable pagination per_page: 10 pagination_dir: page # Include / Exclude file(s) ## include:/exclude: options only apply to the 'source/' folder include: exclude: ignore: # Extensions ## Plugins: https://hexo.io/plugins/ ## Themes: https://hexo.io/themes/ theme: landscape # Deployment ## Docs: https://hexo.io/docs/deployment.html deploy: type: ''
關於更全的配置參考：https://hexo.io/zh-cn/docs/configuration
5.寫作
你可以執行下列命令來創建一篇新文章或者新的頁面。
hexo new [layout] <title>
可以在命令中指定文章的布局（layout），默認為 post，可以通過修改 _config.yml 中的 default_layout 參數來指定默認布局。
1.布局：
Hexo 有三種默認布局：post、page 和 draft。在創建者三種不同類型的文件時，它們將會被保存到不同的路徑；而自定義的其他布局和 post 相同，都將儲存到 source/_posts 文件夾。
| 布局 | 路徑 |
|---|---|
post |
source/_posts |
page |
source |
draft |
source/_drafts |
2. 文件名稱：
Hexo 默認以標題做為文件名稱，但您可編輯 new_post_name 參數來改變默認的文件名稱，舉例來說，設為 :year-:month-:day-:title.md 可讓您更方便的通過日期來管理文章。
| 變量 | 描述 |
|---|---|
:title |
標題（小寫，空格將會被替換為短杠） |
:year |
建立的年份，比如， 2015 |
:month |
建立的月份（有前導零），比如， 04 |
:i_month |
建立的月份（無前導零），比如， 4 |
:day |
建立的日期（有前導零），比如， 07 |
:i_day |
建立的日期（無前導零），比如， 7 |
3. 草稿
草稿是 Hexo 的一種特殊布局：draft，這種布局在建立時會被保存到 source/_drafts 文件夾，您可通過 publish 命令將草稿移動到 source/_posts 文件夾，該命令的使用方式與 new 十分類似，您也可在命令中指定 layout 來指定布局。
hexo publish [layout] <title>
草稿默認不會顯示在頁面中，您可在執行時加上 --draft 參數，或是把 render_drafts 參數設為 true 來預覽草稿。
4. 模版（Scaffold）
在新建文章時，Hexo 會根據 scaffolds 文件夾內相對應的文件來建立文件，例如：
hexo new photo "My Gallery"
在執行這行指令時，Hexo 會嘗試在 scaffolds 文件夾中尋找 photo.md，並根據其內容建立文章，以下是可以在模版中使用的變量：
| 變量 | 描述 |
|---|---|
layout |
布局 |
title |
標題 |
date |
文件建立日期 |
5. 測試
(1)新建一個page和一個post頁面
Administrator@MicroWin10-1535 MINGW64 ~/Desktop/hexo_test $ hexo new post1 INFO Created: ~\Desktop\hexo_test\source\_posts\post1.md Administrator@MicroWin10-1535 MINGW64 ~/Desktop/hexo_test $ hexo new page page1 INFO Created: ~\Desktop\hexo_test\source\page1\index.md
(2)編輯上面新建的文件
post1.md:
---
title: post1
date: 2020-01-07 11:17:40
tags:
---
# 這里是page1
page1/index.md
---
title: page1
date: 2020-01-07 11:17:56
---
# 這里是page1
(3)訪問測試：
6. 編寫一篇文章介紹markdown的語法
(1)創建文章
$ hexo new Markdown使用介紹
INFO Created: ~\Desktop\hexo_test\source\_posts\Markdown使用介紹.md
(2)其內容如下
--- title: Markdown使用介紹 date: 2020-01-07 12:02:20 categories: [語言,markdown] tags: 'markdown' --- 推薦一個markdown在線編輯器：http://mahua.jser.me/ # 標題 Markdown 標題有兩種格式。 ## 使用 = 和 - 標記一級和二級標題(必須超過3個) = 和 - 標記語法格式如下： ``` 我展示的是一級標題 === 我展示的是二級標題 ----------------- ``` 結果如下：  ## 使用#標記 使用 # 號可表示 1-6 級標題，一級標題對應一個 # 號，二級標題對應兩個 # 號，以此類推。注意連續的#后面有空格。 ``` # 一級標題 ## 二級標題 ### 三級標題 #### 四級標題 ##### 五級標題 ###### 六級標題 ``` 結果如下：  # 段落格式 Markdown 段落沒有特殊的格式，直接編寫文字就好。 ## 字體 支持的字體如下： ``` *斜體文本* _斜體文本_ **粗體文本** __粗體文本__ ***粗斜體文本*** ___粗斜體文本___ ``` 結果：  ## 分割線 你可以在一行中用三個以上的星號、減號、底線來建立一個分隔線，行內不能有其他東西。你也可以在星號或是減號中間插入空格。下面每種寫法都可以建立分隔線： ``` *** * * * ***** - - - ---------- ``` ## 刪除線 如果段落上的文字要添加刪除線，只需要在文字的兩端加上兩個波浪線 ~~ 即可 ``` ~~BAIDU.COM~~ ``` ## 下划線 下划線可以通過 HTML 的 \<u\> 標簽來實現： ``` <u>帶下划線文本</u> ``` # 列表 Markdown 支持有序列表和無序列表。 ## 無序列表使用星號(*)、加號(+)或是減號(-)作為列表標記： ``` * 第一項 * 第二項 * 第三項 + 第一項 + 第二項 + 第三項 - 第一項 - 第二項 - 第三項 ``` 結果： * 第一項 * 第二項 * 第三項 + 第一項 + 第二項 + 第三項 - 第一項 - 第二項 - 第三項 ## 有序列表使用數字並加上 . 號來表示，如： ``` 1. 第一項 2. 第二項 3. 第三項 ``` 結果： 1. 第一項 2. 第二項 3. 第三項 ## 列表嵌套： 列表嵌套只需在子列表中的選項添加四個空格即可： ``` 1. 第一項： - 第一項嵌套的第一個元素 - 第一項嵌套的第二個元素 2. 第二項： - 第二項嵌套的第一個元素 - 第二項嵌套的第二個元素 ``` 結果： 1. 第一項： - 第一項嵌套的第一個元素 - 第一項嵌套的第二個元素 2. 第二項： - 第二項嵌套的第一個元素 - 第二項嵌套的第二個元素 # markdown區塊 Markdown 區塊引用是在段落開頭使用 > 符號 ，然后后面緊跟一個空格符號： ``` > 區塊引用 > 區塊鏈 > NP ``` 結果:  另外區塊是可以嵌套的，一個 > 符號是最外層，兩個 > 符號是第一層嵌套，以此類推退。區塊中也可以使用列表，列表中也可以使用區塊： ``` > 最外層 > > 第一層嵌套 > > > 第二層嵌套 > 區塊中使用列表 > 1. 第一項 > 2. 第二項 > + 第一項 > + 第二項 > + 第三項 ``` 結果：  ## 補充：關於區塊分割 為了使系統認為我們第一個區塊已經'完全'結束，我們需要在第一個區塊后鍵入一個換行,然后鍵入一個全角空格，然后就可以繼續使用'>'來開始第二個引用區塊。 例如： ``` > 最外層 注意左邊有個全角的空格 > 第一層嵌套 ``` 結果：  # markdown代碼 ## 如果是段落上的一個函數或片段的代碼可以用反引號把它包起來（`），例如： ``` `printf()` 函數 ``` 結果： `printf()` 函數 ## 代碼區塊使用 4 個空格或者一個制表符（Tab 鍵）。 例如：  ## 也可以用 ``` 包裹一段代碼，並指定一種語言（也可以不指定）： 例如：  # markdown鏈接 鏈接使用方法如下： ``` [鏈接名稱](鏈接地址) 或者 <鏈接地址> ``` 例如： ``` [百度](http://baidu.com) <http://baidu.com> ``` 結果： [百度](http://baidu.com) <http://baidu.com> ## 補充：高級鏈接 鏈接也可以用變量來代替，文檔末尾附帶變量地址。例如：  # markdown圖片 圖片語法格式如下： ```   ``` 開頭一個感嘆號 ! 接着一個方括號，里面放上圖片的替代文字 接着一個普通括號，里面放上圖片的網址，最后還可以用引號包住並加上選擇性的 'title' 屬性的文字。 例如： ```   ``` 結果：   # markdown表格 Markdown 制作表格使用 | 來分隔不同的單元格，使用 - 來分隔表頭和其他行。 對齊方式： * -: 設置內容和標題欄居右對齊。 * :- 設置內容和標題欄居左對齊。 * :-: 設置內容和標題欄居中對齊。 例如：  # markdown其他 ## 支持的 HTML 元素 不在 Markdown 涵蓋范圍之內的標簽，都可以直接在文檔里面用 HTML 撰寫。目前支持的 HTML 元素有：\<kbd\> \<b\> \<i\> \<em\> \<sup\> \<sub\> \<br\>等 。 ## 轉義 Markdown 使用了很多特殊符號來表示特定的意義，如果需要顯示特定的符號則需要使用轉義字符，Markdown 使用反斜杠轉義特殊字符。 Markdown 支持以下這些符號前面加上反斜杠來幫助插入普通的符號： ``` \ 反斜線 ` 反引號 * 星號 _ 下划線 {} 花括號 [] 方括號 () 小括號 # 井字號 + 加號 - 減號 . 英文句點 ! 感嘆號 ```
效果： https://qiao-zhi.github.io/2020/01/07/Markdown%E4%BD%BF%E7%94%A8%E4%BB%8B%E7%BB%8D/#more
2.hexo切換next主題
1.下載
到網站根目錄執行：
Administrator@MicroWin10-1535 MINGW64 ~/Desktop/hexo_test $ pwd /c/Users/Administrator/Desktop/hexo_test Administrator@MicroWin10-1535 MINGW64 ~/Desktop/hexo_test $ git clone https://github.com/iissnan/hexo-theme-next themes/next Cloning into 'themes/next'... remote: Enumerating objects: 12037, done. remote: Total 12037 (delta 0), reused 0 (delta 0), pack-reused 12037 Receiving objects: 100% (12037/12037), 13.05 MiB | 2.98 MiB/s, done. Resolving deltas: 100% (6965/6965), done.
2.啟用主題
打開站點根目錄下的_config.yml文件， 找到 theme 字段，並將其值更改為 next。
theme: next
修改語言：(需要到主題 next\languages查看是否有該語言)
language: zh-Hans
注意：冒號后面必須有一個空格。
3.修改配置：
下面提到的站點配置文件指的是根目錄下的_config.yml，主題配置文件指的是 themes\next\_config.yml 文件
1.修改主題配置文件的scheme模式：采用最后一種Gemini
scheme: Gemini
2.修改標簽及其分類界面
修改主題配置文件
menu: home: /|| home #about: /about/ || user tags: /tags/|| tags categories: /categories/|| th archives: /archives/|| archive #schedule: /schedule/ || calendar #sitemap: /sitemap.xml || sitemap #commonweal: /404/ || heartbeat
放開對應的注釋，由於我在訪問的時候URL老是報錯。所以我去掉 || 之前的空格。
進入命令行輸入：
hexo n page tags
hexo n page categories
修改source/categories/index.md,在 date 下一行輸入：
type: "categories"
修改source/tags/index.md,在 date 下一行輸入：
type: "tags"
補充：點擊主頁的posts的時候URL也錯誤，找到themes\next\layout\_macro\sidebar.swig
大概52行左右，采用下面的方式獲取目錄路徑。
{% if config.archive_dir != '/' and site.posts.length > 0 %} <div class="site-state-item site-state-posts"> {% if theme.menu.archives %} <!-- <a href="{{ url_for(theme.menu.archives).split('||')[0] | trim }}"> --> <a href="{{ url_for(config.archive_dir) }}"> {% else %} <a href="{{ url_for(config.archive_dir) }}"> {% endif %} <span class="site-state-item-count">{{ site.posts.length }}</span> <span class="site-state-item-name">{{ __('state.posts') }}</span> </a> </div> {% endif %}
3.隱藏網頁底部 powered By Hexo / 強力驅動
打開 themes/next/layout/_partials/footer.swig， 找到：
{% if theme.footer.powered %}
<div class="powered-by">{#
#}{{ __('footer.powered', '<a class="theme-link" target="_blank" href="https://hexo.io">Hexo</a>') }}{#
#}</div>
{% endif %}
{% if theme.footer.powered and theme.footer.theme.enable %}
<span class="post-meta-divider">|</span>
{% endif %}
{% if theme.footer.theme.enable %}
<div class="theme-info">{#
#}{{ __('footer.theme') }} — {#
#}<a class="theme-link" target="_blank" href="https://github.com/iissnan/hexo-theme-next">{#
#}NexT.{{ theme.scheme }}{#
#}</a>{% if theme.footer.theme.version %} v{{ theme.version }}{% endif %}{#
#}</div>
{% endif %}
注掉或者刪掉，當然也可以換成自己想要的內容。
4.文章添加陰影
打開 /themes/next/source/css/_custom/custom.styl ，添加：
.post { margin-top: 60px; 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); }
5.瀏覽頁面顯示當前瀏覽進度
打開主題配置文件，搜索關鍵字 scrollpercent，把 false 改為 true。
6.Local Search本地搜索
在站點的根目錄下執行以下命令：
npm install hexo-generator-searchdb --save
編輯站點配置文件，新增以下內容加到最后：
search: path: search.xml field: post format: html limit: 10000
編輯主題配置文件，啟用本地搜索功能：
local_search: enable: true # if auto, trigger search by changing input # if manual, trigger search by pressing enter key or search button trigger: auto # show top n results per article, show all results by setting to -1 top_n_per_article: 1
7.設置個人頭像
打開 主題配置文件，找到 Sidebar Avatar 字段：
# Sidebar Avatar # in theme directory(source/images): /images/avatar.gif # in site directory(source/uploads): /uploads/avatar.gif avatar: /img/photo.jpg
圖片可以放在站點根目錄的source/img/目錄，也可以放在主題的sources/images/目錄下，我選擇放在站點的source/img/目錄下。
8.網站底部字數統計
站點根目錄下執行：
npm install hexo-wordcount --save
然后在 /themes/next/layout/_partials/footer.swig 文件尾部加上：
<div class="theme-info"> <div class="powered-by"></div> <span class="post-count">博客全站共{{ totalcount(site) }}字</span> </div>
9. 設置默認顯示文章摘要，並且摘要文字為150個字
修改站點配置，找到auto_excerpt：
auto_excerpt: enable: true length: 150
10. 在右上角或者左上角實現fork me on github
到： https://github.blog/2008-12-19-github-ribbons/ 復制喜歡的樣式。
編輯themes\next\layout\ _layout.swig，大概第23行左右。放到<div class="headband"></div>標簽內部。並把連接改為你的git地址。
同時image標簽需要加入點樣式使其固定在右上角。
<div class="headband"> <a href="https://github.com/qiao-zhi/"><img style="position: fixed; top: 0; right: 0; border: 0;" width="149" height="149" src="https://github.blog/wp-content/uploads/2008/12/forkme_right_red_aa0000.png?resize=149%2C149" class="attachment-full size-full" alt="Fork me on GitHub" data-recalc-dims="1"></a> </div>
11. 實現點擊加💗的效果
在themes/next/source/js/src下面新建love.js，內容如下：
!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\next\layout\_layout.swig文件末尾添加
<!-- 頁面點擊小紅心 --> <script type="text/javascript" src="/js/src/love.js"></script>
12.修改文章底部的那個帶#號的標簽
修改模板themes/next/layout/_macro/post.swig，搜索 rel="tag">#，將 # 換成 <i class="fa fa-tag"></i>
效果：
13.在每篇文章末尾統一添加“本文結束”標記
themes\next\layout\_macro 中新建 post-end-tag.swig 文件,並添加以下內容：
<div> {% if not is_index %} <div style="text-align:center;color: #ccc;font-size:14px;">-------------本文結束<i class="fa fa-paw"></i>感謝您的閱讀-------------</div> {% endif %} </div>
接着打開themes\next\layout\_macro\post.swig文件，在post-body 之后， post-footer 之前添加如下：
<div> {% if not is_index %} {% include 'post-end-tag.swig' %} {% endif %} </div>
效果：
14設置網站的圖標Favicon
到：https://www.easyicon.net/ 網站內搜索喜歡的圖標，最后下載兩個，大小分別為32*32和16*16。並將圖標置於themes\next\source\images目錄。
修改主題配置文件，找到favicon，改為：
favicon:
#small: /images/favicon-16x16-next.png
#medium: /images/favicon-32x32-next.png
small: /images/favicon_16.ico
medium: /images/ffavicon_32.ico
apple_touch_icon: /images/apple-touch-icon-next.png
safari_pinned_tab: /images/logo.svg
#android_manifest: /images/manifest.json
#ms_browserconfig: /images/browserconfig.xml
15.實現統計功能
網站根目錄下安裝hexo-wordcount：
npm install hexo-wordcount --save
然后在主題的配置文件中，配置如下：
post_wordcount:
item_text: true
wordcount: true
min2read: true
totalcount: true
separated_meta: true
效果：
16. 開啟打賞
將微信和支付寶收款二維碼放於站點/source/img/目錄下，修改主題配置：
# Reward reward_comment: 堅持原創技術分享，您的支持將鼓勵我繼續創作！ wechatpay: /img/pay_weixin.bmp alipay: /img/pay_zfb.bmp #bitcoin: /images/bitcoin.png
結果:
修復鼠標懸浮文字抖動：編輯 next/source/css/_common/components/post/post-reward.styl。注釋掉hover樣式：
/** #wechat:hover p{ animation: roll 0.1s infinite linear; -webkit-animation: roll 0.1s infinite linear; -moz-animation: roll 0.1s infinite linear; } #alipay:hover p{ animation: roll 0.1s infinite linear; -webkit-animation: roll 0.1s infinite linear; -moz-animation: roll 0.1s infinite linear; } #bitcoin:hover p { animation: roll 0.1s infinite linear; -webkit-animation: roll 0.1s infinite linear; -moz-animation: roll 0.1s infinite linear; } */
17. 開啟git和郵箱社交聯系
找到social，將github和email換成自己的信息。
social:
GitHub: https://github.com/qiao-zhi || github
E-Mail: mailto:qiao_liqiang@163.com || envelope
結果：
還有更多其他的配置，用到的時候在去查API即可。
3.結合githubpages創建博客
1.到git創建一個倉庫，名字為： username.github.io
例如我的用戶名為： qiao-zhi， 我創建的倉庫名為： qiao-zhi.github.io
2.修改上面站點配置文件的deploy：
# Deployment ## Docs: https://hexo.io/docs/deployment.html deploy: type: git repo: https://github.com/qiao-zhi/qiao-zhi.github.io.git branch: master
3.安裝hexo-deployer-git:（到站點的根目錄執行）
npm install hexo-deployer-git --save
4.執行 生成靜態文件並且發布：
hexo generate -deploy
可以簡寫為
hexo generate -d
執行上面命令由於我們沒有配SSH提交git代碼，所以需要我們輸入用戶名和密碼進行git提交。如果想不輸入用戶名密碼可以配置SSH提交代碼，可以參考我之前的git學習文章。
上面命令相當於是執行hexo generate 生成靜態文件之后將public目錄的文件上傳至倉庫。也就是傳到 https://github.com/qiao-zhi/qiao-zhi.github.io.git 倉庫的是public目錄的文件，如下：
本地public如下：
遠程倉庫master分支代碼如下：
5.接下來查看git上項目的settings,向下拖到GitHub Pages：
6.訪問測試：
7. 代碼也推到該倉庫的其他分支：
因為master分支是存放Hexo博客生成的頁面，所以只能創建一個分支來保存博客的源代碼在你的Github上。比如，創建一個分支叫dev:
(0)創建dev分支並且默認分支修改為dev
(1)到themes目錄下面刪掉自帶的主題
(2)到next目錄下面刪掉 .git 目錄
(3)到站點根目錄執行下面操作：(本地初始化為git目錄，並且切出dev分支，強行將代碼推送到遠程的dev分支)
git init git remote add origin https://github.com/qiao-zhi/qiao-zhi.github.io.git git checkout -b dev git add . git commit -m "first code commit" git push -f origin dev
(4)以后的代碼可以直接推送到dev分支，且dev分支不包括public目錄，站點根目錄的 .gitignore 內容如下：
.DS_Store Thumbs.db db.json *.log node_modules/ public/ .deploy*/
(5)我在另一台電腦直接clone項目拉取的是dev分支的代碼。
Administrator@MicroWin10-1535 MINGW64 ~/Desktop/新建文件夾 $ git clone https://github.com/qiao-zhi/qiao-zhi.github.io.git Cloning into 'qiao-zhi.github.io'... remote: Enumerating objects: 518, done. remote: Counting objects: 100% (518/518), done. remote: Compressing objects: 100% (418/418), done. remote: Total 518 (delta 49), reused 516 (delta 47), pack-reused 0 Receiving objects: 100% (518/518), 6.53 MiB | 538.00 KiB/s, done. Resolving deltas: 100% (49/49), done. Checking out files: 100% (370/370), done. Administrator@MicroWin10-1535 MINGW64 ~/Desktop/新建文件夾 $ cd qiao-zhi.github.io/ Administrator@MicroWin10-1535 MINGW64 ~/Desktop/新建文件夾/qiao-zhi.github.io (dev) $
進去直接運行
npm install
安裝完依賴之后hexo s 之后即可。
補充：hexo關於tags標簽和categories分類的區別
Front-matter 是文件最上方以 --- 分隔的區域，用於指定個別文件的變量，舉例來說：
---
title: Hello World
date: 2013/7/13 20:46:25
---
以下是預先定義的參數，您可在模板中使用這些參數值並加以利用。
分類和標簽：
只有文章支持分類和標簽，您可以在 Front-matter 中設置。在其他系統中，分類和標簽聽起來很接近，但是在 Hexo 中兩者有着明顯的差別：分類具有順序性和層次性，也就是說 Foo, Bar 不等於 Bar, Foo；而標簽沒有順序和層次。
Hexo 不支持指定多個同級分類。下面的指定方法：
categories:
- Diary
- Life
會使分類Life成為Diary的子分類，而不是並列分類。因此，有必要為您的文章選擇盡可能准確的分類。
如果你需要為文章添加多個分類，可以嘗試以下 list 中的方法。
categories:
- [Diary, PlayStation]
- [Diary, Games]
- [Life]
此時這篇文章同時包括三個分類： PlayStation 和 Games 分別都是父分類 Diary 的子分類，同時 Life 是一個沒有子分類的分類。
最終網站效果： https://qiao-zhi.github.io/
最終代碼：https://github.com/qiao-zhi/qiao-zhi.github.io/tree/dev