先來(lái)看看最終效果:https://handsomesuperred.github.io/
注意:本文是系列文章狡孔,請(qǐng)先看以下內(nèi)容,再接著看本章節(jié):
Windows下使用Github Pages+Hexo搭建博客(一)
Windows下使用Github Pages+Hexo搭建博客(二)
Windows下使用Github Pages+Hexo搭建博客(三)
接著上一篇哭尝,繼續(xù)干!
上一篇看到的是Hexo 的默認(rèn)主題:Landscape试躏。這篇主要是美化斩披,就是更換博客的主題。
1.主題的選擇
GitHub上的Hexo主題:https://github.com/hexojs/hexo/wiki/Themes
Hexo官網(wǎng)主題:https://hexo.io/themes/
知乎上的主題推薦:https://www.zhihu.com/question/24422335
我使用了一款比較簡(jiǎn)潔的主題:fexo晕粪,大家有自己喜歡的主題可以依個(gè)人口味修改挤悉,不過(guò)接下來(lái)我只記錄自己選擇的這款主題的安裝。其他的主題安裝基本類似巫湘,可以參考装悲。
3.文檔
每一種主題,一般應(yīng)該都會(huì)有相關(guān)的使用說(shuō)明尚氛,包括安裝诀诊、個(gè)性化設(shè)置等等。
即便沒(méi)有阅嘶,可以參考Hexo官網(wǎng):https://hexo.io/zh-cn/docs/index.html属瓣≡仄基本的思想都是一樣的。對(duì)于有相關(guān)使用說(shuō)明的主題抡蛙,也建議看看Hexo官網(wǎng)的文檔护昧,明白每一個(gè)部分是什么意義,基本上也就知道進(jìn)行主題個(gè)性化設(shè)置了粗截。
fexo中文文檔:http://forsigner.com/2016/03/10/fexo-doc-zh-cn/惋耙。
2.安裝
Hexo 有兩份主要的配置文件(_config.yml),一份位于站點(diǎn)根目錄下熊昌,另一份位于主題目錄下绽榛。為了描述方便,在以下說(shuō)明中婿屹,將前者稱為網(wǎng)站配置文件灭美,后者稱為主題配置文件。
開始安裝昂利,在圖一所示目錄右鍵空白處冲粤,選擇Git Bash here,輸入如下命令:
git clone git@github.com:forsigner/fexo.git themes/fexo
如果設(shè)置了密碼页眯,系統(tǒng)會(huì)提示輸入密碼梯捕,如果沒(méi)有設(shè)置密碼,將直接下載窝撵。
3..啟用主題
使用Notepad++打開網(wǎng)站根目錄的_config.yml(上文提到的網(wǎng)站配置文件)設(shè)為theme: fexo傀顾,如圖二所示。
4.驗(yàn)證主題
依然使用Git Bash碌奉,目錄級(jí)別依然是圖一所示短曾,依次輸入下面命令:
hexo clean【清理】
hexo generate【部署】
hexo deploy【展示】
hexo server 【本地預(yù)覽】
和之前的預(yù)覽方式一樣,到http://localhost:4000/看看自己的主題是否已經(jīng)應(yīng)用赐劣。
5.配置主題
注意:
主題配置全部在主題配置文件theme/fexo里面完成嫉拐,所以下面所有配置指的是配置theme/fexo/_config.yml!?妗M衽恰!
主題配置全部在主題配置文件theme/fexo里面完成咐汞,所以下面所有配置指的是配置theme/fexo/_config.yml8呛簟!;骸几晤!
主題配置全部在主題配置文件theme/fexo里面完成,所以下面所有配置指的是配置theme/fexo/_config.ymlV惨酢P否;场!
5.1 設(shè)置基本信息
blog_name: SuperRed
slogan: Study assiduously and perseveringly.
url: https://HandsomeSuperRed.github.io【重要憾朴!將該url設(shè)置為你的域名或者GitHub倉(cāng)庫(kù)的url】
5.2?設(shè)置頭像
相對(duì)路徑:avatar: /images/avatar.jpg
或者使用絕對(duì)路徑:avatar: https://avatars0.githubusercontent.com/u/2668081?v=3&s=460
我用的相對(duì)路徑的方式狸捕。
5.3 設(shè)置favicon
favicon: /favicon.ico
5.4 設(shè)置關(guān)鍵詞
關(guān)鍵詞主要作用是優(yōu)化SEO
keywords: SuperRed,superred,isuperred,Hexo主題,Android開發(fā),Android,TV,Android TV
5.5 設(shè)置首頁(yè)內(nèi)容
你可以設(shè)置是否在首頁(yè)直接顯示文章
init_page_content: HOME_NAV# HOME_NAV | POST
5.6 設(shè)置首頁(yè)導(dǎo)航
home_nav:
? - name: Blog
? ? url: /archives
? ? target_blank: false #不在新頁(yè)面打開
?- name: Project
? ?url: /project/
? ?target_blank: true #在新頁(yè)面打開
?- name: Github
? ?url: https://github.com/HandsomeSuperRed
? ?target_blank: true #在新頁(yè)面打開
?- name: Twitter
? ?url: https://github.com/HandsomeSuperRed
? ?target_blank: true #在新頁(yè)面打開
5.7 設(shè)置頁(yè)面導(dǎo)航
page_nav:
? ?- name: 博客
? ? ?url: /archives/
? ? ?target_blank: false # 不在新頁(yè)面打開
? ?- name: 分類
? ? ?url: /category/
? ? ?target_blank: false
? ?- name: 標(biāo)簽
? ? ?url: /tag/
? ? ?target_blank: false
? ?- name: 友鏈
? ? ?url: /link/
? ? ?target_blank: false
? ?- name: 關(guān)于
? ? ?url: /about/
? ? ?target_blank: false
? ?- name: RSS
? ? ?url: /atom.xml
? ? ?target_blank: true # 在新頁(yè)面打開
? ?- name: 搜索
? ? ?url: /search/
? ? ?target_blank: false # 在新頁(yè)面打開
5.8 設(shè)置頁(yè)面導(dǎo)航樣式
page_nav_style: CIRCLE# CIRCLE|ROUND_RECT
5.9 設(shè)置面包屑
breadcrumb:
isShow:true? # true|fase
5.10 設(shè)置盒子
你可設(shè)置盒子是否顯示和其顯示的文字
toolbox:
isShow:true? # true|fase
text: 盒子
5.11 搜索頁(yè)面 Slogan
search_slogan:
isShow:true? # true|fase
text: Can you find the bug of world ~
5.12 友鏈頁(yè)面 Slogan
link_slogan:
isShow:true# true|fase
text: 交換友鏈可以郵件 forsigner@gmail.com
5.12 設(shè)置文章標(biāo)題對(duì)齊方式
post:
header_align: center# left|center