hexo中插入本地pdf文档

在hexo页面中实现浏览pdf文档的功能，以及过程中一些问题的解释

在之前的文章：《魔兽世界日记》译文与译后感想中，实现了hexo页面插入pdf文档页面的功能。因为网上关于这里的内容写的不够细致，官方文档也写的不太行，种种原因导致我卡了一会坑。所以这次单独说一下这个功能。

本功能是依靠一个叫hexo-pdf的插件实现的。这个插件的github项目地址为：https://github.com/superalsrk/hexo-pdf

首先我们需要安装这个插件。先从Git-Bash cd到hexo文件夹所在的目录（即_config.yml、source等文件所在的目录），然后执行npm安装命令：

$ npm install --save hexo-pdf

回车后是这个样子：

可以看到，npm install首先报出了很多WARN，其实，这些WARN大多数都是版本问题，我认为都可以不管。这里简单说一下这些WARN都是什么意思：

第一条是指1.0.0版本的ejs太过老旧，建议升级到2.5.5。ejs是Node.js的模板引擎，在我们搭建hexo博客的时候默认就安装好了，一般都是是1.0版本的，这个是完全不影响的；

第二条是说的是没有装版本号大于等于4.12.1的eslint。eslint是一个代码语法的检测工具，用来规范代码。这个也没啥用，可以忽略。修复的话也可以，输入npm install --save-dev "eslint@>=4.12.1"即可安装一个版本号大于等于4.12.1的eslint；

后面几条都是关于fsevents的，这个是因为我们使用了win/linux系统。因为fsevents是依赖mac操作系统的，也就是说别人在mac上做的东西放到win系统上就会报这个问题。所以也不管；

我们只需要看到+ hexo-pdf@1.1.1以及下面的updated X packages and audited...就行了。

最后是发现了多少个漏洞（vulnerabilities），统统不管。

hexo-pdf插件装好后，就可以在.md文本中引入.pdf文件。和插入图片有些类似，首先我们得把_config.yml中的post_asset_folder的值改为true，这样就会在新建文章即hexo new的时候在source目录下生成一个与.md文本同名的空文件夹，也就是这个文章的资源存放文件夹。如果之前插入过图片的话应该本来就是true。然后我们把需要展示的.pdf文档放入这个文件夹中。

接下来在.md文章中引入这个pdf，最基本的句法为：（如这里的pdf文件名为mydoc.pdf）

{% pdf ./mydoc.pdf %}

这样写的话是使用相对路径，其实pdf文档放在source文件夹下的任何目录都是能用的，因为我的pdf不多，我习惯把pdf和图片都放在post_asset_folder生成的文件夹里。如果需要涉及到的pdf非常多的话，建议可以在source文件夹下开一个单独的文件夹存放pdf文档（可命名为files或pdf等），然后通过hexo new page新建一个栏目页面，这样可以从主页方便进入这个地方。

重点要说一下，这里就算引入成功了，也是不支持本地预览的！..通过hexo s或hexo s -p XXXX进行本地预览的话，会直接弹出下载这个pdf的下载框，并且看不到任何插件效果！如果你本地预览时弹出了下载pdf的框，而不是一行Cannot…就说明已经引入成功了！我之前就是因为看不到效果，以为是插件npm install报错的问题，实际上一点关系都没有，这个东西就是不支持本地预览，因为我们现在引入的pdf文档是在本地的，不是外部资源链接。

后面发现这个句法不够灵活，使用下面的embed src句法能够通过调整width和height改变pdf文档框的大小，要更好一点，我这里就使用的是这个句法：

<embed src="./mydoc.pdf" width="100%" height="700" type="application/pdf">

也可以使用外部资源链接，如官方教程中的（仅参考其格式即可），使用外部链接的话应该是可以进行本地预览的，不过我没试过：

{% pdf http://7xov2f.com1.z0.glb.clouddn.com/bash_freshman.pdf %}

最后就是hexo c、hexo g、hexo d提交部署，等一会后，就能在真实页面中看到实现后的效果：