E EmDash CMS Everything Guides, use cases, plugins, templates
简体中文

将 EmDash 添加到现有 Astro 项目

本页内容

npm create emdash@latest 提供了一个预配置的项目，但 EmDash 也可以集成到您现有的 Astro 站点中。本指南逐一介绍入门模板通常为您处理的每个要求。

先决条件

  • Astro 6 或更高版本 — 如果您使用的是之前的主要版本，请先升级（npx @astrojs/upgrade）
  • Node.js v22.12.0 或更高版本（不支持奇数版本）
  • 服务端输出 — EmDash 在运行时提供内容，因此您的项目需要 output: "server" 和一个适配器

安装包

npm

npm install emdash @astrojs/react react react-dom

pnpm

pnpm add emdash @astrojs/react react react-dom

yarn

yarn add emdash @astrojs/react react react-dom

对于本地 SQLite 数据库：

npm install better-sqlite3

注册集成

import { defineConfig } from "astro/config";
import node from "@astrojs/node";
import react from "@astrojs/react";
import emdash, { local } from "emdash/astro";
import { sqlite } from "emdash/db";

export default defineConfig({
	output: "server",
	adapter: node({ mode: "standalone" }),
	integrations: [
		react(),
		emdash({
			database: sqlite({ url: "file:./data.db" }),
			storage: local({
				directory: "./uploads",
				baseUrl: "/_emdash/api/media/file",
			}),
		}),
	],
});

添加实时集合加载器

import { defineLiveCollection } from "astro:content";
import { emdashLoader } from "emdash/runtime";

export const collections = {
	_emdash: defineLiveCollection({ loader: emdashLoader() }),
};

验证安装

  1. 启动开发服务器：

    npm run dev

  2. 打开 http://localhost:4321/_emdash/admin 并完成设置向导。

  3. 创建并发布一篇文章，然后从页面查询它：

    ---
import { getEmDashCollection } from "emdash";

const { entries: posts } = await getEmDashCollection("posts", {
	status: "published",
});
---

<ul>{posts.map((post) => <li>{post.data.title}</li>)}</ul>

部署到 Cloudflare

请参阅部署到 Cloudflare 获取完整配置。

故障排除

症状原因解决方案
管理后台停在 “Loading EmDash…”@astrojs/react 未注册将 react() 添加到 integrations
Could not resolve "astro:content"Astro 版本低于 6升级 Astro
getEmDashCollection 返回错误缺少 src/live.config.ts添加加载器
构建错误未安装 peer 依赖安装 @astrojs/react、react、react-dom
内容更改未显示页面被预渲染设置 export const prerender = false

后续步骤