ByteNoteByteNote
字

字节笔记本

2026年2月22日

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（推荐）

bash
# 使用 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

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

text
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. 图片会自动复制到配置的资源目录

开发指南

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

# 安装依赖
pnpm install

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

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

开发命令

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

项目理念

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

相关链接

许可证

AGPL-3.0 License

免责声明

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

开源工具
上一篇

daisyUI：最受欢迎的 Tailwind CSS 组件库

下一篇

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

分享: