fluid-design-io/payload-better-auth-starter


---

功能 · 快速开始 · 为您的公司创建品牌 · 自定义 UI 组件 · 自定义区块 · 表单插件（可选）

---

## 功能

自定义区块

| 区块 | 描述 | | ------------- | ------------- | | [内容区块](https://github.com/fluid-design-io/payload-better-auth-starter/blob/main/src/blocks/content-block/config.ts) | 允许您创建一个具有多列的内容区域，支持移动端响应式布局。 | | [媒体区块](https://github.com/fluid-design-io/payload-better-auth-starter/blob/main/src/blocks/media-block/config.ts) | Payload 默认媒体区块的优化版本（添加了缩放功能）。 | | [图库区块](https://github.com/fluid-design-io/payload-better-auth-starter/blob/main/src/blocks/gallery-block/config.ts) | 一个可缩放图片的网格布局。 | | [版权内联区块](https://github.com/fluid-design-io/payload-better-auth-starter/blob/main/src/blocks/copyright-inline-block/config.ts) | 一个内联区块，用于添加 `© Copyright ${fromYear}~${currentYear}...`，无需每年手动更改。 |

自定义 UI 组件

| 组件 | 描述 | | ------------- | ------------- | | [LayoutHeader](https://github.com/fluid-design-io/payload-better-auth-starter/blob/main/src/components/layout/elements.tsx#L100) | 一个包含徽章、h1 标题和描述的顶部组件。 | | [SectionSpacing]() | 一个用于各区块之间垂直间距的间距组件。 | | [SectionGrid](https://github.com/fluid-design-io/payload-better-auth-starter/blob/main/src/components/layout/elements.tsx#L300) | 包含多个内容项的网格布局。 | | [SectionGridItem](https://github.com/fluid-design-io/payload-better-auth-starter/blob/main/src/components/layout/elements.tsx#L310) | 用于垂直行布局的单个内容项。 | | [SectionHeader](https://github.com/fluid-design-io/payload-better-auth-starter/blob/main/src/components/layout/elements.tsx#L320) | 一个包含徽章、h2 标题和描述的区块标题。 | | [SectionHorizontal](https://github.com/fluid-design-io/payload-better-auth-starter/blob/main/src/components/layout/elements.tsx#L330) | 一个带有标题、描述和媒体的水平区块。 | | [ImageMedia](https://github.com/fluid-design-io/payload-better-auth-starter/blob/main/src/components/layout/elements.tsx#L200) | 一个可重用的图片媒体组件，支持自定义渐变和样式。 | | [VideoMedia](https://github.com/fluid-design-io/payload-better-auth-starter/blob/main/src/components/layout/elements.tsx#L250) | 一个可重用的 Vimeo 视频媒体组件，支持可配置的播放选项。 | | [FullWidthImage](https://github.com/fluid-design-io/payload-better-auth-starter/blob/main/src/components/layout/elements.tsx#L270) | 一个带有发光效果的大型全宽图片区块。 |

使用示例

``` import { FullWidthImage, ImageMedia, LayoutHeader, SectionGrid, SectionGridItem, SectionHeader, SectionHorizontal, SectionSpacing, } from "@/components/layout/elements"; import { Main } from "@/components/layout/main"; export default function Page() { return (

} /> } /> } />

); } ```

## 邮件 UI ## 快速开始 ``` git clone fluid-design-io/payload-better-auth-starter cd payload-better-auth-starter bun install cp .env.example .env # edit with your values bun run dev ``` ## 为您的公司创建品牌 替换 **Acme**：在 `src/components/icons.tsx` 和 `admin-icon.tsx` 中替换 logo，在 `public/favicon.ico` 中替换 favicon，在 `src/lib/constants.ts` 和 `src/lib/email/email-template.tsx` 中替换名称，在 `public/website-template-OG.png` 中替换 OG 图片。 **环境变量（必需）：** `PAYLOAD_SECRET`、`DATABASE_URI`。**可选：** S3 变量、`RESEND_API_KEY` 用于邮件。 ## 技术栈 **集合：** Users、Blog、Media、Globals。**插件：** Better Auth、SEO、Import/Export、S3、可选的 Form Builder。**UI：** Shadcn、Motion、主题、响应式设计。 ## 表单插件（可选） Payload 表单构建器插件，前端使用 Tanstack form 1. 将 `extra/plugins/form-plugin` 移动到 `src/plugins/` 2. 将 `extra/blocks/form` 移动到 `src/blocks/form` 3. 将 `extra/components/form` 移动到 `src/components/form` 4. 将 `extra/fields/slug` 移动到 `src/fields/slug` 5. 安装 `@payloadcms/plugin-form-builder country-data-list react-circle-flags` 6. 在 `src/plugins/index.ts` 中取消注释表单插件 7. 运行 `bun run payload generate:importmap` 8. 重启开发服务器 🥳 ## 项目结构 `src/` → `app/`、`collections/`、`components/`（ui、layout、payload）、`lib/`、`plugins/`、`blocks/` ## 部署 **Docker：** `docker-compose -f docker-compose.prod.yml up -d` ## 许可证 MIT 许可证 - 详见 [LICENSE.md](LICENSE.md)。 **需要帮助？** 请查阅 [PayloadCMS 文档](https://payloadcms.com/docs) 或 [Better Auth 文档](https://better-auth.com/docs)。

标签：Better Auth, CMS, GNU通用公共许可证, MITM代理, Node.js, PayloadCMS, React, SOC Prime, Syscall, Syscalls, UI组件, Web开发, 内容管理系统, 后端框架, 启动器, 图库, 媒体管理, 开发工具, 样板项目, 现代UI, 自动化攻击, 自定义区块, 表单插件, 认证, 请求拦截