Windows下使用Github Pages+Hexo搭建博客(四)

先來看看最終效果:https://handsomesuperred.github.io/

效果

注意:本文是系列文章,請先看以下內容,再接著看本章節:

Windows下使用Github Pages+Hexo搭建博客(一)

Windows下使用Github Pages+Hexo搭建博客(二)

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官網的文檔,明白每一個部分是什么意義,基本上也就知道進行主題個性化設置了。

fexo中文文檔:http://forsigner.com/2016/03/10/fexo-doc-zh-cn/。

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

未完待續。。。。。。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容