接着上一篇,继续干!
上一篇看到的是Hexo 的默认主题:Landscape。这篇主要是美化,就是更换博客的主题。
1.主题的选择
GitHub上的Hexo主题: https://github.com/hexojs/hexo/wiki/Themes
Hexo官网主题:https://hexo.io/themes/
知乎上的主题推荐:https://www.zhihu.com/question/24422335
我使用了一款比较简洁的主题:fexo,大家有自己喜欢的主题可以依个人口味修改,不过接下来我只记录自己选择的这款主题的安装。其他的主题安装基本类似,可以参考。
2.文档
每一种主题,一般应该都会有相关的使用说明,包括安装、个性化设置等等。
即便没有,可以参考Hexo官网:https://hexo.io/zh-cn/docs/index.html 。基本的思想都是一样的。对于有相关使用说明的主题,也建议看看Hexo官网的文档,明白每一个部分是什么意义,基本上也就知道进行主题个性化设置了。
fexo中文文档:http://forsigner.com/2016/03/10/fexo-doc-zh-cn/。
3.安装
Hexo 有两份主要的配置文件(_config.yml),一份位于站点根目录下,另一份位于主题目录下。为了描述方便,在以下说明中,将前者称为网站配置文件,后者称为主题配置文件。
开始安装,在图一所示目录右键空白处,选择Git Bash here
,输入如下命令:
1
| $ git clone git@github.com:forsigner/fexo.git themes/fexo
|
如果设置了密码,系统会提示输入密码,如果没有设置密码,将直接下载。
图一

4.启用主题
使用Notepad++打开网站根目录的_config.yml(上文提到的网站配置文件)设为theme: fexo,如图二所示。
图二

5.验证主题
依然使用Git Bash
,目录级别依然是图一所示,依次输入下面命令:
1 2 3 4
| hexo clean【清理】 hexo generate【部署】 hexo deploy【展示】 hexo server 【本地预览】
|
和之前的预览方式一样,到 http://localhost:4000/ 看看自己的主题是否已经应用。
6.配置主题
注意:
主题配置全部在主题配置文件theme/fexo里面完成,所以下面所有配置指的是配置theme/fexo/_config.yml!!!!
主题配置全部在主题配置文件theme/fexo里面完成,所以下面所有配置指的是配置theme/fexo/_config.yml!!!!
主题配置全部在主题配置文件theme/fexo里面完成,所以下面所有配置指的是配置theme/fexo/_config.yml!!!!
6.1 设置基本信息
1 2 3
| blog_name: SuperRed slogan: Study assiduously and perseveringly. url: https://HandsomeSuperRed.github.io【重要!将该url设置为你的域名或者GitHub仓库的url】
|
6.2 设置头像
1 2 3
| 相对路径:avatar: /images/avatar.jpg 或者使用绝对路径:avatar: https://avatars0.githubusercontent.com/u/2668081?v=3&s=460 `
|
我用的相对路径的方式。
6.3 设置favicon
6.4 设置关键词
关键词主要作用是优化SEO
1
| keywords: SuperRed,superred,isuperred,Hexo主题,Android开发,Android,TV,Android TV
|
6.5 设置首页内容
你可以设置是否在首页直接显示文章
1
| init_page_content: HOME_NAV# HOME_NAV | POST
|
6.6 设置首页导航
1 2 3 4 5 6 7 8 9 10 11 12 13
| 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 #在新页面打开
|
6.7 设置页面导航
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
| 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 # 在新页面打开
|
6.8 设置页面导航样式
1
| page_nav_style: CIRCLE# CIRCLE|ROUND_RECT
|
6.9 设置面包屑
1 2
| breadcrumb: isShow:true # true|fase
|
6.10 设置盒子
你可设置盒子是否显示和其显示的文字
1 2 3
| toolbox: isShow:true # true|fase text: 盒子
|
6.11 搜索页面 Slogan
1 2 3
| search_slogan: isShow:true # true|fase text: Can you find the bug of world ~
|
6.12 友链页面 Slogan
1 2 3
| link_slogan: isShow:true# true|fase text: 交换友链可以邮件 forsigner@gmail.com
|
6.13 设置文章标题对齐方式
1 2
| post: header_align: center# left|center
|
未完待续。。。。。。