先来看看最终效果：https://handsomesuperred.github.io/
注意：本文是系列文章，请先看以下内容，再接着看本章节：
Windows下使用Github Pages+Hexo搭建博客（一）
Windows下使用Github Pages+Hexo搭建博客（二）
Windows下使用Github Pages+Hexo搭建博客（三）
Windows下使用Github Pages+Hexo搭建博客（四）
接着上一篇，继续干！
1启用页面
你可以启用你想要的页面，如果不启用默认是不开启的。在开启关于、友链、项目的页面后，你可以对这些设置这些页面的内容
1.1 启用分类页面
1.在博客根目录执行 hexo new page category。
2.修改my-blog/source/category/index.md里面的内容，格式如下所示。
---
title: category
layout: category
comments: false
---
1.2 启用标签页面
1.在博客根目录执行hexo new page tag，执行完该方法会在my-blog/source/目录下生成一个名为tag的文件夹。
2.修改my-blog/source/tag/index.md里面的内容:
---
title: tag
layout: tag
comments: false
---
1.3 启用友链页面
1.在博客根目录执行 hexo new page link。
2.修改my-blog/source/link/index.md里面的内容。
---
title: link
layout: link
comments: false
---
启用友链页面后，可以在主题配置文件_config.yml（注意不是网站配置文件）设置类似以下格式的内容:
link:
- name: 织网
info: 身体和灵魂，总有一个在路上
url: http://zheng-ji.info/
avatar: https://avatars3.githubusercontent.com/u/1414745?v=3&s=460
- name: Dongyado
info: 生命不止，折腾不息
url: http://dongyado.com/
avatar: https://avatars0.githubusercontent.com/u/6274940?v=3&s=460
- name: OrangeCoder
info: android ffmpeg nodejs gradle
url: http://orangecoder.com/
avatar: https://avatars0.githubusercontent.com/u/2263785?v=3&s=460
- name: EverET
info: 好记性不如烂笔头
url: http://everet.org/about-me/
avatar: https://avatars1.githubusercontent.com/u/1559563?v=3&s=460
1.4 启用关于页面
1.在博客根目录执行 hexo new page about
2.修改my-blog/source/about/index.md里面的内容:
---
title: about
layout: about
comments: false
---
启用关于页面后，可以在主题配置文件_config.yml（注意不是网站配置文件）设置类似以下格式的内容:
about:
- type: me
icon: icon-user
text_value:
- "Scut，1991，Spring."
- "喜欢设计，擅长编程，喜欢睡懒觉."
- "前端开发工程师，常用 HTML / CSS / JavaScript."
- type: Github
icon: icon-github
text_key: Github
text_value: "@forsigner"
text_value_url: https://github.com/forsigner
- type: weibo
icon: icon-weibo
text_key: 微博
text_value: "@forsigner"
text_value_url: http://weibo.com/u/1847075964
- type: mail
icon: icon-mail
text_key: Gmail
text_value: "forsigner@gmail.com"
- type: location
icon: icon-location
text_value: 珠海
1.5 启用项目页面
1.在博客根目录执行 hexo new page project
2.修改my-blog/source/project/index.md里面的内容:
---
title: project
layout: project
comments: false
---
启用项目页面后，可以设置类似以下格式的内容
project:
- type: personal
name: fexo
url: https://github.com/forsigner/fexo
intro: A minimalist design theme for hexo
# - type: company
# name: Fexo
# url: https://github.com/forsigner/fexo
# intro: A minimalist design theme for hexo
- type: personal
name: beside
url: https://github.com/forsigner/beside
intro: I need you beside me
- type: personal
name: web-fontmin
url: https://github.com/forsigner/web-fontmin
intro: 字体子集化，在线提取你需要的字体
- type: personal
name: magic-check
url: https://github.com/forsigner/magic-check
intro: Beautify Radio and Checkbox with pure CSS
- type: personal
name: nice-bar
url: https://github.com/forsigner/nice-bar
intro: A nice and lightweight scrollbar
- type: personal
name: angular-nice-bar
url: https://github.com/forsigner/angular-nice-bar
intro: A nice and lightweight scrollbar in Angular
1.6 启用搜索页面
1.在博客根目录执行 hexo new page search
2.修改my-blog/source/search/index.md里面的内容:
---
title: search
layout: search
comments: false
---
然后进入 blog 的根目录，使用如下命令安装 Hexo 插件 hexo-search (重要)
cd my-blog
npm install hexo-search --save
2 个性化设置
2.1 自定义CSS
也许 Fexo 默认的样式满足不了你个性化的需求，使用此配置你可以在不修改 Fexo 源码的情况下，任意的自定义 Fexo 的样式，方法如下：
1.修改fexo/_config.yml下面配置，然后你就可以写你想要的样式了。
personal_style: /css/personal-style.css
#如果不想启用自定义样式，注释这行就可以了
2.在 blog 根目录新建文件夹 my-blog/source/css。然后在此目录新建一个 CSS，名字随意，如 personal-style.css。使用Notepad++打开该文件，然后将自定义样式写进去。比如我的个人自定义样式如下：
@font-face {
font-family: "Meiryo";
src: url("/fonts/Meiryo.eot");
/* IE9 */
src: url("/fonts/Meiryo.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
url("/fonts/Meiryo.woff") format("woff"), /* chrome, firefox */
url("/fonts/Meiryo.ttf") format("truetype"), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url("/fonts/Meiryo.svg#Meiryo") format("svg");
/* iOS 4.1- */
font-style: normal;
font-weight: normal;
}
html.page-home {
/*background-image: url('/images/bg.jpg')*/
/*background: linear-gradient( #1abc9c, transparent), linear-gradient( 90deg, skyblue, transparent), linear-gradient( -90deg, coral, transparent);*/
/*background-blend-mode: screen;*/
/*background: linear-gradient(to left, #5f2c82, #49a09d);*/
}
2.2 自定义博客名的字体
由于中文字体文件太大，有的快10M，所以 Fexo 没有引入中文字体，导致博客名有点难看。但是可以通过>提取字体来减小字体文件大小，让字体只有几KB。以下步骤可以让你实现自定义博客名字体，包括英文和中文：
1.下载免费可用的ttf格式字体
2.利用 Web-Fontmin 提取字体，然后下载 Web 字体和样式
3.在博客根目录的source文件夹新建目录 fonts
4.把下载的 web-fontmin 里的 CSS 内容 copy 到你的 personal-style.css 里去
5.修改fexo/_config.yml下面配置，设置字体名称：
blog_name_font_familiy: myFontName
# 注意: ①这是css文件里的font-familiy的值 ,例如里面是 font-familiy: "myfontName"
#②自定义博客名字体前请先自定义CSS
2.3 为首页设置背景
如果你不喜欢首页简洁的白色，想个性化一点，你可以自定义首页的背景颜色或者图片
修改personal-style.css:
html.page-home {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url('/images/bg.jpg');
background-color: transparent;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
/*background: linear-gradient( #1abc9c, transparent), linear-gradient( 90deg, skyblue, transparent), linear-gradient( -90deg, coral, transparent);*/
/*background-blend-mode: screen;*/
/*background: linear-gradient(to left, #5f2c82, #49a09d);*/
}
2.4 第三方服务
启用统计
google_analytics:
baidu_analytics: 57e94d016sfsf1fba3xxxx8a2b0263af0
启用评论
disqus_shortname: forsigner
使用 Mathjax
要使用 Mathjax，可以通过 Hexo 插件 hexo-renderer-mathjax支持
查看 hexo-renderer-mathjax 文档
