PWY(2011)及PDF展示与操作示例
一、基本嵌入方式
1. 使用iframe嵌入PDF（推荐）
这是最常用的方式，可以直接在页面中查看PDF内容：
2. 自定义高度
如果PDF较长，可以设置自定义高度：
{% include pdf.liquid
path="assets/pdf/notes_PWY.pdf"
height="800px"
caption="自定义高度的PDF"
download=true %}
3. 仅提供下载链接
如果不想在页面中嵌入PDF，可以只提供下载链接（设置 embed=false）：
二、使用说明
参数说明
| 参数 | 说明 | 默认值 |
|---|---|---|
path | PDF文件路径（必需） | - |
embed | 是否嵌入iframe显示PDF | true |
height | PDF查看器高度 | 600px |
class | 自定义CSS类 | pdf-viewer |
caption | 图片说明文字 | - |
download | 是否显示下载按钮（嵌入模式）或是否直接下载（链接模式） | false |
button_text | 下载按钮文字 | 查看/下载PDF |
title | iframe的title属性 | - |
cache_bust | 是否添加缓存破坏参数 | false |
代码示例
示例1：基本嵌入
{% include pdf.liquid path="assets/pdf/example_pdf.pdf" %}
示例2：带下载按钮
{% include pdf.liquid
path="assets/pdf/example_pdf.pdf"
caption="这是一个示例PDF文件"
download=true %}
示例3：自定义高度和样式
{% include pdf.liquid
path="assets/pdf/example_pdf.pdf"
height="900px"
class="custom-pdf-viewer"
download=true %}
示例4：仅下载链接（不嵌入）
{% include pdf.liquid
path="assets/pdf/example_pdf.pdf"
embed=false
button_text="下载PDF文档"
download=true %}
三、注意事项
- 文件路径：PDF文件应放在
assets/pdf/目录下，或使用完整URL - 浏览器兼容性：大多数现代浏览器都支持iframe嵌入PDF
- 文件大小：建议PDF文件不要过大，以免影响页面加载速度
- 移动端：在移动设备上，PDF可能会以全屏方式打开
四、高级用法
使用外部PDF链接
也可以嵌入外部PDF文件：
{% include pdf.liquid
path="https://example.com/document.pdf"
caption="外部PDF文件"
download=true %}
响应式布局
可以将PDF嵌入到响应式布局中：
<div class="row mt-3">
<div class="col-sm mt-3 mt-md-0">
{% include pdf.liquid
path="assets/pdf/example_pdf.pdf"
caption="响应式PDF展示"
download=true %}
</div>
</div>
提示：将你的PDF文件放在 assets/pdf/ 目录下，然后使用上述代码即可在博客中展示。
Enjoy Reading This Article?
Here are some more articles you might like to read next: