这篇文章介绍的思路和方法，不仅适用于公众号的编辑和排版，对于其他支持 Markdown 的博客网站，如 csdn、博客园、知乎、简书等，以及用 Github 自建的博客，也可食用。

痛点分析

自从 2017 年的文章是时候使用 Markdown 写作了开始，使用 Markdown 已近四年时间，记录思考、笔记、总结，基本都是使用 Markdown 这个工具及其周边，在此把使用过程中遇到的一些问题，找到的一些好用的周边工具及解决方案做个总结，分享给你们，希望对你们也有所帮助。

刚开始写微信公众号的时候，用的是有道云笔记的普通编辑器，通过云同步，解决到处都可以写的问题。

写了一段时间，发现对文字、超链接、表格、代码、数学公式的排版，经常要脱离键盘去点鼠标，效率低，排版不好看，刚好这时候看到 MacTalk 公众号推荐了有道云笔记的 Markdown 功能，初步了解了一下它的语法和使用，逐步开始转用 Markdown 开始写，有道云笔记有一个好处是，Markdown 编辑器的上方提供了一些按钮，刚开始对一些 Markdown 语法不熟悉的时候，比如表格，点击表格的按钮，编辑区就会出现表格的示例，按示例格式修改为自己的内容即可。同时把有道云笔记设置为双栏查看，左边是 Markdown 编辑区，右边为预览区，可以马上看到文字排版效果，思路想法一来的时候，双手不离键盘，一气呵成。

当时的文字主要发布在微信公众号和 CSDN，CSDN 有专门的 Markdown 编辑器，和有道云笔记的语法基本是相通的，写完直接复制过来即可，但是微信公众号却没有 Markdown 编辑器，如何做到一次编写，到处运行呢？

另外，目前只做到了文本类语法如超链接、表格、列表、代码等的即时编写，对于图片，依然需要用鼠标从本地上传和调整，微信公众号文章的排版不太美观。

综上所述，主要是为了解决如下几个问题：

• 随时随地可写。
• 双手尽量在键盘上，不用或少用鼠标操作，写文章是一气呵成的。
• 一次编写，到处运行。
• 能预览文章样式和排版，解决公众号排版问题，排版是一键转换的。
• 图片上传和存储方便，能直接生成相应的 Markdown 内容。

排版工具

Markdown Here

随时随地可写和一起呵成写文章，用有道云笔记基本可以解决，后期也经常使用 Visual Studio Code，因为 VS Code 的工作区功能和各种插件简直让人爱不释手，你可以专门新建一个 Markdown 工作区，只安装用 Markdown 记想法写文章所用到的一些插件，在 Python 工作区安装用 Python 开发的一些插件，避免工作区混在一起，同时工作区内的插件少而美，不臃肿。

首先解决公众号排版一键转换的问题，当时找到了 Markdown Here 这个浏览器插件，支持 Chrome 和 Firefox，看网站主页的介绍，它是为了格式化邮件内容的，但，只要内容是 Markdown 写的，不管是邮件还是其他，都可以利用 Markdown Here 的浏览器插件一键渲染，插件配置页面分为了基本渲染 CSS 和语法高亮 CSS，语法高亮样式会在基本渲染完成后生效，所以有较高优先级。

操作流程如下：

• 在 Chrome/Firefox 中安装 Markdown Here 插件
• 配置 Markdown Here 的基本渲染样式 CSS 和语法高亮 CSS，也可用现成的比较好的 CSS 样式，比如李笑来 GitHub 开源的¹，https://gist.github.com/xiaolai/aa190255b7dde302d10208ae247fc9f2，如果对 CSS 和中英文排版熟悉，也可以自定义一些 CSS。
• 在有道云笔记或 Visual Studio Code 等 Markdown 编辑器中书写。
• 拷贝粘贴到微信公众号的编辑器中。
• 点击浏览器插件，使用 Markdown Here 渲染。
• 书写时留好插入图片位置和标记，手工插入图片，检查及修改。
• 发布文章。

Markdown Here 渲染前在公众号的效果如下：

Markdown Here 渲染后在公众号的效果如下：

使用 Markdown Here 一段时间后，有两个问题还未解决：

• 代码在微信公众号用 Markdown Here 渲染后不美观，如果一行代码很长，在 PC 端可以显示滚动条，在手机端会自动换行，不显示滚动条。
• Markdown渲染后显示图片上传失败，图片需要从本地上传，或者从微信公众号的图片库选择。

Md2All

Md2All² 是由微信公众号作者颜家大少所开发的 Markdown 排版利器，支持”一键排版“、自定义 CSS、代码高亮，能让 Markdown 的内容，无需做任何调整一键复制到微信公众号、csdn、博客园、掘金、知乎、51cto、Wordpress、hexo 等平台，同时支持云图床功能。完整教程链接前往Md2All，使用网址：http://md.aclickall.com/。

操作流程如下：

• 在 http://md.aclickall.com/ 的一键排版功能中，根据预提供的样式模版，先复制某一份你喜欢的 CSS 模版样式到最爱样式下，再在此最爱样式基础上，自定义自己的 CSS 样式。
• 在有道云笔记或 Visual Studio Code 等 Markdown 编辑器中书写。
• 拷贝 Markdown 内容粘贴到 Md2All 的编辑器中，右边会显示渲染后的内容。
• 一键复制，点击工具栏的复制按钮。
• 粘贴复制后的内容到微信公众号的编辑器中。
• 书写时留好插入图片位置和标记，手工插入图片，检查及修改。
• 发布文章。

Md2All 渲染前后对比效果如下：

根据 Md2All 的介绍，它的云图床功能已经很好的解决了图片上传和存储的问题，支持以下几种方式：

• 把图片拖到编辑框，编辑框自动生成相应的 Markdown，预览区正确显示图片。
• 支持截图后直接复制剪贴板内容。
• 支持编辑区点图片图标，通过文件路径选择图片。

教程中使用的图床方案是七牛云存储，有一定的免费额度，但测试域名使用30天需要绑定自己备案的域名才能继续使用，当前未采用此方案处理图片。

至此，一次编写到处运行、代码高亮和显示的问题已解决，图片存储和处理的问题未解决。

可能吧公众号排版器

阿禅 Jason Ng 大神对排版的思考³值得好好读几遍，它是对于内容呈现、阅读的深刻理解，推出的可能吧公众号排版器⁴，针对中文公众号的内容特征，做了一些额外的语法支持，写文章一气呵成，排版一键转换。如果文章图片和代码少，内容用 Markdown 书写，再粘贴到公众号后台，这个排版器是首选，很有逼格。排版器地址和具体的使用方法，前往 https://knb.im/mp/ 直接查看。

Markdown 插入图片

Markdown 插入图片⁵有三种方法，插图最基础的格式就是：![Alt text](图片链接 "optional title")，Alt text：图片的 Alt 标签，用来描述图片的关键词，可以不写，最初的本意是当图片因为某种原因不能被显示时而出现的替代文字，后来被用于SEO。图片链接可以是图片的本地地址或者是网址，”optional title”，鼠标悬置于图片上会出现的标题文字，可以不写。

• 插入本地图片，在基础语法的括号中填入图片的本地路径即可，支持绝对路径和相对路径，例如：![avatar](/user/desktop/avatar.png)，缺点是不灵活不好分享，本地图片的路径更改或丢失都会造成 Markdown 文件调不出图。
• 在基础语法的括号中插入图片的网络链接，现在已经有很多免费/收费图床和方便传图的小工具可选，如七牛图床、有道云笔记会员的 markdown 图床。
• 用 base64 转码工具把图片转成一段字符串，然后把字符串填到基础格式中链接的位置。基础用法：![avatar](data:image/png;base64,iVBORw0......)，这时会发现插入的一长串字符串会把整个文章分割开，非常影响写文章时的体验。如果能把大段的 base64 字符串放在文章末尾，然后在文章中通过一个 id 来调用，文章就不会被分割的这么乱了，就像写论文时的文末的注释和参考文档一样。这个想法可以通过 Markdown 的参考式链接语法来实现。进阶用法如下：![avatar][doge]，文末存储字符串语法：[doge]:data:image/png;base64,iVBORw0......，这个用法不常见，优点是很灵活，不会有链接失效的困扰，缺点是一大团 base64 的乱码看着不美观。

除了开通有道云笔记会员外，我分享一下自己尝试过的几个方法。

有道云笔记 Markdown 插入图片

通过有道云笔记文件夹管理图片，操作流程如下：

• 在有道云笔记中新建一个目录/文件夹【图片共享】。
• 上传本地图片到有道云笔记到图片共享目录下。
• 点击分享图片就会得到一个文件的分享 URL，将这个 URL 复制在浏览器中打开，可以看到图片。
• 右击图片，复制图片地址。
• 在 Markdown 文件中引用这个图片地址。

注：共享图片不可以删除，否则笔记中找不到图片。

通过有道云笔记新建一篇普通笔记管理图片：

• 图片拖动到编辑框，或者直接粘贴截图到剪贴板的图片，或者点击工具栏的图片图标从文件路径选择图片。
• 同步这篇普通笔记后，分享这篇笔记。
• 在浏览器打开分享链接，右击图片，复制图片地址。
• 在 Markdown 文件中引用这个图片地址。

两种方法的原理基本一致，这两种方法都是不能将图片删掉的，否则访问不到。

GitHub 搭建图床

GitHub 搭建图床，可以配合 GitHub 自建博客使用。关于 Github 搭建博客可查看文章如何用 Github 搭建博客，自动部署可查看文章Travis CI 自动部署 Hexo 博客到 Github Pages，整个流程需要用到 VS Code 插件 PicGo，直接在 Extensions 中搜索安装就行。

打开 VS Code 设置，搜索 PicGo 的相关设置项，找到 GitHub 部分，进行配置：

• 首先是 PicGo-Core 设为 github
• branch 设为自己 Hexo 博客的源码分支，我的博客源码分支为 blog-source
• Path 和 Repo搭配使用，到时候上传的图片就会到 Repo+Path 目录下，比如我的会传到：padluo/padluo.github.io/source/images/，注意：Path 后面加/，不然后面一部分会当成图片名称合并进去，比如 Path 设为：source/images，那么上传 world.png 图片时会成为：source/imagesworld.png
• token，在 Github的 Settings-Developer settings-Personal access tokens-Generate new token，最后把 token 复制到 PicGo 设置里的 Github Token 里即可
• 然后就可以在 VS Code 里使用图床了

1
2
3
4
5

"picgo.picBed.current": "github"
"picgo.picBed.github.branch": "blog-source"
"picgo.picBed.github.path": "source/images/"
"picgo.picBed.github.repo": "padluo/padluo.github.io"
"picgo.picBed.github.token": "your token"

在 VS Code 使用 PicGo 的三个快捷键如下，选择图片后，在 VS Code 编辑区会自动生成 Markdown 内容，在预览区可以看到图片。

1
2
3
4
5
6

# 从文件目录手动插入图片
ctrl+alt+e
# 从剪贴板插入图片
ctrl+alt+u
# 从输入目录插入图片，相对目录和绝对目录都行
ctrl+alt+o

最后，总结一下我目前使用 Markdown 及周边工具记录笔记、写文章的方案：

方案一：有道云笔记 + Md2All/可能吧排版 + 有道云笔记 Markdown 插入图片，适合图片和代码少的 Markdown 内容。
方案二：VS Code + Md2All排版 + GitHub 图床，适合 Github 自建博客、代码和图片比较多的 Markdown 内容。

微信公众号「padluo」，分享数据科学家的自我修养，既然遇见，不如一起成长。

读者交流电报群

https://t.me/sspadluo

知识星球交流群

参考文档

¹. Markdown Here 教程-李笑来 ↩

². 手把手教你公众号、博客排版，Md2All 详细教程-颜家大少 ↩

³. 当我在排版时，我在思考什么？-阿禅 Jason Ng ↩

⁴. 为公众号排版做点微小的贡献-阿禅 Jason Ng ↩

⁵. Markdown 中插入图片有什么技巧？ ↩

在如何用Github搭建博客中，我们基于 Git 仓库建立了一个分支 blog-source 来管理博客的源码，每次在 source/_post 下创建新文章，利用 GitHub 图床，在 source/images 文件夹中存放文章中需要用到的图片，关于 Github 图床的搭建及使用在以后的文章中讲解。写好博客文章后，只需要git push把博客源码推送到 Github 的远程仓库，Travis CI 便完成自动部署。

1
2

# 创建一篇新文章或新的页面
hexo new [layout] <title>

手动部署

使用 Hexo 生成静态文件，自动部署网站，可以执行下列的命令：

1
2
3

hexo generate --deploy
# 命令简写
hexo g -d

这样就可以完成博客的更新了。

Travis CI 部署 GitHub Pages

创建一个 Github repo 并且同步代码到 GitHub 上

• 新建一个名称为 <username>.github.io 的 Github repo，这里的<username>是你的用户名称，例如我的 GitHub 用户名是 padluo，我建立的 repo 是padluo.github.io。
• 建立一个分支来管理博客的配置和 Markdown 文件，例如，padluo 建立了一个名称为 blog-source 的分支，管理博客的源代码。
• 将你的 Hexo 站点文件夹推送到 GitHub 远程仓库的 blog-source 分支中。默认情况下 public 目录将不会被推送到 repository 中，你应该检查 .gitignore 文件中是否包含 public 一行，如果没有请加上。

设置 Travis CI 和 GitHub

• 将 Travis CI 添加到你的 GitHub 账户中，用 GitHub 账户登录Travis CI即可。
• 前往 GitHub 的 Applications settings，配置 Travis CI 权限，使其能够访问你的 repository。
• 你应该会被重定向到 Travis CI 的页面。如果没有，请手动前往Travis CI。
• 在浏览器新建一个标签页，前往 GitHub-Settings-Developer settings 新建 Personal Access Token，只勾选 repo 的权限并生成一个新的 Token。Token 生成后请复制并保存好。
• 回到 Travis CI，前往你的 Settings-repository 的设置页面，在 padluo.github.io 仓库的 Settings-Environment Variables 下新建一个环境变量，Name 为 GH_TOKEN，Value 为刚才你在 GitHub 生成的 Token。确保 DISPLAY VALUE IN BUILD LOG 保持 不被勾选，避免你的 Token 泄漏。点击 Add 保存。

编辑 Travis CI 部署配置文件

在你的本地 Hexo 站点项目根目录中新建一个 .travis.yml文件，内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

sudo: false
language: node_js
node_js:
  - 12 # use nodejs v12 LTS
cache: npm
branches:
  only:
    - blog-source # 仅从 blog-source 分支构建
script:
  - hexo generate # generate static files
deploy:
  provider: pages
  skip-cleanup: true
  github-token: $GH_TOKEN
  keep-history: true
  committer_from_gh: true
  target_branch: master # 部署到 master 分支
  on:
    branch: blog-source
  local-dir: public

将 .travis.yml 推送到 GitHub 远程仓库中，Travis CI 应该会自动开始运行，并将生成的文件推送到同一 repository 下的 master 分支下。

前往 https://<username>.github.io 查看你的站点是否可以访问。这可能需要一些时间。

参考资料

1. https://hexo.io/zh-cn/docs/github-pages

微信公众号「padluo」，分享数据科学家的自我修养，既然遇见，不如一起成长。

读者交流电报群

https://t.me/sspadluo

知识星球交流群

搭建的博客的域名是 padluo.github.io，自定义域名为 www.padluo.ml，现在已经运行在 GitHub Pages 上面了，大家如果感兴趣可以去看一下。

下面是站点的预览图：

准备 Github 账户和仓库

创建一个名为 {username}.github.io 的仓库，Github Pages 会自动为这个仓库分配一个 github.io 的二级域名，如我创建的仓库名称为 padluo.github.io

如果 Github 没有配置 SSH 连接的话建议配置一下，利用 SSH 密钥可以连接 Github，而无需在每次访问时提供用户名或密码，新增 SSH 密钥到 GitHub 帐户，参考：

https://help.github.com/cn/github/authenticating-to-github/adding-a-new-ssh-key-to-your-github-account

安装 Hexo

安装 Hexo 前提，

• 安装 Node.js
• 安装 Git

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 让brew走代理更新
export ALL_PROXY=socks5://127.0.0.1:1080
brew update --verbose

# 当前长期支持版: 12.16.1 (包含 npm 6.13.4)
brew search node
# To unlink from current version
brew unlink node
brew install node@12

# To link installed version
➜ /Users/padluo >brew link --force --overwrite node@12
Linking /usr/local/Cellar/node@12/12.16.1... 3812 symlinks created

brew install git

安装完毕之后，确保环境变量配置好，能正常使用 npm 命令。

1
2

node -v
npm -v

当安装完 Git 应该做的第一件事就是设置用户名称与邮件地址，因为每一个 Git 的提交都会使用这些信息，并且它会写入到每一次提交中，不可更改：

1
2
3

git config --global user.name "padluo"
git config --global user.email padluo@example.com
git config --list

安装 Hexo，

1

npm install -g hexo-cli

安装完毕之后，确保环境变量配置好，能正常使用 hexo 命令。

初始化项目

1
2
3
4
5
6

$ hexo init padluo_blog
$ cd padluo_blog
$ hexo generate
$ hexo server
INFO  Start processing
INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

初始化的博客架子就出来了。

部署

接下来我们将这个初始化的博客进行部署，放到 Github Pages 上面验证可用性。

部署命令如下：

1

hexo deploy

在部署之前，需要先知道博客的部署地址，它需要配置一个 Github 的一个 Repository 的地址。

打开项目根目录的_config.yml文件，找到 Deployment 这个地方，把刚才新建的 Repository 地址贴过来，然后指定分支为 master 分支，最终修改为如下内容：

1
2
3
4
5
6

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

另外还需要安装一个支持 Git 的部署插件 hexo-deployer-git ，如果不安装，在执行部署命令时会报如下错误：

1

ERROR Deployer not found: git

在项目目录下执行安装命令如下：

1

npm install hexo-deployer-git --save

安装成功之后，执行部署命令，运行结果类似如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

INFO  Deploying: git
INFO  Clearing .deploy_git folder...
INFO  Copying files from public folder...
INFO  Copying files from extend dirs...
位于分支 master
无文件要提交，干净的工作区
Warning: Permanently added the RSA host key for IP address '13.229.188.59' to the list of known hosts.
枚举对象: 46, 完成.
对象计数中: 100% (46/46), 完成.
使用 8 个线程进行压缩
压缩对象中: 100% (36/36), 完成.
写入对象中: 100% (46/46), 507.65 KiB | 1.75 MiB/s, 完成.
总共 46 （差异 4），复用 0 （差异 0）
remote: Resolving deltas: 100% (4/4), done.
To github.com:padluo/padluo.github.io.git
 + b8ed093...2d5edc2 HEAD -> master (forced update)
分支 'master' 设置为跟踪来自 'git@github.com:padluo/padluo.github.io.git' 的远程分支 'master'。
INFO  Deploy done: git

这时候我们访问一下 GitHub Repository 同名的链接，比如我的博客 Repository 名称是 padluo.github.io ，那我就访问 http://padluo.github.io ，这时候我们可以看到和本地一模一样的内容。这实际上是把博客文件夹下面的 public 下的所有内容，Hexo 把编译之后的静态页面内容上传到 GitHub 的 master 分支上面去了。

如果想把博客的源码页放到 GitHub 上面，可以新建一个分支。如我这边新建一个 blog-source 分支，代表博客源码。

1
2
3
4
5
6

git init
git checkout -b blog-source
git add -A
git commit -m "init blog"
git remote add origin git@github.com:padluo/padluo.github.io.git
git push origin blog-source

配置站点信息

找到项目根目录下的 _config.yml 文件，修改博客的一些基本信息，找到 Site 区域，配置站点 title、副标题 subtitle、关键字 keywords 等内容，

1
2
3
4
5
6
7
8

# Site
title: padluo
subtitle: 分享数据科学家的自我修养
description: 主要编程语言为 Python，领域涵盖大数据、机器学习、深度学习、爬虫等
keywords: "Python, 大数据, 机器学习, 深度学习, 爬虫"
author: padluo
language: zh-CN
timezone: ''

修改主题

使用 Next 主题，命令行进入到项目到根目录，执行如下命令：

1

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

执行完毕后 Next 主题到源码就会出现在项目到 themes/next 文件夹下。

然后我们修改一些博客所用的主题名称，修改项目根目录下的 _config.yml 文件，找到 theme 字段， 修改为 next 即可，

1

theme: next

主题配置

Next 主题内部页提供了一个配置文件，名字同样是 _config.yml，位置在 themes/next 文件夹下，下文所述内容如果没有特别说明，都是修改的 themes/next/_config.yml 文件，

样式

修改配置文件的 scheme 字段即可，我选了 Pisces 样式（注意是 themes/next/_config.yml 文件），

1

scheme: Pisces

favicon

favicon 就是站点标签栏的小图标，有一个网站可以直接将图片转化为站点小图标，站点链接为：https://realfavicongenerator.net，到这里上传一张图，便可以字节打包下载各种尺寸和适配不同设备的小图标。

图片下载下来之后放在 themes/next/source/images 目录下面。

然后在配置文件里找到 favicon 配置项，把一些相关路径配置进去即可，如：

1
2
3
4
5

favicon:
  small: /images/favicon-16x16.png
  medium: /images/favicon-32x32.png
  apple_touch_icon: /images/apple-touch-icon.png
  safari_pinned_tab: /images/safari-pinned-tab.svg

avatar

avatar 类似站点的头像，如果设置了，会在站点的作者信息旁边额外显示一个头像，比如我这边有一张 avatar.png 图片，将其放置到 themes/next/source/images/avatar.png 路径，然后在主题 _config.yml 文件下编辑 avatar 到配置，修改为正确到路径。

1
2
3
4
5
6
7
8

# Sidebar Avatar
avatar:
  # Replace the default image and set the url here.
  url: /images/avatar.jpg
  # If true, the avatar will be dispalyed in circle.
  rounded: false
  # If true, the avatar will be rotated with the cursor.
  rotated: true

这里 rounded 选项是是否显示圆形，rotated 是是否带有旋转效果。

rss

开启 RSS 订阅，需要安装一个插件 hexo-generator-feed ，安装完成之后，不需要其他配置，以后每次编译生成站点的时候，就会自动生成 RSS Feed 文件了。

1

npm install hexo-generator-feed --save

code

代码块到显示，把代码到颜色修改为黑色，并把复制按钮到样式修改为类似 Mac 的样式，修改 _config.yml 文件的 codeblock 区块，

1
2
3
4
5
6
7
8
9
10
11
12

codeblock:
  # Code Highlight theme
  # Available values: normal | night | night eighties | night blue | night bright | solarized | solarized dark | galactic
  # See: https://github.com/chriskempson/tomorrow-theme
  highlight_theme: night bright
  # Add copy button on codeblock
  copy_button:
    enable: true
    # Show text copy result.
    show_result: true
    # Available values: default | flat | mac
    style: mac

修改后的代码样式如下：

top

快速返回到网站的上端，一般有一个按钮辅助，修改 _config.yml 的 back2top 字段。sidebar 如果设置为 true，按钮会出现在侧栏下方，scrollpercent 就是显示阅读百分比。

1
2
3
4
5
6

back2top:
  enable: true
  # Back to top in sidebar.
  sidebar: false
  # Scroll percent label in b2t button.
  scrollpercent: true

reading_process

阅读进度，站点的最上方会出现一个细细的进度条，代表页面加载进度和阅读进度，大家可以设置后根据喜好选择。

1
2
3
4
5
6
7

# Reading progress bar
reading_progress:
  enable: true
  # Available values: top | bottom
  position: top
  color: "#222"
  height: 2px

bookmark

书签，可以根据阅读历史记录，在下次打开页面的时候帮助我们定位到上次的位置。

1
2
3
4
5
6
7
8

# Bookmark Support
bookmark:
  enable: false
  # Customize the color of the bookmark.
  color: "#222"
  # If auto, save the reading progress when closing the page or clicking the bookmark-icon.
  # If manual, only save it by clicking the bookmark-icon.
  save: auto

github_banner

打开右上角的 GitHub 图标，点击之后可以跳转到其源码页面。

1
2
3
4
5

# `Follow me on GitHub` banner in the top-right corner.
github_banner:
  enable: true
  permalink: https://github.com/padluo/padluo.github.io
  title: padluo GitHub

gitalk

Hexo 是静态博客，没有连接数据库功能，评论功能不能自行集成，可以集成第三方的服务。

这里采用 gitalk，首先需要在 GitHub 上面注册一个 OAuth Application，链接为：https://github.com/settings/applications/new，注册完毕之后拿到 Client ID、Client Secret 就可以了。

首先在 _config.yml 文件的 comments 区域配置使用 gitalk：

1
2
3
4
5
6
7

# Multiple Comment System Support
comments:
  # Available values: tabs | buttons
  style: tabs
  # Choose a comment system to be displayed by default.
  # Available values: changyan | disqus | disqusjs | gitalk | livere | valine
  active: gitalk

然后找到 gitalk 配置，添加各项配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# Gitalk
# For more information: https://gitalk.github.io, https://github.com/gitalk/gitalk
gitalk:
  enable: true
  github_id: padluo # GitHub repo owner
  repo: padluo.github.io # Repository name to store issues
  client_id: [client_id] # GitHub Application Client ID
  client_secret: [client_secret] # GitHub Application Client Secret
  admin_user: padluo # GitHub repo owner and collaborators, only these guys can initialize gitHub issues
  distraction_free_mode: true # Facebook-like distraction free mode
  # Gitalk's display language depends on user's browser or system environment
  # If you want everyone visiting your site to see a uniform language, you can set a force language value
  # Available values: en | es-ES | fr | ru | zh-CN | zh-TW
  language: zh-CN

配置完之后 gitalk 就可以使用了，点击进入文章页面，就会出现如下页面：

GitHub 授权登录之后就可以使用了，评论的内容会自动出现在 Issue 里面。

pangu

在主题里面开启这个选项，在编译生成页面的时候，中英文之间就会自动添加空格。

1

pangu: true

math

支持公式显示，Next 主题提供了两个渲染引擎，分别是 mathjax 和 katex，后者相对前者来说渲染速度更快，而且不需要 JavaScript 的额外支持，但后者支持的功能现在还不如前者丰富，具体的对比可以看官方文档：https://theme-next.org/docs/third-party-services/math-equations。

所以我这里选择了 mathjax，通过修改配置即可启用：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# Math Formulas Render Support
math:
  enable: true
  # Default (true) will load mathjax / katex script on demand.
  # That is it only render those page which has `mathjax: true` in Front-matter.
  # If you set it to false, it will load mathjax / katex srcipt EVERY PAGE.
  per_page: true

  # hexo-renderer-pandoc (or hexo-renderer-kramed) required for full MathJax support.
  mathjax:
    enable: true
    # See: https://mhchem.github.io/MathJax-mhchem/
    mhchem: true

  # hexo-renderer-markdown-it-plus (or hexo-renderer-markdown-it with markdown-it-katex plugin) required for full Katex support.
  katex:
    enable: false
    # See: https://github.com/KaTeX/KaTeX/tree/master/contrib/copy-tex
    copy_tex: false

mathjax 的使用需要我们额外安装一个插件，叫做 hexo-renderer-kramed，另外也可以安装 hexo-renderer-pandoc，命令如下：

1
2

npm un hexo-renderer-marked --save
npm i hexo-renderer-kramed --save

pjax

利用 Ajax 技术实现了局部页面刷新，既可以实现 URL 的更换，又可以做到无刷新加载。

要开启这个功能需要先将 pjax 功能开启，然后安装对应的 pjax 依赖库，首先修改 _config.yml 如下：

1

pjax: true

然后安装依赖库，切换到 next 主题下，然后安装依赖库：

1
2

cd themes/next
git clone https://github.com/theme-next/theme-next-pjax source/lib/pjax

文章

现在整个站点只有一篇文章，那么我们怎样来增加其他的文章呢？调用 Hexo 提供的命令即可。

比如增加一篇「如何用GitHub搭建博客」增加文章，如果标题包含空格的话，请使用引号括起来。

1

hexo new "如何用Github搭建博客"

创建的文章会出现在 source/_posts 文件夹下，是 MarkDown 格式。在文章开头通过如下格式添加必要信息：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

---
title: demo # 自动创建
date: 2020-03-03 17:01:24 # 自动创建
tags:
- Github
categories:
- Github
---

## 标题1

正文1

## 标题2

正文2

开头下方撰写正文，MarkDown 格式书写即可。

这样在下次编译的时候就会自动识别标题、时间、标签、类别等等，另外还有其他的一些参数设置，可以参考文档：https://hexo.io/zh-cn/docs/writing.html 。

标签页

增加标签页，在根目录下执行命令如下：

1

hexo new page tags

执行这个命令之后会自动帮我们生成一个 source/tags/index.md 文件，内容就只有这样子的：

1
2
3
4

---
title: tags
date: 2020-03-03 17:16:02
---

我们可以自行添加一个 type 字段来指定页面的类型：

1
2

type: tags
comments: false

然后再在主题的 _config.yml 文件将这个页面的链接添加到主菜单里面，修改 menu 字段如下：

1
2
3
4
5
6
7
8
9

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

分类页

分类功能和标签类似，一个文章可以对应某个分类，如果要增加分类页面可以使用如下命令创建：

1

hexo new page categories

然后同样的，会生成一个 source/categories/index.md 文件。我们可以自行添加一个 type 字段来指定页面的类型：

1
2

type: categories
comments: false

然后再在主题的 _config.yml 文件将这个页面的链接添加到主菜单里面，修改 menu 字段如下：

1
2
3
4
5
6
7
8
9

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

搜索页

如果要添加搜索功能，需要在项目根目录下先安装一个插件，叫做 hexo-generator-searchdb，命令如下：

1

npm install hexo-generator-searchdb --save

然后在项目的 _config.yml 里面添加搜索设置如下：

1
2
3
4
5

search:
  path: search.xml
  field: post
  format: html
  limit: 10000

然后在主题的 _config.yml 里面修改如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# Local search
# Dependencies: https://github.com/wzpan/hexo-generator-search
local_search:
  enable: true
  # If auto, trigger search by changing input.
  # If manual, trigger search by pressing enter key or search button.
  trigger: auto
  # Show top n results per article, show all results by setting to -1
  top_n_per_article: 5
  # Unescape html strings to the readable one.
  unescape: false
  # Preload the search data when the page loads.
  preload: false

这里用的是 Local Search，如果想使用其他的 Search Service 的话可以参考官方文档：https://theme-next.org/docs/third-party-services/search-services 。

404 页面

另外还需要添加一个 404 页面，直接在根目录 source 文件夹新建一个 404.md 文件即可，内容可以仿照如下：

1
2
3
4
5
6
7
8
9
10
11
12
13

---
title: 404 Not Found
date: 2020-03-03 17:31:00
---

<center>
对不起，您所访问的页面不存在或者已删除。
您可以<a href="https://padluo.github.io>">点击此处</a>返回首页。
</center>

<blockquote class="blockquote-center">
    padluo
</blockquote>

这里面的一些相关信息和链接可以替换成自己的。

完成了上面的配置基本就完成了大半了，其实 Hexo 还有很多很多功能，大家可以直接参考官方文档：https://hexo.io/zh-cn/docs/ 查看更多的配置。

自动部署

且听下回分解。

问题

问题一：仓库嵌套

warning: adding embedded git repository: themes/next

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

➜ /Users/padluo/Projects/Hexo/padluo_blog git:(blog-source) ✗ >git add _config.yml package-lock.json package.json source/404.md source/_posts/demo.md source/categories source/tags themes/next
warning: 正在添加嵌入式 git 仓库：themes/next
提示：You've added another git repository inside your current repository.
提示：Clones of the outer repository will not contain the contents of
提示：the embedded repository and will not know how to obtain it.
提示：If you meant to add a submodule, use:
提示：
提示：  git submodule add <url> themes/next
提示：
提示：If you added this path by mistake, you can remove it from the
提示：index with:
提示：
提示：  git rm --cached themes/next
提示：
提示：See "git help submodule" for more information.
➜ /Users/padluo/Projects/Hexo/padluo_blog git:(blog-source) ✗ >git status
位于分支 blog-source
要提交的变更：
  （使用 "git reset HEAD <文件>..." 以取消暂存）

    修改：     _config.yml
    修改：     package-lock.json
    修改：     package.json
    新文件：   source/404.md
    新文件：   source/_posts/demo.md
    新文件：   source/categories/index.md
    新文件：   source/tags/index.md
    新文件：   themes/next

尚未暂存以备提交的变更：
  （使用 "git add <文件>..." 更新要提交的内容）
  （使用 "git checkout -- <文件>..." 丢弃工作区的改动）
  （提交或丢弃子模组中未跟踪或修改的内容）

    修改：     themes/next (修改的内容)

仓库内克隆其他仓库，后续该如何进行管理？

方法一：因为之前是直接把第三方主题克隆到博客目录，有什么改动是无法推送到作者 Git 仓库的，这个时候需要把第三方主题的项目Fork到自己仓库，自己账号下生成一个同名的仓库，并对应一个 url，我们应该 git clone 自己账号下仓库的 url。

1

git submodule add git@github.com:padluo/hexo-theme-next.git themes/next

把自己仓库下面第三方主题添加到 Git 子模块，注意: themes/next 这里的目录是因为我用的 next 主题才会写 themes/next，如果你用的不是 next 请把 next 替换成你的第三方主题文件夹名字。博客的根目录会多一个.gitmodules文件，这是一个配置文件，保存了项目 URL 和你拉取到的本地子目录。

方法二：从第一步git add的 warning 提示可以看出 git 在后续克隆将不会包含这个 themes/next 的内容，当我 push 完之后，在 GitHub 上看到的将是一个灰色的图标，代表这是一个子模块，但是不知道这个子模块的仓库所在的 url，因此在 GitHub 上无法打开这个文件夹。

解决方案：不使用 git submodule 功能，而是直接将这个文件夹作为根仓库的内容加入并 commit。

1
2
3
4
5
6

Step1: 删除已经 staged 过的文件
git rm --cached themes/next
Step2: 查看当前状态
git status
Step3: 重新 stage 这个文件夹
git add themes/next/

注意：这里一定要加上 /，表示将这个文件夹加入，而不是将这个文件夹当做一个子模块。
两者区别：

1
2

git add themes/next
git add themes/next/

问题二：安装完 Git 没有设置用户名称与邮件地址

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

➜ /Users/padluo/Projects/Hexo/padluo_blog git:(blog-source) ✗ >git commit -m "add .travis.yml"
[blog-source 285845d] add .travis.yml
 Committer: JIANPING LUO <padluo@JIANPINGdeMacBook-Pro.local>
您的姓名和邮件地址基于登录名和主机名进行了自动设置。请检查它们正确
与否。您可以对其进行设置以免再出现本提示信息。运行如下命令在编辑器
中编辑您的配置文件：

    git config --global --edit

设置完毕后，您可以用下面的命令来修正本次提交所使用的用户身份：

    git commit --amend --reset-author

 1 file changed, 20 insertions(+)
 create mode 100644 .travis.yml

参考资料

1. https://mp.weixin.qq.com/s/udAoloIeKINK74T04fQNbQ
2. https://hexo.io/zh-cn/docs/

微信公众号「padluo」，分享数据科学家的自我修养，既然遇见，不如一起成长。

读者交流电报群

https://t.me/sspadluo

知识星球交流群