介绍一下 ShipAny 的 Page Builder 功能。支持多个维度的页面自定义,用低代码的方式快速构建常用的功能页面。
1. 静态页面构建
只需要写一个 Markdown 文件,就可以渲染出来一个页面,常用于网站的隐私协议、服务条款等静态内容的渲染。
比如,要在你的网站上线一个公司介绍页面,只需要在 content/pages 目录创建一个 about/company.mdx 文件,就可以渲染出来一个 /about/company 页面,支持多语言。
2. 动态页面构建
只需要写一个 JSON 文件,就可以渲染出来一个动态页面,常用于制作功能型着陆页。
比如,我们做的是一个 AI 图片聚合网站,经常需要上一些子页面来介绍新出的图片模型,利用主站的权重来快速拿到搜索排名。
前阵子新出了 nano banana pro 图片模型,我们要在自己的网站上线一个内页来做排名,只需要在 src/config/locale/{locale}/pages 目录创建一个 nano-banana-pro.json 文件,在文件的 "page.sections" 字段写入 hero / features / faq / cta 几个区块内容,就可以快速上线一个 /nano-banana-pro 页面,无需写一行代码,就能马上看到一个布局完整的落地页,支持多语言。
ShipAny 内置了几十个区块,让你搭积木式快速组装实现各种样式的着陆页面,写个脚本驱动 AI 遍历关键词生成 JSON 文件,就能做出海量页面,实现 pSEO。
3. CURD 页面构建
ShipAny 实现了 Form / Table 构建器,几行代码就可以定义一个表单,一个表格,实现管理后台对业务数据的增删改查功能。
比如,我们做的是一个 AI 导航网站,需要在管理后台查看用户提交的项目并审核修改。无需写前端的页面和样式,只需要在 admin 目录新建一个 project/page.tsx,定义要展示的字段名称,就可以渲染出来一个表格,展示用户提交的项目列表;创建一个 project/[uuid]/page.tsx,定义允许修改的字段名称,就可以渲染出来一个表单,修改项目数据。
除了管理后台的 CURD,这套页面构建器也适用于在用户中心处理各类数据。比如用户进入 /activity/projects/add 页面提交项目,就可以用 FormBuilder 来构建这个提交表单。用户进入 /activity/projects 页面要看到自己提交的项目,就可以用 TableBuilder 来构建这个展示表格。
----
AI 时代,我们经常会驱动 AI 来生成各类页面,但是使用低代码的构建器,可以有效降低 AI 生成的代码量,保持代码风格的统一和页面样式的一致性。
ShipAny 的 PageBuilder 有足够的灵活性,让不同水平的开发者都能用来快速实现各类常用的功能。
ShipAny 不仅是一个代码模板,我更愿意称之为一个全栈开发框架。集成了丰富的功能可以开箱即用,也给进阶玩家留足了定制开发的空间。