如何在博文中添加图片

这篇文章介绍在 Jekyll 博客中使用图片的方法，包括基础用法和快速粘贴工具。

📁 准备工作

图片统一存放在 assets/images/ 目录下。

添加图片的方法：

文件管理器：直接拖拽图片到 assets/images/ 目录
命令行：cp ~/Downloads/photo.jpg assets/images/

🖼️ 基础用法

1. Markdown 语法（推荐）

![图片描述](/assets/images/photo.jpg)

2. 控制图片大小

<!-- 固定宽度 -->
<img src="/assets/images/photo.jpg" alt="描述" width="500">

<!-- 居中显示 -->
<div style="text-align: center;">
  <img src="/assets/images/photo.jpg" alt="描述" width="600">
  <p><em>图：图片说明</em></p>
</div>

<!-- 并排显示 -->
<div style="display: flex; justify-content: space-around;">
  <img src="/assets/images/photo1.jpg" alt="图1" width="48%">
  <img src="/assets/images/photo2.jpg" alt="图2" width="48%">
</div>

⚡ 快速粘贴工具（推荐！）

项目提供了两个脚本，可以快速将截图粘贴到博文中。

极简版（强烈推荐）

使用步骤（只需 3 秒）：

# 1. 截图（Cmd + Ctrl + Shift + 4）
# 2. 运行脚本
./paste-image-simple.sh

# 输出：![图片](/assets/images/image-20251013-214530.png)
# ✅ 已保存并复制到剪贴板！

# 3. 在博文中 Cmd + V 粘贴

特点：

✅ 自动保存图片
✅ 自动生成 Markdown 代码
✅ 自动复制到剪贴板
✅ 无需任何输入

完整版（可自定义）

./paste-image.sh

可以自定义文件名和图片描述。

macOS 截图快捷键

快捷键	功能
`Cmd + Shift + 3`	全屏截图
`Cmd + Shift + 4`	区域截图
`Cmd + Ctrl + Shift + 4`	区域截图到剪贴板（⭐ 最常用）

🎨 高级技巧

可点击放大的图片

<a href="/assets/images/photo-large.jpg" target="_blank">
  <img src="/assets/images/photo-small.jpg" alt="点击查看大图" width="400">
</a>

带边框和阴影

<img src="/assets/images/photo.jpg"
     alt="描述"
     style="border: 2px solid #ddd;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            width: 500px;">

懒加载（提升性能）

<img src="/assets/images/photo.jpg" alt="描述" loading="lazy">

📝 完整示例

旅行博文

# 海边之旅

上周末去了海边，拍了一些照片。

![海滩日落](/assets/images/sunset.jpg)
*图：美丽的日落*

天气非常好，海水清澈见底：

<div style="text-align: center;">
  <img src="/assets/images/beach.jpg" alt="海滩" width="600">
  <p><em>图：清澈的海水</em></p>
</div>

⚠️ 注意事项

图片命名

✅ 推荐：photo-001.jpg、screenshot-2025-10-13.png ❌ 避免：我的照片.jpg（中文）、my photo.jpg（空格）

图片格式

JPG - 照片（文件小）
PNG - 截图、透明背景（无损）
WebP - 现代浏览器（更小）

图片大小

移动端：600-800px
桌面端：800-1200px
文件大小：< 500KB

图片优化工具

TinyPNG - 在线压缩
Squoosh - 谷歌出品

🚀 推荐工作流

# 1. 启动本地服务器
./start_server.sh

# 2. 编写博文，需要插入图片时：
#    - 截图：Cmd + Ctrl + Shift + 4
#    - 粘贴：./paste-image-simple.sh
#    - 在博文中 Cmd + V

# 3. 刷新浏览器查看效果

# 4. 满意后发布
git add .
git commit -m "发布新博文"
git push origin main

效率对比：

传统方式：约 2 分钟
使用脚本：约 3 秒 ⚡

📊 快速参考

方法	语法	场景
Markdown	`![描述](/assets/images/photo.jpg)`	日常使用
HTML	`<img src="..." width="500">`	控制大小
快速粘贴	`./paste-image-simple.sh`	⭐ 截图快速插入

💡 总结

核心步骤：

图片放到 assets/images/ 目录
使用 Markdown 或 HTML 引用
使用粘贴脚本提高效率
本地预览后发布

最快工作流：截图 → 运行脚本 → 粘贴 → 完成！（3秒）

现在开始创作图文并茂的精彩博文吧！📸✨