npx cms-create-site my-site 今天想构建点什么?
一探究竟Vertex 是什么
一个内容站点就是一个配置文件。其余的事情都交给框架。
Vertex CMS 是构建在 vite-ssg 之上的 Vue 3 框架。你用 JSON 描述每个页面包含什么,它交还给你一个预渲染的静态站点,路由、元数据、主题和图片都已处理妥当。没有应用代码要写,也没有服务器要跑。
页面是数据,不是代码
一个页面就是一份组件清单,加上这些组件所需的内容。添加一个区块就是添加一行。没人需要为了改一句标题去打开 .vue 文件,而内容编辑也不可能弄坏构建。
设计是一份令牌清单
主题是一个 JavaScript 对象,包含全部设计令牌——配色、字体、表面、聚焦环、层级。框架会把它编译成 CSS 自定义属性,因此为整个站点换肤只是一个文件的事,而不是一次样式表大排查。
静态产物,真正的 SEO
每条路由都会预渲染成各自的 HTML,带有规范 URL、hreflang 备选、JSON-LD、Open Graph 标签、站点地图,以及依据草稿设置生成的 robots.txt。把这个文件夹部署到任何能提供静态文件的地方即可。
快速开始
从零到可部署站点,只需四条命令。
Vertex 以单个 npm 包加一个 Vite 插件的形式发布。脚手架会生成一个可以立即构建的可用站点;此后你要做的就是编辑 JSON。
生成站点
创建站点目录、一套入门主题,以及一个已经能够构建的首页。
终端 npx cms-create-site my-site cd my-site npm install描述一个页面
带数组下标的扁平点号键。框架会把它们展开成组件在渲染时读取的嵌套对象。
site/content/en/pages/home.json { "components[0]": "Header", "components[1]": "Hero", "components[2]": "Footer", "content.hero.headline": "Welcome", "content.hero.subhead": "Built with Vertex CMS.", "content.hero.cta.text": "Get in touch", "content.hero.cta.href": "/contact", "path": "/" }预览效果
带热重载的 Vite 开发服务器。内容修改会即时重载,图片和主题的变更同样如此。
终端 npm run dev构建静态站点
把每条路由预渲染成 dist/ 中各自的 HTML 文件,生成响应式图片变体,并写出 sitemap.xml、robots.txt、manifest.json 和一个 404 页面。
终端 npm run build:ssg
整个流程就是这样。完整的内容模型、主题令牌和部署目标,请阅读 文档 →
内置能力
每个内容站点都需要的部件,都已经造好了。
这些不是需要你去四处寻找的插件。它们就在框架里,默认启用,并且和其他一切一样从同一份 JSON 配置。
预渲染路由
路由由你的页面文件推导而来。每条路由在构建时渲染成各自的 HTML——没有 SPA 重写,也不会为真实的内容 URL 返回首页外壳。
多语言内容
彼此对应的各语言目录。基准语言先加载,每种语言只覆盖自己定义的键,因此部分翻译也是有效的翻译。
响应式图片
把原图放进 site/assets/img/ 即可。构建会生成六种宽度的 AVIF、WebP 和 JPEG,缓存到仓库之外,并通过 <picture> 的 srcset 提供。
SEO 元数据
规范 URL、hreflang 备选、Open Graph 与 Twitter 卡片、JSON-LD、自动推导的面包屑、sitemap.xml、robots.txt 以及 Web 应用清单——全部自动生成,无需手工维护。
草稿门禁
可以为单个页面、某个路径前缀或整个站点加上密码。被门禁的页面带 noindex 发布,不进入站点地图,并且在解锁前不渲染正文。
主题与扩展
主题是令牌清单,扩展是经过校验的组件包。两者都可以放在你的仓库里,也可以发布到 npm 供多个站点共享。
三层组件解析
站点本地组件覆盖扩展组件,扩展组件覆盖内置组件。更具体者胜出;名称冲突时,用带来源限定的名字加以区分。
真正的 404
框架会用你站点自己的页头页脚预渲染 /404.html,因此未匹配的 URL 得到的是一个带 noindex 的品牌化页面,而不是一个空的响应体。
开始使用
那么——今天想构建点什么?
Vertex CMS 采用 MIT 许可并发布在 npm 上。生成一个站点、阅读文档,或者直接读源码。
npx cms-create-site my-site