先放图
发布后vercel同步更新
官方教程
https://keystatic.com/docs/installation-astro
安装依赖
bun
bun install @astrojs/react @astrojs/markdoc
bun install @keystatic/core @keystatic/astro
npm
npx astro add react markdoc
npm install @keystatic/core @keystatic/astro
修改文件
修改astro配置文件,名称为astro.config.mjs或者astro.config.ts
// 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()],
+ integrations: [react(), markdoc(), keystatic()],
+ output: 'hybrid',
})
别直接复制,-代表删除,+代表添加
添加文件
创建keystatic.config.ts
// keystatic.config.ts
import { config, fields, collection } from '@keystatic/core';
export default config({
storage: {
kind: 'cloud',
},
cloud: {
project: 'xxxxx/xxxxx',//这里去keystatic cloud新建项目,复制项目里面的内容,作用:身份验证才能发布文章
},
collections: {
posts: collection({
label: 'Posts',
slugField: 'title',
path: 'src/content/post/*',
format: { contentField: 'content' },
schema: {
title: fields.slug({ name: { label: 'Title' } }),
description: fields.text({
label: 'Description',
description: 'A brief description of the post',
}),
publishDate: fields.date({
label: 'Event date',
description: 'The publishDate of the event'
}),
tags: fields.array(
fields.text({ label: '类目' }),
{
label: 'tags',
itemLabel: props => props.value,
}
),
coverImage: fields.object({
src: fields.url({ label: 'Image URL' }),
// color: fields.text({ label: 'Image Color' }),
}),
language: fields.text({
label: 'Languages',
description: 'languages',
}),
content: fields.markdoc({
label: 'Content',
options: {
image: {
directory: 'src/content/postimg',
// Use the @assets path alias
publicPath: 'src/content/postimg/'
}
}
})
},
}),
},
});
本配置适用于
theme-astro-pure
0
null
别的主题请参考keystatic Doc 修改字段