用 AI 迁移静态页面

本节将介绍如何把一个用静态 HTML 编写的页面，迁移为由 WEEGLOO 管理的、基于内容的服务的过程。

本指南以一个单场演出介绍页面作为示例（下载）。这个页面既包含演出本身的信息，也包含三位出演艺人的信息，并且所有数据都直接写在 HTML 文件里。这样的结构在第一次创建页面时没什么负担，但是每当出演者发生变动或演出信息需要修改时，都要逐次手动改动 HTML 文件，这是它的局限。

在这一步，我们会把 LLM 代理与 WEEGLOO MCP 结合使用，依次完成三项工作。首先分析静态 HTML 页面，自动创建合适的 Content Type；接着把写在页面里的数据提取出来，作为 Content 载入；最后修改代码，让页面通过 CDA 来获取数据。

经过这个过程，你无需亲自搭建独立的后端（在背后存储和处理数据的系统），就能把现有的静态页面迁移为基于 WEEGLOO 的内容服务。

准备工作

在开始之前，需要准备好两样东西。

第一，需要在 WEEGLOO 中创建一个处于空白状态的新 Space。接下来要创建的 Content Type 和 Content 都将在这个 Space 内管理，而且从空白状态开始，能让你更清晰地跟随整个流程。关于 Organization 和 Space 的详细内容，请参阅访问与权限。

第二，LLM 代理需要已经连接到 WEEGLOO MCP。本指南以 Cursor IDE 为基准进行，但只要是像 Claude Desktop 这样支持 MCP 的环境，都可以按相同的流程进行。安装方法请参阅 MCP。

安装完成后，LLM 代理便能够直接调用 WEEGLOO 的 CMA（Content Management API）中定义的工具。也就是说，过去需要人在内容工作室里完成的 Content Type 创建、Content 注册与发布等工作，LLM 代理仅凭自然语言请求就能完成。

内容建模

首先要做的，是用 Content Type 来定义页面所含数据的结构。Content Type 就如同数据的设计图，它预先规定了 WEEGLOO 将管理具有哪些 Field 的数据。

观察示例页面会发现，其中既有演出本身的信息（标题、时间、地点、价格等），也有出演者的信息（姓名、角色、表演时段、简介），并且这两种数据构成了一对多的关系。因此，这个页面自然地分成两类 Content Type：一个承载演出信息，一个承载出演者信息。

只需像下面这样向 LLM 代理提出请求，这项分析和 Content Type 的创建就会自动完成。

Hey, so there's an HTML file in the project — nightshift-2026.html. It's a
landing page for a one-night concert and right now everything's hardcoded
straight into the markup (the show details, the lineup, set times, all of it).
 
I want to migrate it over to Weegloo so the page can pull its content from
a CMS instead of having it all baked in. Let's take it step by step rather
than doing the whole thing in one go.
 
To kick things off, could you take a look at nightshift-2026.html and figure
out what content types would make sense for it, then go ahead and create
them in Weegloo? We'll deal with the actual content and the API wiring in
the following steps.

收到请求的 LLM 代理会查看 HTML 文件的结构，推断出数据的种类与关系，为每个 Field 确定合适的类型，然后通过 WEEGLOO MCP 创建 Content Type。

工作完成后，打开 WEEGLOO 内容工作室的 Content Type 页面，就能看到新建出了两个 Content Type：一个表示演出，一个表示出演者。演出 Content Type 中包含标题、时间、地点、价格之类的 Field；出演者 Content Type 中除了姓名、角色、表演时段、简介之外，还有一个用于指向其所属演出的引用（Reference）Field。

这样定义好 Content Type 之后，就完成了以这套结构为基础载入实际数据的准备。关于 Content Type 的详细内容，请参阅 Content 建模。

内容创建

Content Type 只是定义数据的格式，它本身并不包含数据。在这一步，我们将以前面定义好的 Content Type 为基础，把写在页面里的实际数据迁移为 Content。

像下面这样向 LLM 代理提出请求，它就会分析页面的数据，创建出符合 Content Type 的 Content，并一并完成发布。

Alright, the content types look good. Now let's move on to actually loading
the data.
 
Could you go through nightshift-2026.html again, pull out the actual content
that's hardcoded in there, and create entries in Weegloo using the content
types we just made? Once everything's in, go ahead and publish them too so
they're ready to be served.

收到请求的 LLM 代理会重新分析 HTML，把数据按条目拆分，然后通过 WEEGLOO MCP 注册一条演出信息和三条出演者信息。已注册的 Content 会被一并发布，以便从外部进行查询。

工作完成后，打开 WEEGLOO 内容工作室的 Content 列表，就能看到一条演出和三条出演者都已注册并处于已发布状态。从这时起，即便不直接改动页面的代码，你也可以通过内容工作室或 LLM 代理自由地修改数据。

关于 Content 的撰写与发布的详细内容，请参阅 Content 撰写与发布。

CDA 对接

数据也准备好之后，最后一步是修改代码，让页面不再依赖静态写入的 HTML，而是通过 WEEGLOO 的 CDA 来获取数据。CDA 是一个只读 API，用于让外部服务查询已发布的 Content，它能让网页或移动应用直接获取并使用 WEEGLOO 的数据。

这项工作同样只要像下面这样向 LLM 代理提出请求就会自动完成。

Okay, last step. The content's all in Weegloo and published, so now let's
hook the page up to actually use it.
 
Could you update nightshift-2026.html so that instead of having all that
data hardcoded in the markup, it fetches from Weegloo's CDA on load and
renders the page from the response? Basically the same page as before, just
pulling from the API now.

收到请求的 LLM 代理会移除写死在页面里的静态数据，在原处填入调用 CDA、并把响应数据反映到画面上的代码。原本放出演者信息的位置，换成查询出演者 Content 列表的 CDA 调用；原本放演出信息的位置，换成按单条查询演出 Content 的调用。

刷新改动后的页面，再打开浏览器开发者工具的 Network 标签页，就能确认页面加载时确实向 WEEGLOO 的 CDA 发出了请求并收到了响应。

现在，在 WEEGLOO 内容工作室中修改出演者的表演时段或添加新的出演者，然后刷新页面，无需另行构建或部署，改动的内容就会立即反映出来。关于 CDA 的详细内容，请参阅 Content Delivery API。

至此，我们把一个原本静态编写的单一 HTML 页面，迁移为了由 WEEGLOO 管理的、基于内容的服务。同样的流程也可以原样应用到更复杂的页面上。只是 Content Type 的数量和 Content 的体量会增加，而从建模、载入到 CDA 对接的整个过程都完全相同。