博客中嵌入PDF文件常见方法

在Hexo框架中使用Butterfly主题时，可以在博客文章中插入PDF文件。以下是几种常见的方法：

方法一：使用`<embed>`标签

直接在Markdown文件中使用HTML的<embed>标签嵌入PDF文件。

1	<embed src="/path/to/your/file.pdf" width="100%" height="600px" type="application/pdf">

src：PDF文件的路径（可以是相对路径或绝对路径）。
width 和 height：设置嵌入PDF的宽度和高度。
type：指定文件类型为application/pdf。

方法二：使用`<iframe>`标签

使用<iframe>标签嵌入PDF文件。

1 2	<iframe src="/path/to/your/file.pdf" width="100%" height="600px"> </iframe>

src：PDF文件的路径。
width 和 height：设置嵌入PDF的宽度和高度。

方法三：使用PDF.js

PDF.js 是一个开源的PDF阅读器库，可以在网页中嵌入PDF文件。

下载PDF.js：
- 从 PDF.js官网下载最新版本。
- 解压后将文件夹（例如pdfjs）放到Hexo博客的source目录下。
在文章中嵌入PDF：
在Markdown文件中插入以下代码：
1
2
<iframe src="/pdfjs/web/viewer.html?file=/path/to/your/file.pdf" width="100%" height="600px">
</iframe>
- src：指向PDF.js的viewer.html文件，并通过file参数指定PDF文件的路径。
- width 和 height：设置嵌入PDF的宽度和高度。
部署：
确保PDF文件和PDF.js文件夹在部署后能够正确访问。

方法四：使用Google Docs Viewer

通过Google Docs Viewer在线预览PDF文件。

1 2	<iframe src="https://docs.google.com/viewer?url=https://yourdomain.com/path/to/your/file.pdf&embedded=true" width="100%" height="600px"> </iframe>

src：指向Google Docs Viewer的URL，并通过url参数指定PDF文件的完整URL。
width 和 height：设置嵌入PDF的宽度和高度。

方法五：使用Butterfly主题的标签插件

Butterfly主题支持自定义标签插件，你可以创建一个PDF嵌入插件。

创建标签插件：
在Hexo博客的scripts文件夹中创建一个新的JavaScript文件，例如pdf.js：

hexo.extend.tag.register('pdf', function(args) {
  const path = args[0];
  const width = args[1] || '100%';
  const height = args[2] || '600px';
  return `<embed src="${path}" width="${width}" height="${height}" type="application/pdf">`;
});

在文章中使用标签插件：
在Markdown文件中使用以下语法：
1
{% pdf /path/to/your/file.pdf %}
或者指定宽度和高度：
1
{% pdf /path/to/your/file.pdf 100% 800px %}

方法六：直接链接PDF文件

如果不需要嵌入PDF文件，可以直接提供下载链接。

1	[下载PDF文件](/path/to/your/file.pdf)

注意事项

路径问题：
- 如果PDF文件放在source目录下，路径应该是相对于source目录的路径。
- 例如，如果PDF文件放在source/files/example.pdf，路径应为/files/example.pdf。
文件大小：
- 如果PDF文件较大，加载时间可能会较长，建议优化PDF文件大小。
部署测试：
- 在本地测试时，确保路径和文件都能正确访问。
- 部署后检查PDF文件是否能够正常加载。

通过以上方法，你就可以在Hexo博客的Butterfly主题中轻松插入PDF文件啦。