「小白教程」Hexo静态博客6——PDF嵌入篇（今年2月份写的老MD，如有实效性或错误之处，欢迎评论区之处🙏）-墙外贴吧

回顾

前言

Hexo博客是通过将Markdown文件渲染成html文件来实现网页的展现的，这也就意味着单单一个PDF文件将难以展示在Hexo博客上。下面将介绍三种方法直接展示PDF文件，分别介绍其优劣之处。可以根据个人的需要来选择PDF的展现方式。

使用hexo-pdf插件

hexo-pdf是hexo博客的一个插件，可以让我们在Markdown文件中直接插入PDF文件。

安装hexo-pdf插件

$ npm install --save hexo-pdf

使用

安装完成后，在Markdown文件中合适的地方插入如下代码：

{% pdf <url-to-pdf> %}

这里的<url-to-pdf>可以是一个url，也可以是本地的指向需要展示的PDF的路径。

优劣势

这种方法的优势在于可以十分方便地插入PDF，但是只在电脑端可以显示，在移动端将是一片透明，无法显示。如果不面对移动端的访问可以忽略此问题，也可以将PDF导出为图片放在下面方便移动端的用户访问。

使用`<iframe>`标签

Markdown和html有着千丝万缕的联系，html的语法在Markdown里也是完全使用的，大多数浏览器也是支持<iframe>标签。所以可以使用<iframe>标签来实现PDF的预览

使用

Markdown文件中合适的地方插入如下代码：

<iframe src="/index.pdf" width="100%" height="100%"></iframe>

在src的引号里放入PDF文件的url或者路径即可，后面的width和height是预览PDF窗口的大小，可以根据自己的需要更改。建议width保持100%，height在500px到900px选择一个值，平衡电脑端和手机端的预览体验。

优劣势

非常遗憾，移动端只能显示PDF的第一页，但是电脑端显示正常，是一个完整的PDF预览组件。
如果考虑到移动端用户的体验，除了增加图片的预览，还可以用html语法加入一个现在链接（前提是你有该文件的直链url哦^_^），完整代码如下：

<iframe src="/index.pdf" width="100%" height="100%">This browser does not support PDFs. Please download the PDF to view it: <a href="/index.pdf">Download PDF</a></iframe>

src同上。href里面放入该PDF文件的直链。

完美的最终解决方案 —— pdf.js

简介，让我们了解这个了不起的项目吧

PDF.js 是一个使用 HTML5 构建的便携式文档格式查看器。
pdf.js 是社区驱动的，并由 Mozilla 支持，目标是为解析和呈现 PDF 创建一个通用的、基于 Web 标准的平台。

下载并使用

下载、解压、上传

文件的下载可以从pdf.js的官方Github库中下载：https://github.com/mozilla/pdf.js, 可以下载你喜欢的版本，我这里使用的是较老的版本3.4。
下载完后解压并上传到服务器的/root/blog/themes/butterfly/source/js文件夹下，其中“blog”为你hexo博客的根目录，如果你的theme不是Butterfly请将你的theme名称把butterfly更换掉，并将文件夹名称更换为pdfjs（保证下面的代码你可以直接食用O(∩_∩)O哈哈~）

更改viewer.js文件，防止跨域报错

找到位于/root/blog/themes/butterfly/source/js/pdfjs/web目录下的viewer.js文件，目录更改同上。完成下图所示的更改，将所示代码注释掉！！！

避免渲染

如果 pdfjs 在 source 文件夹中可能被 Hexo 当成文档渲染出网页，准备当做库使用的文件夹需要告诉 Hexo，让她别当成文档渲染

在 Hexo 配置文件 _config.yml 中的 skip_render 词条下，把 pdfjs 相对 source 的文件夹路径加入进去

skip_render:    - js/**

使用（PDF文件位于本地）

在markdown 文档中使用 <iframe> 控件配合pdf.js 库完成pdf 显示

<iframe src='/js/pdfjs/web/viewer.html?file=<src-to-pdf>' style='width:100%;height:100%'></iframe>

src中前面那一段为viewer.html相对source文件夹的目录，如果你上面那几步和我完全一样则不用修改，后面的<src-to-pdf>为该PDF文件相对于source文件夹的路径。后面的style则是长宽的设置，完全按照你的喜好设置即可。

那如果是url呢？好问题，如果你和我一样把PDF文件存储在我自己搭建的cloudreve网盘里，这时候你会遇到一系列的报错，不同的浏览器报错内容不同，但是大概就是COR的问题，即跨域访问被拒绝的原因。下面介绍如何实现COR使用url来插入PDF！（PS：如果你通过其他方式来获得了PDF文件的直链，我不知道会不会发生和我一样的报错^_^）

使用url来预览PDF

首先你得先将<src-to-pdf>设置成你的PDF文件的直链url，这个时候你来一套hexo三件套是没有用的，因为跨域的缘故pdf.js获取不到url指向的PDF文件，所以电脑端和手机端都无法显示。这时候需要添加<head>来允许跨域访问。

来到Cloudflare，将自己的域名托管到Cloudflare（如果你已经托管了，那请忽略！！！）

进入域名，选择规则，添加一个响应标头转换规则，完成如下配置：

其中Access-Control-Allow-Origin的值设置为你博客的域名即可（带上https://或者http😕/），点击保存后等待一会再次刷新页面后就大功告成了！！！

这个时候你会发现电脑端和手机端都可以访问了！！！

~~完结撒花✿✿ヽ(°▽°)ノ✿~~

非常遗憾，并没有完结撒花。大部分时间里都是用都是正常的，但是当我在2025.2.26的时候上传了一个8.多MB的PDF的时候，电脑直接显示不出来了。查看了报错之后他告诉我是PDF的格式不支持？搜了一圈也没有找到结果，说是要提升版本才行。但是当初之所以没有选择4.x版本而是3.x版本就是因为4.x中都是mjs格式，直接用就报错。但是我不听换脚本，结果都是电脑可以显示PDF了，但是手机又不现实了，测试发现只是单纯的不显示，还是可以通过那个页面下载的。好叭，姑且认为他是版本的问题。所以下面讲讲4.x版本的使用。
为了解决mjs的问题，我们需要打开域名所指向的那个服务器，在Nginx的配置文件中加入一下代码：

http {include mime.types;types {application/javascript js mjs;}default_type application/octet-stream;

之后再md文件中引用的格式改为：<iframe src="域名/pdfjs/web/viewer.html?file=/(PDF位于的文件夹)/(PDF文件名).pdf" width="100%" height="500px" frameborder="0"></iframe> ，这里的前提是pdfjs的文件夹放在[Blogroot]/source文件夹下以及文件夹的名称为pdfjs，如果你的有所不同，请记得更改。然后在skip_render中也要记得把pdfjs文件夹加进去，否则这个文件夹也要被渲染了。然后hexo三连即可完成！！！电脑端和手机端均正常！！！
顺便提一嘴，看到网上有人说把mjs的后缀直接改为js就可以了，虽然没有试过，但总觉得挺不靠谱的。有兴趣可以自行尝试。

完结撒花✿✿ヽ(°▽°)ノ✿（终于真正地完结撒花）

「小白教程」Hexo静态博客6——PDF嵌入篇（今年2月份写的老MD，如有实效性或错误之处，欢迎评论区之处🙏）

回顾

前言