Configuration of my blog

写在前面

本篇博文旨在记录笔者第二次搭建博客，更换主题的过程和配置；在这次折腾的过程中，笔者对于 hexo + github pages 的博客搭建原理有了更深的理解，因此本文一方面是对这些原理的阐述，另一方面也是记录下自己做过那些配置修改，以防日后遗忘。

搭建原理

笔者对前端几乎一无所知，因此以下的内容有许多是笔者的推断

1. github 与 github pages

   github 会提供许多个 repos，这些 repos 本来是专门提供给用户进行代码或者其他文件的存放（当然还有在线协作、版本控制等非常强大的功能）

   而用户可以新建一个以 “[自己帐号名].github.io” 的 repos, 这个 repos 是每个 github 帐号唯一的。

   用户可以登陆 github，在其中设置启动 github pages 功能，并将其 “连接” 到上面所说的 repos；

   github pages 有两个功能

   • 其内部已经配置好了 Jekyll，用户可以借助这个框架上传一些文件，后者将自动生成静态文件

     注：笔者的博客的搭建是在本地完成的，而且是借助 hexo 生成的，因此这个特性笔者其实用不到，不仅如此，貌似国内相当多的使用 github pages 搭建博客的 blogger 也是本地生成静态文件，从而也用不到这一特性

   • 将相关联的 repos 中的一系列静态文件渲染成页面，从而可以在网络上通过域名 “https://[自己帐号名].github.io” 来访问；

     本博客的搭建用到了第二个功能，这是本博客可以在网络上正常访问的基础。

2. Hexo 与 静态文件

   其实，Hexo 是一个静态网页生成器，它的作用就是将用户的写好的内容（比如最常见的 .md 文件）转换成静态的页面文件（如 html 等）；

   这样转换的意义在于，生成的静态网站的几乎一切格式、样式、装饰、插件都不需要用户去操心，因为这些东西都可以由 hexo 框架以及 hexo 主题去提供；

   通俗地讲就是，用户只负责写 .md 文件，这好比人的灵魂；但是 .md 文件中除了一般的文本之外包含许多富文本内容，需要一些程序读取、转换并正确地显示，而这些转换生成的文件相当于血肉，转换程序相当于营养物质；转换生成的内容引入了许多新的辅助信息，比如页面的样式应该是怎么样的，页面应该如何编排，这些信息好比骨架；最后，还有一些辅助的插件相当于装饰或者衣物；

   从头到尾，用户理论上需要关心的是两件事：

   • .md 文件的编写；

   • hexo 以及其主题提供的（在生成静态页面过程中的）部分设置项

     在做好这些工作之后，hexo 附带的 hexo-deployer-git 插件就可以把生成的静态文件（博客根目录下的 public 目录）推送到设定好的 github repo 上；

     而我们预先设定好推送的目标 repo 正是 github 用户的个人 repo，那么整个工作流得以完整地串联起来，最终可以通过 github 的域名去访问。

框架与主题选择

1. 本地静态页面生成框架：Hexo

   网址：https://hexo.io/

   选择理由：坦白地说，这个框架据说已经不是最好的静态页面生成框架了，比如它生成速度较慢，而且文档也写得非常简略，但是胜在配置较为简单，而功能却能大致满足需求；另外，这个框架在国内相对流行，因此找资料更加便捷；

   同时，笔者也不是太想继续折腾了，还是把有限的时间花在刀刃上吧，毕竟写博客只是一种情怀，又不能赚钱；

2. hexo 主题：hexo-theme-matery

   github 项目地址：https://github.com/blinkfox/hexo-theme-matery
   作者自己的博客：https://blinkfox.github.io/

   选择理由：

   • 好看

   • 功能还算丰富，集成程度高

   • 配置好像比 Next 主题稍微更加简单

     缺点：

   • 文档不是十分详细

   • 用的人比较少（这是优点也是缺点），作者也不是十分活跃

   • 美化程度较高，所以速度较慢

笔者需要在博客中展示的内容

以下的需求是恒定的，不会因为所选框架或者主题的不同而发生改变。

1. markdown 原始特性：包括分级标题，强调，列表等

   • 重要级别：0

   • 这是最最基础的特性，word 太恶心，原始的 LaTeX 又太过复杂，markdown 写起来是最舒服的；谢天谢地——大多数的 blogger 也是这样想的，所以几乎所有的博客框架都默认接受 .md 文件作为输入

2. 兼容 LaTeX 数学环境语法的 mathjax

   • 重要级别：0.5

   • 笔者博客的主体部分要么是数学方面的内容，要么与数学或多或少相关联——所以如果全世界的博客都不支持数学公式，那笔者宁可不写博客

3. 图片

   • 重要级别：0.5

   • 其重要级别如此高的原因是，学术或者技术性的文章（比如立体几何、图论等）有相当多的内容必须借助图片来表达，亦或者通过图片方可高效直观地表达

   • 最好支持矢量图、动态图

   • 图片的制作一般需要借助其他程序（Mathematica、LaTeX、Python、Geogebra 等）

4. 常用图形：graphviz, mermaid, flowchart, sequence-diagrams 等

   • 重要级别：1

   • 这些图形特别适合用来表达抽象层面的概念、思路和逻辑，是理工科经常需要使用的有力工具

   • 之所以重要性略低于上一项，是因为这些图形可以通过其他软件生成，再作为图片插入文档；只是这样做显得麻烦，而且资源多了之后，会有一种比较凌乱的感觉，因此最好还是以代码的形式直接在原文档中渲染；

5. 超链接

   • 重要级别：1.5

   • 即使借助目录和分层，一篇文章的内容也是有上限的，因此我们需要借助超链接进行文章间的联系；

   • 同时，由于笔者在本站中进行了某些自定义的配置（下面会提到），因此超链接的重要程度比原来更上一层

6. 代码块

   • 重要级别：2

   • 理论上讲，如果不支持代码块的渲染，直接将代码以文本形式放到文档中也是可行的，只不过显示效果会非常糟糕；对于笔者这个（伪）计算机专业的人来说，还是很重要的；

7. 表格

   • 重要级别：2

   • 与前者相似，不是没有它就不行，但是有了它会带来非常大的便利

8. 目录

   • 重要级别：2

   • 对于长文章或者内容层次非常多的文章而言，极为有用

9. 锚点与页内跳转

   • 重要级别：2.5

   • 大大增强读者的阅读体验

10. 脚注：

    • 重要级别：3

    • 某些较为正式的文章会用到；

11. 扩展语法：任务列表, 上下标, 缩略, 高亮标记, CriticMarkup, Emoji

    • 重要级别：3.5

    • 锦上添花的特性

笔者理想中博客应具的特性

1. 上一章节中的特性完全可以正常在页面上展示或者被支持

2. 博文应该可以进行多级分类，并且所有博文从上至下形成一个树状结构（类别之间不相交）

3. 可以给博文定义标签，不同标签之间可以自由选择

4. 有对整个博客站点的全貌进行展示的页面

5. 博文展示逻辑（哪些放在最显眼的位置，哪些可以往后稍稍）可以灵活定义

6. 可以在各个平台上（如PC、平板、移动端）访问，且显示效果不会有太大变化

7. （博文的）松散型与紧密型组织方式相结合

8. 附加功能：

   • 站内搜索

   • 评论系统

   • 主题自定义美化

   • RSS

   • 内部数据统计（文章数、字数、分类与标签）

   • 外部数据统计（访客数、访问次数）

   • 友链

博客内容编排

自定义 html 页面

所谓自定义页面，就是指笔者直接在本地生成无依赖的 html 文件（当然资源文件还是需要的，但是不需要 css 等文件），然后在这些 html 页面中记录真正的内容主体，并将这些页面文件以某种方式插入博客中；

这些页面完全是手动生成的，其背景、样式和博客的模板没有任何直接的关系，基本上就是类似于 word 或者 pdf 文件那样，文章内容被直接呈现在空白的页面上。

为什么要自定义？直接用 Hexo 解析渲染 md 文件不好吗？

1. 首先，博客撰写是在本地进行的，使用的 markdown 编辑器是 VS Code + Markdown Preview Enhanced。后者（下简称 MPE ）应该是已知的功能最强大的 markdown 编辑程序，它集成了种类丰富的前端插件，并支持笔者想要展示的所有内容，它是笔者写 markdown 的平台标准；

2. 如果还是按照以前的方式，把 md 文件直接放在 hexo 博客目录中，那么 md 文件的解析和渲染就是由 hexo 框架内部的程序完成的，这样会带来几个问题：

   • 页面部分内容有可能没有办法被 hexo 支持，比如 Graphviz 图形，之前笔者就没有找到它的 hexo 插件；

   • 有些内容可能没有办法被正确地转换显示，比如笔者之前第一次搭建博客的时候，某些插件的原因导致数学公式的解析出现了一些混乱，最终解析后页面中的部分内容不能转换成可以被 mathjax 正确渲染的形式——最终还是直接安装 pandoc 并使用其渲染才解决此问题；

   • 即使可以正确转换显示，最终的效果也有可能和本地生成的效果不一样；

   • 最后一点，如果要在 hexo 中支持各种富文本内容，需要安装配置许多插件，有些甚至需要在系统中安装依赖程序（pandoc），过于麻烦；

鉴于以上正反对比，笔者还是选择了本地直接生成 html 页面的方式，这样做的缺点在于，无论自己写博客还是读者看博客都稍显麻烦，但换来的好处是页面内容和展示效果能被严格掌控，组织方式也更为灵活。

如何生成自定义的页面

使用 VS Code 中 MPE 插件的 “导出 html” 功能，点击后即可直接在 md 文件相同目录下生成单独的一个 html 文件，这个 html 文件可以直接打开，显示效果与 MPE 预览效果几乎是一样的。

需要注意几点：

• html 文件默认需要和其引用的资源文件（txt, png, svg 等）放在一起——当然，在 md 源文件的选项中也可以设置将图片以 base64 编码嵌入到 html 中；

• 笔者自定义了 MPE 内部的 css 样式，这部分设置会写入 html 文件中，无需链接 css 也能生效；

• 导出时的选项是 html(cdn hosted)，这样才会促使浏览器在网上的 cdn 服务器中去寻找 mathjax、mermaid 等内容所依赖的 JS 库

如何嵌入到 hexo 生成的博客主体

Hexo 生成的静态文件位于本地博客根目录下的 public 文件夹；不难发现，md 文件其实就是被渲染成了 html 文件，而且这些文件在浏览器上的访问链接和其目录组织是一一对应的

我们假设 github 的用户名为 Tony, repo 的名字为 Tony.github.io；

• https://Tony.github.io 显示的页面就是 repo 根目录 / 下的 index.html

• https://Tony.github.io/documentary1/ 显示的页面就是 repo 目录 /documentary/ 下的 index.html

于是，我们只须将页面文件（连带必须的文件）上传至 对应 repo 的目录下，就可以直接通过 url 来访问了。

还有一个关键的问题，如何不被 Hexo 处理而直接上传至 github？
注意到在博客配置文件 _config.yml 中有一项为

# Directory
......
skip_render: 

这个选项正是用以标记不需要经过渲染而直接上传到 github repo 的目录和文件的。换句话说，Hexo 原生支持 “不经渲染直接上传” 这一特性（感谢作者）。

我们把这一项作如下设置：

skip_render: custom_page/**

注意这一项默认将 /sourse 视作根目录，因此上一项实际指向的对象就是：目录 /source/custom_page/ 以及其所有的子目录和文件。

将部分博文汇集成册

在 笔者理想的博客特性中，笔者提到过最好可以自己决定博文的组织形式偏松散还是偏紧密。

因此，在前面所述生成插入自定义界面的基础上，笔者想到可以将这些博文汇集成 “册”：

• 生成普通的博文

• 在该博文中添加多个指向自定义页面的链接

这样，多个逻辑上紧密关联的自定义 html 页面就汇集在了一起——以一种朴素的方式。

这种组织方式特别适合用于某门课程或者某个学科的笔记、习题集，以及单词本、摘抄积累等内容。

博客具体配置

本节记录在此次搭建博客过程中，各项配置的具体内容

Hexo 框架配置

基本配置

站点基本信息配置

位置：/_config.yml

相关项：

# Site
title: Googolplex-C
subtitle: 10^googol
description: 没什么好看的，关了吧
keywords: Maths,Computer-Science,Technology 
author: Googolplex-C
language: zh-CN
timezone:

post（博文）链接优化与目录组织

普通 posts 目录组织设置

位置：/_config.yml

配置项：

url: https://googolplex-c.github.io/
root: /
# permalink: :year/:month/:day/:title/
permalink: posts/:url.html
permalink_defaults:

这几项设置的是站点链接结构。以下是笔者自己的理解：

1. url 一项设置站点的根 url，

2. root 一项设置 repo 中的站点的根目录，它与前一项是对应的，访问这个 url 就对应打开根目录下的 index.html 文件的操作；

3. permalink 一项非常有用，它的默认值是 “:year/:month/:day/:title/”，也即是说，如果有一篇博文，其 front-matter的 date 和 title 两项的值分别是：2018 01 02 00:00:00 和 Hi Iron Man，那么这篇博文就会以如下方式生成：

   /2018/01/01/Hi Iron Man/index.html

   进而对应的 url 为 https://Tony.github.io/2018/01/01/Hi-Iron-Man/index.html

把 permalink 一项设为 posts/url.html 的效果是：

• 每一篇博文不再单独地存储在各自单独的目录中，命令也不再是 index.html，而是从 md 文件 front-matter 中提取 url 作为文件名；

这样设置基于几个考虑：

1. posts 生成的静态页面的目录组织形式与本地目录 /source 中保持一致，这样在 markdown 正文中通过相对路径进行页面间链接时，无论是本地还是远程都可以正确地链接，无需再修改
2. permalink 一项可以使用 posts 中的一切 front-matter，因此 :url 一项是笔者自定义的，使用的时候 规定 必须使用英文手动填写；之所以不使用 :title，是因为有些时候标题难免使用中文，而中文生成的链接会导致很多问题，也不利于 SEO。
3. 注意这个 posts 文件夹名称和本地的文件夹名称是不一样的，前者开头没有下划线，因为下划线开头的目录推送到远程会被 github pages 忽略！！

自定义页面目录设置

自定义页面（连同资源文件）在本地的存放位置是：/source/custom_page/[页面名]/；

同时在博客配置文件中设置：

# Directory
......
skip_render: custom_page/**

目标效果

推送到远程的静态文件——无论是由 Hexo 生成的还是自定义生成的——他们的目录组织和本地保持一致；

本地的情形：

• /

  • （其它目录）

  • custom_page

    • test1

      • test1.html

      • pic.png

  • _posts

    • test2.md

    • test2 (as an asset folder)

github repo 上的组织：

• /

  • （其它目录）

  • custom_page

    • test1

      • test1.html

      • pic.png

  • posts

    • test2.html

    • test2 (as an asset folder, existing only if not empty)

在此前提下，自定义页面和 Hexo 生成页之间的相互引用就可以通过相对路径形式的超链接 [title](link) 来实现啦。

这里的设置对于前面的 博文汇成册 的目标而言相当关键，同时也是笔者重新编排博客内容和目录组织这个大目标中的重要一环。

写作配置

# Writing
new_post_name: :year-:month-:day-:title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 0
render_drafts: false
post_asset_folder: true
relative_link: false
future: true
highlight:
  enable: false
  line_number: true
  auto_detect: false
  tab_replace:

笔者在此处更改了几项：

1. new_post_name 这一项定义的是新建 posts 的时候，md 文件的命名模板，注意此处以半角冒号 : 开头的 :XXX 是 front-matter 中的参数；其中 :title 这一项就是 hexo new <title> 中的 <title> 部分，笔者此处的设置的目的是自动在文件名前面加上日期（因为前面已经说明了所有的博文位于同一目录，因此以日期编排会更加有序），当然，在 front-matter 中 title 一项不会包含日期；
2. post_asset_folder: true 一项设为 true，这样每生成一个 post，都会新建一个与其 文件名 相同的文件夹，用以存储资源文件。
3. external_link 一项设为 true
4. highlight 一项设为 false，自带的代码高亮真的是太丑了！！

启用哪个主题

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: hexo-theme-matery

本设置项决定启用本地 /theme/ 下的哪个主题

远程部署设置

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: git@github.com:Googolplex-C/Googolplex-C.github.io.git
  branch: master

这里用于设置部署方式，远程库的链接，以及远程库的部署分支上。

插件安装

安装 hexo-generator-search，用以支持站内搜索

在博客的根目录下，输入：

npm install hexo-generator-search --save

博客根目录下的 _config.yml 文件中，新增以下的配置项

search:
  path: search.xml
  field: post

安装 hexo-wordcount，用以统计（每一篇）文章字数

安装命令如下：

npm i --save hexo-wordcount

然后只需在主题目录下的 _config.yml 文件中，激活以下配置项即可：

wordCount:
  enable: false # 将这个值设置为 true 即可.
  postWordCount: true
  min2read: true
  totalCount: true

安装 hexo-generator-feed，添加 RSS 支持

安装命令如下：

npm install hexo-generator-feed --save

在 Hexo 根目录下的 _config.yml 文件中，新增以下的配置项：

feed:
  type: atom
  path: atom.xml
  limit: 20
  hub:
  content:
  content_limit: 140
  content_limit_delim: ' '
  order_by: -date

安装 hexo-prism-plugin 插件

安装命令如下：

npm i -S hexo-prism-plugin

新主题有哪些（内置）新特性

• Banner 封面轮播文章（好）
• “我的梦想” 展示板（鸡肋）
• 首页的音乐播放器和视频播放器配置（用不到）
• 显示推荐文章名称和按钮配置（即首页有一块版面用于显示 “推荐文章”，由 md 文件 front-matter 中的 top 一项控制）
• 个人信息（也就是 about 页面）
• 文章打赏信息（好东西）
• 复制文章内容时追加版权信息（好东西）
• MathJax（Hexo 自身的解析有问题，所以支持 mathjax 也没有什么用，而且有公式的内容笔者都会放到自定义页面中去）
• 文章字数统计、阅读时长（好东西，需要安装插件）
• 文章加密（好东西！）
• 点击页面的’爱心’效果（花里胡哨）
• 我的项目（有点用）
• 我的技能（装逼用）
• 我的相册（好像没什么用）
• Gitalk、Gitment、Valine 和 disqus 评论配置（好，非常好）
• 不蒜子统计和谷歌分析（Google Analytics）（好，非常好）
• 默认特色图的集合。当文章没有设置特色图时，本主题会根据文章标题的 hashcode 值取余，来选择展示对应的特色图（增加一些美观程度）

hexo-theme-matery 配置

新建导航页面

新建分类 categories 页

categories 页是用来展示所有分类的页面，命令如下：

hexo new page "categories"

编辑你刚刚新建的页面文件 /source/categories/index.md，至少需要以下内容：

title: categories
date: 2018-09-30 17:25:30
type: "categories"
layout: "categories"

新建标签 tags 页

tags 页是用来展示所有标签的页面，命令如下：

hexo new page "tags"

编辑你刚刚新建的页面文件 /source/tags/index.md，至少需要以下内容：

title: tags
date: 2018-09-30 18:23:38
type: "tags"
layout: "tags"

新建关于我 about 页

about 页是用来展示关于我和我的博客信息的页面，如果在你的博客 source 目录下还没有 about/index.md 文件，那么你就需要新建一个，命令如下：

hexo new page "about"

编辑你刚刚新建的页面文件 /source/about/index.md，至少需要以下内容：

title: about
date: 2018-09-30 17:25:30
type: "about"
layout: "about"

新建友情连接 friends 页（可选，但笔者还是做了）

friends 页是用来展示友情连接信息的页面，如果在你的博客 source 目录下还没有 friends/index.md 文件，那么你就需要新建一个，命令如下：

hexo new page "friends"

编辑你刚刚新建的页面文件 /source/friends/index.md，至少需要以下内容：

title: friends
date: 2018-12-12 21:25:30
type: "friends"
layout: "friends"

同时，在博客 source 目录下新建 _data 目录，在 _data 目录中新建 friends.json 文件，文件内容如下所示：

[{
    "avatar": "http://image.luokangyuan.com/1_qq_27922023.jpg",
    "name": "码酱",
    "introduction": "我不是大佬，只是在追寻大佬的脚步",
    "url": "http://luokangyuan.com/",
    "title": "前去学习"
}, {
    "avatar": "http://image.luokangyuan.com/4027734.jpeg",
    "name": "闪烁之狐",
    "introduction": "编程界大佬，技术牛，人还特别好，不懂的都可以请教大佬",
    "url": "https://blinkfox.github.io/",
    "title": "前去学习"
}, {
    "avatar": "http://image.luokangyuan.com/avatar.jpg",
    "name": "ja_rome",
    "introduction": "平凡的脚步也可以走出伟大的行程",
    "url": "ttps://me.csdn.net/jlh912008548",
    "title": "前去学习"
}]

以上只作举例，因为这些其实都是主题作者的 “朋友们”，和笔者无关。

内置特性开启与主题美化

封面轮播功能与推荐文章

hexo-theme-matery 主题的首页展示文章的方式并不如某些其它主题只有单一的时间倒序罗列（如之前笔者使用过的 Next 主题）。

1. 首先是在封面部分轮播展示的 banner 文章

   • post 源文件 front-matter 中的 cover 一项控制该文是否加入 banner
   • 笔记、习题集等需要聚合组织在一起、并且长期更新的内容就非常适合放在 banner 部分

2. 首页的“推荐文章”展示

   • 主题配置文件 _config.yml 中有该项功能的全局开关设置

     recommend:
     showTitle: true

   • post 源文件 front-matter 中的 top 一项控制该文是否加入 banner

   • 某些内容相对独立、零散，但是 “颇值得一看” 的文章可以放到这一部分中去

开启主题的代码高亮功能

修改 Hexo 根目录下 _config.yml 文件中 highlight.enable 的值为 false，并新增 prism 插件相关的配置，主要配置如下：

highlight:
  enable: false

prism_plugin:
  mode: 'preprocess'    # realtime/preprocess
  theme: 'tomorrow'
  line_number: false    # default false
  custom_css:

修改页脚

修改的地方在主题文件的 /layout/_partial/footer.ejs 文件中，包括站点名、使用的主题、访问量等。

修改首页的社交链接

在主题的 _config.yml 文件中，默认支持 QQ、GitHub 和邮箱的配置。我们可以在主题文件的 /layout/_partial/social-link.ejs 文件中，新增、修改需要的社交链接地址

笔者删除了许多链接，只保留了一部分：

修改打赏的二位码

在主题文件的 theme/hexo-theme-matery/source/medias/reward 文件中替换即可。

修改 Favicon、Logo 和 Avatar

在主题文件的 theme/hexo-theme-matery/source/ 以及 theme/hexo-theme-matery/source/medias 目录中替换相应文件即可。

修改主题颜色（准确而言，应该是页首和页脚的颜色，banner 图的颜色是自己变化的）

修改主题颜色

在主题文件的 /theme/hexo-theme-matery/source/css/matery.css 文件中，搜索 .bg-color 来修改背景颜色：

以下是笔者的个人喜好（灰色配彩色）：

/* 整体背景颜色，包括导航、移动端的导航、页尾、标签页等的背景颜色. */
.bg-color {
    background-image: linear-gradient(to right, #616161 0%, #BDBDBD 100%);
}

“我的梦想” dashboard

笔者直接禁用了它，无聊，还梦想呢，咋不上天……
（当然，后来还是开启了，不一定非得写梦想，还可以吐槽嘛）

dream:
  enable: false

“我的技能” dashboard

这个版块是一个可以很好的用于展示博主掌握的理论知识、实践技能的地方，好好利用起来

# 记录一下笔者喜欢的几种渐变配色方案：
# 天蓝：background-image: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
# 粉紫：background-image: linear-gradient(to right, #a18cd1 0%, #fbc2eb 100%);
# 嫩绿：background-image: linear-gradient(to right, #43e97b 0%, #38f9d7 100%);
# 淡黄：background-image: linear-gradient(to right, #fa709a 0%, #fee140 100%);
# 晶石：background-image: linear-gradient(to right, #00c6fb 0%, #005bea 100%);
# 腮红：background-image: linear-gradient(to right, #ff758c 0%, #ff7eb3 100%);

mySkills:
  enable: true
  data:

# 理论向的计算机学科或课程
    Data_Structure:
      background: 'linear-gradient(to right, #4facfe 0%, #00f2fe 100%)'
      percent: 15%
    Computer_Achitecture:
      background: 'linear-gradient(to right, #4facfe 0%, #00f2fe 100%)'
      percent: 5%
    Operating_System:
      background: 'linear-gradient(to right, #4facfe 0%, #00f2fe 100%)'
      percent: 5%
    Computer_Network:
      background: 'linear-gradient(to right, #4facfe 0%, #00f2fe 100%)'
      percent: 10%
    Data_Base:
      background: 'linear-gradient(to right, #4facfe 0%, #00f2fe 100%)'
      percent: 10%
    Software_Engineering:
      background: 'linear-gradient(to right, #4facfe 0%, #00f2fe 100%)'
      percent: 3%
    Compiling_Theory:
      background: 'linear-gradient(to right, #4facfe 0%, #00f2fe 100%)'
      percent: 1%
    Programming_Language_Theory:
      background: 'linear-gradient(to right, #4facfe 0%, #00f2fe 100%)'
      percent: 5%
    Computer_Graphics:
      background: 'linear-gradient(to right, #4facfe 0%, #00f2fe 100%)'
      percent: 5%
    Image_Processing:
      background: 'linear-gradient(to right, #4facfe 0%, #00f2fe 100%)'
      percent: 5%
    Machine_Learing:
      background: 'linear-gradient(to right, #4facfe 0%, #00f2fe 100%)'
      percent: 5%
    Information_Theory:
      background: 'linear-gradient(to right, #4facfe 0%, #00f2fe 100%)'
      percent: 10%
# 编程语言
    C:
      background: 'linear-gradient(to right, #a18cd1 0%, #fbc2eb 100%)'
      percent: 20%
    C++:
      background: 'linear-gradient(to right, #a18cd1 0%, #fbc2eb 100%)'
      percent: 5%
    Java:
      background: 'linear-gradient(to right, #a18cd1 0%, #fbc2eb 100%)'
      percent: 3%
    Python:
      background: 'linear-gradient(to right, #a18cd1 0%, #fbc2eb 100%)'
      percent: 7%
    Assembly:
      background: 'linear-gradient(to right, #a18cd1 0%, #fbc2eb 100%)'
      percent: 9%
    Shell:
      background: 'linear-gradient(to right, #a18cd1 0%, #fbc2eb 100%)'
      percent: 5%
# 平台或工具
    Linux:
      background: 'linear-gradient(to right, #fa709a 0%, #fee140 100%)'
      percent: 10%
    LaTeX:
      background: 'linear-gradient(to right, #fa709a 0%, #fee140 100%)'
      percent: 9%
    Mathematica:
      background: 'linear-gradient(to right, #fa709a 0%, #fee140 100%)'
      percent: 10%
    Matlab:
      background: 'linear-gradient(to right, #fa709a 0%, #fee140 100%)'
      percent: 12%
    Docker:
      background: 'linear-gradient(to right, #fa709a 0%, #fee140 100%)'
      percent: 4%
    Geogebra:
      background: 'linear-gradient(to right, #fa709a 0%, #fee140 100%)'
      percent: 9%
    Graphviz:
      background: 'linear-gradient(to right, #fa709a 0%, #fee140 100%)'
      percent: 15%
# 数学
    Calculas:
      background: 'linear-gradient(to right, #00c6fb 0%, #005bea 100%)'
      percent: 25%
    Linear_Algebra:
      background: 'linear-gradient(to right, #00c6fb 0%, #005bea 100%)'
      percent: 50%
    Probability_Theory:
      background: 'linear-gradient(to right, #00c6fb 0%, #005bea 100%)'
      percent: 10%
    Set_Theory:
      background: 'linear-gradient(to right, #00c6fb 0%, #005bea 100%)'
      percent: 10%
    Symbolic_Logic:
      background: 'linear-gradient(to right, #00c6fb 0%, #005bea 100%)'
      percent: 15%
    Combinatorics:
      background: 'linear-gradient(to right, #00c6fb 0%, #005bea 100%)'
      percent: 25%
    Abstract_Algebra:
      background: 'linear-gradient(to right, #00c6fb 0%, #005bea 100%)'
      percent: 5%
    Number_Theory:
      background: 'linear-gradient(to right, #00c6fb 0%, #005bea 100%)'
      percent: 7%
    Complex_Analysis:
      background: 'linear-gradient(to right, #00c6fb 0%, #005bea 100%)'
      percent: 5%
# 外语
    English: 
      background: 'linear-gradient(to right, #ff758c 0%, #ff7eb3 100%)'
      percent: 30%
# 其他兴趣
    Natrual_History:
      background: 'linear-gradient(to right, #43e97b 0%, #38f9d7 100%)'
      percent: 18%
    Sports:
      background: 'linear-gradient(to right, #43e97b 0%, #38f9d7 100%)'
      percent: 15%

评论系统

笔者使用的评论系统是 gitalk，该功能已经内置在主题当中，只须按照网上的教程进行配置即可：

1. 在 github 中申请一个 github application，Authorization callback URL 填写欲使用 gitalk 插件页面的域名；

2. 生成成功之后，会生成 clientID 和 clientSecret；

3. 在主题配置文件 _config.yml 中配置相应的选项

# the Gitalk config，default disabled
# Gitalk 评论模块的配置，默认为不激活
gitalk:
  enable: // 是否开启该模块
  owner:  // gitalk 所使用的 repo 的拥有者
  repo:  // gitalk 所使用的 repo 名
  oauth:  // 刚刚第 1 步中生成的 clientID 和 clientSecret；
    clientId:
    clientSecret:
  admin:  // gitalk 所使用的 repo 的管理者（有写权限的人）

4. 配置完成之后重新生成博客页面，进入随便一篇文章，底部会多出一个版块，第一次需要登陆 github 进行认证；

5. 之后每一篇文章在第一次打开时（如果在开启本功能时文章就存在）或者创建之时，都会在设置的 github repo 下开启一个 issue，评论的内容就将记录在该 issue 下；

其他功能的开启和设置（推荐文章、不蒜子统计等）

# Whether to display the musics.
# 是否在首页显示音乐.
music:
  enable: false
  showTitle: true
  title: 听听音乐
  fixed: false # 开启吸底模式
  autoplay: false # 是否自动播放
  theme: '#42b983'
  loop: 'all' # 音频循环播放, 可选值: 'all', 'one', 'none'
  order: 'list' # 音频循环顺序, 可选值: 'list', 'random'
  preload: 'auto' # 预加载，可选值: 'none', 'metadata', 'auto'
  volume: 0.7 # 默认音量，请注意播放器会记忆用户设置，用户手动设置音量后默认音量即失效
  listFolded: false # 列表默认折叠
  listMaxHeight: #列表最大高度

# Whether to display the videos.
# 是否在首页显示视频.
video:
  enable: false
  showTitle: true
  title: 精彩视频
  url: # 必填
  pic:
  thumbnails:
  height: # 如：400
  autoplay: false # 是否自动播放
  theme: '#42b983'
  loop: false # 是否循环播放
  preload: 'auto' # 预加载，可选值: 'none', 'metadata', 'auto'
  volume: 0.7

# Whether to display the title of the recommended posts
# 是否显示推荐文章的标题
recommend:
  showTitle: true

# Configure website favicon and LOGO
# 配置网站favicon和网站LOGO
favicon: /favicon.png
logo: /medias/logo.png

# The configuration of the second button in the home banner,
# including the display name of the button, the font awesome icon, and the hyperlink to the button.
# 首页 banner 中的第二个按钮的配置，包括按钮的显示名称、font awesome图标和按钮的超链接.
indexbtn:
  enable: true
  name: Github
  icon: fa-github-alt
  url: https://github.com/Googolplex-C/

# The configurations of the second line of home banner
# icon/button will not show up if you leave the corresponding socialLink empty
# 首页 banner 中的第二行个人信息配置，留空即不启用
socialLink:
  qq: 123123123
  github:
  email: xxx@xx.xx

# Whether to activate the Post TOC, and Configure which title types are supported by TOC support.
# You can add `toc: false` to the Front-matter of a post to turn off the TOC.
# 是否激活文章 TOC 功能，并配置TOC支持选中哪些标题类型，这是全局配置。
# 可以在某篇文章的 Front-matter 中再加上`toc: false`，使该篇文章关闭TOC目录功能
toc:
  enable: true
  heading: h2, h3, h4
  showToggleBtn: true # 是否显示切换TOC目录展开收缩的按钮

# Whether the code is broken.
# 代码是否折行
code:
  break: true

# 是否激活文章末尾的打赏功能，默认激活（你替换为的你自己的微信、支付宝二维码图片、或者使用网络图片也可以）.
reward:
  enable: true
  title: 你的赏识是我前进的动力
  wechat: /medias/reward/wechat.png
  alipay: /medias/reward/alipay.jpg

# Whether to activate the copyright information of the blog and author when copying the post content.
# minCharNumber: Approve copyright information by copying at least how many characters.
# 是否激活复制文章时追加博客和作者的版权信息.
copyright:
  enable: false
  minCharNumber: 50 # 至少复制多少个字符就追加版权信息.
  description: 本文章著作权归作者所有，任何形式的转载都请注明出处。

# Whether to activate the mathjax, this is a global configuration, but the post still does not open the mathjax rendering.
# Considering that the mathjax loading is time consuming,
# you also need to add `mathjax: true` to the Front-matter of the post that needs to be rendered.
# 是否激活mathjax数学公式，这是全局配置，但文章仍然不会都开启mathjax渲染，
# 考虑到mathjax加载比较耗时，你还需要在需要渲染的文章的Front-matter中再加上`mathjax: true`才行.
mathjax:
  enable: true
  cdn: https://cdn.bootcss.com/mathjax/2.7.5/MathJax.js?config=TeX-AMS-MML_HTMLorMML

# Post word count, reading duration, site total word count.
# Before you activate, please confirm that you have installed the hexo-wordcount plugin,
# install the plugin command: `npm i --save hexo-wordcount`.
# 文章字数统计、阅读时长、总字数统计
# 激活前请确认你已经安装了 hexo-wordcount 插件，安装命令: `npm i --save hexo-wordcount`
wordCount:
  enable: true
  postWordCount: true
  min2read: true
  totalCount: true

# Whether to activate the 'love' effect of clicking on the page.
# 是否激活点击页面的'爱心'效果，默认激活.
clicklove:
  enable: false

# profile in about page, including avatars, career, and personal introductions.
# 在”关于”页面中配置个人信息，包括头像、职业和个人介绍.
profile:
  avatar: /medias/avatar.gif
  career: A learner
  introduction: I am.


# config gallery of my photos in about page.
# If you don't want to display this `Gallery` content, you can deactivate or delete this configuration.
# 在“关于”页面配置"我的相册"图片，如果你不需要这些信息则可以将其设置为不激活或者将其删除.
myGallery:
  enable: false
  data:
    - /medias/featureimages/0.jpg
    - /medias/featureimages/1.jpg
    - /medias/featureimages/2.jpg

# Whether to display post-calender in the `archive` page
# 设置在归档页面中是否显示'文章日历'控件
postCalendar: true

# the Gitment config，default disabled
# Gitment 评论模块的配置，默认为不激活
gitment:
  enable: false
  owner:
  repo:
  oauth:
    clientId:
    clientSecret:

# disqus config, default disabled
# Disqus评论模块的配置，默认为不激活
disqus:
  enable: false
  shortname:

# Livere comment configuration, the default is not activated
# Livere 来必力评论模块的配置，默认为不激活
livere:
  enable: false
  uid:

# The configuration of the Valine comment module is not activated by default.
# To use it, activate the configuration item and set appId and appKey.
# Valine 评论模块的配置，默认为不激活，如要使用，就请激活该配置项，并设置 appId 和 appKey.
valine:
  enable: false
  appId:
  appKey:
  notify: false
  verify: false
  visitor: true
  avatar: 'mm' # Gravatar style : mm/identicon/monsterid/wavatar/retro/hide
  pageSize: 10
  placeholder: 'just go go' # Comment Box placeholder

# Whether to display fork me on github icon and link, default true, You can change it to your repo address
# 配置是否在 header 中显示 fork me on github 的图标，默认为true，你可以修改为你的仓库地址.
githubLink:
  enable: true
  url: https://github.com/Googolplex-C/
  title: Fork Me

# The password verification feature of read post. To use this feature,
# activate the configuration item and write the 'password' key and Cipher in the post's Front-matter.
# Note: In order to ensure that the original password will not be leaked to the web page,
# the password of the article must be encrypted by 'SHA256' so that it will not be cracked.
# 阅读文章的密码验证功能，如要使用此功能请激活该配置项，并在对应文章的Front-matter中写上'password'的键和加密后的密文即可.
# 请注意：为了保证密码原文不会被泄露到网页中，文章的密码必须是通过'SHA256'加密的，这样就不会被破解.
verifyPassword:
  enable: true
  promptMessage: 请输入访问本文章的密码
  errorMessage: 密码错误，将返回主页！

# busuanzi(http://busuanzi.ibruce.info/) website statistics
# 不蒜子(http://busuanzi.ibruce.info/) 网站统计
busuanziStatistics:
  enable: true
  totalTraffic: true # 总访问量
  totalNumberOfvisitors: true # 总人次

# Add google analytics configuration
# 添加 Google Analytics 配置
googleAnalytics:
  enable: false
  id:

# The used front-end library can be replaced with the corresponding CDN address as needed,
# If the specific version is not specified below, you can use the latest version.
# 使用到的前端库，可按需替换成对应的CDN地址，如果下面未指定具体的版本号，使用最新的版本即可.
libs:
  css:
    fontAwesome: /libs/awesome/css/font-awesome.min.css # V4.7.0
    materialize: /libs/materialize/materialize.min.css # 1.0.0
    aos: /libs/aos/aos.css
    animate: /libs/animate/animate.min.css # V3.5.1
    lightgallery: /libs/lightGallery/css/lightgallery.min.css # V1.6.11
    aplayer: /libs/aplayer/APlayer.min.css
    dplayer: /libs/dplayer/DPlayer.min.css
    gitalk: /libs/gitalk/gitalk.css
    jqcloud: /libs/jqcloud/jqcloud.css
    tocbot: /libs/tocbot/tocbot.css
  js:
    jquery: /libs/jquery/jquery-2.2.0.min.js
    materialize: /libs/materialize/materialize.min.js # 1.0.0
    masonry: /libs/masonry/masonry.pkgd.min.js # v4.0.0
    aos: /libs/aos/aos.js
    scrollProgress: /libs/scrollprogress/scrollProgress.min.js
    lightgallery: /libs/lightGallery/js/lightgallery-all.min.js # V1.6.11
    clicklove: /libs/others/clicklove.js
    busuanzi: /libs/others/busuanzi.pure.mini.js
    aplayer: /libs/aplayer/APlayer.min.js
    dplayer: /libs/dplayer/DPlayer.min.js
    crypto: /libs/cryptojs/crypto-js.min.js
    echarts: /libs/echarts/echarts.min.js
    gitalk: /libs/gitalk/gitalk.min.js
    jqcloud: /libs/jqcloud/jqcloud-1.0.4.min.js
    tocbot: /libs/tocbot/tocbot.min.js

# The post featured images that needs to be displayed when there is no image.
# 无文章特色图片时需要显示的文章特色图片.
featureImages: 
- /medias/featureimages/0.jpg
- /medias/featureimages/1.jpg
- /medias/featureimages/2.jpg
- /medias/featureimages/3.jpg
- /medias/featureimages/4.jpg
- /medias/featureimages/5.jpg
- /medias/featureimages/6.jpg
- /medias/featureimages/7.jpg
- /medias/featureimages/8.jpg
- /medias/featureimages/9.jpg
- /medias/featureimages/10.jpg
- /medias/featureimages/11.jpg
- /medias/featureimages/12.jpg
- /medias/featureimages/13.jpg
- /medias/featureimages/14.jpg
- /medias/featureimages/15.jpg
- /medias/featureimages/16.jpg
- /medias/featureimages/17.jpg
- /medias/featureimages/18.jpg
- /medias/featureimages/19.jpg
- /medias/featureimages/20.jpg
- /medias/featureimages/21.jpg
- /medias/featureimages/22.jpg
- /medias/featureimages/23.jpg

  # default configs that the default policy for every articles/posts
  # default 配置文章的默认转载规则

  # you can define reprint policy for a single article in the front-matter of the specific md file using this key: reprintPolicy
  # 您可以使用在文章md文件的 front-matter 中指定 reprintPolicy 来给单个文章配置转载规则

  # 可用的转载规则有（available reprint policies are）：
  # 这些转载规则的意义请参考(you can refer to this link FMI)：https://creativecommons.org/choose/?lang=zh
  # cc_by（知识共享署名 4.0 国际许可协议 Creative Commons Attribution-NoDerivatives 4.0 International License）
  # cc_by_nd（知识共享署名-禁止演绎 4.0 国际许可协议 Creative Commons Attribution-NoDerivatives 4.0 International License）
  # cc_by_sa（知识共享署名-相同方式共享 4.0 国际许可协议 Creative Commons Attribution-ShareAlike 4.0 International License）
  # cc_by_nc（知识共享署名-非商业性使用 4.0 国际许可协议 Creative Commons Attribution-NoDerivatives 4.0 International License）
  # cc_by_nc_nd（知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议 Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License）
  # cc_by_nc_sa（知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License）

  # cc0（CC0 1.0 通用 (CC0 1.0) 公共领域贡献 CC0 1.0 Universal (CC0 1.0) Public Domain Dedication） https://creativecommons.org/publicdomain/zero/1.0/deed.zh

  # noreprint（不允许转载 not allowed to reprint）
  # pay（付费转载 pay for reprinting）
reprint:
  enable: true # whether enable reprint section 是否启用“转载规则限定模块”
  default: noreprint