部署PDF.js到Hexo博客

hexo使用Fuild主题的情况下，如何部署PDF.js到hexo博客内，并且我需要将pdfjs文件放到source目录下，需要如何操作。并且引用

要在 Hexo 博客中部署 PDF.js 并将 PDF 文件放到“source”目录下，可以按照以下步骤操作：

1. 下载PDF.js

   在 https://github.com/mozilla/pdf.js/releases 网站上下载最新版本的 PDF.js。

   最好选择”pdfjs-x.x.xxx-legacy-dist”字样的版本，可以适应旧版浏览器。因为新版不支持旧版浏览器。

   （访问不了？不太可能吧？你都能进我这个网站，应该能进github的。不过还是留个备份吧 | PDF.js_3.5.141下载地址）

2. 创建一个名为“pdfjs”的文件夹

   从步骤1中下载的 PDF.js 解压缩到”sourece”文件夹中。将文件从命名为“pdfjs”的文件

3. 将 PDF 文件放入“pdfjs/web”目录中

   将要引用的 PDF 文件放入“pdfjs/web”目录中，例如：如果要引用一个名为“example.pdf”的文件，则将其放入“pdfjs/web/”目录下。

4. 修改主题配置文件

   打开 Hexo 博客中使用的主题的配置文件（一般是“_config.yml”文件），找到“Fuild”主题的安装位置，打开配置文件。添加以下代码：

   # pdfjs
   # pdfjs.enable: 表示是否启用pdfjs插件，这里设置为true，即启用。
   # pdfjs.src: 表示pdf.js文件的相对路径，即PDF.js的核心代码所在位置。
   # pdfjs.workerSrc: 表示pdf.worker.js文件的相对路径，即PDF.js中文档渲染所需要的Worker线程代码所在位置。
   pdfjs:
     enable: true
     src: /pdfjs/build/pdf.js
     workerSrc: /pdfjs/build/pdf.worker.js

   这将使 Fuild 主题加载 PDF.js 库，并指定相应的路径。

5. 在 Markdown 文件中引用 PDF 文件

   在 Markdown 文件中，可以使用以下语法来引用 PDF 文件：

   <div class="pdf-container">
     <iframe src="/pdfjs/web/viewer.html?file=/pdfjs/web/example.pdf" width="100%" height="600px"></iframe>
   </div>

   将“example.pdf”替换为要引用的实际 PDF 文件的文件名即可。

通过以上步骤，您就可以将 PDF.js 集成到 Hexo 博客中，并在 Markdown 文件中使用 iframe 来展示 PDF 文件。

如果网页显示“Cannot GET /pdfjs/web/viewer.html”

这可能是因为您没有正确安装或配置PDF.js库所导致的。要确保正确使用PDF.js，您需要遵循以下步骤：

1. 确认您已经从https://github.com/mozilla/pdf.js下载了最新版本的PDF.js库，并将其提取到您的项目目录中。
2. 检查您的文件路径是否正确。在上面的代码段中，您正在尝试加载“/pdfjs/web/viewer.html”文件。这意味着您必须在您的项目根目录中有一个名为“pdfjs”的文件夹，其中包含“web”子文件夹和所有必需的文件。
3. 如果您使用的是本地服务器，例如XAMPP或WAMP，则确保您的服务器已配置为正确处理PDF文件类型。您可以通过编辑服务器上的MIME类型来完成此操作。如果您使用的是云主机，则需要与托管服务提供商联系以获取更多帮助。
4. 最后，您可以检查控制台以查看可能会向您显示警告或错误消息的任何问题。这些消息可能包括有关缺少文件或其他错误的信息。

如果您仍然无法解决问题，请尝试参考PDF.js官方文档（ https://mozilla.github.io/pdf.js/getting_started/ ）以获取更多帮助。

最终效果

[PDF-Demo](素描笔记 - 小晓de雨滴 (fxy5750.github.io))