Windows下使用GitHub Pages搭建hexo博客详细教程以及Next主题超全配置

根据下面的教程搭建的博客见这里

前言

马上要进入研究生了，不能再过浑浑噩噩的日子了，搭建一个小网站，用于记录自己所学的东西。其实，之前在腾讯云1元乞丐版上也搭建过博客，但是呢，只用来扯淡了。这次使用 GitHubPages 和 Hexo 建立自己的博客，希望能够促进自己成长。

下面先介绍为何选择 GitHubPages 和 Hexo 来搭建博客，然后介绍搭建博客的详细过程。

Why GitHub Pages and Hexo

因为 GitHub 的存在，我们得以简单快速地搭建个人博客。

GitHub
GitHub，是一个代码托管网站和社交编程网站。这里聚集了世界上各路技术牛叉的大牛，和最优秀的代码库。把你的博客托管在这里，还有什么不放心的呢O(∩_∩)O。

GitHub Pages
GitHub Pages，是用来托管 GitHub 上静态网页的免费站点，那 GitHub Pages具体有哪些功能呢：

• 有足够的免费空间（1G），资料自己管理，保存可靠；
• 享受 GitHub 的便利，上面有很多大牛，眼界会开阔很多；
• 可以使用很多现成的博客框架，搭建过程简单快速。

HEXO

Hexo 是一个简单、快速、强大的静态博客框架,出自台湾大学生 tommy351 之手。我也看过使用 Jekyll、Octopress 搭建个人博客的过程，确实要繁琐许多。相比之下 Hexo 更轻便更快捷，下面是其官网强调的四大特点：

1. 极速生成静态页面
2. 一键部署博客
3. 丰富的插件支持
4. 支持 Markdown

相信大家对 GitHub Pages 和 Hexo 有了一定的了解，下面进入正题。

准备工作

注册 GitHub

访问 GitHub，注册十分简单，一定要记住注册时使用的邮箱，因为 GitHub 上很多通知都是通过邮箱的。如下图所示，框里有各种提示，这里就不多说了：

申请成功后，在 GitHub 官网上登录，并验证邮箱即可。

在 GitHub 上建立仓库

与 GitHub 建立好连接之后，就可以方便的使用它提供的 Pages 服务，GitHub Pages 分两种，一种是用你的 GitHub 用户名建立的 http://username.github.io 这样的用户&组织站点，另一种是依附项目的 Pages。

想建立个人博客是用的第一种，形如 http://username.github.io 这样的可访问的站点，每个用户名下面只能建立一个。

首先，点击右上角的+号，点击 New repository，新建一个仓库

然后，在Repository name，填写自己的用户名.github.io，例如我的用户名为zdaiot，则填写zdaiot.github.io

关于 Github 的使用，Crossin先生 也写了一篇通俗易懂的教程，大家可以去看看

极简 Github 上手教程

安装软件

Node.js

Node.js 下载

下载完成后根据提示一步一步安装就好，这个没有什么需要特别说明的。

安装git

git 下载

下载并安装下面两个软件，一直点击下一步即可。

配置 SSH

默认的cmd是没有ssh的，所以我们需要安装ssh：https://www.mls-software.com/opensshd.html 下载openssh，安装即可。

我们如何让本地 git 项目与远程的 GitHub 建立联系呢？方法是用 SSH。打开命令行，输入以下命令：

ssh -T [email protected]

如图：

如果是下面之类的反馈（或者显示 Hi xxx）：

The authenticity of host 'github.com (207.97.227.239)' can't be established. RSA key fingerprint is 16:27:ac:a5:76:28:2d:36:63:1b:56:4d:eb:df:a6:48. Are you sure you want to continue connecting (yes/no)?

不用紧张，输入 yes 之后,看到下图的结果，就配置成功了。

但是，输入yes后，若提示如下图：

极大多数情况是由于github账号没有设置ssh公钥信息所致。 前往 GitHub 网站的"account settings"
依次点击"Setting -> SSH Keys"->“New SSH key”

Title处填写“id_rsa.pub”或其他任意信息。 key处原样拷贝下面命令的打印 ~/.ssh/id_rsa.pub 文件的内容：
如果没有该文件

ssh-keygen -t rsa

一路回车…

最后，输入

ssh -T [email protected]

确认OK即可。

安装Hexo

Hexo 安装

更改npm为国内镜像源：

npm config set registry https://registry.npm.taobao.org 
npm info underscore
（如果上面配置正确这个命令会有字符串response）

打开命令行，依次输入以下命令：

cd /
npm install hexo-cli -g

如图：

提示：cd / 作用是返回根目录，Git Shell 默认装在 C 盘，启动时默认路径为 C:\Users\xxx(用户名)\Documents\GitHub，输入 cd / 命令后就返回到了 C 盘根目录下，需不需要使用 cd / 看个人习惯（下同）

部署Hexo

Hexo 的部署可采用如下方法，输入命令：

hexo init [文件名]。

打开控制台，依次输入以下命令：

cd /
hexo init Hexo

回车后出现该提示则表示正确：

若报错，如下图：

则是因为环境变量设置的原因，如下所示，我们之前有个步骤是 cd /，所以路径如下：

添加系统环境变量如下：

添加成功后，即可运行 hexo 指令。

部署过程中，报错如下：

删除掉：C:\Users\\.config\configstore\insight-bower.yml，在我的这个文件夹下，只有一个文件update-notifier-npm.json，删除掉，在执行上述指令。

部署成功之后，Hexo 会自动在目标文件夹建立博客网站所需要的所有文件。此时可以通过输入以下命令在本地进行预览（在刚才创建的文件夹里）：

C:\>cd /d C:\Hexo
hexo generate
hexo server

系统可能会出现提示，请点击允许。如下图所示则表示正确：

此时打开浏览器，在浏览器地址栏输入 http://localhost:4000/ （默认端口为4000）, 便可以看到最原始的博客了。以后发表博文想先预览，也可以通过 hexo server 在本地先跑起来，看看效果。
效果如下图所示：

恭喜，到目前为止个人博客的雏形已经有了。

在 Git Shell 中按 Ctrl + C 并输入 y 可以停止该服务

将本地文件部署到 GitHub

** 修改 Hexo 中的 _config.yml 文件**
在 Hexo 文件夹下找到 _config.yml 文件,如下图所示：

找到其中的 deploy 标签，改成下图所示形式，并保存。注意：冒号后面要加上一个空格，否则会报错。

deploy:
  type: github
  repository: https://github.com/zdaiot/zdaiot.github.io.git
  branch: master

将其 deploy 到仓库中
打开 Git Shell 进入创建的文件夹，依次输入以下命令：

hexo clean
hexo generate
hexo deploy

如果出现下图错误，不要着急：

将deploy 的 type 改成 git，即改为：

deploy:
  type: git
  repository: https://github.com/zdaiot/zdaiot.github.io.git

然后再在 Git Shell 中运行以下命令:

npm install hexo-deployer-git --save

再重新来一遍：

hexo clean
hexo generate
hexo deploy

出现以下提示则表示正确：

但是，若报错提示：fatal: Not a git repository (or any of the parent directories): .git 提示说没有.git这样一个目录，则是因为上面没有安装git，就进行安装hexo，安装git软件，重新进行上面步骤

但是，若出现下面bug：

则，将 _config.yml 文件中配置改为：

deploy:
  type: git
  repository: [email protected]:zdaiot/zdaiot.github.io.git
  branch: master

恭喜，到这一步，个人博客就已经部署到 GitHub 上了，你可以到你的GitHub仓库查看是否已经更新。此时，通过
http://your_user_name.github.io
（即你那个仓库的名称，形如：“你的 GitHub 用户名”.http://github.io）
就可以看到你的个人博客了。
若看不到，则参照下面的步骤，写一篇博客，发表上去！即可看到！
注意：这里可能会出现这种需要输入账号密码的情况

输入github的账号密码就可以了，记住那里输入密码的时候光标是不会移动的，只要你输入了就好，不要以为没输入上：）

安装Next主题

下载主题：
使用 Git Shell 进入 Hexo 文件夹，输入以下两条命令将主题下载到 theme/next文件夹下：

cd Hexo
git clone https://github.com/theme-next/hexo-theme-next.git themes/next

接着按照如下几个步骤进行：

• 设置站点Hexo/_config.yml的theme字段值为next
• 生成静态文件

hexo g

• 开启服务，在本地查看效果

hexo s --debug

• 同步代码到gitHub

hexo d

注：此时登录网站，发现是空白的，打开控制台，提示很多vendors目录下的文件404，解决办法是将next主题下即Hexo/themes/next/source下的vendors目录名改为lib，并修改Hexo/themes/next/_config.yml的_internal: vendors改为_internal: lib。

参考：iissnan的回答

配置Next主题

风格配置

通过修改next主题下的_config.yml的scheme字段，配置不同的风格。

# Schemes
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini

本站点使用的是默认的Gemini，显示效果如下：

菜单设置

通过修改next主题下的_config.yml的menu字段，选定显示的菜单项。

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

其中，home代表主页，categories代表分类页，about代表关于页面，archives代表归档页，commonweal代表404页面（page not found时候显示的页面）。

添加标签页面

前面通过修改next主题下的_config.yml文件中的menu选项，可以在主页面的菜单栏添加标签选项，但是此时点击标签，跳转的页面会显示page not found。

添加标签页面的具体方法是：
新建页面，输入如下命令：

cd Hexo
hexo new page tags

输入命令后，在Hexo/source下会新生成一个新的文件夹tags，在该文件夹下会有一个index.md文件。

设置页面类型，在上步新生成的Hexo/source/tags/index.md中添加type: “tags”，index.md文件内容如下：

---
title: tags
date: 2018-08-01 00:00:00
type: "tags"
---

设置具体文章的tags
当要为某一篇文章添加标签，只需在Hexo/source/_post目录下的具体文章的tags中添加标签即可，如：

---
title: 基于Hexo和Github搭建博客
date: 2018-08-01
tags: [npm, hexo, github]
categories: 搭建博客
---

本站添加为标签后的效果如下：

添加分类标签

步骤与添加标签页面类似，具体如下：

新建页面，输入如下命令：

cd Hexo
hexo new page categories

输入命令后，在Hexo/source下会新生成一个新的文件夹categories，在该文件夹下会有一个index.md文件。
设置页面类型

在上步新生成的Hexo/source/categories/index.md中添加type: “categories”，index.md文件内容如下：

---
title: categories
date: 2018-08-01 00:00:00
type: "categories"
---

设置具体文章的categories
当要为某一篇文章添加分类，只需在Hexo/source/_post目录下的具体文章的categories中添加分类即可，如：

---
title: 基于Hexo和Github搭建博客
date: 2016-11-09
tags: [npm, hexo, github]
categories: 搭建博客
---

本站添加为标签后的效果如下：

添加我的页面

步骤与添加标签页面类似，具体如下：

新建页面

cd Hexo
hexo new page about

输入命令后，在Hexo/source下会新生成一个新的文件夹about，在该文件夹下会有一个index.md文件。
修改about/index.md，本站点index.md如下

---
title: about
date: 2018-08-01 00:00:00
---
## 关于我
一只学AI的小菜鸟，欢迎分享知识。
From zdaiot
QQ：972392704
Email: [email protected]

效果如下：

语言设置

若想显示为中文，需要在Hexo根目录下的_config.yml 文件修改，而Next主题下的_config.yml 文件不需要想应的修改

language: zh-CN

菜单项文本修改是在对next主题下的language文件夹下的文件进行修改，若当前语言是简体中文，直接修改language/zh-CN.yml里的对应字段即可。
本站点显示主页，分类页，关于页面和归档页。

头像设置

打开头像

• 打开themes/next下的_config.yml文件，搜索 Sidebar Avatar关键字，去掉url后面的#

# Sidebar Avatar
# Sidebar Avatar
avatar:
  # in theme directory(source/images): /images/avatar.gif
  # in site  directory(source/uploads): /uploads/avatar.gif
  # You can also use other linking images.
  url: http://example.com/avatar.png

• 或者使用本地图片,在next/source/images/下放置头像文件avatar.gif，更改avatar：

# Sidebar Avatar
avatar:
  # in theme directory(source/images): /images/avatar.gif
  # in site  directory(source/uploads): /uploads/avatar.gif
  # You can also use other linking images.
  url: /images/avatar.gif

设置头像边框为圆形框并旋转

打开\themes\next\source\css\_common\components\sidebar\sidebar-author.styl，在里面更改添加如下代码：

.site-author-image {
  display: block;
  margin: 0 auto;
  padding: $site-author-image-padding;
  max-width: $site-author-image-width;
  height: $site-author-image-height;
  border: $site-author-image-border-width solid $site-author-image-border-color;

  /* 头像圆形 */
  border-radius: 80px;
  -webkit-border-radius: 80px;
  -moz-border-radius: 80px;
  box-shadow: inset 0 -1px 0 #333sf;

  /* 设置循环动画 [animation: (play)动画名称 (2s)动画播放时长单位秒或微秒 (ase-out)动画播放的速度曲线为以低速结束 
    (1s)等待1秒然后开始动画 (1)动画播放次数(infinite为循环播放) ]*/


  /* 鼠标经过头像旋转360度 */
  -webkit-transition: -webkit-transform 1.0s ease-out;
  -moz-transition: -moz-transform 1.0s ease-out;
  transition: transform 1.0s ease-out;
}

img:hover {
  /* 鼠标经过停止头像旋转 
  -webkit-animation-play-state:paused;
  animation-play-state:paused;*/

  /* 鼠标经过头像旋转360度 */
  -webkit-transform: rotateZ(360deg);
  -moz-transform: rotateZ(360deg);
  transform: rotateZ(360deg);
}

/* Z 轴旋转动画 */
@-webkit-keyframes play {
  0% {
    -webkit-transform: rotateZ(0deg);
  }
  100% {
    -webkit-transform: rotateZ(-360deg);
  }
}
@-moz-keyframes play {
  0% {
    -moz-transform: rotateZ(0deg);
  }
  100% {
    -moz-transform: rotateZ(-360deg);
  }
}
@keyframes play {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(-360deg);
  }
}

头像下方文字和作者设置

打开Hexo下的_config.yml文件

# Site
title: zdaiot
subtitle: QS的大西瓜
description: QS的大西瓜
keywords: QS的大西瓜
author: zdaiot
language: zh-CN
timezone:

新建404界面

• 在站点根目录下,输入 hexo new page 404,默认在Hexo 站点下/source/404/index.md
• 打开新建的404界面，在顶部插入一行，写上permalink: /404，这表示指定该页固定链接为 http://"主页"/404.html

---
title: 404-找不到页面
date: 2016-05-21 18:53:59
comments: false
permalink: /404
---
404 Not Found
-------
**对不起，您所访问的页面不存在或者已删除**
你可以**[点击此处](http://www.zdaiot.com)**返回首页。
你也可以**点击此处**重新搜索结果。
![网站二维码](/images/website.png)扫一扫，用手机访问本站

• 如果你不想编辑属于自己的404界面,可以显示腾讯公益404界面,代码如下：

设置网站的图标Favicon

实现效果图

并且修改themes/next下的_config.yml文件中，代码如下：

# For example, you put your favicons into `hexo-site/source/images` directory.
# Then need to rename & redefine they on any other names, otherwise icons from Next will rewrite your custom icons in Hexo.
favicon:
  small: /images/favicon-16x16-next.png
  medium: /images/favicon-32x32-next.png
  apple_touch_icon: /images/apple-touch-icon-next.png
  safari_pinned_tab: /images/logo.svg
  #android_manifest: /images/manifest.json
  #ms_browserconfig: /images/browserconfig.xml

在EasyIcon中找一张图标,或者去别的网站下载或者制作，要求按照代码中的大小与格式。并将图标名称改为代码中的名字，然后把图标放在/themes/next/source/images里

显示返回顶部按钮

设置侧边栏，显示返回顶部按钮，及百分比。若要显示在右下角，则b2t: false

# Back to top in sidebar (only for Pisces | Gemini).
b2t: true

# Scroll percent label in b2t button.
scrollpercent: true

开启订阅微信公众号

效果如下：

将微信公众号的图片放到next/source/uploads/文件夹中，若没有该文件夹，新建即可，并把图片重命名为wechat-qcode.jpg

在主题配置文件中，找到wechat_subscriber，设置为：

wechat_subscriber:
  enabled: true
  qcode: /uploads/wechat-qcode.jpg
  description: 欢迎您扫一扫上面的微信公众号，订阅我的博客！

添加顶部加载条

打开themes/next下的_config.yml，搜索关键字pace,设置为true,可以更换加载样式

# Progress bar in the top during page loading.
pace: true
# Themes list:
#pace-theme-big-counter
#pace-theme-bounce
#pace-theme-barber-shop
#pace-theme-center-atom
#pace-theme-center-circle
#pace-theme-center-radar
#pace-theme-center-simple
#pace-theme-corner-indicator
#pace-theme-fill-left
#pace-theme-flash
#pace-theme-loading-bar
#pace-theme-mac-osx
#pace-theme-minimal
# For example
# pace_theme: pace-theme-center-simple
pace_theme: pace-theme-flash #替换更换样式

然后，将 https://github.com/iissnan/hexo-theme-next/tree/master/source/lib/pace 中的所有文件放到hexo\themes\next\source\lib\pace文件夹中

修改文章底部的那个带#号的标签

实现效果图

修改模板/themes/next/layout/_macro/post.swig，搜索 rel="tag">#，将 # 换成

修改文章内文本连接样式

打开 themes/next/source/css/_custom/下的custom.styl,添加代码

// 文章内链接文本样式
.post-body p a{
  color: #0593d3;
  border-bottom: none;
  border-bottom: 1px solid #0593d3;
  &:hover {
    color: #fc6423;
    border-bottom: none;
    border-bottom: 1px solid #fc6423;
  }
}

主页文章添加阴影效果

打开\themes\next\source\css\_custom\custom.styl,向里面加入：

 // Custom styles.
// 主页文章添加阴影效果
 .post {
   margin-top: 60px;
   margin-bottom: 60px;
   padding: 25px;
   -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
   -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
  }

文章顶部显示更新时间

打开主题配置文件_config.yml,搜索关键字updated_at设置为true

# Post meta display settings
post_meta:
  item_text: true
  created_at: true
  updated_at:
    enabled: true
    # If true, show updated date label only if `updated date` different from 'created date' (post edited in another day than was created).
    # And if post will edited in same day as created, edited time will show in popup title under created time label.
    # If false show anyway, but if post edited in same day, show only edited time.
    another_day: true
  categories: true

编辑文章,增加关键字updated

---
title: https://www.zdaiot.com/%E6%90%AD%E5%BB%BA%E5%8D%9A%E5%AE%A2/Windows%E4%B8%8B%E4%BD%BF%E7%94%A8hexo%E6%90%AD%E5%BB%BA%E5%8D%9A%E5%AE%A2/
date: 2018-07-29 21:12:14
updated: 2017-7-30 18:18:54 #手动添加更新时间
tags:
copyright: true
---

侧边栏设置

设置侧边栏社交链接

• 打开themes/next下的_config.yml文件,搜索关键字social,然后添加社交站点名称与地址即可。

# Social links
social:
  GitHub: https://github.com/your-user-name
  Twitter: https://twitter.com/your-user-name
  Weibo: https://weibo.com/your-user-name
  douban: https://douban.com/people/your-user-name
  zhihu: https://www.zhihu.com/people/your-user-name
  # 等等

设置侧边栏社交图标

• 打开themes/next下的_config.yml文件,搜索关键字social_icons，添加社交站点名称（注意大小写）图标，Font Awesome图标地址，注意知乎没有对应的图标，可以直接更改为别的图标

social_icons:
  enable: true
  # Icon Mappings.
  # KeyMapsToSocalItemKey: NameOfTheIconFromFontAwesome
  GitHub: github
  Twitter: twitter
  Weibo: weibo
  Linkedin: linkedin

上述设置侧边栏社交链接与社交图标还可以直接更改Social links，不需要更改social_icons，例如：

social:
  GitHub: https://github.com/zdaiot || github
  E-Mail: mailto:[email protected] || envelope
  知乎: https://www.zhihu.com/people/zdaiot || book
  CSDN: https://blog.csdn.net/zdaiot || copyright

RSS

• 在你Hexo 站点目录下

npm install hexo-generator-feed --save

• 打开Hexo 站点下的_config.yml,在Extensions中添加如下配置

# Extensions
plugin: hexo-generator-feed
# feed
# Dependencies: https://github.com/hexojs/hexo-generator-feed
feed:
  type: atom
  path: atom.xml
  limit: 20
  hub:
  content::

• 在主题配置文件themes/next/_config.yml文件中，搜索rss，更改为：

rss: /atom.xml

点击rss后，出现：

友情链接

• 打开themes/next下的_config.yml文件,搜索关键字Blog rolls

# Blog rolls
links_title: 友情链接 #标题
links_layout: block #布局，一行一个连接
#links_layout: inline
links: #连接
  baidu: http://example.com/
  google: http://example.com/

添加百度分享

因为next\layout_partials\share\baidushare.swig文件中代码显示：

{% if theme.baidushare.type === "button" %}
...
...
{% elseif theme.baidushare.type === "slide" %}
...

在配置百度分享功能时需指定其type，所以将主题配置_config.yml文件中关于baidushare部分的内容改为（其中type亦可以选择button）：

baidushare:
  type: slide
  baidushare: true

_config.yml中提示：Warning: Baidu Share does not support https.
因为百度分享不支持在https上使用，所以一种解决方法便是，直接放文件到我们自己的目录下面。

访问链接： static文件夹
下载压缩包到本地，解压后，将static文件夹保存至themes\next\source目录下。
修改文件：themes\next\layout\_partials\share\baidushare.swig
将文件 末尾 部分的代码进行修改：

.src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];

改为：

.src='/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];

添加AddThis分享

我选择的是AddThis作为博客的第三方分享。AdThis是国外的第三方分享,使用方便,可以用google直接登录。能自定义分享样式

注册AddThis，选择分享按钮：

选择显示样式(Select a Tool Type),AddThis提供了7种显示样式,你可以更加左边菜单栏点击,右边会自动显示你选择的相应样式。值得注意的是。在其右上角可以切换PC和Phone显示

点击Continue配置分享按钮,注意：不同的风格样式,配置方式不同

配置完成后 , 获取代码ID , 在js代码中获取pubid后面的ID

编辑主题配置文件themes/next/_config.yml, 找到关键字add_this_id, 添加pubid

设置文章代码主题

Next主题总共支持5种主题，默认主题是白色的normal。通过修改next主题下的_config.yml的highlight字段，来设置代码主题。
本站点使用的是normal主题。即令highlight为normal。

渲染 MathJax 数学公式

Hexo 默认使用 hexo-renderer-marked 引擎渲染网页，该引擎会把一些特殊的 markdown 符号转换为相应的 html 标签，比如在 markdown 语法中，下划线_代表斜体，会被渲染引擎处理为标签。

因为类 Latex 格式书写的数学公式下划线_表示下标，有特殊的含义，如果被强制转换为标签，那么 MathJax 引擎在渲染数学公式的时候就会出错。

类似的语义冲突的符号还包括*, {, }, \\等。

解决方法：

首先开启next主题对MathJax的支持，找到next\ _config.yml文件，把 math 默认的 false 修改为true

# Math Equations Render Support
math:
enable: true

# Default(true) will load mathjax/katex script on demand
# That is it only render those page who has 'mathjax: true' in Front Matter.
# If you set it to false, it will load mathjax/katex srcipt EVERY PAGE.
per_page: true

在需要MathJax渲染的文章前面添加

mathjax: true

也可以直接在/scaffolds/post.md文件中添加：

---
title: {{ title }}
date: {{ date }}
tags:
categories:
copyright:
mathjax:
---

这样每次hexo new "你的内容"之后，生成的md文件会自动把mathjax:加到里面

更换 Hexo 的 markdown 渲染引擎，hexo-renderer-kramed 引擎是在默认的渲染引擎 hexo-renderer-marked 的基础上修改了一些 bug ，两者比较接近，也比较轻量级。

npm uninstall hexo-renderer-marked --save
npm install hexo-renderer-kramed --save

执行上面的命令即可，先卸载原来的渲染引擎，再安装新的。
然后，跟换引擎后行间公式可以正确渲染了，但是这样还没有完全解决问题，行内公式的渲染还是有问题，因为 hexo-renderer-kramed 引擎也有语义冲突的问题。接下来到博客根目录下，找到node_modules\kramed\lib\rules\inline.js，把第11行的 escape 变量的值做相应的修改：

  //escape: /^\\([\\`*{}\[\]()#$+\-.!_>])/,
  escape: /^\\([`*\[\]()#$+\-.!_>])/,

这一步是在原基础上取消了对,{,}的转义(escape)。
同时把第20行的em变量也要做相应的修改。

  //em: /^\b_((?:__|[\s\S])+?)_\b|^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,
  em: /^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,

重新启动hexo（先clean再generate）,问题完美解决。哦，如果不幸还没解决的话，看看是不是还需要在使用的主题中配置mathjax开关。

首页显示文章标题，而非全文

进入hexo博客项目的themes/next/_config.yml文件，搜索"auto_excerpt",找到如下部分：

# Automatically Excerpt. Not recommand.
# Please use  in the post to control excerpt accurately.
auto_excerpt:
  enable: false
  length: 150

把enable改为对应的false改为true，然后

hexo d -g

再进主页，问题就解决了！

在右上角或者左上角实现fork me on github

实现效果图：

点击这里 或者 这里挑选自己喜欢的样式，并复制代码。 例如，我是复制如下代码：

然后粘贴刚才复制的代码到themes/next/layout/_layout.swig文件中(放在

的下面)，并把href改为你的github地址

在网站底部加上访问量与字数统计

方法一：

实现效果图

打开\themes\next\layout\_partials\footer.swig文件,在copyright前加上这句话：

然后在下面添加显示统计的代码

  本站访客数:

在这里有两中不同计算方式的统计代码：

1. pv的方式，单个用户连续点击n篇文章，记录n次访问量

    本站总访问量次

2. uv的方式，单个用户连续点击n篇文章，只记录1次访客数

  本站总访问量次

添加之后再执行hexo d -g，然后再刷新页面就能看到效果

方法二：

以上方法无法统计字数，采用如下方法，打开\themes\next\layout\_partials\footer.swig文件,在copyright前加上：

    
    
      
      访问用户：  人
    
    

    
      
      访问次数：  次
    
    
    
      
      博客全站共： {{ totalcount(site) }} 字
    

添加之后再执行hexo d -g，然后再刷新页面就能看到效果

实现统计功能

实现效果图

在根目录下安装 hexo-symbols-count-time,运行：

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

然后在主题的配置文件next/_config.yml中，配置如下：

# Post wordcount display settings
# Dependencies: https://github.com/theme-next/hexo-symbols-count-time
symbols_count_time:
  separated_meta: true
  item_text_post: true
  item_text_total: false
  awl: 4
  wpm: 275

最后在，hexo/_config.yml中，添加：

symbols_count_time:
  symbols: true
  time: true
  total_symbols: true
  total_time: true

隐藏网页底部powered By Hexo / 强力驱动

打开themes/next/layout/_partials/footer.swig,使用隐藏之间的代码即可，或者直接删除。位置如图：

在底部添加网站运行时间

打开themes/next/layout/_partials/footer.swig，在最下面添加代码

载入天数...载入时分秒...

在文章底部增加版权信息

实现效果图

在目录 next/layout/_macro/下添加 my-copyright.swig：

{% if page.copyright %}

  

  
  
  
  
本文标题:{{ page.title }}
  
文章作者:{{ theme.author }}
  
发布时间:{{ page.date.format("YYYY年MM月DD日 - HH:MM") }}
  
最后更新:{{ page.updated.format("YYYY年MM月DD日 - HH:MM") }}
  
原始链接:{{ page.permalink }}
    
  
  
许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。
  


{% endif %}

在目录next/source/css/_common/components/post/下添加my-post-copyright.styl：

.my_post_copyright {
  width: 85%;
  max-width: 45em;
  margin: 2.8em auto 0;
  padding: 0.5em 1.0em;
  border: 1px solid #d3d3d3;
  font-size: 0.93rem;
  line-height: 1.6em;
  word-break: break-all;
  background: rgba(255,255,255,0.4);
}
.my_post_copyright p{margin:0;}
.my_post_copyright span {
  display: inline-block;
  width: 5.2em;
  color: #b5b5b5;
  font-weight: bold;
}
.my_post_copyright .raw {
  margin-left: 1em;
  width: 5em;
}
.my_post_copyright a {
  color: #808080;
  border-bottom:0;
}
.my_post_copyright a:hover {
  color: #a3d2a3;
  text-decoration: underline;
}
.my_post_copyright:hover .fa-clipboard {
  color: #000;
}
.my_post_copyright .post-url:hover {
  font-weight: normal;
}
.my_post_copyright .copy-path {
  margin-left: 1em;
  width: 1em;
  +mobile(){display:none;}
}
.my_post_copyright .copy-path:hover {
  color: #808080;
  cursor: pointer;
}

修改next/layout/_macro/post.swig，在代码

{% if theme.wechat_subscriber.enabled and not is_index %}
  

  {% include 'wechat-subscriber.swig' %}
  
{% endif %}

加入代码

      {% if not is_index %}
        {% include 'my-copyright.swig' %}
      {% endif %}

如图所示：

修改next/source/css/_common/components/post/post.styl文件，在最后一行增加代码：

@import "my-post-copyright"

保存重新生成即可。

如果要在该博文下面增加版权信息的显示，需要在 Markdown 中增加copyright: true的设置，类似：

---
title: https://www.zdaiot.com/%E6%90%AD%E5%BB%BA%E5%8D%9A%E5%AE%A2/Windows%E4%B8%8B%E4%BD%BF%E7%94%A8hexo%E6%90%AD%E5%BB%BA%E5%8D%9A%E5%AE%A2/
date: 2018-07-29 21:12:14
tags:
copyright: true
---

小技巧：如果你觉得每次都要输入copyright: true很麻烦的话,那么在/scaffolds/post.md文件中添加：

---
title: {{ title }}
date: {{ date }}
tags:
categories:
copyright:
---

这样每次hexo new "你的内容"之后，生成的md文件会自动把copyright:加到里面去，同理也会把categories:加进入
(注意：如果解析出来之后，你的原始链接有问题：如：http://yoursite.com/2018/07/29/https://www.zdaiot.com/%E6%90%AD%E5%BB%BA%E5%8D%9A%E5%AE%A2/Windows%E4%B8%8B%E4%BD%BF%E7%94%A8hexo%E6%90%AD%E5%BB%BA%E5%8D%9A%E5%AE%A2//,那么在根目录下_config.yml中写成类似这样：）

就行了。

文章加密访问

Next V6.0之前

实现效果图

打开themes/next/layout/_partials/head.swig文件,在以下位置插入这样一段代码：

然后在文章上写成类似这样：

Next V6.0之后

点击这里查看详情

在 hexo 根目录的 package.json 中添加
"hexo-blog-encrypt": "1.1.*"依赖。

执行下面命令，该插件会自动安装：

npm install

首先在 _config.yml 中启用该插件:

# Security
##
encrypt:
    enable: true

然后在你的文章的头部添加上对应的字段，如 password, abstract, message

---
title: hello world
date: 2016-03-30 21:18:02
tags:
    - fdsafsdaf
password: Mike
abstract: Welcome to my blog, enter password to read.
message: Welcome to my blog, enter password to read.
---

• password: 是该博客加密使用的密码
• abstract: 是该博客的摘要，会显示在博客的列表页
• message: 这个是博客查看时，密码输入框上面的描述性文字

如果你想对 TOC 也进行加密。如果你有一篇文章使用了 TOC，你需要修改模板的部分代码。这里用 landscape 作为例子：

• 你可以在 _hexo/themes/landscape/layout/partial/article.ejs 找到 article.ejs。
• 然后找到 <% post.content %> 这段代码，通常在30行左右。
• 使用如下的代码来替代它:

    <% if(post.toc == true){ %>
        
style="display:none" <% } %>>
            Index
            <% if (post.encrypt == true) { %>
                <%- toc(post.origin) %>
            <% } else { %>
                <%- toc(post.content) %>
            <% } %>
        
    <% } %>
    <%- post.content %>

添加gitalk评论系统

gitalk：一个基于 Github Issue 和 Preact 开发的评论插件
详情Demo可见：https://gitalk.github.io/
在GitHub上注册新应用，链接：https://github.com/settings/applications/new

参数说明：
Application name： # 应用名称，随意
Homepage URL： # 网站URL，如http://www.zdaiot.com
Application description # 描述，随意
Authorization callback URL：# 网站URL，http://www.zdaiot.com

点击注册后，页面跳转如下，其中Client ID和Client Secret在后面的配置中需要用到，到时复制粘贴即可：

新建/layout/_third-party/comments/gitalk.swig文件，并添加内容：

{% if page.comments && theme.gitalk.enable %}
  
  
   
{% endif %}

修改/layout/_partials/comments.swig，添加内容如下，与前面的elseif同一级别上：

{% elseif theme.gitalk.enable %}
  

具体位置如下图所示：

修改layout/_third-party/comments/index.swig，在最后一行添加内容：

{% include 'gitalk.swig' %}

新建/source/css/_common/components/third-party/gitalk.styl文件，添加内容：

.gt-header a, .gt-comments a, .gt-popup a
  border-bottom: none;
.gt-container .gt-popup .gt-action.is--active:before
  top: 0.7em;

修改/source/css/_common/components/third-party/third-party.styl，在最后一行上添加内容，引入样式：

@import "gitalk";

在主题配置文件next/_config.yml中添加如下内容：

gitalk:
  enable: true
  ClientID: 4800250e682fe873198b
  ClientSecret: 80f7f33f5f8ddfd3944f455cabadda4ff3299147
  repo: zdaiot.github.io   # 例：zdaiot.github.io
  adminUser: zdaiot #指定可初始化评论账户
  githubID: zdaiot
  distractionFreeMode: true

同步到github后，打开具体某一篇文章，如下图所示，提示，联系@zdaiot初始化创建。如下下面设置均未出错，等待即可，大约几天后，就会出现评论框~~~~

则可在主题配置文件next/_config.yml中改为添加如下内容：

gitalk:
  enable: true
  ClientID: 4800250e682fe873198b
  ClientSecret: 80f7f33f5f8ddfd3944f455cabadda4ff3299147
  repo: zdaiot.github.io   # 例：zdaiot.github.io
  adminUser: zdaiot #指定可初始化评论账户
  githubID: zdaiot
  distractionFreeMode: true

此时，若出现，Error：Not Found，可试试连接手机热点，更换IP地址。

以上就是NexT中添加gitalk评论的配置，博客上传到GitHub上后，打开页面进入某一博客内容下，就可看到评论处。

若想查看该github应用，点击网址https://github.com/settings/developers 如下图所示

为了解决label不能超过50而引起的Error: Validation Failed.问题，这里需要将 https://github.com/blueimp/JavaScript-MD5/blob/master/js/md5.min.js 中的内容保存在本地的Hexo\themes\next\source\js\src文件夹中，然后更改/layout/_third-party/comments/gitalk.swig为

{% if page.comments && theme.gitalk.enable %}
  
  
  
   
{% endif %}

接入网页在线联系功能

首先在DaoVoice注册个账号，我的邀请码是0f81ff2f

完成后，会得到一个app_id，后面会用到：

修改/themes/next/layout/_partials/head/head.swig文件，添加内容如下：

{% if theme.daovoice %}
  
{% endif %}

在next/_config.yml文件中添加内容：

# Online contact
daovoice: true
daovoice_app_id:   # 这里填你刚才获得的 app_id

使用微信接受消息，如图，首先在DaoVoce控制台，点击对话->我

点击右上角的个人设置

点击绑定微信，这里我的已经绑定过了

在设置->应用设置->聊天设置下拉可以找到自定义位置等

添加打赏功能

准备支付宝和微信二维码

• 微信是在收付款->二维码收款->保存收款码
• 支付宝是在收钱->保存图片

在next/_config.yml中配置图片

reward_comment: 坚持原创技术分享，您的支持将鼓励我继续创作！
wechatpay: /images/wechat.png
alipay: /images/aipay.jpg

wechat.jpg、aipay.png图片放入themes/next/source/images中

修改next/source/css/_common/components/post/post-reward.styl，注释wechat:hover和alipay:hover

/* 注释文字闪动函数
#wechat:hover p{
    animation: roll 0.1s infinite linear;
    -webkit-animation: roll 0.1s infinite linear;
    -moz-animation: roll 0.1s infinite linear;
}
#alipay:hover p{
    animation: roll 0.1s infinite linear;
    -webkit-animation: roll 0.1s infinite linear;
    -moz-animation: roll 0.1s infinite linear;
}
*/

对于next 6.0.0以上版本，更改为如下：

#rewardButton {
    cursor: pointer;
    border: 0;
    outline: 0;
    border-radius: 5px;
    padding: 0;
    margin: 0;
    letter-spacing: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
}
#rewardButton span {
    display: inline-block;
    width: 80px;
    height: 35px;
    border-radius: 5px;
    color: #fff;
    font-weight: 400;
    font-style: normal;
    font-variant: normal;
    font-stretch: normal;
    font-size: 18px;
    font-family: "Microsoft Yahei";
    background: #F44336;
}
#rewardButton span:hover{
    background: #F7877F;
}
#QR{
    padding-top:20px;
}
#QR a{
    border:0;
}
#QR img{
    width: 180px;
    max-width: 100%;
    display: inline-block;
    margin: 0.8em 2em 0 2em;
}

/* 注释文字闪动函数
#wechat:hover p{
    animation: roll 0.1s infinite linear;
    -webkit-animation: roll 0.1s infinite linear;
    -moz-animation: roll 0.1s infinite linear;
}
#alipay:hover p{
    animation: roll 0.1s infinite linear;
    -webkit-animation: roll 0.1s infinite linear;
    -moz-animation: roll 0.1s infinite linear;
}
*/

#bitcoin:hover p {
    animation: roll 0.1s infinite linear;
    -webkit-animation: roll 0.1s infinite linear;
    -moz-animation: roll 0.1s infinite linear;
}
@keyframes roll {
    from {
      transform(rotateZ(30deg));
    }
    to {
      transform(rotateZ(-30deg));
    }
}

效果如图：

资源文件夹

有两种方法，第一种是不用插件的情况，第二种是使用一种hexo的插件。

无论哪种方法都有一个共同的前提：修改hexo/_config.yml配置文件post_asset_folder项为true。

创建博客是使用命令创建：

hexo new [layout]