Menu

如何使用 CMS 模块

提醒

在 v3.2.3 - 3.2.4 更新中，Nexty 的 CMS 使用 TipTap 重构，获得了更多的特性，内容编辑器的使用体验也更加完美。

支持的特性

Nexty.dev 模板提供的 CMS 功能属于所有 SaaS 模板里最完善的，支持的功能非常丰富，而且通过 TipTap 丰富的插件生态你还可以轻松扩展出更多功能。

以下是 Nexty 模板已支持的功能：

  • 默认提供博客模块
  • 基础组件通用、数据表共用，通过添加少量文件和代码即可创建出新的内容模块
  • 支持本地 mdx 文件渲染和服务端 CMS 数据渲染
  • 支持统计阅读量
  • 详情页支持 TOC
  • 详情页支持展示关联文章（以相同 tag 作为判断）
  • 创建、编辑内容支持：
    • 文章基础信息：title、slug、description、tags、封面图
    • 选择语言：支持不同语言但相同 slug 的设计
    • 高级功能：状态设置（草稿、发布、归档）、可见性（公开、登录用户、订阅用户）、置顶
  • 内容编辑器工具栏非常丰富，支持：
    • markdown 基础功能：加粗、斜体、下划线、标题、序号、引用、代码、分割线、链接等等
    • 表格：行和列都支持增加、删除、移动
    • 图片上传：本地上传、外部图片链接、CloudFalre R2 选择；支持多图并排
    • 视频：YouTube 视频链接
    • 翻译
    • 工具栏大部分插件支持通过配置开启或关闭

目录结构

components/cms/               // 公共组件
  ├─ PostDataTable.tsx        // 列表 & 分页
  ├─ PostEditorClient.tsx     // 创建/编辑入口
  ├─ PostForm.tsx             // 表单+Tiptap
  ├─ PostList.tsx             // 前台无限滚动
  ├─ PostCard.tsx             // 前台卡片
  ├─ ImageUpload.tsx          // R2 上传
  ├─ TagInput.tsx             // 表单标签字段
  ├─ TagManagementDialog.tsx  // 标签管理弹窗
  └─ post-config.ts           // 各 PostType 配置，如果需要多个 CMS 模块，在这里完成模块配置
 
components/tiptap/
  ├─ TiptapEditor.tsx         // 富文本编辑器主组件
  ├─ TiptapRenderer.tsx       // 前台只读渲染器
  ├─ ImageGridExtension.ts    // 图片网格自定义 Node
  ├─ ImageGridNodeView.tsx    // 编辑态图片网格视图
  ├─ ImageGridReadOnlyView.tsx // 阅读态图片网格视图
  ├─ R2ResourceSelector.tsx   // R2 媒体选择器
  ├─ TableMenu.tsx            // 表格悬浮工具条
  ├─ TableOfContents.tsx      // 目录生成组件
  └─ TranslationButton.tsx     // AI 翻译按钮
 
 
actions/posts/                // 公共 Server Actions
  ├─ posts.ts                 // CRUD + 前台读取
  ├─ tags.ts                  // 标签 CRUD
  └─ views.ts                 // 浏览量计数
 
app/[locale]/(protected)/dashboard/(admin)/blogs/
  ├─ page.tsx                 // 列表页
  ├─ new/page.tsx             // 创建页
  └─ [postId]/edit/page.tsx   // 编辑页
 
app/[locale]/(basic-layout)/blog/
  ├─ page.tsx                 // 前台列表
  └─ [slug]/page.tsx          // 详情页
 
lib/
  ├─ db/schema.ts             // Drizzle 模型，相关表有：posts、tags 和 postTags
  └─ getBlogs.ts              // 本地 MDX 读取

功能展示

因为 CMS 功能都是所见即所得，所以不再详细介绍，通过图片即可了解功能。

cms
cms
cms
cms
cms

上传图片支持本地上传、外部链接、CloudFlare R2 选择

cms
cms

图片展示支持多张并排

cms

支持插入 YouTube 视频

cms

编辑器内容支持快捷翻译

cms

如何修改内容编辑器功能

内容编辑器的所有功能文件都在 components/tiptap 下，你可以熟悉代码后修改，也可以让 AI 帮你修改。AI 对 Tiatap 非常熟练。

如何增加新的内容模块

如果你在开发内容网站，博客模块可能不够使用，你想增加多个内容模块来丰富网站内容结构，这种需求使用 Nexty.dev 模板可以轻松解决。

以新增 Guide 模块为例，你只需完成以下步骤：

  1. 扩展 CMS 内容类型
lib/db/schema.ts
export const postTypeEnum = pgEnum('post_type', [
  'blog',
  "guide" // add
])

然后执行命令：

npm run db:generate
 
npm run db:migrate
  1. 扩展 CMS 配置
components/cms/post-config.ts
export const POST_CONFIGS: Record<PostType, PostConfig> = {
  blog: {
    postType: "blog",
    schema: basePostSchema,
    actionSchema: postActionSchema,
    imagePath: BLOGS_IMAGE_PATH,
    enableTags: true,
    routes: {
      list: "/dashboard/blogs",
      create: "/dashboard/blogs/new",
      edit: (id: string) => `/dashboard/blogs/${id}`,
    },
  },
  // add
  guide: {
    postType: "guide",
    schema: basePostSchema,
    actionSchema: postActionSchema,
    imagePath: BLOGS_IMAGE_PATH,
    enableTags: true,
    routes: {
      list: "/dashboard/guides",
      create: "/dashboard/guides/new",
      edit: (id: string) => `/dashboard/guides/${id}`,
    },
  }
};
  1. 创建页面

分别复制 app/[locale]/(basic-layout)/blog 和 app/[locale]/(protected)/dashboard/(admin)/blogs，把文件夹名称与文件内部的 blog 和 blogs 有关的配置信息，分别改成 guide 和 guides。

因为 components/cms/ 文件夹下的 CMS 基础组件都通用，所以你只需完成极少量的修改就能完成新页面。

提醒

博客模块支持本地 mdx 文件，如果新增其他 CMS 模块，我不建议支持本地 mdx 文件，所以你需要在 app/[locale]/(basic-layout)/blog/page.tsx 和 app/[locale]/(basic-layout)/blog/[slug]/page.tsx 直接调用 actions/posts/posts.ts 里的列表和详情方法，而不是调用 lib/getBlogs.ts 文件里的方法。

  1. 补充 app/sitemap.ts，构造 Guide 页面的数据

这样一个全新的 CMS 模块就完成了。