盒子
盒子
文章目录
  1. 1.主题的选择
  2. 2.文档
  3. 3.安装
  4. 4.启用主题
  5. 5.验证主题
  6. 6.配置主题
    1. 6.1 设置基本信息
    2. 6.2 设置头像
    3. 6.3 设置favicon
    4. 6.4 设置关键词
    5. 6.5 设置首页内容
    6. 6.6 设置首页导航
    7. 6.7 设置页面导航
    8. 6.8 设置页面导航样式
    9. 6.9 设置面包屑
    10. 6.10 设置盒子
    11. 6.11 搜索页面 Slogan
    12. 6.12 友链页面 Slogan
    13. 6.13 设置文章标题对齐方式

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,大家有自己喜欢的主题可以依个人口味修改,不过接下来我只记录自己选择的这款主题的安装。其他的主题安装基本类似,可以参考。

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

1
favicon: /favicon.ico

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

未完待续。。。。。。