最詳細的Hexo Next主題配置教程

阿新 • • 發佈：2019-01-02

配置環境

安裝Node（必須）

作用：用來生成靜態頁面的

到Node.js官網下載相應平臺的最新版本，一路安裝即可。

安裝Git（必須）

作用：把本地的hexo內容提交到github上去.

安裝Xcode就自帶有Git，我就不多說了。

申請GitHub（必須）

作用：是用來做部落格的遠端創庫、域名、伺服器之類的，怎麼與本地hexo建立連線等下講。

安裝hexo

Node和Git都安裝好後,首先建立一個資料夾,如blog,使用者存放hexo的配置檔案,然後進入blog裡安裝Hexo。
- 執行如下命令安裝Hexo：

sudo npm install -g hexo

初始化然後，執行init命令初始化hexo,命令：

hexo init

至此，全部安裝工作已經完成！blog就是你的部落格根目錄，所有的操作都在裡面進行。
- 生成靜態頁面

hexo g

啟動本地服務

hexo s

設定頭像

在站點配置檔案中,新增avatar欄位,值設定成頭像的連結地址.

avatar: /images/avatar.png
//路徑主題檔案source/images目錄下

設定網站圖示(注意必須為ico格式)

在主題配置檔案中,把favicon的註釋去掉即可

# Put your favicon.ico into `hexo-site/source/` directory.
favicon: images/favicon.ico
//路徑主題檔案source/images目錄下

新增「標籤」頁面

新建「標籤」頁面，並在選單中顯示「標籤」連結。「標籤」頁面將展示站點的所有標籤，若你的所有文章都未包含標籤，此頁面將是空的。底下程式碼是一篇包含標籤的文章的例子

先在hexo/source的路徑下建立tags資料夾,再建立一個md檔案名字為tags

title: Tagcloud
date: 2014-12-22 
type: "tags"
---

注意:這裡的標題必須為Tagcloud,否則無法生成標籤

測試標籤頁面

title: PHP基礎第一章
tags:
  - PHP
date: 2016-11-14
---

新增「分類」頁面

新建「分類」頁面，並在選單中顯示「分類」連結。「分類」頁面將展示站點的所有分類，若你的所有文章都未包含分類，此頁面將是空的。底下程式碼是一篇包含分類的文章的例子：

先在hexo/source的路徑下建立categories資料夾,再建立一個md檔案名字為page

title: 分類測試
date: 2014-12-22
type: "page"
---

測試分類頁面

在md裡面加上categories: 分類的名字

---
title: PHP基礎第一章
categories: PHP
tags:
  - PHP
date: 2016-11-14
---

新增「關於我」頁面

新建「關於我」頁面，並在導航欄中顯示「關於我」連結。關於我頁面需要自己新增html,css設計,否則此頁面將是空的,下面的例子驚醒演示。

先在hexo/source的路徑下建立about資料夾,再建立一個md檔案

---
title: 關於我
date: 2016-11-10 20:34:05
---

新增「歸檔」頁面

新建「歸檔」頁面，並在導航欄中顯示「歸檔」連結。在hexo/source的路徑下建立archives資料夾即可。(你的所有文章都會在歸檔裡面顯示)

設定社交連結

側欄社交連結的修改包含兩個部分，第一是連結，第二是連結圖示。兩者配置均在主題配置檔案中。

# Social links
social:
  GitHub: https://github.com/your-user-name
  Twitter: https://twitter.com/your-user-name
  微博: http://weibo.com/your-user-name
  豆瓣: http://douban.com/people/your-user-name
  知乎: http://www.zhihu.com/people/your-user-name
  #等等

2.設定連結的圖示，對應的欄位是 social_icons。其鍵值格式是匹配鍵: Font Awesome 圖示名稱，匹配鍵與上一步所配置的連結的顯示文字相同（大小寫嚴格匹配），圖示名稱是 Font Awesome 圖示的名字（不必帶 fa- 字首）。 enable 選項用於控制是否顯示圖示，你可以設定成 false 來去掉圖示。

# Social Icons
social_icons:
  enable: true
  # Icon Mappings
  GitHub: github
  Twitter: twitter
  微博: weibo

文章打賞功能

越來越多的平臺（微信公眾平臺，新浪微博，簡書，百度打賞等）支援打賞功能，付費閱讀時代越來越近，Next特此增加了打賞功能，支援微信打賞和支付寶打賞。只需要複製下面的程式碼新增到主題配置檔案中即可開啟該功能。

reward_comment: 堅持原創技術分享，您的支援將鼓勵我繼續創作！
wechatpay: 圖片連結
alipay: 圖片連結

設定友情連結

在主題檔案開啟links_title和links即可

# title
links_title: 前端工具箱
#links_layout: block
#links_layout: inline
links:
   程式碼壓縮: http://tool.oschina.net/jscompress
   CSS整理: http://example.com/

修改底部logo

首先，找到 \themes\next\layout_partials\下面的footer.swig檔案，開啟會發現，如下圖的語句：

看到劃框的地方了嗎？

第一個框是下面側欄的“日期❤ XXX”
如果想像我一樣加東西，一定要在雙大括號外面寫。如：xxx{{config.author}},當然你要是想改徹底可以變數都刪掉，看個人意願。
第二個，是圖一當中 “由Hexo驅動” 的Hexo連結，先給刪掉防止跳轉，如果想跳轉當然也可以自己寫地址，至於中文一會處理。注意刪除的時候格式不能錯，只把<a>...</a>標籤這部分刪除即可，留著兩個單引號”,否則會出錯哦。
第三個框也是最後一個了，這個就是更改圖一後半部分“主題-Next.XX”,這個比較爽直接將..都刪掉，同樣中文“主題”一會處理，刪掉之後在上一行 ‘-’後面可以隨意加上你想顯示的東西，不要顯示敏感資訊喲，請自重。
1. 接下來，處理剩餘的中文資訊。找到這個地方\themes\next\languages\ 下面的語言檔案zh-Hans.yml（這裡以中文為例，有的習慣用英文的配置檔案，道理一樣，找對應位置即可）

Git上傳

開啟站點配置檔案,翻到最下面,改成下面的樣子

deploy:

     type: git

     repo: https://github.com/leopardpan/leopardpan.github.io.git

     branch: master

然後執行命令安裝git：

npm install hexo-deployer-git --save

最後執行命令

hexo g//生成頁面
hexo d//git上傳

這裡寫圖片描述
上傳成功如下圖:

上傳到GitHub後空白或錯亂解決方案

在主題配置檔案中查詢_internal: vendors把vendors修改為jj(自定義)

vendors:
  # Internal path prefix. Please do not edit it.
  _internal: jj

最後把source下的vendors改成jj即可(自定義)