idoubi
3个月前
介绍一下 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 不仅是一个代码模板,我更愿意称之为一个全栈开发框架。集成了丰富的功能可以开箱即用,也给进阶玩家留足了定制开发的空间。 你可以永远相信我的架构设计能力。
idoubi
3个月前
今天来聊聊 ShipAny 的架构设计。 ShipAny Two 基于最新的 Nextjs16,在编译性能方面有很大提升,本地开发更快、内存占用更小。 在框架设计层面,分为核心系统、核心模块、扩展模块、主题系统、配置系统、内容管理系统六大件。 1. 核心系统(app) ShipAny Two 内置 Landing、Admin、User Console 三套核心系统,对应三套独立的页面布局,用于实现网站着陆页、后台管理、用户中心三类常见业务功能。 - 着陆页系统(Landing) 通过 json 文件控制页面内容,方便 AI 修改,支持多语言;页面按区块(blocks)拆分,可自由组装,灵活度高;通过 theme.css 调整配色和字体,个性化程度高 - 后台管理系统 集成用户管理、订单管理、积分管理功能;集成配置中心,可视化开启/关闭各类功能;集成 CURD 操作,通过自定义的 PageBuilder 做到几行代码渲染数据管理页面(table、form) - 用户控制台系统(User Console) 用户在 Settings 面板管理自己的账单、订阅、支付、积分流水,修改头像昵称;用户在 Activity 面板查看AI 生成任务和 AI 对话记录 三套核心系统在 src/app 目录实现,按功能划分文件夹,开发者很容易新增自己的功能。 2. 核心模块(core) ShipAny 把框架全局支持的功能归为核心模块,包括 db、auth、i18n、rbac 几类 - 数据库(db) 基于 drizzle orm 集成数据库功能,支持 postgres、mysql、sqlite 等数据库类型;通过 schema 定义数据表,支持增量迁移;CURD 数据操作层面用同一套 sql 语法,抹平各类数据库的差异 - 登录鉴权(auth) 基于 better-auth 实现登录鉴权功能,可以在管理后台一键开启常用的登录方式 - 权限控制(rbac) 基于权限的管理控制,通过自定义的角色和权限节点控制后台管理系统的访问 - 国际化(i18n) 基于 next-intl 实现国际化功能,通过 json 文件控制多语言显示 ShipAny 的核心模块定义在 src/core 下面 3. 扩展模块(extensions) ShipAny 利用 extensions 支持可插拔架构,每一类扩展定义一个统一的 interface,每个扩展按接口实现具体的功能逻辑。目前支持的 extensions 包括 - ads 广告。集成 adsense - affiliate 联盟营销。集成 affonso、promotekit - ai AI 供应商。集成 OpenRouter、Fal、Replicate、Kie - analytics 数据统计。集成 ga、clarity、plausible、open-panel、vercel-analytics - customer-service 客服。集成 crisp、tawk - email 邮箱。集成 resend - payment 支付。集成 Stripe、Creem、PayPal - storage 存储。集成 aws s3,cloudflare r2 ShipAny 的扩展模块定义在 src/extentions 目录下,每一类扩展要新增一个选项,只需要写很少的代码 4. 主题系统(themes) ShipAny 支持多主题系统,让开发者可以自定义主题实现个性化的页面展示。 包括三类自定义主题方式 - 自定义主题色 / 字体 - 切换亮色(light)/ 暗色(dark) - 自定义主题文件夹 主题系统定义在 src/themes 下面 5. 配置系统(config) ShipAny 支持三类配置的定义 - 在 .env 文件通过环境变量定义配置 - 在 src/config 目录下通过文件定义配置 - 在 /admin/settings 可视化管理配置 组合管理配置项,实现低代码的功能,不是很懂代码的用户也能方便地使用 ShipAny 6. 内容管理系统(cms) ShipAny 实现的内容管理系统包括三个层面的内容管理 - 博客(blog) 通过管理后台写入博客内容,也可以在 content/posts 目录用 markdown 写博客。博客可以给你的网站增加 SEO 权重,也能通过 guest post 接商单。 - 文档(docs) 基于 fumadocs 实现文档系统,在 content/docs 目录写内容,几分钟为你的网站渲染一个 /docs 文档 - 页面(pages) 在 content/pages 目录写内容动态创建页面,比如常用的网站协议页面 /privacy-policy 和/terms-of-service ---- 除系统架构和功能设计外,ShipAny 还支持多种部署方式,可以一键部署到 vercel/ cloudflare workers,也支持 docker 镜像构建,可以使用 k8s、dokploy+vps 等部署方案 --- 看到有人说,为什么要花钱买框架/模板,AI 几分钟不就能写出来了,我就笑笑不说话。 AI 的全栈架构能力要赶上我,还得好几年。 信我上车🌚