Skip to main content

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。

  1. 生成站点

    创建站点目录、一套入门主题,以及一个已经能够构建的首页。

    终端
    npx cms-create-site my-site
    cd my-site
    npm install
  2. 描述一个页面

    带数组下标的扁平点号键。框架会把它们展开成组件在渲染时读取的嵌套对象。

    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": "/"
    }
  3. 预览效果

    带热重载的 Vite 开发服务器。内容修改会即时重载,图片和主题的变更同样如此。

    终端
    npm run dev
  4. 构建静态站点

    把每条路由预渲染成 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