企业官网建设流程全解析

• 低代码
• 前端

导读：本文围绕 Webstudio（开源可视化网站构建器）文档 Reusability & maintainability 展开，系统讲解在构建器中实现"一处修改、处处生效"的四类复用工具：跨页面共享结构的 Slot、承载样式复用的 CSS 变量与设计令牌、一个模板渲染无数页面的动态数据，以及可重复创建页面的 Page templates。读完本文，你将掌握 Webstudio 中复用架构的选择标准与完整操作流程，并理解其"只做表现层、把数据层交给 CMS"的设计哲学。

Slots：跨页面共享结构

什么是 Slot

Slot是一个引用其他页面内容的组件（对应组件实现见 slot.tsx）。任何使用该 Slot 的实例始终渲染同一份内容，因此编辑源页面会同步更新所有使用该 Slot 的实例。从源码看，Slot 在 SDK 中被实现为一个普通容器组件，其 meta 描述为"引用跨项目内容的容器，修改 Slot 子元素会反映到该 Slot 的所有其他实例"，并在组件面板的 general 分类中提供（见 slot.ws.ts）。

常见用途：

• 所有页面共享的导航头部与页脚
• 只添加一次、全站复用的 Cookie 横幅或聊天组件
• 在多个动态页面模板内部复用的 404 布局

创建共享布局的方法是：先在某个页面上构建好头部（或任何需要重复的区块），再在其余每个页面上添加一个 Slot 并指向该源页面。设计只需维护一处。

创建与复用 Slot 实例

在组件面板（Components Panel）中找到 Slot 组件，将其拖入画布即可创建一个 Slot 实例；也可以直接点击，把它添加到当前选中的实例中。随后可以从组件面板向 Slot 内部继续添加其他实例来填充内容。

一旦画布上有了一个 Slot，可以简单地通过复制粘贴在全项目中复用：

1. 选中 Slot 实例，按下Ctrl + C（Windows）或Cmd + C（Mac）；
2. 选中要插入的位置，按下Ctrl + V（Windows）或Cmd + V（Mac）。

完成之后，对任何一个 Slot 实例所做的更新都会同步到所有其他实例。如果需要一个全新的、互不干扰的 Slot 实例，只需从添加面板重新添加一个新 Slot 即可，它不会影响已有的 Slots。

Slot 中变量的作用域

详细说明可分别参考 CSS variables 与 Data variables。值得一提的是，Webstudio 的 MCP 集成也支持将已有区块转换为共享 Slot 并在项目其他位置插入链接副本——每个副本指向同一份共享内容，后续在 Builder 中的编辑仍保持同步；Webstudio 会校验组件嵌套、防止将 Slot 插入到它自己的内容内部，并拒绝模糊的实例路径。

设计令牌与 CSS 变量：可复用样式

CSS 变量与设计令牌构成样式复用的两层体系。

底层：CSS 变量

CSS 变量是底层——单个具名值，如颜色、尺寸与间距。定义一次--color-brand，就可以在全站任何样式输入中使用它。品牌色变更时，只需在一个地方更新变量，所有引用它的元素都会随之更新。

创建变量的方式：在高级（Advanced）部分使用两个连字符加变量名定义，例如：

--gray-5

该语法并非 Webstudio 特有，而是官方 CSS 自定义属性语法。变量的值可以是任意内容：颜色、渐变、时长、尺寸或数字。

定义完成后，变量可用于其被定义的实例及其所有子实例，并出现在自动补全列表中。自动补全的搜索算法很灵活，可以通过以下任意方式检索：

• --
• var
• 变量名（如gray）

显示变量的标准语法是var(--my-var)，但用--搜索更快，Webstudio 会自动完成转换以保证正确输出。

作用域规则：CSS 变量天然地只在当前实例及其子元素中可用。绝大多数变量应定义在Global Root上——它是页面最高层级且对每个页面都相同，定义在它上面的变量如--my-color在每个页面的每个实例上都可用。仅某个区块或页面需要的局部变量，则定义在访问它们所需的公共祖先（如 Box/包装层）上，适用于：

• 父级交互时改变子元素的设计
• 不做整套设计系统改动即可进行 A/B 测试
• 节日促销时只修改某个区块的颜色

父-子交互模式

利用 CSS 变量可以实现"操作父级、修改任意子级样式"的模式。Webstudio 文档建议优先使用 CSS 变量而非后代自定义状态（如:hover .button）来做父-子交互，因为它把每个属性保持在真正使用它的子元素上，尤其适合一个父级状态协调多个属性或多个子元素的情形。步骤概览：

1. 记录要改变的属性（如颜色、背景色）；
2. 在父级为每个样式属性创建变量（如--child-color、--child-bg），先留空值；
3. 把变量填入各子元素的样式输入（如 background 设为--child-bg，此时尚无变化）；
4. 回到父级给变量赋默认值；
5. 切换到 hover 等其他状态，改变变量值；
6. 与父级交互，观察子元素随之变化。

提示：第 2 步虽然可以定义变量并同时赋值，但更好的做法是先把变量加到子元素上——若变量未在子元素上使用，赋的值不会渲染到任何地方，难以判断该选什么颜色。

过渡动画应添加在子实例（而非父级）上以平滑变化，例如图标上给background-color和color添加约 200ms 的过渡，箭头上给opacity和translate添加约 200ms 的过渡。导航悬停效果的示例变量名：--nav-icon-bg（图标背景）、--nav-icon-color（图标填充）、--nav-arrow-opacity（箭头可见性）、--nav-arrow-translate（箭头位置）。

用数据动态设置 CSS 变量

常见模式是通过 HTML Embed 表达式生成<style>标签，在其中填充 CSS 变量定义，然后在高级部分或任意样式字段中消费这些变量。写法细节可参考 Expression editor。

1. 创建包含所需 CSS 变量的数据变量（可在 HTML Embed 实例或任何父级上创建；根据数据来源选择 JSON 或 Resource 类型）；
2. 在页面某处（最好在顶部，head 区域合适但 body 也可以）添加 HTML Embed 组件，并为 code 属性创建绑定；
3. 在表达式编辑器中编写产生<style>块的模板字符串，插值所需数据：

// 键值对风格 `<style> :root { --brand-color: ${dataVariables.themeColor}; --feature-width: ${dataVariables.featureWidth}px; } </style>`;

// 从 JSON 字段取整段 CSS 字符串 `<style> :root { ${dataVariables.variables} } </style>`;

${}表达式可以引用表达式编辑器中可访问的任何值，包括嵌套属性与三元逻辑。第二种形式在 API 返回包含多条声明的单个字符串时很有用。HTML Embed 会在依赖变化时重新求值，因此生成的<style>标签会随新值更新，其定义的变量随即在页面任何位置可用。

⚠️ 通过 HTML Embed 创建的变量不会进入样式面板的自动补全，之后引用时须手动输入（或复制粘贴）变量名。

4. 在高级部分或任意样式输入中，用var(--brand-color)引用这些变量。

该技术非常适合主题化、A/B 测试，或应用来自 API、由外部 CMS 管理的动态值（如颜色、尺寸）。

上层：设计令牌

**设计令牌（Design tokens）**是上一层——可应用到任何元素上的具名样式集合，类似 CSS 类但规避了组合类、断点冲突和意外样式继承等常见问题。一个card令牌可能定义 padding、background 和 border-radius；令牌内部的值可以引用 CSS 变量，从而获得又一层复用。文档将这一组合称为composite Token（复合令牌），以区别于存储在 CSS 变量中的单个值。

整体关系：CSS 变量存储原始值，令牌把变量打包成语义化、可复用的样式组。更新令牌（如修改其 padding）时，所有使用该令牌的元素自动更新；没有令牌，你就必须在每个元素上重复同样的样式修改。

常见用法：

• CSS 变量：--color-brand、--space-md、--radius-lg
• 令牌：button-primary、card、heading-lg——每个令牌内部引用上述变量

为什么用令牌而非类

经典的 Webflow 场景：两个元素（按钮和卡片）已有各自的唯一类，现在想给它们加同一个 box-shadow。要么在各自类里手动配置（重复劳动），要么叠加一个 Box Shadow 组合类（之后编辑任意一个类都得先移除组合类、切回桌面断点、再重新应用）。令牌没有这些限制：可以任意数量、任意顺序地把令牌应用到同一实例，没有组合类问题，也没有断点限制。

使用令牌的工作流

1. 选中实例，样式面板顶部的Style sources字段显示其 Local 样式和令牌；
2. 要创建令牌，选中 Style sources 字段，输入名称并回车；
3. 选中要编辑的 source，活动 source 高亮显示，新样式写入该 source。

Local source 用于只作用于当前实例的样式，之后可以随时把 Local 样式转换为可复用令牌。属性标签上悬停可以看到当前值由哪个断点和样式源提供。

令牌组合与优先级

可以组合多个令牌实现灵活、模块化的设计：

1. 基础令牌：包含核心样式，如card的 padding、background、border-radius；
2. 变体或尺寸令牌：只包含变体所需声明，如is-card-featured或card-small。

两者应用到同一实例后样式合并，冲突属性上右侧令牌胜出：

[card] [small] [featured] ↑ ↑ │ └── 任何共享属性以它为准 └── 覆盖 card 的共享属性

本地覆盖：应用令牌后，把Local拖到最右端，再在 Local 上添加覆盖样式——因为 Local 在最右侧，其样式优先于令牌。

重置值：在 Style Sources 中选择令牌，悬停属性标签，点击重置图标（Mac 上也可 Option+点击），即可从该令牌移除属性，让继承值透出。

复制令牌：选中令牌，打开令牌菜单（三点），选择Duplicate，重命名并修改副本——比从零创建更快。

令牌冲突解决

从其他项目粘贴内容或跨页面复制时，Webstudio 会智能处理令牌冲突：

• 自动合并：粘贴的令牌与现有令牌同名且样式相同，自动合并，防止复制相似组件时产生重复令牌；
• 数字后缀：同名但样式不同，则追加数字后缀（如 "Button" 变为 "Button-1"），同时保留现有样式与粘贴样式；
• 查找重复令牌：用命令与搜索（Cmd + K）搜索 "duplicate tokens"，可找出样式相同但名称不同的令牌，清理令牌库。

导入设计令牌

Webstudio 支持从 [Design Tokens Community Group 格式]与 Figma Variables API 导出中导入令牌数据。把 JSON 文档复制后粘贴进 Builder，Webstudio 会识别受支持的令牌文档并询问表示方式：Design tokens为复合及无歧义的样式值创建可复用样式令牌，其他原始值变成 CSS 变量；CSS variables则将值导入为自定义属性用于单个样式。导入器会解析别名，支持 Figma 模式与 DTCG 复合值（边框、阴影、渐变、过渡、排版）；名称冲突时可选择Theirs（导入令牌带数字后缀保留）、Ours（跳过导入、保留项目令牌）或Merge（导入值写入现有令牌，导入值优先）。

令牌的输出：原子 CSS

默认情况下，令牌被转换为原子样式（atomic styles），大幅减少 CSS 体量，最终让网站加载更快。大多数用户应保持默认；如有特殊需求可在项目设置中关闭，见 Project settings。

动态数据：一个模板，无数页面

静态页 vs. 动态页

静态页是设计的完整实现——布局、样式与内容全部直接构建在画布上，内容属于页面本身：输入文字、放入图片、发布。首页、关于页、联系页通常都是静态页。

动态页是"没有内容的设计"。布局与结构和静态页相同，但真实文本和图片的位置由数据填充——这些数据在请求时从外部来源获取。同一个模板对每条记录渲染出不同结果：一个 URL 加载一篇博客文章，另一个 URL 加载另一篇，用的却是完全相同的页面设计。

这正是扩展内容密集型网站的关键：与其为每篇博客、每个产品、每位团队成员单独建页，不如构建一个动态页模板，让数据完成其余工作。该主题的完整讲解见 CMS & dynamic data。

动态页、资源与绑定

Webstudio CMS 的三个构建块：

1. 动态页（Dynamic pages）——最简形式即博客模板：一个页面根据所查看的 URL 动态展示数据。给页面路径添加动态参数会自动把它变成动态页，例如/post/:slug中slug的值来自 URL（访问/post/hello-world时值为hello-world），详见 path patterns；
2. 资源（Resources）——从 API 获取数据的变量类型。在动态页上下文中，Resource 用于获取由 URL 参数值确定的信息，如posts(slug: system.params.slug)在访问/post/hello-world时转换为posts(slug: "hello-world")。动态页可有多个参数（如再加上:lang做本地化内容）；GraphQL API 请用 GraphQL resource。Resource 配置支持 URL、方法、Search Params、Cache Max Age、Headers 等字段，URL 字段甚至支持直接粘贴 cURL 命令自动填充各字段；
3. 绑定（Bindings）——通过 Expression editor 把 CMS 数据连接到组件。例如在 Header 组件 > Settings > Text Content > "+" 按钮中打开表达式编辑器，添加包含 CMS 数据的 Resource 变量并取其中的 title 值，形如CMS Data.title。

兼容的 CMS：只要提供 HTTP API 即可接入，包括 WordPress、Directus、Baserow、Ghost、Hygraph、Strapi、Contentful、Drupal、Airtable、Notion、Flotiq、Coda、Sanity、Hashnode、Payload 等。富文本支持取决于 CMS 的存储/交付方式：Webstudio 渲染 HTML 或 Markdown 形式的富文本（分别绑定到 Content Embed 与 Markdown Embed），若 CMS 返回专有 AST 或其他结构化富文本格式，需先在 CMS、其 API 层或代理中转换为 HTML 或 Markdown。

动态 404 的正确处理

动态页的 URL 技术上可能存在，但 Resource 查询无数据（如 slug 不匹配任何记录），此时页面应返回 404 而非渲染空内容。正确做法分三步：

1. 设置状态码：打开 Page Settings > Status Code，绑定表达式：

cmsData.data[0].id ? 200 : 404;

检查响应中是否有记录 ID，存在返回200（找到），否则返回404（未找到）。具体查找的键取决于你的 CMS，选择记录存在时必定会有的字段（slug、ID、标题）。

2. 条件显示 404 内容：添加一个包含 404 消息的组件（如 Box），把它的Show条件设为同一表达式：

!cmsData.data[0].id;

为true时显示 404 内容。想复用已有的自定义 404 页面设计而不重建，可以添加一个 Slot 并把 404 页内容选为 slot 源——404 UI 只维护一处，可在任何动态页上复用。

3. 条件隐藏常规内容：选中包裹正常页面内容的组件（如 Box），把它的Show条件设为：

cmsData.data[0].id;

无数据时隐藏常规内容，避免出现空页面。

替代方案：重定向。不渲染 404 内容而是跳转到其他页面（如自定义/404页），在 Page Settings > Redirect 上绑定表达式：

!cmsData.data[0].id ? "/404" : ""

数据缺失时重定向到/404；数据存在时空字符串表示不重定向、页面正常加载。这个方案更简单——无需条件显示/隐藏内容——但用户会看到 URL 变化，而非停留在原 URL。

页面模板：可重复的页面创建

Page templates允许设计师在项目内创建可复用的页面蓝图。与动态页不同（动态页用一个线上页面配合外部数据渲染许多 URL），页面模板创建的是独立的普通页面。

适用于需要重复创建的静态页面类型，例如服务页、活动页、落地页，或希望从受控结构起步的客户内容页。注意页面模板与 Marketplace 模板不同：Marketplace 模板是从 Webstudio 或社区插入的可复用资产，而页面模板属于当前项目私有、由项目设计师创建。

工作原理：模板存放在 Pages 面板的Page templates区域。模板不是已发布页面——没有路径、不出现在 sitemap 中、不产生公开路由，只有从模板创建普通页面并发布后才公开。从模板创建的页面是独立副本，之后更新模板不会更新已从它创建的页面。

创建模板（Design 模式）：打开 Pages 面板 → 点击创建按钮 → 选择New page template→ 输入模板名称和页面元数据默认值 → 点击Create template→ 在画布上设计模板。模板设置包含页面使用的编辑元数据（标题、描述、搜索可见性、语言、社交图片、自定义元数据），但不包含路径、重定向、状态码、文档类型、认证——因为它们不是线上路由。

从模板创建页面：在 Page templates 区域点击某模板行的创建按钮，Webstudio 打开Create page from template，预填模板值；审阅或调整页面名称、路径、SEO、社交图片等设置后点击Create page。Webstudio 会创建带复制组件树、全新内部 ID 和基于页面名称的唯一路径的普通页面。

管理与复制：设计师可以选中模板在画布上编辑、打开模板设置、复制模板粘贴到其他项目、复制/删除/重排模板（右键模板行即可）。Design 模式下 Pages 面板支持页面、文件夹与页面模板的复制粘贴（右键选择 Copy，再到目标文件夹 Paste，或选中后使用Cmd/Ctrl + c、Cmd/Ctrl + v）。粘贴时 Webstudio 会创建新的内部 ID，并自动调整名称、路径、文件夹 slug、令牌、资产、变量与样式以适配目标项目；在不同部署之间复制时，目标端会先从源端下载引用的资产文件，源部署需保持可公开访问直到粘贴完成，整站迁移请用 CLI 同步导入完整项目。

Content 模式：有编辑权限的内容编辑者可从已有页面模板创建页面，获得受控的建页流程而无需完整设计权限。编辑者不能创建或编辑模板本身，从模板建页时只能改安全的内容字段（页面名称、路径、标题、描述、搜索可见性、语言、社交图片、自定义元数据）；动态路径、重定向、状态码、文档类型、认证与模板管理仍是 Design 模式的控制项。

为什么 Webstudio 不是 CMS

Webstudio 是可视化构建器，不是内容管理系统，没有内置的用于存储和管理成百上千条记录的数据库。这意味着：

• 为每篇博客单独建一页不是正确做法——你会不得不在构建器中管理成百上千个页面，没有结构化的编辑工作流、没有内容关联、没有批量操作；
• 正确做法是把这个内容存储在专用 CMS（WordPress、Directus、Baserow、Ghost 等）中，并通过 CMS 集成 连接到 Webstudio 的单个动态页模板。

构建器被设计为表现层——负责布局、设计和数据如何展示；CMS 是数据层——负责大规模地存储和编辑内容。Webstudio 动态页对所有记录使用一个模板：CMS 负责创建、编辑和组织实际记录，Webstudio 负责获取并展示它们。

总结：如何选择复用工具

延伸阅读

• Slot – 跨页面共享组件
• CSS variables – 单个具名值（颜色、尺寸、间距）
• Design tokens – 基于 CSS 变量构建的可复用样式集合
• CMS & dynamic data – 一个模板，许多页面
• Page templates – 用于创建页面的可复用蓝图
• Data variables – 将数据绑定到画布
• Expression editor – 绑定数据与编写表达式
• Collection – 迭代 JSON 或 Resource 数据生成列表
• Craft – Webstudio 关于主题变量、语义变量、复合令牌与可复用项目架构的公开规范

• 低代码
• 前端