最詳細的Hexo Next主題配置教程
配置環境
安裝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資料夾即可。(你的所有文章都會在歸檔裡面顯示)
設定社交連結
側欄社交連結的修改包含兩個部分,第一是連結,第二是連結圖示。 兩者配置均在主題配置檔案中。
1.連結放置在 social 欄位下,一行一個連結。其鍵值格式是 顯示文字: 連結地址。
# 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”,這個比較爽直接將..都刪掉,同樣中文“主題”一會處理,刪掉之後在上一行 ‘-’後面可以隨意加上你想顯示的東西,不要顯示敏感資訊喲,請自重。
- 接下來,處理剩餘的中文資訊。找到這個地方\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即可(自定義)