【学习笔记】搭建github.io博客的总结（二）

2019-08-13 88 min

只有当你认真的去做一件事情的时候，才会发现自己的灵魂，和灵魂的深处。

前言

从 8 月 13 号写起，本来想简单的总结一下自己搭建 github.io 个人博客的过程，其实一天基本就写得差不多了，可惜的是突然写上瘾了，反复看自己写得东西，想着这里要加一点那里要加一点，有点恐怖，如今这已经不仅仅是一个搭建 github.io 的过程的回顾了，中间 NexT 主题那部分，有点中文口语版的官方文档的感觉了。

过程

搭建 github.io 的过程总结起来大概为五步吧。

搭建 Hexo 环境→配置 NexT 主题→创建 github.io 仓库→发布 github.io→更新 github.io

**这里与平时开发到部署云的步骤十分相似。**搭建Hexo环境，就像我们平时搭建开发环境，当然这里也有个选择的过程，平时的开发我们可以选择Java，C#等等，这里也一样，我们可以选择jekyll来搭建，随后我们可以在这个基础上选择主题进行配置，也就像平时的选择框架让后进行开发，开发好后，我们就可以选择租赁云空间了，而这里只要创建github.io库即可，随后将写好的应用程序发布到云空间，对应的这里上传到github.io，最后，我们更新他，即更新配置还有博客，而平时的应用可能就是修补漏洞，添加新功能，更新配置等等，想想还是特别相似。

搭建开发环境→选择开发框架并开发→租赁云空间→发布部署到云空间→维护应用程序

开始总结第一步，搭建开发环境，而我这里选择 Node.js Hexo 来做，接下来总结搭建 Hexo 环境。

搭建 Hexo 环境

下载安装 Node.js

Node.js 官方下载地址安装教程

安装 Hexo

Hexo 官网（注：Hexo 官网右上角位置可以切换语言）

$ npm install hexo-cli -g  	#安装Hexo   	
$ hexo init blog		#初始化Hexo到blog文件夹
$ cd blog			#转到blog文件夹
$ npm install			#下载引用所有依赖的包
$ hexo server			#启动服务器，访问地址：http://localhost:4000

配置 Hexo

Hexo 基础配置

详细的官方文档配置部分**（注：右上角位置可以切换语言）** 这里主要会使用到的有Site（网站）、Pagination（分页）、Extensions（扩展）这三个部分，Site 部分包括网站的一些基本信息，包括标题、副标题、描述、语言等等，而 Pagination 部分用于设置首页每一页显示的文章数目，Extensions 部分的话包括设置主题，设置部署发布到 GitHub 等。

Hexo 命令

详细的官方文档配置部分**（注：右上角位置可以切换语言）** 最常用的命令有new、generate、server、deploy、clean。

hexo new（可简写为hexo n）用于新建文章 (hexo n post md文件名，在source/_post/文件夹中生成 md 文件)、新建页面（hexo n page 文件名，这里的文件名最后会生成一个文件夹里面有一个 index.md 文件）。详细用法**（注：右上角位置可以切换语言）**
hexo generate（可简写为hexo g）用于生成静态页面。详细用法**（注：右上角位置可以切换语言）**
hexo server（可简写为hexo s）用于启动本地服务器，默认用http://localhost:4000访问。高级用法**（注：右上角位置可以切换语言）**
hexo clean（可简写为hexo cl）用于清空public文件夹其中包括生成的静态页面等等文件，即清空hexo generate生成的文件。
hexo deploy（可简写为hexo d）用于将网页发布到服务器，包括 Git、Heroku、Netlify、Rsync、OpenShift、FTPSync、SFTP 等其他发布方法，这里直接将public文件夹发布到服务器即可。详细用法**（注：右上角位置可以切换语言）**

Hexo 安装主题

Hexo 默认主题为landscape，我们可以进入Hexo 官方的主题集去选择自己喜欢的主题，一般点击我们喜欢的主题会进入对应的 GitHub 仓库，在那里一般在 README 中会有详细的介绍包括如何下载，如何配置等等，这里我选择的是NexT主题，下面来介绍 NexT 主题。

配置 NexT 主题

NexT 官方网站 NexT GitHub 仓库这里的 README 文档包括三种语言：英语、中文、俄语。中文 REAMDE 在此当然 README 中内容不多，去官网更好，但是官网好像没有多语言转换，没关系，看下面的内容吧。

对了，还有一点，下面除了安装 NexT 主题之外，其他的功能性配置可以按需配置，及需要哪个功能就看那部分。

NexT 主题安装

下载 NexT 主题

方法一：克隆 NexT 主题 GitHub 仓库内容到 themes/next 文件夹

$ cd blog								#转到Hexo工程目录下
$ git clone https://github.com/theme-next/hexo-theme-next themes/next	#克隆NexT主题GitHub仓库

方法二：下载压缩包解压到相应目录

下载NexT 主题 GitHub 仓库的zip包将其解压到themes文件夹下，改仓库名文件夹名字为next。这种方法适合没有下载 Git 只下载了 GitHub Desktop 的用户。GitHub Desktop 下载地址 Git 下载链接

激活 NexT

修改 Hexo 工程目录下_config.yml文件的theme

theme: next

NexT 基础配置

设置一种页面显示方案

NexT 显示有四种方案，分别为Muse（预览）、Mist（预览）、Pisces（预览）、Gemini（预览）可以自行选择一种，其中Pisces与Gemini看起来时一样的，不同在于Gemini的块是有阴影的，而Pisces没有。 设置方法，找到 NexT 的配置文件_config.yml中的Schemes,去掉喜欢的显示方案前面的#，注意：默认显示方案为Muse，如果喜欢其他方案的话要将Muse前面的#加上。

# Schemes
#scheme: Muse
#scheme: Mist
scheme: Pisces  # 在这里我选择了 Pisces。
#scheme: Gemini

设置语言

NexT 支持十几种语言，请看下表，如果设置后，重启运行没有效果，请查看next/languages文件夹是否有对应文件名的yml文件，如：简体中文对应在next/languages文件夹下会有zh-CN.yml的文件。 注意：这里是要在Hexo工程下的_config.yml文件中修改。

language: en

可以对应下面这个表格来设置。

语言	设置代码
简体中文	zh-CN
繁体中文	zh-TW
繁体中文 - 香港	zh-HK
荷兰语	nl
英语	en
法语	fr
德语	de
印度尼西亚语	id
意大利语	it
日语	ja
韩语	ko
波斯语	fa
葡萄牙语	pt
葡萄牙语 - 巴西	pt-BR
俄语	ru
西班牙语	es
土耳其语	tr
乌克兰语	uk
越南语	vi

设置菜单显示内容

设置菜单中显示标签页、分类页、关于页等等页面。设置形式是Key: /link/ || icon，这里的Key是显示在菜单的名称，这里原有的是英文的，但是显示时变成对应的语言，比如说简体中文，home就会显示为首页，而在自定义页面设置是使用自己语言就好了，比如下面的朋友，（自定义页面请查看），随后是link（链接）可以放 URL 链接不限http、https，如下面的网页: https://bingqiangzhou.cn || heartbeat，还有就是可以设置在hexo/source/目录下的文件夹，最后一个参数icon，是图标的名称，这个名称可以在Font Awesome 图标字体库和 CSS 框架的网站去找，有特别多的图标，都可以任意设置。

menu:
  home: / || home
  #about: /about/ || user
  #tags: /tags/ || tags
  #categories: /categories/ || th
  archives: /archives/ || archive
  #schedule: /schedule/ || calendar
  #sitemap: /sitemap.xml || sitemap
  #commonweal: /404/ || heartbeat
  朋友: /friends/ || heart
  网页: https://bingqiangzhou.cn || heartbeat

这里还有两个菜单相关的设置。

menu_settings:
  icons: true		# 菜单是否显示图标，默认是显示。
  badges: false		# 菜单是否显示菜单对应页面有多少内容，这里默认是不显示。

设置badges就像手机 app 在图标上提示有多少条消息的数字，这里设置的就是是否显示这个数字，即如果设置了 10 个分类，在分类的菜单就会显示数字 10。

设置网页图标 Favicon

这里的图标是网页标题前的图标，android_manifest与ms_browserconfig这两项设置没去了解，在这里就先过了。 注意，这里的images文件夹是在next/source下的，放在hexo/source/可能会被next/source下的文件重写，不重名不会有问题

favicon:
  small: /images/logo.jpg				# 小图标图片路径
  medium: /images/logo.jpg				# 中等大小图标路径
  apple_touch_icon: /images/logo.jpg			# 这项不太清楚是什么情况下显示
  safari_pinned_tab: /images/logo.jpg			# 在我们收藏到 Favorites 书签了，会显示在 Safair 浏览器首页的图标的路径
  #android_manifest: /images/manifest.json
  #ms_browserconfig: /images/browserconfig.xml

设置站点概况的头像 Avatar

可以设置头像图片、圆角还是方角等等。

avatar: 
  url: /images/logo.jpg		# 图片的路径，可以是项目内路径，也可以是网络路径（http/https 等等）
  rounded: false		# 设置头像是否圆形显示，就像 QQ 显示的头像是圆形的，而微信显示的方形的，
  rotated: false		# 开启 `rotated` 设置的话，当我们把鼠标放在头像上的时候，头像会旋转一圈，拿开鼠标点之后还会旋转一圈。

设置站点概况作者与描述

注意：这里是要在Hexo工程下的_config.yml文件中修改。

title: 惟愿此心无怨尤.				# 网页标题
subtitle: TO BE, TO UP.				# 子标题
description: 我的微信公众号：小周的小粥		# 站点描述
keywords: Blogs					# 用于搜索引擎优化的搜索关键词
author: Bingqiang Zhou				# 作者
language: zh-CN					# 站点语言
timezone: Asia/Shanghai				# 时区

设置语言代码请看设置时区代码请看

NexT 主题设置（基础）

这一部分主要是 NexT 相对基础的设置。

控制台提醒

每次运行都自动检查是否有新的版本发布了，不建议开启，拖慢速度。

reminder: false

缓存支持

缓存生成的内容，具体不太清楚，默认是开启的，就让他开启吧。

cache:
  enable: true
	```
#### [最小化支持](https://theme-next.org/docs/theme-settings/#Minify-Support) ####
在生成（`hexo generate`）之后，生成的一些不重要的文件将被删除，建议打开。
```yaml 
minify: true

自定义风格支持

使用自己写的页面、风格来显示内容，包括头部内容，以及页面头部，侧边栏等等整个页面的页面布局，只需要把自己写的源代码文件路径设置在这里就行，官方建议将自己写的源代码文件放在hexo/source/_data文件夹内。

# For example, you want to put your custom styles file
# outside theme directory in root `source/_data`, set
# `styles: source/_data/styles.styl`
custom_file_path:
  #head: source/_data/head.swig
  #header: source/_data/header.swig
  #sidebar: source/_data/sidebar.swig
  #postMeta: source/_data/post-meta.swig
  #postBodyEnd: source/_data/post-body-end.swig
  #footer: source/_data/footer.swig
  #bodyEnd: source/_data/body-end.swig
  #variable: source/_data/variables.styl
  #mixin: source/_data/mixins.styl
  #style: source/_data/styles.styl

RSS 订阅支持

什么是 RSS？ RSS（Really Simple Syndication，简易信息聚合）是一种描述和同步网站内容的格式。你可以认为是一种定制个性化推送信息的服务。它能解决你漫无目的浏览网页的问题。它不会过时，信息越是过剩，它的意义也越加彰显。 为什么需要 RSS？ 网络上充斥着大量的信息垃圾，我的体会是：每天摄入了太多我根本不关心的信息。我希望让我关注的信息主动来找我，且这些信息都是我需要的，这就是 RSS 的意义。

每个网站网页都可以生成 RSS 链接，生成 RSS 链接的方式也有很多，想玩一下的可以自己搜一搜了解玩一下，我推荐看一下知乎这个问题的回答你必读的 RSS 订阅源有哪些？ - 程引的回答 - 知乎，上面对 RSS 描述的引用也是来自这里。看一下帖子，文章之后我自己也是玩了一下，暂时还没有找到想订阅的内容，想想这个确实特别好，就像现在的应用都会有关注，但只限于在该平台的用户，而 RRS 更广，可以订阅一切网站，只要有 feed 的链接，使用 RSS 阅读器就可以订阅。（如果网站没有提供 RSS 订阅源，请看这里任意网站支持 RSS 如何订阅没有 RSS 输出的网站），RSS 阅读器也有很多种，你可以看下哪个 RSS 阅读器好？- 知乎，好了，下面介绍官方推荐的使用的方法。

首先，我们需要下载安装hexo-generator-feed包，GitHub 仓库。

$ npm install hexo-generator-feed --save

随后添加配置到hexo/_config.yml就搞定了，可以直接复制下面一段到hexo/_config.yml就可以。

feed:
  type: atom				# feed 的类型，可以选择 atom/rss2
  path: atom.xml			# feed 的路径，默认是 atom.xml/rss2.xml
  limit: 20				# 在 feed 里的最大文章数，填 0 或者 false 表示显示所有文章
  hub:					# PubSubHubbub（一种互联网上分布式发布/订阅通信的开放协议）的链接，默认留空。
  content:				# （选填项），默认留空，如果设置为 true，会显示文章所有内容在 feed
  content_limit: 140			# （选填项），默认为 140，这里是设置一篇文章在 feed 显示的最大字数，填上 false 时不显示文章内容。
  content_limit_delim: ' '		# （选填项）填写一个字符，显示内容剪切到在未达到限制字数前的最后一个设置的字符，默认不填
  order_by: -date			# 文章在 feed 的排序，默认为日期，还有其他什么排序方式不太清楚
  icon: icon.png			# （选填项）feed 的图标，这里是默认图标

另一种方法配置方法 如何我们不用上面的方式生成 feed，用了其他方法，我们只需要将 feed 链接填写到next/_config.yml中的rss即可。

rss: https://bingqiangzhou.github.io/atom.xml

注意，这里是是在next/_config.yml，如果是用第一种方式配置这里不需要管。

知识共享支持

在侧边栏显示创作共用许可证，说明创作、分享等权限，大体可以看一下这篇文章了解一下。谈谈创作共用许可证（Creative Commons licenses） 创作共用许可证的种类

署名（by license）
署名 - 非商业用途（by-nc license）
署名 - 禁止演绎（by-nd license）
署名 - 非商业用途 - 禁止演绎（by-nc-nd license）
署名 - 非商业用途 - 相同方式共享（by-nc-sa license）
署名 - 相同方式共享（by-sa license）

creative_commons:
  license: by-nc-sa		# 这里对应的填上面的六种创作共用许可证的种类之一。
  sidebar: true			# 是否在侧边栏显示创作共用许可证
  post: true			# 是否在文章最后显示创作共用许可证
  language: deed.zh		# 设置证书显示的语言，注意这里需要加 `deed.`

文本对齐设置

设置博客文章的文本对齐方式，可以设置桌面显示下和移动设备显示下的文本对齐方式，这里建议维持默认的justify。

text_align:
  desktop: justify
  mobile: justify

对齐方式有 8 种

对齐方式	说明
start	与`left`类似，不同的是文本显示方式在从左到右和从右到左时有不同
end	与`right`类似，不同的是文本显示方式在从左到右和从右到左时有不同
left	在一行中居左
right	在一行中居右
center	在一行中居中
justify	适应性对齐，除了最后一行外，文本的间距使其左右边缘与行框的左右边缘对齐
justify-all	与`justify`类似，但是最后一行强制适应性对齐。
match-parent	类似于继承，但值的开始和结束是根据父级的方向计算的，并由适当的左值或右值替换。

移动设备适配

这里可以将mobile_layout_economy设置打开，从而减小缩进的填充与编辑的大小。

mobile_layout_economy: true

设置头部面板在安卓系统的 Chrome 浏览器下的颜色，默认是深黑色（#222）。

android_chrome_color: "#222"

Rainbow Safari 支持

这个功能是在 Safair 浏览器中呈现一个地址栏自动渐变颜色的效果，具体效果是当我们浏览文章时，最上面的地址栏会自动随时间渐变颜色，五颜六色的就像彩虹一样。附上Rainbow Safari 的 GitHub 仓库链接，已经好几年没更新了。

safari_rainbow: true

自定义滑动条

只支持 webkit-based 的浏览器，其他方面官方没有更多说明，个人建议保持默认设置，不要更改。

custom_scrollbar: true

自定义 Logo

自定义 Logo 在Mist风格中不支持，个人建议是直接替代next/source/images的 logo 文件就好了，这里也不用设置了。

custom_logo: /uploads/custom-logo.jpg	# logo 的路径

代码块风格设置

代码块有五种风格，还可以加复制按钮，设置复制按钮风格。

codeblock:
  highlight_theme: night eighties		# 高亮代码块的主题风格，有五种选择，请看下面表格
  copy_button:		
    enable: true				# 是否使用复制按钮
    show_result: true				# 实现复制结果，一般是 `复制成功`
    style:					# 复制按钮的风格，有三种风格，默认是不填，是 default

代码块的五种风格

normal	night	night eighties	night blue	night bright

具体的颜色十六进制调色板

复制按钮的三种风格 default：默认风格，普通的按钮。 flat：平面的那种风格，可以自己试一下。 mac：我当前使用的风格的样子。

关注 GitHub 横幅

设置让读者关注我们的 GitHub 的横幅在页面右上角，点击会跳到我们的 GitHub 的首页。

github_banner:
  enable: true					# 是否启用关注 GitHub 横幅
  permalink: https://github.com/yourname	# GitHub 链接，如：https://github.com/BingqiangZhou
  title: Follow me on GitHub			# 鼠标放在横幅上显示的话

自定义字体

自定义字体，我们可以设置五部分的字体，包括：

参数	说明
`global`	全局的字体设置，这里是设置`<body>`标签内的字体
`title`	站点标题的字体设置，这里是对（`.site-title`）CSS 类的字体设置
`headings`	文章标题的字体设置，这里是对`<h1>`-`<h6>`标签的字体设置
`posts`	博客文章的字体设置，这里是对（`.post-body`）CSS 类的字体设置
`codes`	代码块的字体设置，这里是对`<code>`、`<pre>`标签的字体设置

每个部分的字体设置有包括了三个参数，包括：

参数	说明
`external`	拓展，是否使用`host`中设置的设置的 URI 来加载字体集
`family`	字体集的名字，不包括引号，如`Times New Roman`
`size`	字体大小，以`em`为单位，默认为`1`（16px）

font:
  enable: true		# 是否开启自定义字体功能
  host:		# 字体主机的 Uri，只需要填域名或者 IP，这里默认不填为 fonts.googleapis.com
  
  global:			# 全局的字体设置，这里是设置 `<body>` 标签内的字体
    external: true
    family: Monda
    size: 1.125

  title:			# 站点标题的字体设置，这里是对（`.site-title`）CSS 类的字体设置
    external: true
    family: Lobster Two
    size:

  headings:			# 文章标题的字体设置，这里是对 `<h1>`-`<h6>` 标签的字体设置
    external: true
    family: Amita
    size:

  posts:			# 博客文章的字体设置，这里是对（`.post-body`）CSS 类的字体设置
    external: true
    family: Roboto Slab

  codes:			# 代码块的字体设置，这里是对 `<code>`、`<pre>` 标签的字体设置
    external: true
    family: PT Mono

注意这里默认的主机（host）为//fonts.googleapis.com（注意配置host的时候需要再前面加两斜杠//），我们可能无法访问谷歌的字体库，NexT 官方文档提到了这点，如果字体失效了，非代码的字体使用"PingFang SC", "Microsoft YaHei", sans-serif，代码的字体使用consolas, Menlo, "PingFang SC", "Microsoft YaHei", monospace，NexT 还提供了一种方式，我们可以设置自定义字体公共库的主机，但是我没有找到可以的。这里需要更深的研究一下，如何处理？我找到了设置字体的这部分代码，在themes/next/scripts/helpers/font.js（见下面的代码），可以自行阅读代码，修改链接为本地代码，甚至可以直接就return（返回）自己所要的字体的 URL，甚至是设置本地的地址，该段代码在themes/next/layout/_partials/head/head.swig中执行，我们可以查找next_font，找到用来执行下面的next_font方法的这一行代码。我们也可以直接在这里放字体的link，这种方法相对简单吧，改JavaScript代码的话，虽然灵活度高，但是难度也大。

/* global hexo */

'use strict';

hexo.extend.helper.register('next_font', () => {
  var fontConfig = hexo.theme.config.font;

  if (!fontConfig || !fontConfig.enable) {
    return '';
  }

  var fontDisplay = '&display=swap';
  var fontSubset = '&subset=latin,latin-ext';
  var fontStyles = ':300,300italic,400,400italic,700,700italic';
  var fontHost = fontConfig.host || '//fonts.googleapis.com';

  //Get a font list from fontConfig
  var fontFamilies = ['global', 'title', 'headings', 'posts', 'codes'].map(item => {
    if (fontConfig[item] && fontConfig[item].family && fontConfig[item].external) {
      return fontConfig[item].family + fontStyles;
    }
    return '';
  });

  fontFamilies = fontFamilies.filter(item => item !== '');
  fontFamilies = Array.from(new Set(fontFamilies));
  fontFamilies = fontFamilies.join('|');

  // Merge extra parameters to the final processed font string
  return fontFamilies ? `<link rel="stylesheet" href="${fontHost}/css?family=${fontFamilies.concat(fontDisplay, fontSubset)}">` : '';
});

动画效果

动态效果有很多，支持设置动态效果有博客文章打开的动画以及打开时侧边栏的动画。 NexT 实现这些动态效果用的是Velocity.js。 Velocity.js 官方文档 Velocity.js 的 GitHub 仓库

motion:
  enable: true				# 是否开启动画效果
  async: false				# 是否异步加载动画
  transition:
    post_block: fadeIn			# 博客文章的标题块的加载动画
    post_header: slideDownIn		# 博客文章的头部的加载动画
    post_body: slideDownIn		# 博客文章的内容的加载动画
    coll_header: slideLeftIn		# **我猜**可能是塌陷后的头菜单的加载动画
    sidebar: slideUpIn			# 侧边栏加载动画，只在 `Pisces`和`Gemini` 风格中有效

所有动画效果的变量如下

1	2	3	4	5	6
fadeIn	fadeOut	flipXIn	flipXOut	flipYIn	flipYOut
flipBounceXIn	flipBounceXOut	flipBounceYIn	flipBounceYOut	swoopIn	swoopOut
whirlIn	whirlOut	shrinkIn	shrinkOut	expandIn	expandOut
bounceIn	bounceOut	bounceUpIn	bounceUpOut	bounceDownIn	bounceDownOut
bounceLeftIn	bounceLeftOut	bounceRightIn	bounceRightOut	slideUpIn	slideUpOut
slideDownIn	slideDownOut	slideLeftIn	slideLeftOut	slideRightIn	slideRightOut
slideUpBigIn	slideUpBigOut	slideDownBigIn	slideDownBigOut	slideLeftBigIn	slideLeftBigOut
slideRightBigIn	slideRightBigOut	perspectiveUpIn	perspectiveUpOut	perspectiveDownIn	perspectiveDownOut
perspectiveLeftIn	perspectiveLeftOut	perspectiveRightIn	perspectiveRightOut

这里不再单个描述各个效果了，我们可以在这里体验这些动态效果。

NexT 主题设置（站点页脚）

这一部分主要是站点的页脚相关的设置。

站点开始的年份`since`

footer:
  since: 2015		#站点开始年份，如果设置一个过去的年份就会显示，过去年份 - 今年，如 2015-2018
			#如果不设置或者设置成今年年份则显示今年年份

站点开始年份与版权信息之间的图标`icon`

footer:
  icon:			#在站点开始年份与版权信息之间的图标，默认为 Font Awesome 库的 user 图标
    name: user		#Font Awesome 库的图标名称，默认为 user
    animated: false	#是否设置图标为动画，设置为 true，图标会动，还蛮有意思的，特别是图标设置成 heart 的时候
    color: "#808080"	#设置图标的颜色，如果设置图标为 heart，建议改变颜色为红色"#ff0000"

版权信息`copyright`

footer:
  copyright:		#版权信息，如果不设置，则显示在 `hexo/_config.yml`中设置的作者`author` 信息

Hexo 授权信息 `powered`，NexT 主题授权信息`theme`

footer:
  powered:			
    enable: true	#是否显示带有链接的`Powered by Hexo`,中文会显示为` 由 Hexo 强力驱动`
    version: true	#是否显示 Hexo 的版本号 `vX.X.X`

  theme:
    enable: true	#是否显示带有链接的 NexT 主题信息`Theme - NexT.scheme`，中文会显示成` 主题 - NexT.scheme`
    version: true	#是否显示 NexT 主题的版本号 `vX.X.X`

备案信息`beian`

footer:
  beian:		#专为中国用户提供的 ICP 备案信息显示功能 
    enable: false	#是否显示 ICP 备案信息显示
    icp:		#ICP 备案号显示在站点开始年份之前，并带有工信部备案管理系统链接 http://www.beian.miit.gov.cn

这里附上 Font Awesome 库的图标信息链接一，链接二。

NexT 主题设置（搜索引擎优化 SEO）

这一部分主要是搜索引擎优化相关的设置。

SEO 基础设置

NexT 提供了一些基础的搜索引擎优化的设置，包括：第一个基础设置是：对于百度搜索引擎，缓存并重写我们的网站，提供一个网页快照给手机用户。官方大概是这么说，不塌熟悉是怎么一回事，默认是false，即打开这一项功能。

disable_baidu_transformation: false

第二个基础设置是规范链接标签。默认是true，但是还需要在hexo/_config.yml中设置了 URL 链接才行，如：url: https://bingqiangzhou.github.io，官方提供了一个谷歌的链接来说明为类似网页或重复网页指定规范网页，对 SEO 不太懂，这里引用链接文章中的两段话吧。

如果您的某一个网页可通过多个网址访问，或者您的不同网页包含类似内容（例如，某个网页既有移动版，又有桌面版），那么 Google 会将这些网页视为同一个网页的重复版本。Google 会选择一个网址作为规范版本并抓取该网址，而将所有其他网址视为重复网址并降低对这些网址的抓取频率。如果您未明确告知 Google 哪个网址是规范网址，Google 就会替您做出选择，或会将这两个版本视为同等重要，这可能会导致出现一些不当的行为。

canonical: true

第三个基础设置是SEO。默认是true，官方的描述这项功能是它会改变站点的子标题（将作为主要的站点描述）和所有博客文章/页面的标题的层次结构，从而更好的优化 SEO，这里依旧不是那么懂，跳过了。

seo: true

第四个基础设置是首页显示子标题。默认为 false，如果开启这项功能，他会在首页的标题上加上子标题的显示，如惟愿此心无怨尤 - TO BE, TO UP.，不开启，则显示标题，如惟愿此心无怨尤，这个还是很好理解的，对了，需要注意的是要在hexo/_config.yml设置了子标题才行，如subtitle: TO BE, TO UP.。

index_with_subtitle: false

外部 URL 设置

开启这项功能，会自动为外部链接加上 Base64 加解和解密。默认为 false，开启之后，外部链接<a>标签被下面格式的<span>标签代替，将 Base64 加密的 URL 放在data-url，而真正的 URL 放在title，如下所示。

不开启时外部链接的 HTML 代码

<a href="https://theme-next.org/docs/theme-settings/seo#ExtURL" target="_blank" rel="noopener">外部 URL 设置</a>

开启后的外部链接的 HTML 代码

<span class="exturl" data-url="aHR0cHM6Ly90aGVtZS1uZXh0Lm9yZy9kb2NzL3RoZW1lLXNldHRpbmdzL3NlbyNFeHRVUkw=" 
title="https://theme-next.org/docs/theme-settings/seo#ExtURL">
	外部 URL
	<i class="fa fa-external-link">
	</i>
</span>

这有什么用呢？ 官方的说法是搜索引擎对<a>标签有很高的优先级，虽然我们可以设置HTML<a>标签的 rel 属性为external / nofollow / noopener / noreferrer等其他值来规定当前文档与被链接文档之间的关系，但是外部链接在我们的站点还是会被建立索引，也就是说还是会被爬虫爬取，但是爬虫爬取不了 JavaScript，所以我们用 JavaScript 打开新的链接，像这种反向链接（backlinks）就不会被监控到。总而言之，就是不然搜索引擎搜索监控到这些外部链接，这里很有意思，官方给出了一个提示，说放钓鱼链接是不被允许的。

exturl: false

网站站长工具

官方说到了四个搜索引擎的站长工具，分别是谷歌、必应、Yandex（不知道中文名叫什么，是一个俄罗斯的搜索引擎）、百度，站长工具有什么用呢，官方说用来提交站点地图，当然这只是一部分的功能，还包括当前网站的状态是否正常，搜索分析的数据，网站地图的数据等等，还能投放广告在网站上等等在这里不一一列举了。

谷歌站长工具

首先他需要验证所有权，有如下五种方式。

验证方法	说明
HTML 文件	将 HTML 文件上传至您的网站
HTML 标记	向您网站的首页添加元标记
Google Analytics（分析）	使用您的 Google Analytics（分析）帐号
Google Tag Manager	使用您的 Google 跟踪代码管理器帐号
域名提供商	将 DNS 记录与 Google 关联

这里官方建议使用第二种验证方法。

复制下面的元标记，并将其粘贴至您网站的首页中。它应该位于第一个部分之前的部分中。

<meta name="google-site-verification" content="XXXXXXXXXXXXXXXXXX" />

点击下面的验证按钮。为了保持已完成验证的状态，请不要移除该元标记（即使是在成功通过验证后）。

以上是谷歌官方的提示，而我们只需要在将上面content后面的内容加到next/_config.yml的google_site_verification就好了。

google_site_verification: XXXXXXXXXXXXXXXXXX	#填写验证所有权生成的 `meta`标签的`content` 属性的内容

到这里谷歌站长工具在 NexT 方面的配置就做好了，我们在谷歌站长工具中还需要做的是添加并提交站点地图，这里就不细说了，给一个链接吧。怎么使用 google 站长工具？

必应站长工具

这里就不细说了，与上面的谷歌站长工具配置类似。必应站长工具的帮助文档

bing_site_verification: XXXXXXXXXXXXXXXXXX	#填写验证所有权生成的 `meta`标签的`content` 属性的内容

Yandex 站长工具

这个俄罗斯站长工具基本是不会用到了，网站都是俄语的，这里就象征性的过一下吧。

yandex_site_verification: XXXXXXXXXXXXXXXXXX	#填写验证所有权生成的 `meta`标签的`content` 属性的内容

百度站长工具

百度站长工具可能会比较常用，但是，注册有点麻烦，我就略过了，还需要身份证照片和手持身份证照片，下面列出各个主体类型注册所需要的资料，然后附上百度站长工具的使用帮助，就象征性的过了吧。

主体类型	说明	注册所需资料
个人	适合个人身份申请，如垂直领域的专家、意见领袖、评论家、自媒体人士及站长	运营者手持身份证照片、运营者身份证
媒体	适合有媒体资质的网站、报刊杂志、电台、电视台等申请	组织机构代码证/营业执照、运营者手持身份证照片、运营者身份证
企业	适合公司、分支机构类型的企业组织申请	营业执照、运营者手持身份证照片、运营者身份证
政府	适合政府机构、事业单位、参公管理的社团组织等申请	组织机构代码证、运营者手持身份证照片、运营者身份证、公函（加盖公章）
其他组织	适合公共场馆、公益机构、学校、社团、民间组织等机构团体申请	组织机构代码证、运营者手持身份证照片、运营者身份证

baidu_site_verification: XXXXXXXXXXXXXXXXXX	#填写验证所有权生成的 `meta`标签的`content` 属性的内容

百度推送

NexT 还支持一个将博客文章 URL 自动推送给百度的功能，具体是怎样的就不太清楚了，应该是有利于的搜索引擎优化的。默认配置是false，有需要的可以打开，配置方法如下。

# Enable baidu push so that the blog will push the url to baidu automatically which is very helpful for SEO.
baidu_push: false

SEO 相关文章

搜索引擎优化这部分就到这里了，下面给出一些 SEO 相关的文章，有兴趣可以看一看。极客学院 - SEO 教程 SEO 如何入门？ - 知乎搜索引擎优化（SEO） - 知乎 75 个可执行的 SEO 小技巧（绝对管用）一个 SEO 做的比较好的个人博客 may90.com

NexT 主题设置（自定义页面）

这一部分主要是自定义页面相关的设置。

自定义页面设置

自定义页面设置分为三步，如下：第一步，转到 hexo 的工程目录下，创建一个新的自定义页面，名称custom_name自定，在这里，执行下面的命令之后将会在hexo/source目录下生成一个自定义名称custom_name的文件夹，在文件夹中存有一个index.md文件。

$ cd your-hexo-site			#转到Hexo的工程目录下
$ hexo new page custom_name	#创建一个自定义页面

第二步，在custom_name/index.md文件中书写内容，头部信息，遵循Front-matter格式，Front-matter 是在 YAML 和 JSON 文件最开头的块，用于配置和设置我们的书写，具体写法可以查看链接。

---
title: Hello World
date: 2013/7/13 20:46:25
---

最后一步修改菜单信息，请查看之前的内容 NexT 基础配置 - 设置菜单显示内容进行配置。

menu:
  home: / || home
  archives: /archives/ || archive
  about: /about/ || user
  custom_name: /custom_name/ || icon_name	#设置自定义页面的名称，路径，显示的图标

添加标签页

添加标签页与添加自定义页面类似，只不过，标签页属于 NexT 带有的页面，只需要配置即可，会自动生成内容。添加标签页的大体步骤分为三步，首先执行下面的命令添加新的页面。

$ cd your-hexo-site		#转到Hexo的工程目录下
$ hexo new page tags		#创建标签页面

执行完以上命令之后，同样他会在hexo/source目录下生成一个自定义名称tags的文件夹，在文件夹中存有一个index.md文件，文件内容如下：

---
title: Tags
date: 2014-12-22 12:39:04
type: "tags"		#设置 `type` 为`tags`，注意有英文引号
---

最后一步就是修改菜单信息，可以查看之前的内容 NexT 基础配置 - 设置菜单显示内容进行配置。

menu:
  home: / || home
  archives: /archives/ || archive
  tags: /tags/ || tags

那么如何为文章添加标签呢？ 依旧是遵循Front-matter格式，在Markdown文件中编辑头部信息，为当前书写的文章添加标签，有两种不同的写法。第一种写法：使用[]将所有标签括起来，标签之间用,加空格隔开，需要注意的是tags:等等属性的冒号之后，也是需要有一个空格的。

---
title: Tags Testing Article
tags: [Testing, Another Tag]
---

第二种写法：类似一种Markdown语法中的无序列表的写法。

---
title: Tags Testing Article
tags:
  - Testing
  - Another Tag
---

添加标签云

这里的标签云的设置是设置标签页中标签列表标签显示的格式（风格），具体配置项如下。

tagcloud:
  enable: true		#启用标签云

  #这里的 min，max 是标签列表会根据标签被使用的次数而显示不同的字体大小的字体最小、最大值
  min: 12 		#这里是最小的标签字体大小，单位是 `px`
  max: 30 		#这里是最大的标签字体大小，单位是 `px`

  #这里的 start，end 是标签列表会根据标签被使用的次数而显示不同的颜色的颜色区间的开始和结束
  start: '#ccc'		#显示颜色区间的开始，支持十六进制、rgba、hsla、颜色关键词
  end: '#111'		#显示颜色区间的末端，支持十六进制、rgba、hsla、颜色关键词
	
  amount: 200 		#最多显示多少个标签

使用 Hexo 标签云插件 hexo-tag-cloud 这个标签云相对酷一点吧，下面是官方效果图（其实也没有那么那么炫酷，包含中间那一块），可以到我的标签页看效果。 hexo-tag-cloud 官方效果图，如果未显示，可以去我的标签页

附上官方中文说明在这份官方的说明中，告诉我们将标签云放置在侧边栏，而不是给我们看到的效果，我们可以用他说的方式放在侧边栏，而在这里，我想用我的方法来设置，放在标签页面，并在配置文件中配置显示的高度和宽度（发现不设置高度宽度不行，显示会模糊，或者是显示区域太小）。

首先我们下载安装 hexo-tag-cloud 包，注意下载安装好之后，hexo cl清理一下项目，之后再生成。

$ npm install hexo-tag-cloud --save

接下来，修改代码，我们先创建一个文件夹_myself在themes/next/layout/目录下，然后在这个目录下创建hexo-tag-cloud.swig文件，内容如下，（这里的文件夹名称和文件名都可以自拟，但是需要与代码目录对应）。

{%- if site.tags.length > 1 %}
  <script type="text/javascript" charset="utf-8" src="{{ url_for('/js/tagcloud.js') }}"></script>
  <script type="text/javascript" charset="utf-8" src="{{ url_for('/js/tagcanvas.js') }}"></script>
  <div class="widget-wrap">
    {#<h3 class="widget-title">标签云</h3>#}
    <div id="myCanvasContainer" class="widget tagcloud" style="margin-top:-50px">
      <canvas id="resCanvas" height="{{ theme.hexo_tag_cloud.height }}" width="{{ theme.hexo_tag_cloud.width }}">
        {{ list_tags() }}
      </canvas>
    </div>
  </div>
{%- endif %}

随后再themes/next/layout/page.swig文件中查找tag-cloud，在 CSS class 为tag-cloud的div中插入如下代码。

{%- if theme.hexo_tag_cloud.enable %}
  {# 对应自建文件的目录 #}
  {% include '_myself/hexo-tag-cloud.swig' %} 
{%- endif %}

最后在next/_config.yml添加配置代码，如下。

hexo_tag_cloud:
  enable: true		#是否启用 hexo-tag-cloud
  width: 375		#标签云区域的宽度
  height: 500		#标签云区域的高度

到这里，我们就完成了hexo-tag-cloud 插件的配置可以启动本地服务器查看效果了，这里你可以自由的按照自己的想法去改改代码，尝试一下吧。

添加分类页

这里添加分类页面与添加标签页面基本一致，只需要将命令和配置中的tags换成categories，这里不再赘述，但是在为文章添加分类的时候还是有所不同的。

那么为文章添加分类和添加标签有什么不同呢？ 具体不同是标签与标签之间没有父与子的关系，都是同级别的，而分类用父与子的关系，一个分类可以被另一个分类包含。从上面添加标签的第一种写法和第二种写法来讲，只能说明是一个等级向下递减的分类，也就是说以下两种写法都代表着Sports 是 Baseball 的父分类，文章则属于 Baseball 分类。

categories:			#这里 Sports 是 Baseball 的父分类，而文章属于 Baseball 分类
- Sports
- Baseball

categories:			#这里 Sports 是 Baseball 的父分类，而文章属于 Baseball 分类
- [Sports, Baseball]

那么文章属于多个分类如何配置呢？ 文章处于多个分类的配置方法如下，以下配置说明文章属于四个分类下，第一个是 Sports 分类下的 Baseball 类中，第二个则是 MLB 分类下的 American League 分类，American League 分类下的 Boston Red Sox 类下，其他的分类分析类似。

categories:
- [Sports, Baseball]
- [MLB, American League, Boston Red Sox]
- [MLB, American League, New York Yankees]
- Rivalries

添加谷歌日历页面

建议跳过这里吧，这部分接入谷歌日历，需要申请谷歌日历 API，用的人也少，毕竟日历的用处没有那么大，下面还是大概说一下吧。依旧是熟悉的第一步，创建页面。

$ cd your-hexo-site			#转到Hexo的工程目录下
$ hexo new page schedule			#创建日历页面

执行命令，生成在hexo/source/schedule/index.md文件，文件内容如下：

---
title: schedule
date: 2014-12-22 12:39:04
---

随后修改菜单信息，可以查看之前的内容 NexT 基础配置 - 设置菜单显示内容进行配置。

menu:
  home: / || home
  archives: /archives/ || archive
  schedule: /schedule/ || calendar

接下来就是谷歌开发者申请谷歌日历 API，获得日历ID和API KEY，最后配置 next/_config.yml，具体配置如下。

calendar:
  calendar_id: <required>		#日历 ID
  api_key: <required>			#日历 API KEY
  orderBy: startTime			
  offsetMax: 24
  offsetMin: 4
  timeZone:
  showDeleted: false
  singleEvents: true
  maxResults: 250

与存档页面干杯

这个标题有点怪怪的吧，一时不知道如何翻译这里，与存档页面干杯（Cheers Archive Page），暂且就这样说着吧，那么这个功能是做什么用的呢？就是在开启这个功能之后，会在归档页面，显示总共有多少篇文章，还会叫我们继续加油，嘿嘿！比如：**嗯..! 目前共计 5 篇日志。继续努力。**具体效果可以看这里，这项功能默认是开启的。

cheers: false

自定义 404 页面

hexo可以配合github pages设置404页面，输入错误页面将跳转到404，在本地服务器上没有效果，但是部署到 github 上后就有效果了，好了开始吧。步骤还是之前一样，先创建页面，但这次有所不同，这次在hexo/source文件夹下新建文件 404.md，然后我们编辑 404 页面source/404.md内容，官方建议使用腾讯的公益 404 页面，寻找丢失儿童。

---
title: 404
date: 1970-01-01 00:00:00
---
<script src="//qzonestyle.gtimg.cn/qzone/hybrid/app/404/search_children.js"
        charset="utf-8" homePageUrl="/" homePageName="Back to home">
</script>

你也可以自己写 404 页面或使用其他页面，官方这里还提供了另一个 404 页面样板到这里就差不多了，如果你想把这个公益 404 页面显示在菜单那就添加菜单配置吧，NexT 基础配置 - 设置菜单显示内容。

NexT 主题设置（博客文章）

这一部分主要是博客文章相关的设置。

页面滚动

设置scroll_to_more，点击查看全文直接跳转到“的位置（这个位置就是显示查看全文后面的内容的位置）。

scroll_to_more: true

设置save_scroll，让浏览器记住浏览到的问题，下次浏览就直接跳到这个位置。

save_scroll: true

前言文本 Preamble Text

这里提供了三种方法来控制文章怎样显示在首页，这里可以设置

摘录说明excerpt_description

自动摘录auto_excerpt（这种方法不被推荐，官方建议使用“代替），

显示阅读全文的按钮read_more_btn。

这里呢，基本不用设置，默认设置就好了，只要在 Markdown 文件中使用“就好了，这也是官方推荐的方式。

excerpt_description: true	#摘录说明

auto_excerpt:			#自动摘录（不推荐）
  enable: false
  length: 150

read_more_btn: true		#是否显示阅读全文的按钮

发布元显示 Post Meta Display

Post Meta Display，有点不知道怎么翻译这个，但是这个就是发布文章标题下的那些信息，包括

是否显示文字item_text

创建的时间created_at

更新的时间updated_at

分类信息categories等等。

post_meta:
  item_text: true		#是否显示文字，即显示 `发表于`、` 更新于`、`分类于`，不显示，则只显示图标
  created_at: true		#是否显示发表时间，`发表于`
  updated_at:		
    enable: true		#是否显示更新时间，`更新于`
    another_day: true		#只有更新时间和发表时间不在同一天才显示更新时间
  categories: true		#是否显示分类

博客文章的字数统计

需要下载安装hexo-symbols-count-time包，下载完记得hexo clean一下。

npm install hexo-symbols-count-time --save

配置hexo/_config.yml，包括

显示文章字数symbols

估计阅读时间time

显示所有的文章的总字数在页面底部total_symbols

显示读完所有的文章的预计时间在页面底部total_time

统计数字除去代码块的字数exclude_codeblock。

symbols_count_time:
  symbols: true			#是否在文章的 Post Meta 显示文章字数
  time: true			#是否在文章的 Post Meta 显示阅读完文章预计的时间
  total_symbols: true		#是否显示所有的字数统计
  total_time: true		#是否显示阅读元所有文章需要多久
  exclude_codeblock: false	#统计时是否除去代码块的字数

配置next/_config.yml，包括

设置文章字数统计和阅读时间预计在同一行还是隔行separated_meta

文章中显示文章字数统计和阅读时间预计的描述item_text_post

页面底部显示所有文章字数统计和阅读所有文章时间预计的描述item_text_total

平均字的长度，以 char 来计算的，默认为 4，我们中文可以设置为 2，awl（average Word Length）

平均每分钟读多少字，默认为 275，人一般每分钟 300 字左右，可以不改默认值，wpm（average words per minute）。

symbols_count_time:
  separated_meta: true		#是否与 Post Meta Display 分开成两行，true 则分开为两行，false 则再一行
  item_text_post: true		#文章的字数统计是否显示文字，不显示则只有图标
  item_text_total: false	#总共的字数统计是否显示文字，不显示则只有图标
  awl: 2			#awl（average Word Length）平均字的长度（以字符为单位），默认为 4
  wpm: 275			#wpm（average words per minute）平均每分钟读多少字，默认为 275

标签图标设置

将标签前面默认的#改为图标，设置方法：修改next/_config.yml的tag_icon标签为true。

tag_icon: true

微信订阅

这里配置微信订阅二维码，在每一篇博客文章后面都会有这个二维码。我们在 Hexo 工程目录的source文件夹新建uploads文件夹，并把微信订阅二维码放进这个文件夹，然后在next/_config.yml修改配置。

wechat_subscriber:
  enable: true
  qcode: /uploads/wechat-qcode.jpg			#二维码图片的存放地址
  description: 欢迎关注公众号 XXX 			#文章最后公众号二维码下方的话

奖赏（打赏）Reward (Donate)

将微信、支付宝、比特币、银行等其他收钱二维码放到 NexT 主题目录下的source/images文件夹，并进行配置，这些二维码也会显示在每篇文章最后。

reward_settings:
  enable: true				#开启打赏功能
  animation: false			#是否开启动画，开启后，鼠标放在二维码上面，二维码下面的字会动
  #comment: Donate comment here		#打赏按钮上面显示的话，比如可以填：坚持原创技术分享，您的支持将鼓励我继续创作！

reward:					#各个收钱二维码的图片存放的地址
  wechatpay: /images/wechatpay.png
  alipay: /images/alipay.png
  bitcoin: /images/bitcoin.png

博客文章编辑

这里官方文档说，开启这项设置之后，用户可以在 GitHub 快速的浏览和编辑源代码，还提供了两种 URL 链接形式选择，即通过链接就可以快速对源代码进行浏览和编辑操作，这里我试了一下，还是 GitHub SSH 秘钥的问题（见前一篇博客），不多说了，小伙伴们有兴趣，看下官方文档配置一下。提醒一下，这里是配置hexo/_config.yml，然后这项配置依赖于hexo-deployer-git包。

post_edit:
  enable: false
  url: https://github.com/user-name/repo-name/tree/branch-name/subdirectory-name  # Link for view source
  #url: https://github.com/user-name/repo-name/edit/branch-name/subdirectory-name # Link for fork & edit

下面是官方文档对url的描述。

You should create a source repository of your post files. The url setting depends on the source project in github.
For site repository
Link for view source: url: https://github.com/…/tree/master/source/_posts/
Link for fork & edit: url: https://github.com/…/edit/master/source/_posts/
For post repository
Link for view source: url: https://github.com/…/_posts/tree/master/
Link for fork & edit: url: https://github.com/…/_posts/edit/master/

NexT 主题设置（侧边栏）

这一部分主要是侧边栏相关的设置。

侧边栏风格

在sidebar中，position可以设置侧边栏的位置（在 NexT 7.2 以下的版本中只支持Pisces与Gemini风格）。

width设置侧边栏的宽度，Muse与Mist风格中为默认 320 像素，Pisces与Gemini风格中默认为 240 像素。

display设置侧边栏的显示方式，有四种显示方式，默认方式为post，在文章中自动拓展，always在所有页面都紫都、hide只有当点击了侧边栏切换图标时，才拓展显示，remove完全不显示侧边栏。

offset设置侧边栏与菜单栏的隔多少像素（只支持Pisces与Gemini风格），默认为 12 个像素。

onmobile设置在移动设备上是否显示侧边栏（只支持Muse与Mist风格）。

dimmer设置单击页面的任何空白部分以关闭侧栏（只支持 NexT 7.0 版本以上的Muse与Mist风格）。

sidebar:
  #在 NexT 7.2 以下的版本中只支持 `Pisces`与`Gemini` 风格
  position: left		#设置侧边栏是显示在左边还是右边
  #position: right

  #width: 300			#设置侧边栏的宽度，默认 `Muse`与`Mist`为 320 像素，`Pisces`与`Gemini` 为 240 像素

  display: post			#设置侧边栏的显示方式，四种显示方式包括 `post`、`always`、`hide`、`remove`

  #只支持 `Pisces`与`Gemini` 风格
  offset: 12			#设置侧边栏与菜单栏的隔多少像素

  #只支持 `Muse`与`Mist` 风格
  onmobile: false		#设置在移动设备上是否显示侧边栏
  
  #只支持 NexT 7.0 版本以上的 `Muse`与`Mist` 风格
  dimmer: true			#设置单击页面的任何空白部分以关闭侧栏

侧边栏站点状态

设置在侧边栏站点概况的头像下是否显示帖子、分类、标签及其计数，默认为显示。

site_state: true

侧边栏社交链接

这是设置社交链接的形式和设置菜单显示内容的形式是一样的，Key: /link/ || icon，在这里不再多说，社交链接的图标设置的描述，请看下方代码。

social:
  GitHub: https://github.com/BingqiangZhou || github
  E-Mail: mailto:bingqiangzhou7@gmail.com || envelope
  WeChat Subscriber: https://open.weixin.qq.com/qr/code?username=BingqiangZhou || wechat
  Website: https://bingqiangzhou.cn || heartbeat
  #Weibo: https://weibo.com/yourname || weibo
  #Google: https://plus.google.com/yourname || google
  #Twitter: https://twitter.com/yourname || twitter
  #FB Page: https://www.facebook.com/yourname || facebook
  #VK Group: https://vk.com/yourname || vk
  #StackOverflow: https://stackoverflow.com/yourname || stack-overflow
  #YouTube: https://youtube.com/yourname || youtube
  #Instagram: https://instagram.com/yourname || instagram
  #Skype: skype:yourname?call|chat || skype

social_icons:
  enable: true			#是否启用社交链接的图标
  icons_only: false		#是否只显示图标
  transition: false		#设置图标是否带过渡动画（这里不清楚是什么动画效果）

侧边栏 Blogrolls

首先第一个问题什么是 Sidebar Blogrolls 呢？

blogroll 是博客上的链接列表，通常位于侧边栏上以便于访问，博客作者喜欢并希望分享这些链接。
博主可能会有一篇博客文章来帮助宣传他们朋友的博客，或者为他们的读者提供有关特定利基的更多资源。
一些博主将他们的博客分为几类。例如，一位写博客的博客可以将他的博客文章分成几类，用于链接到他撰写的其他博客，其他关于汽车的博客，以及其他关于不相关主题的博客。
可以根据每个博主的个人偏好设置博客，并且可以随时更新。

links设置自己喜欢的连接，title，可以是显示在链接列表的名称，可以任意设置，如你好：https://bingqiangzhou.cn

links_icon设置链接列表的图标，对应于Font Awesome库的图标去设置

links_title设置链接列表的名称（标题）

links_layout设置链接列表显示的布局，有两种布局block，每个链接占一行，inline，从左到右流式布局

links_icon: link			#设置链接列表的图标
links_title: Links			#设置链接列表的名称（标题）
links_layout: block 			#设置链接列表显示的布局，有两种布局 `block`、`inline`
links:					#设置自己喜欢的连接
  Title: https://bingqiangzhou.cn	#`title`，可以是显示在链接列表的名称，可以任意设置

侧边栏 TOC

文章目录Table Of Contents (TOC)

number是否显示文章目录的标号，如：1.1，1.2.3等等

wrap，设置为true，则如果标题一行显示不下，显示到下一行，为false，则省略为省略号……

expand_all是否展开全部目录

max_depth设置生成文章目录的最大深度，可以理解为标题级别，默认为 6，也可以在文章中用Front-matter属性toc_max_depth设置

toc:
  enable: true		
  number: true			#是否显示文章目录的标号
  wrap: false			#`true`，则如果标题一行显示不下，显示到下一行，为 `false`，则省略为省略号`……`
  expand_all: false		#是否展开全部目录
  max_depth: 6			#设置生成文章目录的最大深度，可以理解为标题级别，默认为 6

回到顶部

回到顶部（Back To Top）按钮

sidebar是否在侧边栏开始回到顶部按钮，不开启，只要enable是true则会显示一个回到顶部按钮在右下角，而开启，则不会显示在右下角，而是显示在侧边栏

scrollpercent是否显示下滑到的位置占全文的高度的百分比

back2top:
  enable: true
  sidebar: false		#是否在侧边栏开始回到顶部按钮
  scrollpercent: false		#是否显示下滑到的位置占全文的高度的百分比

小插曲 这里我改了回到顶部按钮的前景色和背景色，我找了一下back2top相关的代码，在themes/next/layout/_layout.swig找到了，看了代码这里是显示在右下角的回到顶部按钮，在这里themes/next/layout/_macro/sidebar.swig我也找到了，这里是侧边栏的回到顶部菜单，这里我把对应的div背景色和前景色改了，加了style="color:{{ theme.back2top.color }}; background-color:{{ theme.back2top.bgcolor }};"，代码如下：

{%- if theme.back2top.enable and theme.back2top.sidebar %}
        <div class="back-to-top motion-element" 
		style="color:{{ theme.back2top.color }}; background-color:{{ theme.back2top.bgcolor }};">
          <i class="fa fa-arrow-up"></i>
          {%- if theme.back2top.scrollpercent %}
            <span id="scrollpercent"><span>0</span>%</span>
          {%- endif %}
        </div>
      {%- endif %}

然后在next/_config.yml配置前景色color和背景色bgcolor。

back2top:
  bgcolor: "#eee"		#回到顶部背景色
  color: "#fc6423"		#回到顶部前景色

这里算是弄好了，带着好奇，又去找源码中的设置颜色的部分，用开发者工具找了一些带有颜色的class，比如feed-link、.post-toc .nav .active > a，都存在于main.css,很显然，这个main.css是生成的，我开始拿着这些class去找，没有找到多少端倪，随后我开始一个文件一个文件看，最后找到了themes/next/source/css/_variables/Pisces.styl，也就是在themes/next/source/css/_variables/里存着对应风格的一些全局的style代码，包括了头部、侧边栏、边框、组件等等，回到顶部按钮的风格也在这里设置，这里我没有改，去看了styl文件对应的stylus（一个 CSS 的预处理框架）的文档，大概了解了一些语法，附上官方文档，一个博主做的stylus 的中文教程。

NexT 主题设置（第三方服务）

这一部分主要是第三方服务相关的设置。 这一部分不准备太细讲了，第三方服务还是比较多。

评论系统

Disqus，我看许多博主都是用的Disqus，但是它用Twitter、Fackbook、Gmail快捷登录，对国内可能不太友好。
DisqusJS
Facebook Comments
VKontakte Comments and Likes
LiveRe
Gitalk，我个人比较推荐 Gitalk，就因为它可以用 GitHub 账号快捷登录，当然也只支持 GitHub。
Valine (China)，中国的评论系统，虽然没听过，官网，控制台。
Changyan (China)，中国的，依然是没听过，这个比上一个配置起来简单点，官网。
Widgetpack Rating

Gitalk的配置过程 请看这里

注意，我们需要将 github.io 库设置为公开仓库（public），不然会提示Error Not Found。这也是我踩过的一个坑，当然也可以重新建一个公开库专门用来放评论，这里的评论实质上是接入了仓库的issue，在这里评论就评论到了issue的留言发帖。

统计与分析

这部分呢，应该是统计访问量等等，我没有尝试，这里不做过多描述了，各位自己尝试吧。

内容分享服务

这部分呢，就是给读者一个使用社交账号（主要支持Google/Facebook/Twitter）分享的快捷按钮，我没有尝试，这里也不做过多描述了，各位自己尝试吧。

搜索服务

Algolia Search
Local Search 这里我配置了本地搜索
Swiftype

Algolia 网站搜索配置教程

本地搜索的配置过程 第一步，安装hexo-generator-searchdb包

$ npm install hexo-generator-searchdb --save

第二步，添加配置到hexo/_config.yml

search:
  path: search.xml		#文件路径，也可以设置拓展名为 `.json`
  field: post			#搜索的范围，有以下三种选择
				#`post` 搜索只在博客文章部分 (默认)
				#`page` 搜索在博客文章的页面的全部
				#`all` 搜索博客中所有页面 

  format: html			#搜索页面的内容的形式，有以下四种选择
				#`html` html 字符串
				#`raw ` markdown 文本
				#`excerpt` 摘要
				#`more` 官方的说明`act as you think`，随心所欲

  limit: 10000			#定义最多建立索引的文章数

第三步，配置next/_config.yml

local_search:
  enable: true
  trigger: auto		#设置为 `auto`，在输入时便实时搜索，设置为`manual`，则点击搜索图标或者按下回车建再搜索
  top_n_per_article: 1	#显示搜索到的文章中到的几个结果，设置为 -1 位显示所有
  unescape: false	#不将 HTML 字符串解析成可读的字符串
  preload: false	#当页面加载时，刷新搜索数据

拓展库

PJAX 一个JavaScript库使用AJAX和pushState()带来一个更好的浏览体验
Fancybox 实现点击图片显示原先大小功能，还可以进一步放大，还可以查看全部图片，视频等等，配置还是相对简单的，配置方法。
MediumZoom 缩放图片，不知道是什么效果，不能同时使用MediumZoom与Fancybox。
Lazyload 延迟加载图片，当读者没有阅读到图片的位置的时候，不会加载该图片。
Pangu Autospace 自动在中文字和半形的英文、数字、符号之间插入空白。
Quicklink 更快的子序列页面加载，通过空闲时间预取链接内容，就是提前获取页面内链接的数据在空闲的时候，从而实现更快的浏览速度。
Bookmark 记录读者阅读到的位置，下次再次阅读时，跳到这个位置，可以点击图标操作，也可以自动记录，这个可以设置页面滚动 save_scroll属性代替。
Reading Progress 在页面最上端有一个阅读的进度条。
Progress bar 顶部一个加载的进度条。
Backgroud JS 背景相关的 JavaScript 库有三个，JavaScript 3D库（轻量级的 3D 库，提供了<canvas>、<svg>、CSS3D、WebGL渲染器），Canvas Nest，提供了一个在画布上的背景动画，预览背景图，Canvas Ribbon 也是一个在画布上的背景动画，鼠标每次点击，随机生成彩带背景，效果展示。

数学方程

这项服务是用来渲染我们书写的数学公式等，设置相对还是简单的，暂时还是没有要使用到，没有配置，这里不多讲了，官方配置链接。

在线聊天

提供在线聊天服务，这个功能对于感觉博客还是没有必要的，这里不多讲了，配置 Chatra、配置 Tidio。

NexT 主题设置（常见问题）

这一部分主要是一些常见的问题的解决方法和一些需要注意的地方。

怎么设置阅读全文《Read More》？

有三种方法：

在文章（Markdown 文件）中设置“，建议用第一种。
在文章头部添加description，遵循Front-matter格式。
通过配置next/_config.yml中的auto_excerpt变量，自动生成总结。

auto_excerpt:
  enable: true
  length: 150

如何改变字体？

NexT 自定义字体的配置方法，如果这还不能得到满足，需要更加个性化，可以去themes/next/source/css/_variables/base.styl找到font-family-*去修改字体，比如font-family-base，需要注意的是修改的字体是否可以成功应用。

如何改变显示内容的宽度？

首先，看一下 NexT 内容宽度的策略：

当屏幕宽度小于 1200px 时，内容宽度为 700px
当屏幕宽度大于等于 1200px 时，内容宽度为 800px
当屏幕宽度大于等于 1600px 时，内容宽度为 900px
在手机或者平板设备上的时候，使用响应式宽度。

需要修改可以在可以去themes/next/source/css/_variables/base.styl找到以下代码进行修改，

$content-desktop         = 700px
$content-desktop-large   = 800px
$content-desktop-largest = 900px

可以修改成为百分比制的如90%，也可以以em为单位（建议使用50em，55em, 66em），

标签或者分类的数量不对，如何处理？

执行hexo clean（简写为hexo cl）清理缓存。
执行hexo generate（简写为hexo g）重新生成文件。

很多问题都可以用清理缓存的方式解决，执行以上完命令之后可以执行hexo server（简写为hexo s）启动本地服务器查看效果，如果还有问题，那大概是配置有问题，这就需要查看报错信息然后再处理了。

页面如何去掉评论系统？

在页面对应的Markdown文件中，设置comments: false，如：

---
title: All tags
type: "tags"
comments: false
---

如何设置每一页显示多少篇文章？

index_generator:
  per_page: 5

archive_generator:
  per_page: 20
  yearly: true
  monthly: true

tag_generator:
  per_page: 10

注意这里是Hexo站点的_config.yml。

如何优化 NexT 主题？

可以去Hexo 插件库下载插件。
也可以在NexT 组织的 GitHub 仓库下载插件和模块。

NexT 主题设置（故障排除）

注意保持缩进

在编辑任何YAML配置文件，都需要注意缩进，Hexo与NexT使用与父变量换行并缩进两个空格来表示，如：

theme_config:
  #scheme: Muse
  #scheme: Mist
  #scheme: Pisces
  scheme: Gemini

注意标签中的反引号代码块

不推荐使用反引号代码块。

建议使用 codeblock 写法，看这里的格式吧。

也可以使用<code>标签与<pre>标签，但是缺点是不会高亮显示，如下所示。

<code>代码块

print("hello,world")

<pre>代码块

print("hello,world")

设置了网站图标但是无效

将网站图标放置到hexo/source文件夹下，设置next/_config.yml，如下：

favicon: 
  small: favicon.ico
  medium: favicon.ico

执行hexo clean（简写为hexo cl）清理缓存，再执行hexo generate（简写为hexo g）重新生成文件，最后执行hexo server（简写为hexo s）启动本地服务器查看是否可以正确显示，也可以直接访问http://localhost:4000/favicon.ico，看是否可以正确访问，如果使用 jpg 或者 png，替换设置与访问链接中的favicon.ico即可。

找不到模块 XXX

如果出现找不到模块的情况，请删除对应node_modules的文件夹，在重新安装npm install node_modules --save，注意加上后面的--save。

NexT 主题设置（暂未涉及到）

这一部分主要是大概的说一下标签插件、高级设置以及如何从 NexT 5.X 升级到 6.X 到 7.x

标签插件

标签插件是一种方式使 Hexo 支持特殊的内容格式，举一个例子，在 Markdown 在文本编辑中，图片不能自定义大小，但是我们可以借助标签插件来解决它，Hexo 做了许多标签可以帮助到我们，请看链接，而 NexT 也为我们提供了一些，请看链接，甚至我们可以自定义标签插件。

这个标签插件本质就是设置一个格式，按照这个格式来写 Markdown 就可以被解析，而来设置这个格式的代码把他叫做标签插件，这个主要的用出就是拓展了 Markdown 的语法，本来 Markdown 的语法解析后的功能是比较简单的，而使用标签插件，而变得更加灵活，更加易用，就像上面说的 Markdown 不能设置图片大小，通过标签插件就可以。

最后想说的一点就是这里的标签插件和其他 Rainbow Safair 插件等等其他插件其实性质是一样的，只是这里的插件面向标签，其他的插件可能面向背景呀，评论系统呀等等。

高级设置

CDN 设置

一些第三方库可以使用 CDN（Content Delivery Network，即内容分发网络）来加速，NexT 官方提供了两个 CDN 服务商jsDelivr和CDNJS，jsDelivr 是 NexT 官方默认的 CDN 服务商，它在中国 ICP 备案了，对中国网络的访问也是极好的，但是 CDNJS 对中国网络访问的支持可能不太行了，当然我们可以使用其他的 CDN 服务商，配置方法：libname: CDN URL，在next/_config.yml中查找vendors随后进行配置。

依赖注入

这里是把自己写的页面、JavaScript 脚本、CSS 样式注入到 Hexo，不说太多，附上 NexT 对这部分解释的链接，如果说我们要开发 Hexo 插件的话，我想这也会是重要的一步，附上Hexo 官方开发插件的教程。

NexT 主题设置（相关链接）

这一部分主要是一些进一步了解 Hexo、NexT 或者 GitHub Pages 可能会用到上的参考链接。 Hexo 指南，这份文档特别好，基本都是精华，没有那么多没有用的设置，简洁，说来惭愧，自己写成这个样子，这份文档呢，也是从 Node.js 到 Hexo 到 NexT，最后甚至讲了发布到腾讯云上，虽然那些都是简单的内容，但对入门的同学来说可能是极好的，另外一篇特别好的比较全的博客，链接。

Markdown 入门文档发文章肯定会要用到的，特别是对于不太熟悉 Markdown 文档语法的同学来说。

stylus 官方文档 stylus 默认使用.styl作为文件拓展名，是一个 CSS 的预处理框架，让 CSS 增加可编程的的特性，如果需要自己开发 Hexo 或者 NexT 插件可能会涉及的到。 swig 官方文档 next 采用的模板引擎是 swig，swig 是 node.js 中一个优秀简洁的模板引擎，因而如果需要自己开发 Hexo 或者 NexT 插件可能会涉及的到，而且看 NexT 源代码是可能一些语法也能用的上，再附上一篇简单的语法介绍

希望自己的博客能被搜索到，排名靠前一点，搜索引擎优化 SEO 是要用上的，放几个我觉得比较不错的链接吧，极客学院 - SEO 教程 SEO 如何入门？ - 知乎搜索引擎优化（SEO） - 知乎 75 个可执行的 SEO 小技巧（绝对管用）一个 SEO 做的比较好的个人博客 may90.com

Jekyll 官方文档中文文档 Jekyll 是一个静态网站生成器，是 GitHub Pages 推荐的默认的工具，但是其实 Hexo 更加强大，社区，插件，速度比 Jekyll 好一些，但是 Jekyll 还是值得我们了解一下的。

使用 Hugo 构建个人博客 Hugo 是一个基于 Go 语言开发的静态网站构建工具。

Node.js 教程大概也可以拓展一下吧。

Git 教程

还有很多知识、技术是可以拓展的，但是暂时就想到这些。

创建 github.io 仓库

创建 github.io，与平时创建仓库差不多，只是库名限制为username.github.io，就是 Github 账户的名称加上 github.io 后缀就行了，当然这里一定要遵守这个规则，不然他就变成了一个普通的库。官方的简单入门，注意，如果要使用 Gitalk 评论系统，那我们需要将仓库设置为公有（public），这里是我踩过的一个坑，设置成了私有（private）库，Gitalk 插件会显示，Error Not Found！，创建 github.io 仓库，有图教程请看

发布到 github.io 仓库

如果我们配置了git的ssh key，那发布就很简单了，hexo generate --deploy（简写为hexo g -d）一键就可以发布了，但是在这之前，我们还需要下载安装hexo-deployer-git包并配置hexo/_config.yml。

下载安装hexo-deployer-git

npm install hexo-deployer-git --save

配置hexo/_config.yml

deploy:
  type: git
  repo: <repository url> 	#比如：https://bitbucket.org/JohnSmith/johnsmith.bitbucket.io
  branch: [branch] 		#例如：master
  message: [message] 		#留空

配置好后就可以一键发布了，但是没有配置 ssh key 的同学怎么办，这里有种解决方案，第一种，配置 ssh key，第二种，使用Github 桌面应用吧，具体步骤如下：

下载安装好 GitHub 桌面应用，并登录 GitHub 账号在桌面应用。
将 github.io 库 pull（拉取）到Hexo工程目录下的.deploy_git文件夹下，没有该文件夹创建一个。
在更改代码需要发布时，执行hexo generate --deploy（简写为hexo g -d），这里因为没有配置 SSH key 会报错，但是没关系。
打开 GitHub 桌面应用，他自动就会提醒我们发布，我们只需要点击发布就好了，或者使用快捷键ctrl + p。

发布的话，我想应该大概差不多就这个步骤。附上一个Git 教程

后续更新 github.io

后续更新的话，主要是更改了配置或者是添加了文章要发布，重点还是在发布，有问题可以看一下前一部分，发布到 github.io 仓库，这里注意 Markdown 的书写，教程在此，最后在啰嗦一下 Hexo 创建文章，首先我们可以用hexo new draft 文章名创建一个草稿draft，在写的过程种查看效果，我们可以执行hexo server --drafts（注意不要简写），写好了之后，可以执行hexo publish 文件名（可以简写成hexo p 文件名），然后再生成，发布。

总结

写了好几天，写着写着，把之前一些没有接触的功能也玩了一遍，写着写着，写成了一个中文口语版的说明文档，脱离了之前学习的那个意味了，有点问题，要好好反思，大概可能算是锻炼了一下如何写说明文档，但是说学到多少技术那并没有，在回到说明文档，Hexo 官方的指南是特别好的，写了这么多，花了这么久的时间，总之还是偏离了初衷。

明白了，好钢要用在刀刃上，也算是有成长吧！

加油，下次会更好的。

学习笔记