Malla文档

核心概念

工作区、站点、页面、节点、类、令牌、断点和环境,一页看懂。

用户指南

Malla 的术语不多。每篇指南中,这些词的含义都完全相同。

自上而下
工作区你的团队、成员、套餐和 API 密钥。
站点页面、组件、类、令牌、CMS、数据表。
页面一份文档:由节点组成的树、变量和交互。
节点一个元素:类型、属性、样式和子节点。

工作区和站点

工作区就是你的团队。它拥有成员、一个工作区套餐(席位和 AI 用量)以及供智能体使用的 API 密钥。一个工作区可以包含任意数量的站点。每个站点都有自己的套餐、页面、设计系统、内容、数据和域名。

页面、节点和文档

页面是一份独立的文档:由节点组成的扁平映射,加上页面变量和交互。节点是画布上的一个元素,例如区块、框架、文本、链接、图片、集合列表、表单、输入框或组件实例。每个节点都有一个类型、props(内容和设置)以及样式。

页面有一个路径,例如 /pricing。模板页面有一个动态路径,例如 /blog/:slug,会为每个 CMS 条目渲染一次。

类、令牌和组件

  • 设计令牌是站点级的 CSS 变量,用于颜色、字体和间距。修改一个令牌,所有用到它的地方都会跟着变。
  • 类是可复用的样式规则。组合类建立在父类之上,例如 btn + btn-ghost。
  • 局部样式只作用于单个节点,优先级高于它的类。
  • 组件是带变体的可复用布局片段。页面上的每个副本都是一个实例,可以覆盖文本、图片、样式和可见性。

断点和状态

Malla 采用桌面优先。你先设计基础样式(桌面,1440 px),再在平板(991 px 及以下)和手机(767 px 及以下)上覆盖数值。每个断点还可以分别设置悬停(hover)、聚焦(focus)和按下(active)状态的样式。

数据和逻辑

  • 绑定用表达式替换字面值,例如 item.title 或 vars.count > 0。
  • 变量保存页面或站点的状态。
  • 集成把站点连接到 REST、GraphQL 或 CMS;查询通过集成获取数据。
  • 工作流是由触发器启动的一系列步骤。客户端工作流在浏览器中运行;服务端工作流在边缘运行。
  • 原生表是站点自己的 SQL 数据库,用于存放应用数据,由行规则保护。

环境

每个站点都有两个环境。预发布(staging)位于 Malla 子域名上,永远不会被搜索引擎收录。生产环境是访客看到的版本,使用你的自定义域名。表单、提交记录和服务端工作流在每个环境中分开保存。

人员

编辑器用户负责构建站点:所有者、管理员、编辑者、查看者和内容编辑者。访客使用已发布的站点,也可以拥有自己的账户。两者完全隔离:数据表、会话和密钥都是分开的。参见团队与角色和访客账户。