Jekyll Markdown Processor

一个基于 Electron 构建的桌面应用程序，专门用于处理 Jekyll 博客的 Markdown 文件，具备自动 YAML 前置内容生成和图片处理功能。

✨ 主要功能

• 🎯 拖拽界面: 直接将 Markdown 文件拖拽到应用程序中
• 📅 自动文件名处理: 自动添加日期前缀 (YYYY-MM-DD) 并格式化文件名
• 📝 YAML 前置内容生成: 自动生成 Jekyll 兼容的 YAML 前置内容
• 🖼️ 智能图片处理:
  • 下载外部图片到本地
  • 为封面图片生成缩略图
  • 自动更新图片链接为 Jekyll 格式
  • 优化图片以适应网页加载
  • 支持链接图片格式 [![alt](src)](link)
  • 防止重复下载相同图片
• 🏷️ 网站数据抓取:
  • 从 https://tzblog.tech/tags/ 抓取可用标签
  • 从 https://tzblog.tech/categories/ 抓取分类层级结构
  • 支持中文逗号分隔输入
• 📋 用户输入表单:
  • 手动输入分类、标签和描述
  • 自动填充文件创建/修改日期
  • 支持自定义发布日期
  • 使用导入文件名作为默认标题
• ⚡ 批量处理: 同时处理多个文件
• 🚫 取消功能: 可随时取消正在进行的处理过程
• 🧹 缓存清理: 抓取前自动清空缓存确保数据最新

🚀 安装说明

📋 系统要求

• Node.js (v16 或更高版本)
• npm 或 yarn
• Windows/macOS/Linux

📦 安装步骤

1. 克隆仓库:

git clone https://github.com/YOUR_USERNAME/jekyll-markdown-processor.git
cd jekyll-markdown-processor

2. 安装依赖:

npm install

3. 启动应用:

npm start

📖 使用方法

🔧 开发模式

npm run dev

🏭 生产环境

npm start

📦 构建可执行文件

npm run build

🎮 使用流程

1. 启动应用: 运行 npm start
2. 拖拽文件: 将 .md 文件拖拽到应用窗口中
3. 选择数据:
   • 点击"从网站加载"按钮获取最新的标签和分类
   • 或手动输入标签和分类（支持中英文逗号分隔）
4. 填写信息:
   • 确认或修改标题（默认使用文件名）
   • 选择或输入分类和标签
   • 修改发布日期（如需要）
   • 添加描述
5. 开始处理: 点击"开始处理"按钮
6. 查看结果: 处理完成后在指定目录查看生成的文件

🔄 工作原理

1. 文件拖拽: 将 .md 文件拖拽到应用程序中
2. 自动处理:
   • 处理文件名（添加日期前缀，替换空格）
   • 解析内容中的图片和文本
   • 下载/处理图片（包括链接图片格式）
   • 为封面图片生成缩略图
   • 提取文件创建和修改日期
3. 用户输入: 显示表单供手动输入：
   • 标题（自动填充为文件名）
   • 分类（从网站抓取或手动输入）
   • 标签（从网站抓取或手动输入）
   • 发布日期（可自定义）
   • 描述（自动生成或手动输入）
4. 输出结果: 处理后的文件包含：
   • Jekyll 兼容的文件名格式
   • 完整的 YAML 前置内容
   • 更新后的图片链接
   • 优化后的图片文件

📁 文件结构

your-project/
├── [导入文件目录]/
│   └── [文件名]/
│       ├── image1.jpg          # 下载的图片
│       ├── cover-image1.jpg    # 封面缩略图
│       └── ...
├── 2025-01-07-your-article.md  # 处理后的文章
└── ...

输出路径说明:

• 图片下载: [导入文件所在目录]/[文件名]/
• 文章链接: https://tzblog.tech/assets/img/[文件名]/

📝 生成的 YAML 前置内容

---
layout: post
title: "你的文章标题"
page.author: THEzsc
date: 2025-01-07 15:30:00 +0800
categories: [技术, 教程]
tags: [Jekyll, Markdown, 博客]
image: https://tzblog.tech/assets/img/your-article/cover-image1.jpg
toc: true
description: "文章内容的简要描述..."
---

🖼️ 图片处理详情

• 📥 外部图片: 自动下载并保存到本地
• 📁 本地图片: 复制到资源目录
• 🖼️ 缩略图: 为封面图片生成 800x400px 缩略图
• 🔗 链接图片: 支持 [![alt](src)](link) 格式
• 🚫 防重复: 相同URL的图片不会重复下载
• 🌐 URL格式: https://tzblog.tech/assets/img/[文件名]/[图片名]
• ⚡ 优化: JPEG 压缩率 85%

📷 支持的图片格式

• JPEG/JPG
• PNG
• GIF
• WebP
• TIFF
• SVG

⚙️ 配置选项

你可以在源代码中修改以下设置：

• 👤 作者: 在 src/processors/yaml.js 中修改 THEzsc
• 🌐 基础URL: 在 src/processors/image.js 中修改 https://tzblog.tech
• 📐 缩略图尺寸: 在 src/processors/image.js 中修改尺寸
• 🎨 图片质量: 在 src/processors/image.js 中调整压缩设置
• 🏷️ 抓取源: 在 src/processors/webScraper.js 中修改抓取URL

🛠️ 开发说明

📂 项目结构

src/
├── main.js              # Electron 主进程
├── preload.js           # 安全预加载脚本
├── renderer.js          # 前端逻辑
├── index.html           # 主窗口
├── styles.css           # 应用样式
└── processors/
    ├── file.js          # 文件名处理
    ├── markdown.js      # Markdown 解析
    ├── image.js         # 图片处理
    ├── yaml.js          # YAML 生成
    └── webScraper.js    # 网站数据抓取

🔧 核心依赖

• Electron: 桌面应用框架
• Sharp: 高性能图片处理
• Axios: HTTP 客户端，用于下载图片和抓取数据
• Gray-matter: YAML 前置内容解析
• Marked: Markdown 解析
• fs-extra: 增强的文件系统操作

🔧 故障排除

🚨 常见问题

1. Sharp 安装问题:

   • 尝试运行 npm rebuild sharp
   • 确保使用正确的 Node.js 版本

2. 图片下载失败:

   • 检查网络连接
   • 某些服务器可能阻止自动化请求

3. 文件权限错误:

   • 确保输出目录具有写入权限
   • 必要时以管理员身份运行

4. 网站抓取失败:

   • 检查网络连接
   • 网站结构可能已更改
   • 会自动使用备用数据

🛡️ 错误处理

应用程序包含全面的错误处理：

• 拒绝无效文件格式
• 图片下载网络超时处理
• 文件系统权限检查
• 图片处理验证
• 网站抓取失败回退机制

🤝 贡献指南

1. Fork 这个仓库
2. 创建功能分支 (git checkout -b feature/AmazingFeature)
3. 提交更改 (git commit -m 'Add some AmazingFeature')
4. 推送到分支 (git push origin feature/AmazingFeature)
5. 打开 Pull Request

📄 许可证

MIT License - 详见 LICENSE 文件

📋 更新日志

v1.0.0 (当前版本)

• ✨ 初始发布
• 🎯 拖拽功能
• 📝 自动 YAML 生成
• 🖼️ 图片处理和缩略图
• 📋 用户输入表单
• ⚡ 批量处理支持
• 🏷️ 网站数据抓取
• 🗓️ 日期管理功能
• 🚫 取消处理功能
• 🧹 缓存清理机制

🌟 特别感谢

感谢所有为这个项目做出贡献的开发者！

---

如果这个项目对你有帮助，请考虑给它一个 ⭐ Star！