先来看看最终效果：https://handsomesuperred.github.io/

image.png

注意：本文是系列文章，请先看以下内容，再接着看本章节：

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 文档