先來看看最終效果:https://handsomesuperred.github.io/
注意:本文是系列文章,請先看以下內容,再接著看本章節:
Windows下使用Github Pages+Hexo搭建博客(一)
Windows下使用Github Pages+Hexo搭建博客(二)
Windows下使用Github Pages+Hexo搭建博客(三)
接著上一篇,繼續干!
上一篇看到的是Hexo 的默認主題:Landscape。這篇主要是美化,就是更換博客的主題。
1.主題的選擇
GitHub上的Hexo主題:https://github.com/hexojs/hexo/wiki/Themes
Hexo官網主題:https://hexo.io/themes/
知乎上的主題推薦:https://www.zhihu.com/question/24422335
我使用了一款比較簡潔的主題:fexo,大家有自己喜歡的主題可以依個人口味修改,不過接下來我只記錄自己選擇的這款主題的安裝。其他的主題安裝基本類似,可以參考。
3.文檔
每一種主題,一般應該都會有相關的使用說明,包括安裝、個性化設置等等。
即便沒有,可以參考Hexo官網:https://hexo.io/zh-cn/docs/index.html。基本的思想都是一樣的。對于有相關使用說明的主題,也建議看看Hexo官網的文檔,明白每一個部分是什么意義,基本上也就知道進行主題個性化設置了。
2.安裝
Hexo 有兩份主要的配置文件(_config.yml),一份位于站點根目錄下,另一份位于主題目錄下。為了描述方便,在以下說明中,將前者稱為網站配置文件,后者稱為主題配置文件。
開始安裝,在圖一所示目錄右鍵空白處,選擇Git Bash here,輸入如下命令:
git clone git@github.com:forsigner/fexo.git themes/fexo
如果設置了密碼,系統會提示輸入密碼,如果沒有設置密碼,將直接下載。
3..啟用主題
使用Notepad++打開網站根目錄的_config.yml(上文提到的網站配置文件)設為theme: fexo,如圖二所示。
4.驗證主題
依然使用Git Bash,目錄級別依然是圖一所示,依次輸入下面命令:
hexo clean【清理】
hexo generate【部署】
hexo deploy【展示】
hexo server 【本地預覽】
和之前的預覽方式一樣,到http://localhost:4000/看看自己的主題是否已經應用。
5.配置主題
注意:
主題配置全部在主題配置文件theme/fexo里面完成,所以下面所有配置指的是配置theme/fexo/_config.yml?。。。?/b>
主題配置全部在主題配置文件theme/fexo里面完成,所以下面所有配置指的是配置theme/fexo/_config.yml?。。?!
主題配置全部在主題配置文件theme/fexo里面完成,所以下面所有配置指的是配置theme/fexo/_config.yml!?。。?/b>
5.1 設置基本信息
blog_name: SuperRed
slogan: Study assiduously and perseveringly.
url: https://HandsomeSuperRed.github.io【重要!將該url設置為你的域名或者GitHub倉庫的url】
5.2?設置頭像
相對路徑:avatar: /images/avatar.jpg
或者使用絕對路徑:avatar: https://avatars0.githubusercontent.com/u/2668081?v=3&s=460
我用的相對路徑的方式。
5.3 設置favicon
favicon: /favicon.ico
5.4 設置關鍵詞
關鍵詞主要作用是優化SEO
keywords: SuperRed,superred,isuperred,Hexo主題,Android開發,Android,TV,Android TV
5.5 設置首頁內容
你可以設置是否在首頁直接顯示文章
init_page_content: HOME_NAV# HOME_NAV | POST
5.6 設置首頁導航
home_nav:
? - name: Blog
? ? url: /archives
? ? target_blank: false #不在新頁面打開
?- name: Project
? ?url: /project/
? ?target_blank: true #在新頁面打開
?- name: Github
? ?url: https://github.com/HandsomeSuperRed
? ?target_blank: true #在新頁面打開
?- name: Twitter
? ?url: https://github.com/HandsomeSuperRed
? ?target_blank: true #在新頁面打開
5.7 設置頁面導航
page_nav:
? ?- name: 博客
? ? ?url: /archives/
? ? ?target_blank: false # 不在新頁面打開
? ?- name: 分類
? ? ?url: /category/
? ? ?target_blank: false
? ?- name: 標簽
? ? ?url: /tag/
? ? ?target_blank: false
? ?- name: 友鏈
? ? ?url: /link/
? ? ?target_blank: false
? ?- name: 關于
? ? ?url: /about/
? ? ?target_blank: false
? ?- name: RSS
? ? ?url: /atom.xml
? ? ?target_blank: true # 在新頁面打開
? ?- name: 搜索
? ? ?url: /search/
? ? ?target_blank: false # 在新頁面打開
5.8 設置頁面導航樣式
page_nav_style: CIRCLE# CIRCLE|ROUND_RECT
5.9 設置面包屑
breadcrumb:
isShow:true? # true|fase
5.10 設置盒子
你可設置盒子是否顯示和其顯示的文字
toolbox:
isShow:true? # true|fase
text: 盒子
5.11 搜索頁面 Slogan
search_slogan:
isShow:true? # true|fase
text: Can you find the bug of world ~
5.12 友鏈頁面 Slogan
link_slogan:
isShow:true# true|fase
text: 交換友鏈可以郵件 forsigner@gmail.com
5.12 設置文章標題對齊方式
post:
header_align: center# left|center