Back

Astro 添加 keystatic实现网页发布文章Astro 添加 keystatic实现网页发布文章

先放图

发布后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/'

            }
          }
        })
      },
    }),
  },
});

本配置适用于

avatar

theme-astro-pure

0

null

别的主题请参考keystatic Doc 修改字段

Astro 添加 keystatic实现网页发布文章
https://blog.en.icu/blog/2024-10-25-astro-添加-keystatic实现网页发布文章
Author Xingluo
Update date October 25, 2024
Copyright CC BY-NC-SA 4.0
Comment seems to stuck. Try to refresh?✨