Astro Editor：专为 Astro 内容集合打造的 macOS Markdown 编辑器

Astro Editor 是一款专为 Astro 内容集合设计的原生 macOS Markdown 编辑器。它提供了简洁优雅的写作界面，并能根据你的 Zod Schema 自动生成 frontmatter 表单，让内容创作变得更加高效。

项目简介

Astro Editor 由 dannysmith 开发维护，是一个开源的桌面应用，采用 Tauri + React 技术栈构建。截至目前，该项目在 GitHub 上已获得 412 stars，是一个专为 Astro 内容创作者打造的写作工具。

该编辑器的核心设计理念是「writer mode」而非「coder mode」，专注于提供最佳的写作体验，而非代码编辑功能。

核心特性

写作环境

• 简洁的 Markdown/MDX 编辑器：支持语法高亮，frontmatter 和 import 语句在编辑时自动隐藏，显示在专用侧边栏中
• 多种专注模式：
  • Focus 模式：高亮当前句子
  • Copyedit 模式：高亮词性（名词、动词等）
  • Typewriter 模式：保持光标在屏幕中央
• 可自定义的标题颜色：支持深色和浅色主题的独立设置
• 图片悬停预览：按住 Option 键悬停在图片路径上即可预览
• 全面的键盘快捷键：支持格式化、标题和导航
• 自动保存：停止输入 2 秒后自动保存（可配置），输入时每 10 秒备份保存，支持崩溃恢复

Frontmatter 与 Schema 集成

• 自动生成编辑表单：根据 Astro 集合 Schema 生成表单，支持完整的 Zod 验证
• 完整的 Zod 类型支持：字符串、数字、日期、布尔值、枚举、数组、嵌套对象、引用和图片字段
• 图片字段拖放：支持拖放上传，自动复制到资源目录，默认使用相对路径（可按项目/集合配置）
• 字段约束：在 UI 中强制执行最小/最大值、字符限制等约束

MDX 组件支持

• 组件构建器：按 Cmd + / 打开组件构建器，显示 src/components/mdx/ 目录中的所有组件
• 多框架支持：支持 Astro、React、Vue 和 Svelte 组件
• 自动检测 Props：自动检测可用 props，插入后可按 Tab 切换值

文件管理

• 自动发现集合和文件：从 content.config.ts 自动发现
• 完整的子目录支持：支持集合内的子目录
• 按发布日期排序：可配置字段名，显示草稿指示器
• 上下文菜单：支持重命名、复制、在 Finder 中显示、复制路径
• 命令面板：Cmd + P 快速切换文件和访问命令

技术栈

• Tauri - 跨平台桌面应用框架
• React - 用户界面构建
• TypeScript - 类型安全
• Tailwind CSS - 样式系统
• Zod - Schema 验证
• Astro - 内容集合

安装指南

macOS（推荐）

# 使用 Homebrew 安装
brew install --cask astro-editor

或从 GitHub Releases 下载最新版本。

其他平台

Windows (.msi) 和 Linux (.AppImage, .deb) 构建版本可在 releases 页面获取，但尚未正式支持，使用时请自行承担风险。

支持的 Astro 项目

• Astro 版本：5.x（4.x 可能可用但可能有 bug）
• 内容集合：必须使用 glob loader 并使用 defineCollection 定义 schema
• 配置要求：需要 src/content/config.ts 或 src/content.config.ts

默认目录结构（所有路径可按项目和集合配置）：

my-astro-site
└── src
    ├── assets/mycollection/     # 图片和媒体资源
    ├── components/mdx/          # MDX 组件
    ├── content/mycollection/    # Markdown 和 MDX 文件
    └── content.config.ts        # 集合定义

快速开始

1. 安装 Astro Editor
2. 打开你的 Astro 项目文件夹
3. 编辑器会自动识别 content.config.ts 中的集合
4. 开始写作，frontmatter 表单会根据你的 Zod Schema 自动生成

使用示例

基础写作

打开任意 .md 或 .mdx 文件，编辑器会自动隐藏 frontmatter，让你专注于内容创作。

插入 MDX 组件

1. 按 Cmd + / 打开组件构建器
2. 选择 src/components/mdx/ 中的组件
3. 填写 props 值
4. 组件会自动插入到当前光标位置

图片上传

1. 在 frontmatter 表单中找到图片字段
2. 直接拖放图片到字段中
3. 图片会自动复制到配置的资源目录

开发指南

# 克隆仓库
git clone https://github.com/dannysmith/astro-editor.git
cd astro-editor

# 安装依赖
pnpm install

# 创建测试 Astro 项目
pnpm reset:testdata

# 启动开发服务器
pnpm run tauri:dev

开发命令

pnpm run check:all    # 运行所有检查（TypeScript、Rust、测试）
pnpm run fix:all      # 自动修复代码格式问题
pnpm task:complete <name>  # 标记任务完成

项目理念

• 专注写作：这是一个「writer mode」工具，而非「coder mode」。与 git、发布、部署或代码编辑相关的功能超出项目范围。
• 简洁至上：UI 有意保持简洁。自定义选项仅限于处理不同 Astro 项目结构所需的内容。

相关链接

• GitHub 仓库：https://github.com/dannysmith/astro-editor
• 用户文档：User Guide
• 贡献指南：CONTRIBUTING.md
• 路线图：GitHub Project

许可证

AGPL-3.0 License

免责声明

本项目仍在开发中，使用时请定期提交你的 Astro 项目更改。