Markdown 图片替换器

2025-05-18 12:42

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

目前我们团队的文档一部分则维护在本地的 文档工程项目 中（外部官网文档，基于 Docusaurus），另一部分写在语雀（Yuque）在线文档平台，

Docusaurus 在应用中存在明显的协作痛点，尤其是在 多人审阅和内容修改 的场景下：

协同编辑需 拉取完整项目工程，本地修改后再提交，无法 实时预览
图片处理常需 手动添加边框、压缩优化，操作重复且耗时
即便使用图片处理工具，也难以避免 重复机械劳动 的问题

而选择语雀这类在线文档工具时，虽然协作更高效，但在 导出为 Markdown 用于发布时，又会遇到以下问题：

图片链接多为 外链 CDN，需手动下载，样式也需单独处理
内容中混杂大量 HTML 标签，影响 Markdown 渲染效果
上传到 媒体等平台 时，图片链接可能无法识别，运营也面临阻力

这个工具解决了什么？

本工具为了打通 在线协作 与 本地工程输出 之间的障碍：

✍️在线用 语雀高效撰写 → ⬇️一键导出 → 📄文档工程 + 运营发布 一步到位

典型使用场景

在语雀上进行内容编写与协作，支持多人 实时编辑，高效统一管理文档内容
在导出阶段，仅需 一键操作，即可自动完成：
- 下载语雀中 所有图片 并保存为本地文件（可选上传到 GitHub 图床）
- 自动为图片添加 统一的边框与阴影样式，符合团队展示规范
- 对图片进行 压缩优化，提升页面加载速度
- 清理 Markdown 中冗余或无效的 HTML 标签，保证内容结构简洁清晰

借助这个工具，无需在“高效协作”与“工程规范”之间二选一

专注写作，其余交给自动化流程完成。

功能特点

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

技术栈

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

快速开始

一键安装

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/hellojuantu/markdown-image-replacer/refs/heads/main/docker/install_run.sh)"

访问：http://localhost:13001

一键升级

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/hellojuantu/markdown-image-replacer/refs/heads/main/docker/upgrade.sh)"

一键卸载

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/hellojuantu/markdown-image-replacer/refs/heads/main/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 仓库并获取配置​

图片设置​

总结​