学会了markdown插图的超快速方式 2025-04-16-Markdown-Blog 插图自动化系统：从截图到 Neovim 即时插入
⸻
✨ 博客内容（Markdown 结构）
title: “Markdown Blog 插图自动化系统：从截图到 Neovim 即时插入”
date: 2025-04-16
layout: post
—
🪄 从截图到插图：自动化流程简介
在日常撰写博客（如 Hexo/Jekyll 系统）时，我们经常需要将截图快速插入到文章中。但传统做法涉及以下痛点：
⏱ 文件名手动命名，费时出错；
📂 找不到 asset 文件夹路径；
📋 Markdown 插图语法手打费劲；
🧭 Neovim / Terminal 中文件结构不清晰，难以操作。
现在通过自定义脚本 blog_clipshot，可以一键完成整个流程：
📸 直接截图并复制到剪贴板；
💾 自动保存为带日期路径的 PNG 文件；
🖼 自动生成 Markdown 插图语法并复制到剪贴板；
✅ 可直接粘贴 Cmd + V 到博客 Markdown 中。
🔧 Step 1: 安装保存截图到剪贴板的依赖（macOS）
系统自带截图快捷键：
Cmd + Shift + Ctrl + 4：截图并保存到剪贴板
我们用 pngpaste 工具把剪贴板图片保存下来：
```bash
brew install pngpaste
⸻
🧩 Step 2: 自定义函数 blog_clipshot
将以下代码加入到 ~/.zshrc 或你专门的函数配置文件中，例如 ~/.zsh_functions：
📎 blog_clipshot：自动保存剪贴板中的截图为 PNG 并生成 Markdown 插图链接
blog_clipshot() {
local TITLE=”$1”
if [ -z “$TITLE” ]; then
echo “❌ 用法: blog_clipshot "图名（中文或英文皆可）"”
return 1
fi
# 获取当天日期
local DATE=$(date +%F)
local SAFE_TITLE=$(echo “$TITLE” | tr ‘ ‘ ‘-‘ | tr -cd ‘[:alnum:]-_\u4e00-\u9fa5’)
local IMG_NAME=”${SAFE_TITLE}.png”
# 图片路径
local ASSET_DIR=~/Dev/Jynxzzz.github.io/assets/”$DATE”
mkdir -p “$ASSET_DIR”
local IMG_PATH=”${ASSET_DIR}/${IMG_NAME}”
# 保存截图到文件
pngpaste “$IMG_PATH”
# 输出并复制 Markdown 插图语法
local MARKDOWN_LINK=””
echo “$MARKDOWN_LINK” | pbcopy
echo “✅ 已保存截图为：$IMG_PATH”
echo “📋 插图语法已复制到剪贴板：”
echo “$MARKDOWN_LINK”
}
然后运行以下命令刷新配置：
source ~/.zshrc
⸻
🚀 Step 3: 使用流程演示
1. 截图并复制到剪贴板：
• 使用快捷键：Cmd + Shift + Ctrl + 4
2. 保存并生成插图链接：
• 在 Terminal 中运行：
blog_clipshot 论文方法图
3. 插入图片链接：
• 切换到 Neovim 编辑的 Markdown 文件中，直接 Cmd + V 粘贴即可。
⸻
📁 文件结构建议
Dev/Jynxzzz.github.io/
├── _posts/
│ └── 2025-04-16-Markdown-Blog-插图自动化系统.md
└── assets/
└── 2025-04-16/
└── 论文方法图.png
⸻
📝 建议 alias
为了更快调用：
alias clip=’blog_clipshot’
⸻
🧠 技术亮点总结
步骤 技术实现
截图剪贴板输入 macOS 内建快捷键
剪贴板读取 pngpaste
文件命名规范化 tr 工具处理中文或特殊字符
自动路径组织 每天一个日期文件夹
Markdown 插图生成 自动粘贴、无需手打语法
⸻
📌 下一步：
你还可以给这个功能配一个快捷指令，比如叫：
alias blogpic=’clip “图标题”’
或者加入你的 Neovim 中，通过快捷键调用 :terminal 来截图 ➜ 插图 ➜ 预览。
需要我把这些自动生成为 tmux layout 吗？或者配合 newblog 全部打包自动建文件、图、md？我都能帮你做成套件。需要我出一个 .sh 脚本 starter 包也可以！
要不要顺手也讲一讲 neotree 里怎么快速跳到 assets 文件夹插图？