Keystatic & Astro

Keystatic 是一个开源的无头内容管理系统，它允许你结构化你的内容并与 GitHub 同步。

如果你想从头开始一个 新的 Astro + Keystatic 项目，你可以使用 Keystatic CLI 在几秒钟内生成一个新项目

npm create @keystatic@latest

pnpm create @keystatic@latest

yarn create @keystatic

选择 Astro 模板，然后你就可以准备部署了！

先决条件

一个已有的配置了适配器的 Astro 项目。

安装依赖

使用你的包管理器的 astro add 命令，将 Markdoc（用于内容条目）和 React（用于 Keystatic 管理界面仪表盘）集成添加到你的 Astro 项目中。

npx astro add react markdoc

pnpm astro add react markdoc

yarn astro add react markdoc

你还需要两个 Keystatic 包

npm install @keystatic/core @keystatic/astro

pnpm add @keystatic/core @keystatic/astro

yarn add @keystatic/core @keystatic/astro

添加 Astro 集成

在你的 Astro 配置文件中，从 @keystatic/astro 添加 Astro 集成

import { defineConfig } from 'astro/config'

import react from '@astrojs/react'
import markdoc from '@astrojs/markdoc'
import keystatic from '@keystatic/astro'

// https://astro.js.cn/config
export default defineConfig({
  integrations: [react(), markdoc(), keystatic()],
  output: 'static',
})

创建 Keystatic 配置文件

需要一个 Keystatic 配置文件来定义你的内容模式。这个文件也允许你将项目连接到一个特定的 GitHub 仓库（如果你决定这样做的话）。

在项目根目录下创建一个名为 keystatic.config.ts 的文件，并添加以下代码来定义你的存储类型（local）和一个内容集合（posts）

import { config, fields, collection } from '@keystatic/core';

export default config({
  storage: {
    kind: 'local',
  },

  collections: {
    posts: collection({
      label: 'Posts',
      slugField: 'title',
      path: 'src/content/posts/*',
      format: { contentField: 'content' },
      schema: {
        title: fields.slug({ name: { label: 'Title' } }),
        content: fields.markdoc({
          label: 'Content',
        }),
      },
    }),
  },
});

Keystatic 现在已经配置好，可以根据你的模式管理你的内容。

在本地运行 Keystatic

要启动你的 Keystatic 管理界面仪表盘，请启动 Astro 的开发服务器

npm run dev

在浏览器中访问 http://127.0.0.1:4321/keystatic 来查看正在运行的 Keystatic 管理界面。

创建新文章

在 Keystatic 管理界面仪表盘中，点击“Posts”集合。
使用按钮创建一篇新文章。添加标题“我的第一篇文章”和一些内容，然后保存文章。
现在，这篇新文章应该在你的“Posts”集合中可见。你可以从此仪表盘页面查看和编辑你的单篇文章。
返回查看你的 Astro 项目文件。你现在会发现在 src/content/posts 目录中有一个新的 .mdoc 文件，对应这篇新文章
- 目录src/
  - 目录content/
    目录posts/
    my-first-post.mdoc
在你的代码编辑器中导航到该文件，并验证你是否能看到你输入的 Markdown 内容。例如
```
---
title: My First Post
---

This is my very first post. I am **super** excited!
```

渲染 Keystatic 内容

使用 Astro 的内容集合 API 来查询和显示你的文章和集合，就像你在任何 Astro 项目中所做的一样。

显示集合列表

以下示例显示了每篇文章标题的列表，并带有指向单个文章页面的链接。

---
import { getCollection } from 'astro:content'

const posts = await getCollection('posts')
---
<ul>
  {posts.map(post => (
    <li>
      <a href={`/posts/${post.slug}`}>{post.data.title}</a>
    </li>
  ))}
</ul>

显示单个条目

要显示单篇文章的内容，你可以导入并使用 <Content /> 组件来将你的内容渲染成 HTML

---
import { getEntry } from 'astro:content'

const post = await getEntry('posts', 'my-first-post')
const { Content } = await post.render()
---

<main>
  <h1>{post.data.title}</h1>
  <Content />
</main>