2018-03-08

hexo使用体验

这次转换静态博客引擎，也不算是突发奇想，由于jekyll开始学的时候没有经验，现在维护的文件目录凌乱不堪，于是索性另起炉灶。在静态引擎的选择上，hexo和jekyll可以说是二分天下，然而由于jekyll是github page的官方生成引擎，总会来的更名正言顺一些。然而程序员的圈子向来难以一家独大，hexo以生成快速、中文文档、主题丰富吸引了很多忠实拥趸。我也是由于hexo的搭建快速，迁移方便而下定决心改换于此。

安装

基本的安装过程参考官方文档即可，安装过程中有几个小小甚至不算坑的坑。

配置git部署工具

hexo可以使用hexo直接一键部署，而这种快捷操作的前提要求是在_config.yml文件中配置部署信息。

deploy:
  type: git
  repo: git@github.com:protao/protao.github.io.git #github仓库地址
  branch: master # github分支

然后是用如下命令安装hexo的git部署工具：npm install hexo-deployer-git --save。

迁移

在官方手册中发现hexo对来自其他博客用户的友好支持，手册中详细介绍了快速将已有博文迁移到hexo中的方法。对于jekyll用户，只需要复制_post文件夹中所有内容，然后在配置文件中将文章文件命名规则改变为与jekyll一致即可。

1	new_post_name: :year-:month-:day-:title.md # File name of new posts (come from jekyll)

图片路径

之前jekyll是自定义的图片路径，由于文章部署问题，路径有时使用绝对路径有时使用相对路径。而在hexo中，一些个人知识资产都在source文件夹中。文章中对source文件夹的解释是：

资源文件夹是存放用户资源的地方。除 _posts 文件夹之外，开头命名为 _ (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹，而其他文件会被拷贝过去。

因此在source文件夹下建立图片文件夹img，在文章中统一使用/img路径引用即可。
这个过程我用了一个小脚本，其实就是遍历文件进行操作，以后可能也会有类似的任务，再切把这个脚本留下来。

# 图片路径有一些小问题，原来是/img/img.png，在hexo中是/img/img.png
# 用sed进行替换, -i表示修改原文件，g表示将遇到的所有匹配的都替换（不然只替换每行第一个）
fun(){
	for file in $1/*
	do
	    if test -f $file
	    then
	        echo $file 是文件
		# Task1 替换图片路径，把/public/img替换为/img
		sed -i 's/public\/img/img/g' $file

		# Task2 40行前面添加标记
		# sed -i 'N;40a<!-- more -->' $file
	    fi
	    if test -d $file
	    then
	        echo $file 是目录
		fun $file
	    fi
	done
}
fun .

图床

好像github page最大只有300M的空间，迟早要弄但是现在懒得弄了。

归档

归档基于时间，时间取决于front-matter中的date属性。
如果归档有问题，安装如下插件：

1
2
3

sudo npm install --save hexo-generator-archive
sudo npm install --save hexo-generator-tag
sudo npm install --save hexo-generator-index

修改模板

在模板中加上catagory。另外总是不习惯用草稿功能，下一篇文章一定要试一试应该会使文章管理更加清晰。

加上访问量统计

参考给 Hexo 博客添加访问统计一问，修改主题文件夹下\layout\_partial文件夹中的如下文件：

在header.ejs中加上

1	<script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>

在article.ejs中加上

1
2
3

<span id="busuanzi_container_page_pv">
   本文总阅读量<span id="busuanzi_value_page_pv"></span>次
</span>

在sidebar.ejs中加上

1
2
3

<span id="busuanzi_container_site_uv"> 
  本站访客数<span id="busuanzi_value_site_uv"></span>人次
</span>

加上数学表达式的支持

在hexo\themes\landscape\layout\_partial\article.ejs文件中加上如下脚本引用。

1
2
3

<script type="text/javascript"
  src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>

另外，有一点小问题。在haroopad中，数学表达式需要用$$围绕，行内表达式需要用$$$围绕。mathjax插件的行表达式也是$$，但是行内表达式却是用\$something\$表达。
然后一开始我的解决方案是用sed直接替换，但是sed不支持分组和非贪婪模式的匹配，因此只能在标签上做手脚，使用空格标识左标签和右标签，然后使用sed替换。

1	sed s/' \$\$\$'/'\\\$'/g $file \|sed s/'\$\$\$ '/'\\\$'/g > $newfile

后来发现一个更好的方法，就是根据mathjax config中，配置一下行内表达式标签，然后成功了，这样编辑器和hexo的公示表达统一了，当然原版的\$\$标签我也保留了，因为要向前兼容。

自定义引用块样式

原有的引用块样式居中显示，字体大而丑，何正文区分度不大，一看之下还容易让人以为是排版错乱，简直忍不了。因此根据网上其他人经验，打开hexo\themes\landscape\source\css 这个目录下，找到article.css ，对其中的blockquote部分进行如下编辑。

blockquote {
	font-family: Microsoft YaHei;
	font-size: 16px;
	font-style: italic;
	width: 500px;
	margin: 0.25em 0;
	padding: 0.25em 40px;
	line-height: 1.45;
	position: relative;
	color: #383838;
	border: 3px dashed #c1c1c1;
	background: #fff;
}

资源文件夹

在_config.yml文件中修改post_asset_folder: true可以在文章同一目录中生成他同名文件夹，但是后来也懒得弄了，都先放在img/文件夹中吧。

文章折叠

加上标签。
统一在第40行加上标签

安装NexT主题

后来还是

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

增加About页面

1	hexo new page about

然后修改themes/<theme_name>/_config.yml里面的menu一项，添加一行About: /about。

源文件同步管理

初始化本地仓库 git init
创建两个分支master和hexo
git add source/_post
git remote add origin git@github.com:protao/protao.github.io.git # 对接远程仓库，一定要对接git路径才能免密操作，要是想免密，把rsa公钥存放到的ssh密钥中，https协议不行，要是已经使用了https协议，使用git remote remove master删除后重新添加
git push origin hexo #push到Github项目的hexo分支上
hexo d -g
如果多跟踪了文件，使用git rm –cached （文件名）

生成原理

另外提供一片参考文章浅析 Hexo 搭建博客的原理

参考：