Back

更新于24-11-08

先放图

发布后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
// 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: [
    keystatic(),
    markdoc(),
    react(),
    tailwind({ applyBaseStyles: false }),
    sitemap(),
    mdx(),
    icon(),
    (await import('@playform/compress')).default({
      SVG: false,
      Exclude: ['index.*.js']
    })
  ],
  output: 'hybrid',
})
ts

别直接复制,-代表删除,+代表添加

添加文件

创建keystatic.config.ts

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新建项目,复制项目里面的内容,作用:身份验证才能发布文章
  },

  ui: {
    brand: { 
      name: 'XingLuo\' Dash Board' ,
      // BrandMark: 'https://pic.en.icu/Xingluo.webp',
    },
    navigation: [
      '---',
      'posts_pic',
      'posts_nopic',
    ],

  },
  collections: {
    posts_pic: collection({
      label: '含首图Posts',
      slugField: 'title',
      entryLayout: "content",
      path: 'src/content/post/*/',
      format: { contentField: 'content' },
      schema: {
        title: fields.slug({ 
          name: { label: '标题' },
          slug: {
            label: '对 SEO 友好的 slug',
            description: '这将定义此条目的文件/文件夹名称'
          }
        }),
        description: fields.text({
          label: '描述',
          description: '15个字以上',
        }),
        publishDate: fields.date({
          label: '发布时间',
          description: 'The publishDate of the event'
        }),
        tags: fields.array(
          fields.text({ label: '类目' }),
          {
            label: '标签',
            itemLabel: props => props.value,
          }
        ),
        coverImage: fields.object({
          src: fields.text({ label: '头图' }),
          color: fields.text({ label: '主题颜色 #xxxxxx 可以在该网站查询https://www.codeeeee.com/color/picker.html' })
          //   color: fields.text({ label: 'Image Color' }),
        }),

        language: fields.text({
          label: '语言',
          description: 'languages',
        }),
        content: fields.markdoc({
          label: 'Content',
          extension: 'md',
          options: {
            image: {
              directory: 'src/content/postimg',

              // Use the @assets path alias
              publicPath: 'src/content/postimg/'

            }
          }
        })
      },
    }),




    posts_nopic: collection({
      label: '无首图Posts',
      slugField: 'title',
      entryLayout: "content",
      path: 'src/content/post/*/',
      format: { contentField: 'content' },
      schema: {
        title: fields.slug({ 
          name: { label: '标题' },
          slug: {
            label: '对 SEO 友好的 slug',
            description: '这将定义此条目的文件/文件夹名称'
          }
        }),
        description: fields.text({
          label: '描述',
          description: '15个字以上',
        }),
        publishDate: fields.date({
          label: '发布时间',
          description: 'The publishDate of the event'
        }),
        tags: fields.array(
          fields.text({ label: '类目' }),
          {
            label: '标签',
            itemLabel: props => props.value,
          }
        ),
        language: fields.text({
          label: 'Languages',
          description: 'languages',
        }),
        
        content: fields.markdoc({
          label: 'Content',
          extension: 'md',
          options: {
            image: {
              directory: 'src/content/postimg',

              // Use the @assets path alias
              publicPath: 'src/content/postimg/'

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

本配置适用于

theme-astro-pure

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

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