Flow Masters MCP

Payload网站模板

这是官方 Payload网站模板。使用它为从小型到企业的网站、博客或投资组合提供动力。该仓库包括一个功能齐全的后端、企业级管理面板和一个设计精美、可投入生产的网站。

如果您正在进行以下工作，此模板非常适合您：

• 个人或企业级网站、博客或作品集
• 具有功能齐全的发布工作流程的内容发布平台
• 探索Payload的能力

核心特征：

• 预配置有效载荷配置
• 认证
• 访问控制
• 布局生成器
• 草稿预览
• 实时显示
• 按需重新验证
• 搜索引擎优化
• 搜索
• 重定向
• 工作和计划发布
• 网站

快速开始

要在本地启动此示例，请执行以下步骤：

克隆

如果你还没有这样做，你需要在你的机器上有这个仓库的独立副本。如果您已经克隆了此仓库，请跳到 发展.

方法1（推荐）

前往Payload Cloud 克隆此模板。这将使用此模板的代码在您的GitHub帐户上创建一个新的存储库，然后您可以将其克隆到自己的计算机上。

方法2

使用 create-payload-app CLI将此模板直接克隆到您的计算机：

pnpx create-payload-app my-project -t website

方法3

使用 git CLI将此模板直接克隆到您的计算机：

git clone -n --depth=1 --filter=tree:0 https://github.com/payloadcms/payload my-project && cd my-project && git sparse-checkout set --no-cone templates/website && git checkout && rm -rf .git && git init && git add . && git mv -f templates/website/{.,}* . && git add . && git commit -m "Initial commit"

发展

1. 第一 克隆仓库 如果你还没有这样做
2. cd my-project && cp .env.example .env 复制示例环境变量
3. pnpm install && pnpm dev 安装依赖项并启动开发服务器
4. 打开 http://localhost:3000 在浏览器中打开应用程序

就是这样！所做的更改 ./src 将反映在您的应用程序中。按照屏幕上的说明登录并创建您的第一个管理员用户。然后查看 生产 一旦你准备好构建和提供你的应用程序，以及 部署 当你准备好上线的时候。

运作原理

Payload配置是专门为大多数网站的需求量身定制的。它通过以下方式进行预配置：

集合

请参阅 集合 文档，了解如何扩展此功能的详细信息。

• #### 用户（身份验证）

用户是具有身份验证功能的集合，可以访问管理面板和未发布的内容。看 访问控制 了解更多详情。

• #### 帖子

帖子用于生成博客帖子、新闻文章或随时间发布的任何其他类型的内容。所有帖子都启用了布局生成器，因此您可以使用布局构建块为每个帖子生成唯一的布局，请参阅 布局生成器 了解更多详情。帖子也支持草稿功能，因此您可以在将其发布到网站之前预览它们，请参阅 草稿预览 了解更多详情。

• #### 页面

所有页面都启用了布局生成器，因此您可以使用布局构建块为每个页面生成唯一的布局，请参阅 布局生成器 了解更多详情。页面也支持草稿，因此您可以在将其发布到网站之前预览它们，请参阅 草稿预览 了解更多详情。

• #### 媒体

这是页面、帖子和项目使用的支持上传的集合，用于包含图像、视频、下载和其他资产等媒体。它具有预配置的大小、焦点和手动调整大小的功能，可帮助您管理图片。

• #### 分类

用于将帖子分组的分类法。类别可以相互嵌套，例如“新闻>技术”。见官方 Payload嵌套文档插件 了解更多详情。

全球

请参阅 全球 文档，了解如何扩展此功能的详细信息。

• Header

前端标题所需的数据，如导航链接。

• Footer

与上述相同，但用于网站的页脚。

访问控制

基本访问控制设置为根据发布状态限制对各种内容的访问。

• users：用户可以访问管理面板并创建或编辑内容。
• posts：每个人都可以访问已发布的帖子，但只有用户可以创建、更新或删除它们。
• pages：每个人都可以访问已发布的页面，但只有用户可以创建、更新或删除它们。

有关如何扩展此功能的更多详细信息，请参阅 有效载荷访问控制 文档。

布局生成器

使用强大的布局生成器为任何类型的内容创建独特的页面布局。此模板预先配置了以下布局构建块：

• 英雄
• 内容
• 媒体
• 行动呼吁
• 档案

每个块都是完全设计并内置到随此模板附带的前端网站中的。看 网站 了解更多详情。

词汇编辑器

深度的编辑体验，允许完全自由地专注于编写内容，而不会脱离流程，支持Payload块、媒体、链接和其他开箱即用的功能。看 词汇的 文档。

草稿预览

所有帖子和页面都支持草稿，因此您可以在将其发布到网站之前预览它们。为此，这些集合使用 版本 随着 drafts 着手 true。这意味着，当您创建新帖子、项目或页面时，它将被另存为草稿，在您发布之前不会在您的网站上显示。这也意味着您可以在将草稿发布到您的网站之前预览它。为此，我们会自动格式化一个自定义URL，该URL重定向到您的前端，以安全地获取您内容的草稿版本。

由于此模板的前端是静态生成的，这也意味着在对已发布的文档进行更改时，需要重新生成页面、帖子和项目。为此，我们使用 afterChange 钩子用于在文档发生更改时重新生成前端及其 _status 是 published.

有关如何扩展此功能的更多详细信息，请参阅官方 草稿预览示例.

实时预览

除了草稿预览外，您还可以启用实时预览，以便在编辑内容时查看最终结果页面，并完全支持SSR渲染。请参阅 实时预览文档 了解更多详情。

按需重新验证

我们在集合和全局变量中添加了钩子，这样你的所有页面、帖子、页脚或页眉都会发生变化，它们将通过Nextjs支持的按需重新验证在前端自动更新。

注意：如果图像被更改，例如被裁剪，您需要重新发布它所使用的页面，以便能够重新验证Nextjs图像缓存。

搜索引擎优化

此模板预先配置了官方 Payload SEO插件 从管理面板进行完整的SEO控制。所有SEO数据都完全集成到此模板附带的前端网站中。看 网站 了解更多详情。

搜索

此模板还预先配置了官方 有效载荷搜索插件 展示如何使用Payload将SSR搜索功能轻松实现到Next.js中。看 网站 了解更多详情。

重定向

如果您要迁移现有网站或将内容移动到新的URL，可以使用 redirects 收集以创建从旧URL到新URL的正确重定向。这将确保向搜索引擎返回正确的请求状态代码，并且您的用户不会留下断开的链接。此模板预先配置了官方 有效载荷重定向插件 从管理面板进行完全重定向控制。所有重定向都完全集成到此模板附带的前端网站中。看 网站 了解更多详情。

作业和计划发布

注意：在Vercel上部署时，根据计划层，您可能仅限于每日cron。

网站

该模板包括一个设计精美、可用于生产的前端，该前端由 Next.js应用路由器，在实例中与您的Payload应用程序一起提供。这使得您可以在需要的地方部署后端和网站。

核心特征：

• Next.js应用路由器
• TypeScript
• React钩子形式
• 有效载荷管理栏
• 顺风CSS样式
• shadcn/ui组件
• 用户帐户和身份验证
• 功能齐全的博客
• 发布工作流程
• 深色模式
• 预制布局构建块
• 搜索引擎优化
• 搜索
• 重定向
• 实时预览

缓存

发展

要在本地启动此示例，请按照以下步骤操作 快速开始那么 种子 包含几个页面、帖子和项目的数据库。

与Postgres合作

Postgres和其他基于SQL的数据库遵循严格的模式来管理数据。与我们的MongoDB适配器相比，这意味着使用Postgres需要一些额外的步骤。

请注意，在进行大型模式更改时，如果不手动迁移数据，通常会有丢失数据的风险。

地方发展

理想情况下，我们建议运行数据库的本地副本，以便模式更新尽可能快。默认情况下，Postgres适配器具有 push: true 对于开发环境。这将允许您添加、修改和删除字段和集合，而无需运行任何数据迁移。

如果您的数据库指向生产环境，则需要设置 push: false 否则，您将面临数据丢失或迁移不同步的风险。

迁移

迁移 基本上是跟踪模式的SQL代码版本。使用Postgres部署时，您需要确保创建并运行迁移。

在本地创建迁移

pnpm payload migrate:create

这将创建您需要与新配置一起推送的迁移文件。

在构建后和运行前的服务器上 pnpm start 您需要运行迁移

pnpm payload migrate

此命令将检查尚未运行的任何迁移，并尝试运行它们，它将在数据库中记录已运行的迁移。

码头工人

或者，您可以使用 码头工人 在本地启动此模板。为此，请按照以下步骤操作：

1. 跟随 上述步骤1和2，docker compose文件将自动使用 .env 项目根目录中的文件
2. 下次运行 docker-compose up
3. 跟随 上面的步骤4和5 登录并创建您的第一个管理员用户

就是这样！Docker实例将帮助您快速启动和运行，同时还将跨团队的开发环境标准化。

种子

要在数据库中添加一些页面、帖子和项目，您可以从管理面板中单击“种子数据库”链接。

种子脚本还将创建一个仅用于演示目的的演示用户：

• 演示作者

- 电子邮件： demo-author@payloadcms.com - 密码： password

注意：播种数据库是破坏性的，因为它会丢弃当前的数据库，从种子模板中填充一个新的数据库。仅当您正在启动新项目或有能力丢失当前数据时，才运行此命令。

生产

要在生产环境中运行Payload，您需要构建并启动管理面板。为此，请按照以下步骤操作：

1. 调用 next build 通过运行脚本 pnpm build 或 npm run build 在您的项目根目录中。这创建了一个 .next 带有生产就绪管理包的目录。
2. 终于跑了 pnpm start 或 npm run start 在生产环境中运行Node，并从 .build 目录。
3. 当您准备上线时，请参阅下面的部署以了解更多详细信息。

部署到Payload云

部署项目最简单的方法是使用 有效载荷云，一个一键式托管解决方案，可以直接从GitHub仓库部署Payload应用程序的生产就绪实例。

部署到Vercel

此模板也可以免费部署到Vercel。您可以通过在模板设置过程中选择Vercel DB适配器或手动安装和配置它来开始：

pnpm add @payloadcms/db-vercel-postgres

// payload.config.ts
import { vercelPostgresAdapter } from '@payloadcms/db-vercel-postgres'

export default buildConfig({
  // ...
  db: vercelPostgresAdapter({
    pool: {
      connectionString: process.env.POSTGRES_URL || '',
    },
  }),
  // ...

我们还支持Vercel的blob存储：

pnpm add @payloadcms/storage-vercel-blob

// payload.config.ts
import { vercelBlobStorage } from '@payloadcms/storage-vercel-blob'

export default buildConfig({
  // ...
  plugins: [
    vercelBlobStorage({
      collections: {
        [Media.slug]: true,
      },
      token: process.env.BLOB_READ_WRITE_TOKEN || '',
    }),
  ],
  // ...

还有一个简化 一键部署 如果你需要的话，可以去Vercel。

自足执行

在部署应用程序之前，您需要：

1. 确保你的应用程序在生产环境中构建和运行。看 生产 了解更多详情。
2. 然后，您可以像部署任何其他Node.js或Next.js应用程序一样，直接在VPS、DigitalOcean的应用程序平台上，通过Coolify或更多方式部署Payload。更多指南即将推出。

您还可以手动部署应用程序，查看 部署文档 了解全部细节。

问题

如果您有任何问题或疑问，请通过以下方式联系我们 Discord 的中文翻译是“不和谐”或“纷争”。 或启动 .