Hexo

komantao 2019-12-12 2020-01-22 字数 24840 阅读量 1078次

hexo是一个台湾人写的是一款基于Node.js的静态博客框架，使用Markdown（或其他渲染引擎）解析文章，速度快、轻量级、主题比较小清新、依赖少、易于安装使用，可以方便的生成静态网页托管在GitHub、Gitee或Coding上，是搭建博客的首选框架。

一、简介

Hexo基本命令：

• 将hexo的安装路径添加到环境变量，仅能使用hexo -V命令
• 将hexo项目根目录内的node_modules/.bin目录添加到环境变量，才能全局使用hexo的全部命令。但无此必要，因此，应该在hexo项目根目录内运行hexo命令

Hexo网站的搭建步骤：

1. 编写文档

   使用Markdown语言编写Markdown文件。Markdown编辑器建议使用Typora。

2. 编译文档

   使用Hexo将Markdown文件（源代码）编译生成静态文件（个人网站的组成部分，由html/css/js构建而成）。

3. 托管文档

   使用Git将静态文件上传到远程服务器（博客、Git托管平台、个人网站等）：

   1. GitHub创建远程仓库，GitHub添加SSH keys

   2. 文档部署到GitHub

      若只使用一个远程仓库，则应该分别部署到不同分支：

      • 源代码（本地master分支）部署到GitHub的master分支
      • 静态文件（本地pages分支）部署到GitHub的pages分支

   3. 设置个人域名

   4. 发布文章

二、安装

1. 安装Node.js

   Nodejs官网下载对应平台的版本，根据提示安装即可（同步安装对应的npm）。

2. 安装Git

   Git官网下载对应平台的版本，根据提示安装即可。

3. 安装Hexo CLI

   $ npm install -g hexo-cli
   

   缺省路径时，默认安装到npm的全局模块路径内。

   通过下面的命令检查Hexo是否正确安装上了：

   $ hexo --version
   

   如果输出了一系列的版本号，说明所有安装工作都以完成，可以正式使用Hexo了。

4. 升级Hexo CLI

   $ npm update -g hexo-cli
   

三、初始化项目

1、初始化

在本地硬盘的某一目录内新建一个Hexo项目目录（简称为Hexo根目录）并初始化。

1. 创建Hexo项目的根目录

   示例：在本地目录（E:/学习/333/）下新建Hexo的根目录（示例为blog）。

   MINGW64 /e/学习/333
   $ hexo init blog
   INFO  Cloning hexo-starter https://github.com/hexojs/hexo-starter.git
   Cloning into 'E:\学习\333\blog'...
   remote: Enumerating objects: 22, done.
   remote: Counting objects: 100% (22/22), done.
   remote: Compressing objects: 100% (17/17), done.
   remote: Total 153 (delta 8), reused 9 (delta 3), pack-reused 131
   Receiving objects: 100% (153/153), 29.67 KiB | 2.28 MiB/s, done.
   Resolving deltas: 100% (70/70), done.
   Submodule 'themes/landscape' (https://github.com/hexojs/hexo-theme-landscape.git) registered for path 'themes/landscape'
   Cloning into 'E:/学习/333/blog/themes/landscape'...
   remote: Enumerating objects: 32, done.
   remote: Counting objects: 100% (32/32), done.
   remote: Compressing objects: 100% (25/25), done.
   remote: Total 1054 (delta 20), reused 10 (delta 7), pack-reused 1022
   Receiving objects: 100% (1054/1054), 3.21 MiB | 31.00 KiB/s, done.
   Resolving deltas: 100% (578/578), done.
   Submodule path 'themes/landscape': checked out '73a23c51f8487cfcd7c6deec96ccc7543960d350'
   INFO  Install dependencies
   npm notice created a lockfile as package-lock.json. You should commit this file.
   npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules\nunjucks\node_modules\fsevents):
   npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
   npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.1.1 (node_modules\fsevents):
   npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.1: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
      
   added 362 packages from 470 contributors and audited 2622 packages in 31.827s
   found 0 vulnerabilities
      
   INFO  Start blogging with Hexo!
   

   • 初始化前，要求Hexo的根目录不存在或是一个空白目录

   • 初始化实质是克隆hexo-starter（hexo的统一配置和相关依赖 ，原生主题是landscape）

   • 最后一行出现“INFO Start blogging with Hexo!”，表示Hexo根目录已成功初始化

   • 没有爆红的警告可以不管，基本上是是依赖包的兼容问题

     • fsevents是苹果系统的必选依赖，但当前系统是Windows（不需要），可忽略

2. 安装/更新插件

   进入Hexo根目录（示例为blog），运行命令：

   $ cd blog
   $ npm install          # 安装/更新package.json文件内的插件
   

2、目录结构

Hexo根目录的树结构如下：

.                      # Hexo项目的根目录
├──.deploy_git         # 执行hexo deploy命令后部署到GitHub上的内容都在这个目录中
├── public             # 发布文档目录：存放发布到网站的资源
├── node_modules       # Hexo插件目录：存放Hexo的插件
├── scaffolds          # 模板目录：存放定义layout的MD文件
|   ├── post.md        # post（文章，Markdown文件）的layout
|   ├── page.md        # page（网页,个人静态网站）的layout  
|   └── draft.md       # draft（草稿）的layout
├── source             # 资源目录：存放源代码（例如Markdown文件）的相关资源
|   ├── 其它目录        # 将作为网站的资源
|   ├── _drafts        # 草稿目录
|   └── _posts         # 源代码目录：源代码（例如Markdown文件）必须存放在此目录内
├── themes             # 主题目录：Hexo根据主题来生成静态页面
|   └── _config.yml    # 主题配置文件
├── _config.yml        # 网站配置文件
├── package.json       # Hexo插件配置文件
└──package-lock.json   # Hexo插件配置文件

文件描述：

• source（资源文件夹）：除 _posts 文件夹外，开头命名为 _ (下划线)的文件/文件夹和隐藏的文件将会被忽略
• public：发布文档目录，存放编译后的文件，方便上传到远程服务器
• themes（主题文件夹）：Hexo根据主题来生成静态页面
• scaffolds：模版文件夹。新建文章时，Hexo会根据模版来建立文件。Hexo的模板是指在新建的markdown文件中默认填充的内容
• package-lock.json：用来记录当前状态下实际安装的各个npm package的具体来源和版本号（大小版本号）。一般为了稳定性考虑，不能随意升级依赖包，因为很难排查换包导致兼容性的bug，所以package-lock.json的作用是锁定包而不升级。 如果要升级package-lock.json里面的库包，运行npm install XXX@x.x.x
• package.json：只能锁定大版本，即版本号的第一位，不能锁定后面的小版本。package.json的作用是在npm install时拉取该大版本下面最新的版本

四、编写文档

在Hexo环境编写MD文件，需要遵循Hexo的一些规则：

• Markdown文件

  • hexo new命令新建的Markdown文件，统一存入source/_posts目录内

    Hexo命令不能指定路径新建文件，只能在存入目录后，然后手动新建子目录。

  • 或者将已有Markdown文件放入source/_posts目录内由Hexo管理

  • 可使用Hexo的模板定制Markdown文件的扉页（Front-matter）

• 引用本地图片有点麻烦：使用标签语法或第三方插件

1、新建文件

1.1 Hexo命令

使用hexo new命令创建Markdown文件，统一存入source/_posts目录内。

语法：hexo new [layout] [Scaffold] <title>

• title：文章标题

  建议使用双引号括起。Hexo默认以文件名称作为博客文章的标题，编辑_config.yml中的“new_post_name”参数可改变默认的文件名称。

  新建文章统一储存到source/_posts目录内，然后手动创建目录分类储存。

• layout：指定文章的布局

  Hexo有3个布局，可修改_config.yml中的“default_layout”参数可更改默认布局。

  • post：默认布局，文章布局，结合hexo new命令就是创建Markdown文件
  • page：网页布局，结合hexo new命令就是创建网站的菜单项
  • draf：草稿布局

• Scaffold：模版

  新建文章时，Hexo根据scaffolds文件夹内的文件创建扉页。

示例：

MINGW64 /e/学习/333/blog
$ hexo new "Hexo"
INFO  Created: E:\学习\333\blog\source\_posts\Hexo.md

• 缺省模板名称时，默认使用post模板

1.2 导入MD文件

将已写好的md文件（或整个目录）复制到source/_posts目录内，完成文章的导入。 然后，每个MD文件根据需要重新设置扉页。

2、设置扉页

通过模板定制MD文件的扉页（Front-matter）。扉页是MD文件最上方以---分隔（YAML格式）的区域，指定文件的变量。示例：设置post模板（文章，scaffolds/post.md）。

---
title: {{ title }}                          # Markdown文件自动填写标题
date: {{ date }}                            # Markdown文件自动填写日期
toc: true                                   # 开启toc
top: 1                                      # 添加top，首页文章实现自定义排序
tags: [标签1, 标签2, 标签3, ...]             # 在Markdown文件手动修改多标签的名称 
categories: [1级分类, 2级分类, 3级分类, ...]  # 在Markdown文件手动修改多级分类的名称
---

2.1 扉页参数

• 只有主题支持分类和标签，才可以在扉页中设置

2.2 扉页设置方法

• 方法一：使用命令hexo new 模板名 "MD文件名"，在创建MD文件时通过模板构造扉页

  layout: photo
  title: Markdown
  date: 2019-11-02 15:32:49
  

• 方法二：直接在MD文件最上方构造扉页（若是json格式，将---替换为 ;;; 即可）

  title: Hexo
  tags: [编程, 主题]
  categories:
    - 主题
    - Hexo
    - 配置
    - 多级分类
  date: 
  

  在网站呈现的效果：

  

3、设置摘要

在首页设置摘要有两种方法：

方法一：md文件中使用<!--more-->标签，点击“阅读全文”才能看见more标签以下的内容。

方法二：不使用<!--more-->标签，自动显示部分摘要。

在themes/主题名/_config.xml文件中搜索“index”，将“expand”的值修改为false。

index:
  expand: false ## default is unexpanding,so you can only see the short description of each post.
  excerpt_link: Read More

Wikitten主题不使用<!--more-->标签时，在首页会存在文章嵌套的bug：

使用<!--more-->标签后，文章在首页显示的格式统一了：

4、添加图片

参阅：hexo 添加图片，音乐，链接，视频

4.1 图床图片

将图片上传到一些免费的CDN服务（七牛云储存、Cloudinary）中，上传图片后，会生成对应的url地址，然后在MD文件中通过地址引用图片。

因为GitHub存储空间有限，若大量使用本地图片，将会挤占GitHub有限的存储空间。因此，建议使用图床（ 存放图片的服务器 ）。

参阅：使用七牛云做图床。

4.2 本地图片

参阅：hexo引用本地图片无法显示

• 方法一：统一目录存放

  在source目录新建一个目录（例如images）统一存放所有文章的图片，方便重复引用。

• 方法二：分目录存放

  创建一个与文章同名的目录，且与文章位于同一目录内。

  需要安装第三方插件来转换图片路径，Hexo才能正确读取图片。

  1. 网站配置文件开启资源目录

     将_config.yml文件中的“post_asset_folder”选项更改为true：

     post_asset_folder: false   →→→   post_asset_folder: true
     

  2. 安装图片路径转换的插件

     npm install https://github.com/CodeFalling/hexo-asset-image --save
     

  3. 修改插件的index.js

     仅在转换失败时才需要修改。转换失败时：

      $ hexo s
     INFO  Start processing
     update link as:-->/.com//1555311576892.png   # 出现/.com/，表示转换失败
     

     • 图片路径转换为/.com//1555311576892.png（转换失败），图片无法显示

       

     失败原因：应该是hexo-asset-image插件的bug，Hexo版本3.0以上获取网站url的方式与3.0以下有些不同。修改hexo-asset-image的index.js，或者卸载hexo-asset-image，选择使用hexo 3.0方式的标签语法插入本地图片。

     文本编辑器修改node_modules/hexo-asset-image/index.js文件为：

      'use strict';
     var cheerio = require('cheerio');
          
     // http://stackoverflow.com/questions/14480345/how-to-get-the-nth-occurrence-in-a-string
     function getPosition(str, m, i) {
       return str.split(m, i).join(m).length;
     }
          
     var version = String(hexo.version).split('.');
     hexo.extend.filter.register('after_post_render', function(data){
       var config = hexo.config;
       if(config.post_asset_folder){
            var link = data.permalink;
        if(version.length > 0 && Number(version[0]) == 3)
           var beginPos = getPosition(link, '/', 1) + 1;
        else
           var beginPos = getPosition(link, '/', 3) + 1;
        // In hexo 3.1.1, the permalink of "about" page is like ".../about/index.html".
        var endPos = link.lastIndexOf('/') + 1;
         link = link.substring(beginPos, endPos);
          
         var toprocess = ['excerpt', 'more', 'content'];
         for(var i = 0; i < toprocess.length; i++){
           var key = toprocess[i];
           
           var $ = cheerio.load(data[key], {
             ignoreWhitespace: false,
             xmlMode: false,
             lowerCaseTags: false,
             decodeEntities: false
           });
          
           $('img').each(function(){
            if ($(this).attr('src')){
                // For windows style path, we replace '\' to '/'.
                var src = $(this).attr('src').replace('\\', '/');
                if(!/http[s]*.*|\/\/.*/.test(src) &&
                   !/^\s*\//.test(src)) {
                  // For "about" page, the first part of "src" can't be removed.
                  // In addition, to support multi-level local directory.
                  var linkArray = link.split('/').filter(function(elem){
                    return elem != '';
                  });
                  var srcArray = src.split('/').filter(function(elem){
                    return elem != '' && elem != '.';
                  });
                  if(srcArray.length > 1)
                    srcArray.shift();
                  src = srcArray.join('/');
                  $(this).attr('src', config.root + link + src);
                  console.info&&console.info("update link as:-->"+config.root + link + src);
                }
            }else{
                console.info&&console.info("no src attr, skipped...");
                console.info&&console.info($(this));
            }
           });
           data[key] = $.html();
         }
       }
     });
     

  4. 新建MD文件

      hexo new <title>     # title为新建文章名，可任意命名
     

  5. MD文件添加（引用）本地图片

     • markdown语法：图片只能在文章中显示，但首页缩略图可能不显示

       ![替代文字](xxx/图片名.jpg)   # xxx为title文件夹
       

     • 标签插件语法：图片可在文章和首页缩略图中显示，但无法在MD文件内显示

       {% asset_path slug %}
       {% asset_img 图像名.jpg [slug] [title] %}
       {% asset_link slug [title] %}
       

       • slug：描述图片的替代文字

     • asset_img：后接图片名称（图片名.jpg）

  6. 验证图片路径能否转换成功

      $ hexo clean && hexo g && hexo s
     INFO  Start processing
     update link as:-->/2019/11/06/111/1555311576892.png
     

     • 图片路径转换为/2019/11/06/111/1555311576892.png(转换成功)，显示图片
  • 插件只能转换相对路径（与文件名同名的目录内）的图片

5、添加播放器

1. 打开网页版的网易云音乐，选择喜欢的音乐，点击"生成外链播放器”

   

2. 进入网易云音乐插件界面，点击“iframe插件”，复制外链的代码

   

3. 计划在侧边栏插入这首歌的音乐播放器

   打开侧边栏的ejs文件，添加刚刚复制的外链代码。

4. 重新生成、部署网页

五、编译文档

1. 调试，启动本地web服务器在本地浏览效果

   $ hexo server --debug
   …………
   13:11:46.051 DEBUG Generator: asset
   13:11:46.060 INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.
   

   在浏览器中输入http://localhost:4000查看效果。

2. 本地预览，启动本地web服务器在本地浏览效果

   $ hexo s                      # s = server
   INFO  Start processing
   INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.
   

   • 若出现：http://localhost:4000，表示博客基本完成建立

3. 若出现缓存引起的异常， 可以在生成命令前执行清除缓存

   缓存是指hexo init时解析的Markdown源文档，存入在public目录内。

   $ hexo cl                    # cl= clean
   INFO  Deleted database.
   INFO  Deleted public folder.
   

4. 生成静态的发布文档

   $ hexo g                      # g = generate
   INFO  Start processing
   INFO  Files loaded in 229 ms
   INFO  Generated: index.html
   INFO  Generated: archives/index.html
   …………
   INFO  Generated: fancybox/jquery.fancybox.js
   INFO  28 files generated in 519 ms
   

   若无报错，说明各项配置都没有问题，建站成功，生成db.json文件和public文件夹。

   Markdown和HTML文件会被解析并放到public文件夹，而其他文件会被拷贝过去。

六、部署文档

Hexo提供了快速方便的一键部署命令，就能将public目录部署到远程服务器（GitHub等）上。

hexo d|deploy

部署步骤：

1. 设置_config.yml

   修改网站配置文件_config.yml为：

   deploy: 
     type: git
     repo: xxx               # GitHub远程仓库的Git地址
     branch: master
   

   可同时使用多个 deployer，Hexo会依照顺序执行每个deployer：

   deploy:
     type: git
     repo: <repository url>
     branch: [branch]
     message: [message]
   deploy:
     type: git
     repo: <repository url>
     branch: [branch]
     message: [message]
   

2. 安装Git部署插件（hexo-deployer-git）：

   npm install hexo-deployer-git --save
   

   使用–save安装依赖到本文件夹，会记录到package.json中的dependencies内。

3. 运行命令，推送到指定仓库

   hexo clean && hexo g && hexo d
   

使用git clone方式下载主题后，如果博客使用CI工具自动部署，一定要删除主题目录内的.git目录，在项目的.git目录内最好不要再出现.git目录。否则，生成的博客页面一片空白。

七、主题

不建议在主题美化花费太多时间，选择合适的主题即可。因为：Hexo主题美化涉及html/css/js等方面的专业知识点，包含如何寻找修改文件、如何修改/添加内容、在修改过程中如何解决各文件之间的协调关系，最后一点就是，Hexo和主题是不断升级版本的，若其改变了之前的设置，就会有可能导致美化内容失效。

Hexo主题包的目录树结构：

.                    # 主题目录
├── includes
├── languages        # 用来配置国际化语言版本，里边包含各种个配置像的文本翻译
├── layout           # 主题布局：以ejs文件来定义各种含有配置信息调用的布局
├── scripts          # JS脚本
├── source           # 主题配置资源：存放css、js脚本、图片、字体等
|   ├── css          # 用来修改自定义样式，需要掌握一定的css语法
|   ├── fonts        # 定义字体文件，可以修改博客字体
|   ├── images       # 本地调用的图片放这里
|   ├── js           # 一些js脚本（特效.js存放处）
|   └── 404.html     # 自定义的公益404页面
└── _config.yml      # 主题配置文件：YML数据串行化格式语言书写的配置文件

1、网站配置文件

路径：_config.yml。

使用文本编辑器修改网站配置文件。

具体设置参阅： https://hexo.io/zh-cn/docs/configuration 。

示例：

# Hexo Configuration
## Docs: http://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site 网站
title: 无边风月                             # 网站标题
subtitle:                                  # 网站副标题
description: 自古求真皆寂寞，唯挑心灯伴夜霭    # 网站描述
author: Komenytao                          # 作者名称
avatar: source/images/avatar.jpg           # 作者头像。本地图像存放在source目录内
language: zh-CN                            # 网站使用语言。当前主题的languages目录下的简体中文包名称
timezone:                                  # 网站时区。Hexo默认使用您电脑的时区
since: 2015                                # 网站建立年份

# Social links 社交链接
social:
  Github: https://github.com/xxx
  Weibo: http://weibo.com/xxx
  Email: mailto:xxx
  # zhihu: http://www.zhihu.com/people/your-user-name

# title, chinese available
links_title: 友情链接
links:
  我的CSDN博客: http://blog.csdn.net/xxx
  我的新浪博客: http://blog.sina.com.cn/xxx

# URL 网址
## 若博客存放在网站子目录中，则将url设为http://yoursite.com/blog，并将root设为/blog/
url: http://yoursite.com
root: /
permalink: :year/:month/:day/:title/                 # 生成文章的永久链接格式
#permalink: :category/:year/:month/:day/:title.html    
permalink_defaults:

# Directory
source_dir: source                         # 源文件夹，存放内容（MD源文件）
public_dir: public                         # 公共文件夹，存放生成的静态文件
tag_dir: tags                              # 标签文件夹
archive_dir: archives                      # 归档文件夹
category_dir: categories                   # 分类文件夹
code_dir: downloads/code                   # nclude code文件夹
i18n_dir: :lang                            # 国际化（i18n）文件夹
skip_render:                               # #跳过指定文件的渲染，可使用glob表达式匹配

# Writing 文章布局、写作格式的定义
new_post_name: :title.md                   # 新建文章默认文件名
default_layout: post                       # 默认布局。使用scaffolds目录内的模板文件
titlecase: false                           # 文章标题转换为titlecase格式（首字母大写）
external_link: true                        # 在新标签中打开一个外部链接
filename_case: 0                           # 转换文件名，1代表小写；2代表大写；默认为0，意思就是创建文章时，是否自动帮你转换文件名，默认就行，意义不大
render_drafts: false                       #是否渲染_drafts目录下的文章，默认为false
post_asset_folder: false                   # 是否启动asset文件夹
relative_link: false                       # 将链接改为与根目录的相对地址
future: true                               # 显示未来的文章
highlight:                                 # Hexo自带的语法高亮（node_modules/highlight.js）
  enable: true                             # 启用
  line_number: true                        # 代码块显示行号
  auto_detect: true                        # 启动自动选择（自动判断语言，选择高亮模式）
  tab_replace: ''                          # tab格式转换为''

# Home page setting  网站的首页（Home）设置
index_generator:
  path: ''                             # 博客索引时的路径（''表示根路径）
  per_page: 10                         # 每页显示文章的数目。(0，禁用分页)
  order_by: -date                      # 文章的顺序。(默认按日期降序排列)
  
# Category & Tag 网站的分类（Categories）和标签（tags）的设置
default_category: uncategorized             # 不分类
category_map:                               # 分类别名
## 作用是为了让url中尽量少出现中文而做的映射。示例：
#    编程: programming
#    生活: life
#    其他: othe
tag_map:                                    # 标签别名

# Date/Time format  Hexo使用Moment.js解析和显示日期
date_format: YYYY-MM-DD
time_format: HH:mm:ss

# Pagination 每页显示文章数
per_page: 10                     # 设置为0，禁用分页
pagination_dir: page

# Include / Exclude file(s)
## include:/exclude: 选项只适用于“source/”文件夹
include:
exclude:
ignore:

# Extensions  配置站点所用主题和插件
## Plugins: http://hexo.io/plugins/
plugins:
baidusitemap: # 需要安装插件：npm install hexo-generator-baidu-sitemap@0.1.1 --save
  path: baidusitemap.xml

# Extensions
## Plugins: http://hexo.io/plugins/
## Themes: http://hexo.io/themes/
theme: next                             # 主题

feed:
  type: atom                            # feed 类型 (atom/rss2)
  path: atom.xml                        # rss 路径
  limit: 0                              # 在rss中最多生成的文章数(0显示所有)

# 自定义站点内容搜索，需要先安装插件：npm install hexo-generator-search --save
search:
  path: search.xml
  field: all                           # 如只想索引文章，可设置为post

# Deployment 站点部署到github
## Docs: http://hexo.io/docs/deployment.html
deploy:
  type: git
  repository:
  	  github: git@github.com:xxxx/xxxxx.github.io.git  # 部署到github pages
      coding: git@git.coding.net:xxxx/xxxx.git         # 部署到coding pages
  branch: master                                       # 上传到git服务的主分支上

# ---------------下面选项需要对应插件的支持---------------
# npm install hexo-generator-index --save
# npm install hexo-generator-archive --save
# npm install hexo-generator-category --save
# npm install hexo-generator-tag --save

index_generator:
  per_page: 10                    # 首页默认10篇文章标题 如果值为0不分页

archive_generator:
  per_page: 20                    # 归档页面默认20篇文章标题
  yearly: true                    # 生成年视图
  monthly: true                   # 生成月视图

tag_generator:
  per_page: 10                    # 标签分类页面默认10篇文章

category_generator:
  per_page: 10                    # 分类页面默认10篇文章

1.1 设置语言

博客框架默认语言是英文（en）。

1. 查看当前使用的主题包（landscape）的简体中文包名称

   前往themes/主题名/languages目录获知简体中文翻译文件的名称是zh-CN.yml。

2. 在_config.yml文件中查找“language”，更换为简体中文：

   language: en   →→→   language: zh-CN
   

1.2 资源文件夹

source称为资源文件夹，用来管理图片和其它资源等。

开启资源文件管理功能：将_config.yml文件中的“post_asset_folder”选项更改为true。

post_asset_folder: false   →→→   post_asset_folder: true

• 开启后，运行hexo new命令创建新MD文件时自动创建一个与MD文件名同名的文件夹

• 将所有与你的文章有关的资源（例如图片）放在这个关联文件夹中

• 以通过相对路径来引用相关资源

• 配套措施：Typora（Markdown编辑器）的图片添加方法设置为：

  

2、安装主题

推荐主题：Wikitten、yelee、icarus。

1. 选择主题

   在官网的主题页面选择主题（示例安装3-hexo）：

   

2. 安装主题

   点击主题名称（3-hexo）进入GitHub仓库，克隆操作：

   MINGW64 /e/学习/blog
   $ git clone https://github.com/yelog/hexo-theme-3-hexo.git themes/3-hexo
   Cloning into 'themes/3-hexo'...
   remote: Enumerating objects: 20, done.
   remote: Counting objects: 100% (20/20), done.
   remote: Compressing objects: 100% (17/17), done.
   remote: Total 2161 (delta 3), reused 11 (delta 3), pack-reused 2141
   Receiving objects: 100% (2161/2161), 1.35 MiB | 47.00 KiB/s, done.
   Resolving deltas: 100% (1224/1224), done.
   

   • 主题包统一安装到themes目录内，主题包的目录名可自定义（3-hexo）

3. 启用主题

   文本编辑器打开_config.yml文件，搜索“theme”，将原来默认的主题“landscape”改为 “3-hexo”（步骤2中自定义的主题目录名）：

   theme: landscape   →→→   theme: 3-hexo
   

   • Hexo可安装多个主题，但当前启用的只能是一个

4. 预览新主题

   $ hexo s
   

3、Wikitten主题

Wikitten主题的GitHub仓库。

使用方法：安装后，参阅自带的README_zh-CN.md文件进行基本的设置。

3.1 TOC插件

TOC默认显示在文章页面（post）内，现打算将其显示在侧边栏（sidebar）内。

思路：

1. 定位侧边栏内的插件的布局文件的放置位置

   查找侧边栏的布局文件（使用ejs语法的HTML页面结构）的过程：

   1. 查看网站的全局布局文件：themes/Wikitten/layout/layout.ejs

      在layout.ejs文件内找到<%- partial('common/sidebar') %>，得知侧边栏的布局文件是themes/Wikitten/layout/common/sidebar.ejs。

   2. 在sidebar.ejs文件内找到<%- partial('widget/' + widget) %>，得知插件的布局文件是themes/Wikitten/layout/widget/xxx.ejs。

2. 编写插件布局文件

   • HTML标签使用div标签包围，在页面显示图标
   • JavaScript使用script标签包围，在图标实现互动操作

3. 编写插件CSS文件

   路径：themes/Wikitten/source/css/。

   • _variables.styl：定义各CSS文件中用到的变量的初始值
   • style.styl：主题的整体CSS

4. 添加插件的开关

   在主题配置文件（themes/Wikitten/_config.yml）添加widget。

操作过程：

1. MD文件开启TOC功能

   在MD文件的扉页添加：toc: true。

2. 编写TOC的ejs文件

   MD文件开启TOC功能后，默认在文章正文（post）内显示目录，现在希望在侧边栏（page）内显示目录（TOC）。

   • 删除旧文件（目的：不在文章正文内显示TOC）

     删除themes/Wikitten/layout/common/article.ejs文件内关于toc的内容：

        <% if (post.toc) { %>
            <div id="toc" class="toc-article">
            <strong class="toc-title"><%= __('article.catalogue') %></strong>
                <%- toc(post.content) %>
            </div>
        <% } %>
     

   • 编写新文件（目的：在侧边栏内显示TOC）

     将删除内容粘贴到themes/Wikitten/layout/widget目录内生成新文件toc.ejs，标签名称修改为侧边栏（themes/Wikitten/source/css/_partial/sidebar.styl）定义的标签。

      <% if (page.toc) { %>
         <div class="widget-wrap toc-list">
            <h3 class="widget-title toc-title">
                 <span><%= __('章节目录') %></span>
             </h3>
             <%- toc(page.content, {list_number: false}) %>
         </div>
     <% } %>
     

     • 查看/获取HTML标签名称：使用浏览器的开发者工具（F12）
     • 第一行：判断页面是否存在TOC（在MD文件的扉页添加了toc: true）
     • 第二、三行：使用侧边栏定义标签，既保持了整体CSS风格，又不需要定义CSS
     • 第四行：自定义标题名称
     • 第六行：使用hexo自带toc函数显示目录内容
       • str参数为page.content，page定义为在导航标签页显示TOC，post定义为在文章详情页显示TOC
       • options参数是{list_number: false}，false表示不显示编号
       • 若第一行和第六行的类（page）不同，或会触发错误：Cannot read property ‘parent’ of undefined

3. 主题配置文件设置TOC的启动开关

   在主题的配置文件（themes/Wikitten/_config.yml）添加该widget：

   widgets: # default use category only
       - category
       - toc                           # 新增，设置开关
       # - recent_posts
       # - archive
       # - tag
       # - tagcloud
       # - links
   

   若只需要在侧边栏简单显示TOC，至此，步骤结束。

4. 扩展TOC的功能

   编写TOC的JavaScript，增加功能：次级目录小图标、次级目录折叠、文章总目录折叠。

   完整的toc.ejs：

   <% if (page.toc) { %>
       <div class="widget-wrap" id='toc'>
           <h3 class="widget-title">
               <span><%= __('目录') %></span>
               &nbsp;
               <a id='tocExpand' href="#">
                   <i class="fa fa-angle-double-<%- theme.customize.category_perExpand ? 'up' : 'down' %> fa-2x"></i>
               </a>
           </h3>
        <%- toc(page.content, {list_number: false}) %>
    </div>
      	
    <script>
        //添加小图标
        var $itemHasChild = $("#toc .toc-item:has(> .toc-child)");
        var $titleHasChild = $itemHasChild.children(".toc-link");
        $itemHasChild.prepend("<i class='fa fa-caret-down'></i><i class='fa fa-caret-right'></i>");
        var $opentoc = $(".toc-item > .fa-caret-down");
        var $closetoc = $(".toc-item > .fa-caret-right");		
        $closetoc.addClass("hide").hide();	
      		
        // 点击小图标
        var clickIcon = function(){
            $("#toc .toc-item > i").click(function(){
                $(this).hide();
                $(this).siblings(".toc-child").slideToggle(100);
                $(this).toggleClass("hide");
                $(this).siblings("i").toggleClass("hide");
                if( $(this).siblings("i").hasClass("hide") ){
               		// 执行隐藏
               		$(this).siblings("i").hide();
           		}else{
               		// 显示
               		$(this).siblings("i").show();
           		}
            })
        }()	
      
        // 展开关闭所有目录
        var clickTocTitle = function(){
            var $subToc = $titleHasChild.next(".toc-child");
            var $tocTitle = $("#tocExpand");
            var iconAllExpandClass = 'fa-angle-double-down';
               var iconAllPackClass = 'fa-angle-double-up';
            // 当包含多级目录时再执行
            if ($titleHasChild.length) {
                $tocTitle.addClass("clickable");
                $tocTitle.click(function(){
                    var icon = $(this).children('.fa');
                    if ($subToc.is(":hidden")) {
                        $subToc.show(100);
                        $closetoc.addClass("hide").hide();
                        $opentoc.removeClass("hide").show();
                        icon.removeClass(iconAllPackClass).addClass(iconAllExpandClass);
                    } else {
                        $subToc.hide(100);
                        $opentoc.addClass("hide").hide();
                        $closetoc.removeClass("hide").show();
                        icon.removeClass(iconAllExpandClass).addClass(iconAllPackClass);
      						
                    }
                })
            }
        }()
       </script>	
   <% } %>
   

   尚未解决问题：点击所有目录图标时会自动返回顶部。

5. 设置toc插件的CSS

   在侧边栏的样式文件（themes/Wikitten/source/css/_partial/sidebar.styl）内添加toc插件的自定义样式：

   /*小图标*/
   #toc ol.toc li.toc-item i {
       display: inline-block;
       margin-left: -0.9em;
       width: 0.9em;
       color: #333;
       font-weight: bold;
       cursor: pointer;
   }
   #toc ol.toc li.toc-item i:hover {
       color: #ff0000;
   }
   /*关联图标的Class*/
   #toc ol.toc li.toc-item i.hide {
       display: none;
   }
      
   /*关联总标题的Class*/
   #toc #tocExpand.clickable {
       cursor: pointer;
   }
   #toc #tocExpand.clickable:hover {
       color: #88acdb;
   }
   #toc #tocExpand.clickable:active {
       color: #d3d3d3;
   }
      
   /*其他目录相关*/
   #toc {
       font-size: 0.9em;
       line-height: 1.8em;
    float: none;
   }
   #toc ol.toc {
       margin-left: 0;
       padding: 1.2em;
       padding-right: 0;
    max-height: 380px;
    overflow: auto; 
   }
   #toc ol.toc li.toc-item {
       list-style-type: none;
   }
      
   #toc ol.toc li.toc-item:hover {
       background: none;
   }
   #toc ol.toc a.toc-link {
       color: #333;
    font-weight: bold;
   }
   #toc ol.toc a.toc-link:hover {
       color: #88acdb;
       text-decoration: none;
       background: rgba(158,188,226,0.21);
   }
   #toc ol.toc ol.toc-child {
       padding-left: 1.25em;
       margin: 4px 0;
   }
   #toc ol.toc ol.toc-child a.toc-link {
    color: #38b7ea;
    font-weight:normal;
   } 
   

3.2 categorie插件

修改themes/Wikitten/layout/widget/category.ejs中的一个设置：将up图标定义为折叠目录，down图标定义为打开目录。

<% if (site.categories.length) { %>
    <div class="widget-wrap" id='categories'>
        <h3 class="widget-title">
            <span><%= __('widget.categories') %></span>
            &nbsp;
            <a id='allExpand' href="#">
                <i class="fa fa-angle-double-<%- theme.customize.category_perExpand ? 'up' : 'down' %> fa-2x"></i>
            </a>
        </h3>
        
        <% 
            function listCategories(categories, posts) {
                function layArticles(posts) {
                    var classifiedArticles = {'_root': []};
                    posts.forEach(function(post,i){
                            var last_post_cat;
                            var post_info = {
                            "title": post.title,
                            "date": post.date,
                            "path": url_for(post.path),
                            "_id": post._id
                        };
                        if(post.categories.length) {
                            last_cat_id = post.categories.data.slice(-1)[0]['_id'];
                            if(!classifiedArticles[last_cat_id]) classifiedArticles[last_cat_id] = [];
                            classifiedArticles[last_cat_id].push(post_info);
                        } else {
                            classifiedArticles['_root'].push(post_info);
                        }
                    });
                    return classifiedArticles;
                }
                function prepareQuery(categories, parent) {
                    var query = {};
                    if (parent) {
                        query.parent = parent;
                    } else {
                        query.parent = {$exists: false};
                    }
                    return categories.find(query).sort('name', 1).filter(function(cat) {
                        return cat.length;
                    });
                }
                function hierarchicalList(tree, parent, classifiedArticles) {
                  if(!tree.name) tree = {"name": "_root", "_id": "_root", "children": [], "articles": classifiedArticles['_root']};
                  prepareQuery(categories, parent).forEach(function(cat, i) {
                      var now_category = {
                          "_id": cat._id, 
                          "name": cat.name, 
                          "children": [],
                          "articles": classifiedArticles[cat._id]
                      };
                      if(is_post() && now_category.articles) {
                          now_category.articles.forEach(function(post, i) {
                              if(page._id == post._id) now_category["selected"] = true;
                          });
                      }
                      var childTree = hierarchicalList(now_category, cat._id, classifiedArticles);
                      if(childTree.selected) {tree["selected"] = true};
                      tree.children.push(childTree);
                  });
                  return tree;
                }
                var classifiedArticles = layArticles(posts);
                var categoriesTree = hierarchicalList({}, null, classifiedArticles);
                return categoriesTree;
            }
        %>
        <% 
            function visitTreePosts(branch, perExpand) {
             %> <ul class="unstyled" id="tree" <% if(perExpand) { %>style="display: block;"<% } %>> <%
                if(branch.children && branch.children.length) {
                    branch.children.forEach(function(category){
                    %>
                    <li class="directory<%- category.selected ? ' open' : '' %>">
                        <a href="#" data-role="directory">
                            <i class="fa fa-folder<%- (perExpand || category.selected) ? '-open' : '' %>"></i>
                            &nbsp;
                            <%- category.name %>
                        </a>
                        <% visitTreePosts(category, perExpand) %>
                    </li> 
                    <%  
                    });
                } 
                if(branch.articles && branch.articles.length) {
                    branch.articles.sort(function(post0, post1) {
                        return new Date(post0.date) - new Date(post1.date)
                    }).forEach(function(post){
                        %> <li class="file<%- (is_post() && post._id == page._id) ? ' active' : '' %>"><a href="<%- post.path %>"><%- post.title %></a></li> <%
                    });
                }
             %> </ul> <%
            }
        %>
        <%
            var categoriesTree = listCategories(site.categories, site.posts);
            visitTreePosts(categoriesTree, theme.customize.category_perExpand);
        %>
    </div>
    <script>
        $(document).ready(function() {
            var iconFolderOpenClass  = 'fa-folder-open';
            var iconFolderCloseClass = 'fa-folder';
            var iconAllExpandClass = 'fa-angle-double-down';
            var iconAllPackClass = 'fa-angle-double-up';
            // Handle directory-tree expansion:
            // 左键单独展开目录
            $(document).on('click', '#categories a[data-role="directory"]', function (event) {
                event.preventDefault();

                var icon = $(this).children('.fa');
                var expanded = icon.hasClass(iconFolderOpenClass);
                var subtree = $(this).siblings('ul');
                icon.removeClass(iconFolderOpenClass).removeClass(iconFolderCloseClass);
                if (expanded) {
                    if (typeof subtree != 'undefined') {
                        subtree.slideUp({ duration: 100 });
                    }
                    icon.addClass(iconFolderCloseClass);
                } else {
                    if (typeof subtree != 'undefined') {
                        subtree.slideDown({ duration: 100 });
                    }
                    icon.addClass(iconFolderOpenClass);
                }
            });
            // 右键展开下属所有目录
            $('#categories a[data-role="directory"]').bind("contextmenu", function(event){
                event.preventDefault();
                
                var icon = $(this).children('.fa');
                var expanded = icon.hasClass(iconFolderOpenClass);
                var listNode = $(this).siblings('ul');
                var subtrees = $.merge(listNode.find('li ul'), listNode);
                var icons = $.merge(listNode.find('.fa'), icon);
                icons.removeClass(iconFolderOpenClass).removeClass(iconFolderCloseClass);
                if(expanded) {
                    subtrees.slideUp({ duration: 100 });
                    icons.addClass(iconFolderCloseClass);
                } else {
                    subtrees.slideDown({ duration: 100 });
                    icons.addClass(iconFolderOpenClass);
                }
            })
            // 展开关闭所有目录按钮
            $(document).on('click', '#allExpand', function (event) {
                event.preventDefault(); 
                var icon = $(this).children('.fa');
                var expanded = icon.hasClass(iconAllPackClass);
                if(expanded) {
                    icon.removeClass(iconAllPackClass).addClass(iconAllExpandClass);
					$('#sidebar .fa.fa-folder').removeClass('fa-folder').addClass('fa-folder-open')
                    $('#categories li ul').slideDown({ duration: 50 });
                    
                } else {
                    icon.removeClass(iconAllExpandClass).addClass(iconAllPackClass);
					$('#sidebar .fa.fa-folder-open').removeClass('fa-folder-open').addClass('fa-folder')
                    $('#categories li ul').slideUp({ duration: 50 });
                    
                }
            });  
        });
    </script>
<% } %>

categorie插件：

• 分类内显示的文章名称是文章的title属性定义时的名称，不是文章的文件名，按照date（创建日期）的正序排序
• 分类内显示的文件夹名称是文章的categories属性定义时的名称，按照英文的正序排序

3.3 语法高度插件

1. 限制代码块高度

   代码块输入源代码时，太多代码行会导致显示不美观。因此，需要限制最大高度。

   网页元素的标签：<figure class="highlight xxx">。

   CSS文件路径：themes/Wikitten/source/css/_highlight/index.styl。

   修改方法：

   .highlight
       max-height: 300px       # 新增，最大高度
       overflow: auto          # 新增
       margin: 1.6em 0
       .line
           height: 1.6em;
   

2. 添加代码块复制按钮

   将icarus主题的代码块复制按钮移植到Wikitten主题：

   1. icarus主题的代码块复制功能位于themes/icarus/source/js/main.js文件内：

          $('figure.highlight').each(function () {
              var id = 'code-' + Date.now() + (Math.random() * 1000 | 0);
              var button = '<a href="javascript:;" class="copy" title="Copy" data-clipboard-target="#' + id + ' .code"><i class="fas fa-copy"></i></a>';
              $(this).attr('id', id);
              if ($(this).find('figcaption').length) {
                  $(this).find('figcaption').prepend(button);
              } else {
                  $(this).prepend('<figcaption>' + button + '</figcaption>');
              }
          });
          new ClipboardJS('.highlight .copy');    
      

   2. 将上述代码粘贴到Wikitten主题的themes/Wikitten/source/js/main.js文件内

      放入合适位置（位置随意，例如在To Top的上方）：

          $('figure.highlight').each(function () {
              var id = 'code-' + Date.now() + (Math.random() * 1000 | 0);
              var button = '<a href="javascript:;" class="copy" title="Copy" data-clipboard-target="#' + id + ' .code"><i class="fas fa-copy"></i></a>';
              $(this).attr('id', id);
              if ($(this).find('figcaption').length) {
                  $(this).find('figcaption').prepend(button);
              } else {
                  $(this).prepend('<figcaption>' + button + '</figcaption>');
              }
          });
          new ClipboardJS('.highlight .copy');
            	
        // To Top
          if ($('#sidebar').length) {
      

      原理：在页面加载完毕后，使用js动态地为每一个代码块添加一个按钮，使用这个按钮复制代码块内容。

   3. 引入第三方的clipboard.js

      Wikitten主题自带jQuery（不需要再次引用）。

      在themes/Wikitten/layout/layout.ejs文件的<body>前（ 页面加载完再执行js ）添加：

      <!-- 代码块复制功能 -->
      <script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
      

      引入本地文件好像会出现问题，故使用CDN在线引入clipboard.js。

   4. 设置CSS

      icarus主题的代码块在themes/icarus/source/css/style.styl文件内设置CSS，Wikitten主题的代码块在themes/Wikitten/source/css/_highlight/index.styl文件内设置CSS。

      figcaption                       # 新增
        a
            float: right
            color: white
            margin-left: 0.5em
      

3.4 粘性

参阅：CSS属性之position讲解

粘性，是指当某个父元素滚动时，子元素相对于父元素固定不动。

CSS的postion属性定义了一个元素在页面布局中的位置以及对周围元素的影响。其值（position: sticky）实现了子元素的粘性定位。

示例：实现Wikitten主题的当页面滚动时，侧边栏和导航栏相对于页面固定。

• 导航栏：<header id="header">

  父元素： <div id="container">

  CSS文件路径：themes/Wikitten/source/css/_partial/header.styl

  添加：

  #header {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
  }
  

• 侧边栏：<aside id="sidebar">

  父元素： <div id="container">

  CSS文件路径：themes/Wikitten/source/css/_partial/sidebar.styl

  在末尾添加：

  #sidebar {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
  }
  

尚未解决问题：侧边栏内的插件相对于<div id="container"> 的粘性。

3.5 CSS

有两种办法可以快速修改出自己想要的样式（CSS）：

• 找到主题原来的样式文件，直接修改里面的样式文件，这种对技术要求比较高，有的文件样式是css、less、ejs，要能读懂才能修改出自己想要的效果。
• 新建一个css样式，写上自己的样式在里面，再在模板文件中调用，也可以实现，也方便自己管理，也不会干涉以前的样式，调用自己的样式文件，之前的样式文件就会被覆盖，如果有的个别没被覆盖的话，可以在属性后面加上！important，提高权重。这种方法需要会HTML、CSS、甚至JavaScrip。前两个会的话也能修改大部分样式了。

Wikitten主题的CSS文件：

• themes/Wikitten/source/css/_variables.styl：定义CSS文件使用的变量的初始值

• themes/Wikitten/source/css/style.styl：定义网站的整体布局

  通过语法@import "路径/CSS文件"调用CSS的子文件：

  • @import “_partial/sidebar”调用themes/Wikitten/source/css/_partial/sidebar.styl

技巧：

如果看到网站那个模块不错的话，可以直接使用开发者工具（F12），将HTML内容和样式内容全部拷贝下来，在写入适当的文件中就行了。

1. 调整顶栏（导航栏，<header id="header">）

   1. 顶栏的背景

      将背景图片（例如：夜空.jpg）存入themes/Wikitten/source/images目录内，进入CSS文件（themes/Wikitten/source/css/_partial/header.styl），修改为：

      #header
        background: white   →→→   background-image: url('../images/夜空.jpg')
      

   2. 顶栏的高度

      进入CSS文件（themes/Wikitten/source/css/_variables.styl），修改为：

      // Header
        header-height = 48px   →→→   header-height = 188px
      

   3. 顶栏内文字的颜色

      进入CSS文件（themes/Wikitten/source/css/_partial/header.styl），修改为：

      #header
          a, a:visited
            color: color-default   →→→   color: white
      

   4. 网站logo

      将图片存入themes/Wikitten/source/css/images目录内，进入主题配置文件（themes/Wikitten/_config.yml），修改为：

      customize:
          logo:
              enabled: true
              width: 40
              height: 40
              url: /logo.png   →→→   url: /css/images/logo.png
      

   5. 网站名称字体大小

      进入CSS文件（themes/Wikitten/source/css/_partial/header.styl），修改为：

      .header-inner
          height: 100%
          position: relative
          #logo
              @extend $header-block
              @extend $header-block-left
              display: inline-block
              .logo
                  margin-right: 5px
                  display: inline-block
              .site-title
                  font-size: 16px   →→→   font-size: 36px
                  display: inline-block
                  vertical-align: top
                  font-weight: 600
      

   6. profile（作者简介）

      进入主题配置文件（themes/Wikitten/_config.yml），修改为：

      customize:
          profile:
              enabled: true # 开启profile插件
              avatar: images/avatar.jpg   # 本地图片
              gravatar: #komeny@hotmail.com # 若开启Gravatar头像, 将会覆盖本地图片
              author: komeny
              author_title: Designer & Programmer
              location: Guangzhou, China
              follow: https://github.com/komenytao/
      

      作者头像圆形显示：

      themes/Wikitten/source/css/_partial/header.styl文件添加：

              .avatar
                  width: logo-height
                  height: logo-height
                  margin-right: 8px
                  border-radius: 80px                     # 新增
                  -webkit-border-radius: 80px             # 新增
                  -moz-border-radius: 80px                # 新增
                  box-shadow: inset 0 -1px 0 #333sf       # 新增
      

2. 调整侧边栏（<div class="widget-wrap" id="toc">）

   进入themes/Wikitten/source/css/_partial/sidebar.styl：

   1. TOC插件的最大高度

      #toc ol.toc {
        max-height: 380px;
        overflow: auto; 
      }
      

   2. category插件的最大高度

      在末尾添加：

      #categories
        max-height: 380px
        overflow: auto
      

   3. 侧边栏宽度（不需要）

      CSS文件路径：themes/Wikitten/source/css/_variables.styl

      sidebar-column-tablet = 3.5   →→→   sidebar-column-tablet = 2.6
      

      同步调整文章正文（ section id="main"）宽度

      if sidebar
          main-column-tablet = 6.5   →→→   sidebar-column-tablet = 7.4
          if profile
              main-column-tablet = 9    →→→   main-column-tablet = 9.9
      

3. 调整文章正文（< section id="main">）

   进入themes/Wikitten/source/css/_partial/article.styl：

   1. 文章正文（article-inner）背景色：

      .article-inner
          @extend $block
          overflow: hidden
          background: white   →→→   background: color-background
          border-radius: 4px
          border: 1px solid #BBB
      

   2. 引用（blockquote）

      将原有的修改为：

      .article-entry
        blockquote
              position: static
              font-family: font-serif
              font-size: 1.1em
              margin: 0 -5px
              padding: 2px 20px 2px 10px
              background: #CCFFFF
              border-left: 4px solid #0066FF
      

   3. 1级标题（h1）

      调整文章标题的样式：

      .article-title
          font-size: 2em   →→→   font-size: 3em
          color: color-default
          text-decoration: none
       line-height: line-height-title
          text-align: center                         // 新增 
      

   4. 2级标题（h2）

      因为2级标题之前已设置了display: table：

         .article-entry
          h1, h2, h3, h4, h5, h6
                 display: table
      

      在2级标题的文字下方添加横线（分隔线），将与文字的长度一致：

      .article-entry
          h2
              border-bottom: 2px solid #32CD32
      

      若想分隔线的长度等于文章正文，删除之前的display: table。

   5. 表格（table）

      原CSS：

         .article-entry
          table
              width: 100%
              border-collapse: collapse
              border-spacing: 0
          th
              font-weight: bold
              border-bottom: 3px solid color-border
              padding-bottom: 0.5em
          td
              border-bottom: 1px solid color-border
              padding: 10px 0
      

      修改为：

      .article-entry
        table
              width: 100%
              border-collapse: collapse
              border-spacing: 0
            th
                font-weight: bold
                color: #333
                text-align: center
                background-color: #999999
                border: 1px solid #000000
                padding: 0.5em
            td
                border: 1px solid #000000
                padding: 5px