📎 如何在博客中上传带图片的文档？

🎯 方法一：直接上传 PDF 并嵌入阅读

步骤 1：上传 PDF 文件

把 PDF 文件放到博客的 source/downloads/ 文件夹中，然后部署即可。

例如，我刚刚上传了一篇随笔文章：

📄 如何快乐畅游学海？（点击直接下载）

步骤 2：在文章中嵌入 PDF 阅读器

如果你想在文章页面直接预览 PDF（不跳转），可以用 <iframe> 标签：

<iframe src="/downloads/2411-如何快乐畅游学海.pdf" 
        width="100%" height="600px" 
        style="border: 1px solid #ddd; border-radius: 8px;">
</iframe>

效果如下（预览该 PDF）：

步骤 3：PDF 文件下载链接

也可以只放一个下载链接，简洁大方：

📥 点击下载：《如何快乐畅游学海》（PDF）

🖼️ 方法二：在文章中插入图片

✅ 推荐做法：使用本地图片

将图片放在 source/images/ 文件夹中，然后用 Markdown 引用：

![图片描述](/images/covers/hello.svg)

效果：

示例封面

✅ 文章专属图片文件夹

更推荐的做法——为每篇文章建立专属图片文件夹：

source/
├── _posts/
│   └── my-article.md
└── images/
    └── article-assets/
        ├── photo-1.jpg
        └── photo-2.png

然后在文章中引用：

![项目截图](/images/article-assets/photo-1.jpg)

✅ 图文混排示例

把图片和说明文字放在一起，形成图文并茂的效果：

🏗️ 方法三：在文章中用 HTML 做更丰富的排版

Markdown 中可以直接嵌入 HTML，实现更灵活的排版：

<div style="display: flex; gap: 20px; align-items: center; margin: 20px 0;">
  <img src="/images/covers/programming.svg" width="200" style="border-radius: 8px;">
  <div>
    <h4 style="margin: 0 0 8px 0;">左侧图片 + 右侧说明</h4>
    <p style="margin: 0; color: #666;">
      这种排版方式特别适合展示作品集、项目截图，
      左边放图，右边写说明文字。
    </p>
  </div>
</div>

效果：

左侧图片 + 右侧说明

这种排版方式特别适合展示作品集、项目截图， 左边放图，右边写说明文字。

📋 总结：操作步骤一览

场景 操作 代码示例
上传 PDF 放入 source/downloads/ [下载](./downloads/file.pdf)
嵌入 PDF 用 <iframe> 标签 <iframe src="/downloads/file.pdf">
插入图片 放入 source/images/ ![描述](/images/photo.jpg)
图文混排 用 HTML div + flex 见上方示例

💡 小提示：每次添加文件后，运行 hexo clean && hexo generate 再部署，新文件就会生效。

你学会了吗？ 以后写文章就可以自由地插入图片、上传 PDF 文档，做出图文并茂的专业博客了！🎉