先来看看最终效果: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!!!!
主题配置全部在主题配置文件theme/fexo里面完成,所以下面所有配置指的是配置theme/fexo/_config.yml!!!!
主题配置全部在主题配置文件theme/fexo里面完成,所以下面所有配置指的是配置theme/fexo/_config.yml!!!!
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