跳转到内容

Keystatic & Astro

Keystatic 是一个开源的无头内容管理系统,它允许你构建内容并实现与 GitHub 的同步。

使用你的包管理器的 astro add 命令,将 Markdoc(用于内容条目)和 React(用于 Keystatic 管理 UI 仪表板)的集成添加到你的 Astro 项目中。

Terminal window
npx astro add react markdoc

你还需要两个 Keystatic 包:

Terminal window
npm install @keystatic/core @keystatic/astro

在你的 Astro 配置文件中添加来自 @keystatic/astro 的 Astro 集成:

astro.config.mjs
import { defineConfig } from 'astro/config'
import react from '@astrojs/react'
import markdoc from '@astrojs/markdoc'
import keystatic from '@keystatic/astro'
// https://astro.build/config
export default defineConfig({
integrations: [react(), markdoc(), keystatic()],
output: 'hybrid',
})

创建 Keystatic 配置文件

段落标题 创建 Keystatic 配置文件

为了定义你的内容模式,你需要创建一个 Keystatic 配置文件。此外,如果你选择这样做,该文件还可以帮助你将项目与特定的 GitHub 仓库链接起来。

在项目的根目录下创建一个名为 keystatic.config.ts 的文件。在该文件中,定义你的存储类型为 local,并设置一个名为 posts 的内容集合:

keystatic.config.ts
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.document({
label: 'Content',
formatting: true,
dividers: true,
links: true,
images: true,
}),
},
}),
},
});

现在,Keystatic 已经可以根据你的 schema 配置来管理内容了。

要启动 Keystatic 管理界面,你需要运行 Astro 的开发服务器:

Terminal window
npm run dev

在浏览器中输入 http://127.0.0.1:4321/keystatic,即可查看正在运行的 Keystatic 管理界面。

  1. 打开 Keystatic 管理界面,然后在仪表板中选择 “Posts” 集合。

  2. 使用按钮创建一个新文章。添加标题 “我的第一篇文章” 和一些内容,然后保存文章。

  3. 这篇文章现在应该在你的 “Posts” 集合中可见。你可以从这个管理界面查看和编辑你的文章。

  4. 现在,返回你的 Astro 项目文件并查看 src/content/posts 目录,你会发现这篇新文章已经生成了一个新的 .mdoc 文件:

    • 目录src/
      • 目录content/
        • 目录posts/
          • my-first-post.mdoc
  5. 打开你的代码编辑器,导航到该文件,确认你可以看到你之前输入的 Markdown 内容。例如:

    ---
    title: 我的第一篇文章
    ---
    这是我非常激动的第一篇文章!

你可以使用 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>

要了解更多关于查询、过滤、展示你的内容集合以及更多信息,请查看完整的内容集合文档

要部署你的网站,请参考我们的部署指南,并按照你选择的托管服务提供商的步骤进行操作。

此外,你可能还会对如何将 Keystatic 与 GitHub 连接感兴趣,这样可以让你在项目部署的过程中更方便地管理内容。

更多 CMS 指南