准备工作
在开始之前,请确保你的开发环境已安装 Node.js 18 或更高版本。推荐使用 pnpm 作为包管理器,当然 npm 和 yarn 同样适用。你还需要一个代码编辑器,推荐 VS Code 并安装 Astro 官方扩展。
创建项目
运行 npm create emdash@latest 启动项目创建向导。向导会询问项目名称、选择模板(推荐新手使用 Starter 模板)和包管理器偏好。创建完成后进入项目目录。
项目结构
EmDash 项目基于 Astro,核心文件包括:astro.config.mjs(项目配置,注册 EmDash 集成)、src/pages/(页面文件)、src/layouts/(布局组件)、seed/seed.json(数据库架构和示例内容)。所有内容页面均采用服务端渲染,不使用 getStaticPaths。
启动开发服务器
运行 npx emdash dev 启动开发服务器。首次启动时,EmDash 会自动运行数据库迁移、导入种子数据并生成 TypeScript 类型定义。服务器就绪后,访问 http://localhost:4321 查看站点,访问 http://localhost:4321/_emdash/admin 进入管理后台。
创建第一篇内容
在管理后台点击左侧导航中的「文章」,然后点击「新建」。输入标题和正文内容,Portable Text 编辑器支持 Markdown 快捷键(如 ## 创建二级标题、** 加粗文字)。编辑完成后点击「发布」,刷新前台页面即可看到新内容。
自定义页面模板
在 src/pages/ 目录下创建 .astro 文件即可添加新页面。使用 getEmDashCollection 查询内容列表,使用 getEmDashEntry 查询单条内容。记得在每个查询内容的页面调用 Astro.cache.set(cacheHint) 以确保缓存正确失效。
下一步
恭喜你完成了 EmDash 的快速入门! 接下来可以阅读「创建你的第一个插件」教程学习插件开发,或者浏览插件和主题目录为站点添加更多功能。如果遇到问题,欢迎加入 Discord 社区交流。