Hexo博客嵌入pdf.js

鉴于小孩子要读一年级了,想着对电子版课本进行收集,提前看起来,网盘查看不方便,想着放博客里,但是发现,没法用PDF显示。琢磨着查找了下,找到此方案。
【参考:Hexo 博客嵌入 pdf.js - 小H的博客
尝试过 hexo-pdf,在WEB端显示挺好的,还能在Obsidian里预览显示,但是无法再手机端显示。

  1. 首先来这里下载 pdf.js,解压后把里面的所有内容放到放到博客根目录的 source/js/pdfjs 里面。
  2. 在 _config.yml (注意不是主题的配置文件)里面添加这些东西(这里根据实际情况指定名称):
1
2
3
4
pdfjs:  
enable: true
src: /js/pdfjs/build/pdf.mjs
workerSrc: /js/pdfjs/build/pdf.worker.mjs
  1. 在 skip_render 这一项里加上 js 目录:
1
skip_render: [js/**]
  1. 接下来可以通过这样的方式来使用 pdf.js:
1
2
3
<div class="pdf-container">  
<iframe src="/js/pdfjs/web/viewer.html?file=/assets/GAMES101.pdf" width="100%" height="600px"></iframe>
</div>

file 后面是文件的地址,比如说我在 source/assets 目录下有 GAMES101.pdf 这个文件,执行 hexo g 后会被复制到网站的根目录,所以这里用 /assets/GAMES101.pdf 来指定这个文件。

/js/pdfjs/web 下面有个似乎是用来测试的论文,想删也可以删了。


Hexo博客嵌入pdf.js
http://060800.xyz/2025/07/26/技术杂糅/Hexo博客嵌入pdf-js/
作者
砖头
发布于
2025年7月26日
许可协议