Markdown 图片替换器

2025-05-18 12:42

⚡ 一款 Markdown 图片链接的替换工具

在写文档的过程中，如果不是使用 在线文档工具（如：Yuque），那么同事之间的协作与共享往往会变得不够高效。

实际工作中经常会用到一些文档工程项目（比如 Docusaurus 框架，静态文档系统），但一旦需要审阅或协作编辑，就必须先 拉取整个项目工程，修改完之后还得额外处理其中的图片，比如 添加边框、压缩优化等操作，流程繁琐、效率低下。

虽然曾写过一个图片处理工具来缓解部分问题，但整体流程依然 重复机械、耗时费力。

而即使选择 在线文档工具，在导出 Markdown 时又会遇到一系列问题：

图片链接为 外链 CDN，手动需要下载，图片还需要手动 添加边框、压缩优化等操作
内容中混杂各种 HTML 标签，影响页面展示与排版

此外，在将文章发布到墨刀等平台时，还经常会遇到 图片链接 无法识别的情况，这就要求必须 提前下载所有图片并替换图床，运营写作也面临同样的障碍。

那么，是否存在一种方式，既能在协作阶段使用语雀这类在线平台高效撰写，又能在导出阶段一键转换为文档工程所需格式？

为此开发了这个工具，用来 简化整个流程。典型的使用场景是：

在语雀上撰写和协作，保持内容 实时更新
最终只需“一步导出”，即可生成 Markdown 文档并自动完成：
- 下载语雀图片
- 统一添加边框样式
- 压缩图片体积
- 清除无效 HTML 标签

功能特点

双模式支持
- GitHub 模式：将图片上传到指定仓库，替换链接为 raw.githubusercontent.com 地址
- 本地模式：生成 ZIP 包，打包处理后的 Markdown 和图片资源
图片压缩优化
- 可选开启 TinyPNG 压缩，减少图片体积，优化加载速度
实时日志输出
- 处理进度可视化，通过日志流查看每一步情况

技术栈

前端：React + TypeScript
后端：Node.js + TypeScript
图片处理：TinyPNG API（可选）

快速开始

一键安装

/bin/bash -c "$(curl -fsSL -H 'Accept: application/vnd.github.v3.raw' https://api.github.com/repos/hellojuantu/markdown-image-replacer/contents/docker/install_run.sh)"

访问：http://localhost:13001

一键升级

/bin/bash -c "$(curl -fsSL -H 'Accept: application/vnd.github.v3.raw' https://api.github.com/repos/hellojuantu/markdown-image-replacer/contents/docker/upgrade.sh)"

一键卸载

/bin/bash -c "$(curl -fsSL -H 'Accept: application/vnd.github.v3.raw' https://api.github.com/repos/hellojuantu/markdown-image-replacer/contents/docker/uninstall.sh)"

手动安装

Docker 安装

git clone https://github.com/hellojuantu/markdown-image-replacer.git
cd markdown-image-replacer/docker
echo 'APP_VERSION=0.0.2' > .env
docker compose up --build -d

访问：http://localhost:13001

开发环境

# 安装依赖
cd frontend && npm install
cd ../backend && npm install

# 启动服务
cd frontend && npm run dev
cd ../backend && npm run start

使用指南

进入页面，选择处理模式：
- GitHub 模式：上传至指定仓库
- 本地模式：生成压缩包下载
上传 Markdown 文件
可选：启用图片压缩
启动处理，等待日志输出完成
获取处理结果（复制或下载）

配置说明

GitHub 配置项

若使用 GitHub 模式上传图片并替换链接，需提前准备一个公开仓库，并提供访问凭证。以下是配置说明及操作步骤：

基本配置字段

字段	说明
用户名	GitHub 用户名（如：`hellojuantu`）
仓库名	用于存储图片的仓库名称（如：`image-host`）
分支	默认为 `main`
Token	GitHub 访问令牌，需有 `repo` 权限

如何创建一个 GitHub 仓库并获取配置

创建仓库
- 打开 https://github.com/new
- 填写仓库名称，如：image-host
- 选择 Public
- 点击 Create repository
- 按照提示初始化分支，如：main
生成 GitHub Token
- 打开 https://github.com/settings/tokens
- 点击 Generate new token (classic)
- 勾选 repo 权限（包括 repo:status, repo_deployment, public_repo, repo:invite）
- 复制生成的 Token（注意：只显示一次，请妥善保存）
填写配置信息
- 在工具页面中输入上述信息：
  - 用户名：你的 GitHub 账户名
  - 仓库名：刚创建的仓库名，默认填 image-host
  - 分支：刚初始化的分支，默认填 main
  - Token：粘贴刚刚复制的 GitHub Token

图片设置

字段	说明
启用压缩	是否启用 TinyPNG 压缩
TinyPNG 密钥	可在官网获取

总结

如果你也常常为了图床而烦恼，或许可以试试看这个工具。希望它能替你省下一些重复劳动的时间，把精力用在更有创造力的事情上。

功能特点​

技术栈​

快速开始​

一键安装​

一键升级​

一键卸载​

手动安装​

Docker 安装​

开发环境​

使用指南​

配置说明​

GitHub 配置项​

基本配置字段​

如何创建一个 GitHub 仓库并获取配置​

图片设置​

总结​