@ delmaredigital/ payload- puck

用于集成的有效载荷CMS插件 纸 视觉页面构建器. 在利用有效载荷内容管理能力的同时,以拖放组件构建可视化页面.

联合国 插件. delmaredigital.com/docs/puck 页面存档备份,存于互联网档案馆 • 妇女 概览

⚠️ 从0.9升级到0.10.x? 中断——需要 @puckeditor/core 0.24 (英语). 运行 pnpm add @puckeditor/core@^0.24.0。内置组件现在用 General / Style / 版式标签安排其侧边栏字段,动作栏显示拖动手柄(dnd={{ enableDragHandle: false }} 打开 PuckEditor 藏来. 已保存的页面数据不变 。 0.10.1 只提高受抚养人的最低生活费. 0.10.2 安全装置——建议升级: 管理员编辑器视图现在应用了收藏的读取权限。 它还使管理员编辑器全屏,画布不再继承管理员页面的 CSS;列出您在其中需要预览的任何样式表 editorStylesheets。 。 。 . 0.10.3 添加: integrations (来自其他软件包的组件、类别和编辑器插件的组合);不使用它们则无所变化. 0.11.0 是一个安全固定和断裂: 匿名的呼叫者只能读取已出版的页面( 已关闭的草稿的收集不受影响), 因此没有签名的用户读取草稿的预览必须通过一个或一组 access.read; 见 升级见 变化。 。 。 .

是从旧版本来的? 这个 升级指南 列出每次破解或安全释放需要的内容.

文档

覆盖安装,配置,组件,自定义字段,主题,布局,暗模式,页面-树木集成,混合集成,AI集成等.

安装

pnpm add @delmaredigital/payload-puck @puckeditor/core

所需资源

使用 @delmaredigital/payload-better-auth? 吗? 任何出版的版本作品——其认证策略邮票 collection ,这是0.9访问解析度所需要的. 建议0.9.0或以后: 这是第一次发布 建议 payload.auth() 接线与请求头 0.9 现在转发到有效载荷 API-key请求没有副作用. 目前为 0.11.3,这需要更好的 Auth 1.7。 。 。 .

说明: Puck 0.21+ 从 @measured/puck 改为 @puckeditor/core。此插件需要新的软件包范围.

警卫: 如果您的应用程序使用 Next.js 中间软件( 或代理. ts)来保护动态路由, 请使用 next >= 15.5.16 / 16.2.5 接接接 CVE-2026-44574 (英语) (中间软件通过动态路由参数注入绕行). Turbopack用户需要 ++ 15.5.18 / 16.2.6.

快速启动

1. 添加插件

// src/payload.config.ts
import { buildConfig } from 'payload'
import { createPuckPlugin } from '@delmaredigital/payload-puck/plugin'

export default buildConfig({
  plugins: [
    createPuckPlugin({
      pagesCollection: 'pages',
    }),
  ],
})

2. 提供Puck配置

// app/(app)/layout.tsx
import { PuckConfigProvider } from '@delmaredigital/payload-puck/client'
import { editorConfig } from '@delmaredigital/payload-puck/config/editor'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <PuckConfigProvider config={editorConfig}>
          {children}
        </PuckConfigProvider>
      </body>
    </html>
  )
}

3. 创建前端路径

// app/(frontend)/[[...slug]]/page.tsx
import { getPayload } from 'payload'
import config from '@payload-config'
import { PageRenderer } from '@delmaredigital/payload-puck/render'
import { baseConfig } from '@delmaredigital/payload-puck/config'
import { notFound } from 'next/navigation'

async function getPage(slug?: string[]) {
  const payload = await getPayload({ config })
  const slugPath = slug?.join('/') || ''
  const { docs } = await payload.find({
    collection: 'pages',
    where: {
      and: [
        { _status: { equals: 'published' } },
        slugPath
          ? { slug: { equals: slugPath } }
          : { isHomepage: { equals: true } },
      ],
    },
    limit: 1,
  })
  return docs[0] || null
}

export default async function Page({ params }: { params: Promise<{ slug?: string[] }> }) {
  const { slug } = await params
  const page = await getPage(slug)
  if (!page) notFound()
  return <PageRenderer config={baseConfig} data={page.puckData} />
}

就这样! 插件自动登记编辑器视图、 API 端点和“ 用 Puck 编辑” 按钮.

复制启动文件从 GitHub 图像 或 启动文件指南。见 实例/README.md 用于文件指南和设置注释。 仅限Npm包船 dist;示例必须从 GitHub 或文件复制。 贡献者可以对照源出口进行核查 pnpm typecheck:examples。 。 。 .

文档

关于其他一切——组件,自定义字段,主题,布局,暗模式,页面-树木集成,混合集成,AI集成,高级配置,以及完整的导出参考——参见: 完整文档。 。 。 .

一体化

一个集成捆绑了Puck组件,类别和可选编辑器插件. 主机组件和类别字段胜出;集成填充缺失的组件密钥和附件类别名. 配置助手忽略插件 .

// Render config
import { extendConfig, baseConfig, type PuckIntegration } from '@delmaredigital/payload-puck/config'

const integrations: readonly PuckIntegration[] = [{
  name: 'dummy',
  components: { DummyBlock: { render: () => <div>Dummy block</div> } },
  categories: { custom: { title: 'Custom', components: ['DummyBlock'] } },
}]

export const renderConfig = extendConfig({ base: baseConfig, integrations })

'use client'

import { PuckConfigProvider, type PuckIntegration } from '@delmaredigital/payload-puck/client'
import { editorConfig } from '@delmaredigital/payload-puck/config/editor'
import type { ReactNode } from 'react'

const integrations: readonly PuckIntegration[] = [{
  name: 'dummy',
  components: { DummyBlock: { render: () => <div>Dummy block</div> } },
  categories: { custom: { title: 'Custom', components: ['DummyBlock'] } },
}]

export function EditorProvider({ children }: { children: ReactNode }) {
  return <PuckConfigProvider config={editorConfig} integrations={integrations}>{children}</PuckConfigProvider>
}

一旦在模块范围创建集成数组:每个渲染者新建数组重建编辑器配置. PuckEditor 还接受 integrations 直接说 集成插件遵循道具和上下文插件;被命名的集成插件被针对道具,上下文和更早的集成插件去dud. plugins={false} 在集成组件仍在应用时禁用所有插件.

编辑器应用集成而不 exclude,因此选择退出集成组件,从提供者中省略集成,或者在同一键下定义自己的组件,后者获胜.

在槽上进行实验

使用 @ delmaredigital/ paidload- experiments (英语) 通过整合在Puck槽上进行实验. 工作:有效载荷试验.

许可证

麻省理工学院