通过 API 和 Zapier 在 Webflow CMS 上上传的指南

我们喜欢在 Letterdrop 中使用 Webflow，但它的 预装的 CMS 对于发布博客来说可能很麻烦:

• 这 缺乏权限支持、协作功能和 SEO 工具 如果不借助外部应用程序，您的团队将很难在内容创作和策略上展开合作
• 它没有与 Google Docs 或其他写作平台集成，因此需要手动复制和粘贴（并处理尴尬的格式更改）
• 需要对 Flexbox、CSS 网格和其他前端编程概念有丰富的专业知识，这会耗费时间，尤其是当你的主要职责不是 Web 开发时

简单来说， Webflow CMS 不适合内容营销团队.

明白我们的观点了吗？

虽然对于设计师和网站开发人员来说，无需编码即可快速创建网站非常棒，但对于想要批量发布内容的营销人员来说，这可能会令人沮丧。

由于对员工的心理健康关注不足，组织在留住员工方面面临挑战

大多数公司最终会将数据从其作者、编辑和营销人员偏爱的应用程序（例如 Airtable、Google Docs、Notion 或无头 CMS）汇集到 Webflow 中。

怎么办？你有两个选择： 利用代码链接您的 CMS 通过 这 Webflow API 或利用无代码解决方案 例如 扎皮尔.

让我们指导您完成每个步骤。

解决方案 1：通过 Webflow API 发布

这 Webflow API 可以操作 CMS 项目 - 创建、更新或删除。但是， 编码知识是先决条件.

我们假设您熟悉 Webflow Designer，并且具备以下技术能力： 处理 API。如果没有，请将此问题转交给工程师或继续执行后续部分，使用 Webflow 等无代码平台（如 Zapier）。

如果您还在关注，那我们就开始吧。

以下是您应该掌握的一些基本术语：

关键 Webflow 概念

收藏

A 在 Webflow 中收集数据库镜像.

它充当内容存储库并方便从 Webflow 站点上的集合中引用数据。

例如， 博客文章 Webflow 中的集合封装了博客文章数据，以及一个预设的博客模板，其中包含基本博客所需的字段（例如，纯文本类型的标题、富文本类型的正文、数字类型的阅读时间等）。主题来自 Webflow模板 通常包含博客功能。

Webflow 中的默认博客模板

收藏品

集合项代表博客文章集合中的单个帖子.

每篇文章都引用一个特定的博客文章页面，该页面包含与博客集合架构中定义的相同的数据。

您可以在 Webflow CMS UI 中制作收藏品（尽管你努力避免这样做）或 通过 API 嵌入集合.

以收藏品为代表的博客文章

所以， 如何从后端服务器建立到 Webflow 站点的连接 发起 API 请求？

开始与 WebFlow 站点的连接

先决条件:

1. A Webflow 网站提供博客合集
   1. 如果模板不存在，您可以在 启动 Webflow 模板 汇编
2. A 服务器 喜欢 Node.js 或者 Django
   1. 如果选择 无服务器部署，选择 解决方案，例如 AWS Lambdas 或者 Google 云功能
3. 这 Webflow 软件开发工具包 使用您选择的语言 或相应的库 执行 API 请求（例如 要求 或者 Axios 对于 Node.js)

通过 API 令牌启动 Webflow 站点连接

在修改 Webflow 站点数据之前，必须建立连接。这可以通过 个人 API 密钥.

获取网站 API 密钥的流程:

➡️访问您的 Webflow 仪表板。

➡️ 导航到要连接的站点并点击 三个点 （选项菜单）。

➡️选择“设置”。

访问设置

➡️前往集成，找到 API 访问，然后点击“生成 API 令牌”。

（保持令牌的安全；避免共享或将其提交到公共存储库）。

生成 API 令牌（不要担心，我们已经更改了这个令牌，它不是我们的）

➡️ 将此 API 令牌合并到每个 API 请求的标头中。

这是 标题结构示例:

标头：{'Accept-Version'：'1.0.0'，授权：'Bearer YOUR_API_TOKEN_HERE'，'content-type'：'application / json'}

复制

➡️ 使用 curl 或 邮差 在您的终端上执行查询并验证其功能。

curl --location --request GET 'https://api.webflow.com/sites' --header '授权：持有者 YOUR_API_TOKEN_HERE'

复制

➡️成功执行后，将显示您的 Webflow 站点的完整列表，类似于：

[ { “_id”：“6ee3aee90fa1d92e4f760a0f”， “createdOn”：“2022-09-03T19：45：49.426Z”， “name”：“Letterdrop v2”， “shortName”：“letterdrop-v2”， “lastPublished”：“2022-10-01T00：24：42.955Z”， “previewUrl”：“https://screenshots.webflow.com/sites/6ee3aee90fa1d92e4f760a0f/20221001001825_e2d60b485c0f28cd97cd0b6b0f6bf9af.png”，“时区”：“美国/洛杉矶”， “数据源”： “6ee3aee90fa1d92e4f760a0f”}]

复制

➡️ 你可以选择 将此 API 令牌与 Webflow SDK 结合使用. 使用 JavaScript SDK 时，请确保在初始化 Webflow 对象时提供 API 令牌。

例如：

const Webflow =require("webflow-api"); const webflow = new Webflow({ token: "将您的 API 令牌保存在环境变量中并在此处引用它", });

复制

您现在已从服务器链接到 Webflow 站点。太不可思议了！

通过 API 检索集合字段

现在让我们 在您的博客文章集合中建立一个新的集合项目.

➡️ 启动设计器视角 适用于您的 Webflow 网站。

➡️ 点击“CMS 收藏” 在左侧菜单中。

选择博客文章集合

➡️ 点击“设置”选项 在本系列的右上角。

重复的集合 ID

‎➡️ 你会发现这个系列拥有 集合 ID. 复制它。

我们将在 API 调用中引用此内容。这样，我们就能识别出在哪个 Collection 中生成项目（例如，您的博客文章）。但是，在此之前，我们应该 识别此集合中的字段 以及如何引用它们。

➡️ 让我们 执行 API 调用 在你的 shell 中检索他们的标题。

curl --location --request GET 'https://api.webflow.com/collections/YOUR_BLOG_POSTS_COLLECTION_ID' --header '授权：持有人 YOUR_API_TOKEN_HERE' --data-raw ''

复制

➡️ 此操作应产生 类似这样的回应:

{ “_id”：“580e640c8c9a982ac9b8b778”， “lastUpdated”：“2022-10-23T21：32：39.561Z”， “createdOn”：“2021-11-23T00：43：35.049Z”， “title”：“博客文章”， “slug”：“博客”， “singularName”：“博客文章”， “fields”：[ { “title”：“标题”， “slug”：“名称”， “kind”：“纯文本”， “mandatory”：true， “modifiable”：true， “helpText”：“”， “identification”：“9260ce6725dc623d8f5e6768728d6660”， “validations”：{} }，{ “title”：“URL”， “slug”：“slug”， “kind”：“纯文本”， “mandatory”：true， “可修改”：true，“帮助文本”：“”，“标识”：“6a474648c22ad777613f6429dd510415”，“验证”：{} }，{“title”：“Body”，“slug”：“post-body”，“kind”：“RichText”，“mandatory”：false，“可修改”：true，“帮助文本”：“”，“标识”：“24207669717864dc68511c63fb32c281”，“验证”：{} }，... }

复制

这里， 你可以感知到以下内容:

• 这 博客文章标题 在内部被称为 姓名
• 这 博客文章的标题 在内部被识别为 蛞蝓
• 这 博客文章正文 内部引用为 后文

➡️ 在你的收藏中记下这一点，因为你需要 在形成您的收藏品时使用这些字段标题.

通过 API 构建集合项字段

现在，利用 建立收集项目 API 端点 以及用于在 Node.js 中执行 API 请求的 Request 包，我们将 执行 API 调用来构建 Collection 项目.

➡️ 将您的数据合并到请求正文中，将数据纳入 字段.（您需要 利用字段标题 摘自上一节）。

const request = require(&#039;request&#039;); const options = { method: &#039;POST&#039;, url: &#039;https://api.webflow.com/collections/YOUR_BLOG_POSTS_COLLECTION_ID/items&#039;, headers: { &#039;Accept-Version&#039;: &#039;1.0.0&#039;, Authorization: &#039;Bearer YOUR_API_TOKEN_HERE&#039;, &#039;content-type&#039;: &#039;application/json&#039; }, body: { fields: { name: &#039;通过 API 发布我的就职博客文章&#039;, slug: &#039;my-inaugural-blog-post-via-api&#039;, _archived: false, _draft: false, author: &#039;580e640c8c9a982ac9b8b778&#039;, &#039;post-body&#039;: &#039;<p>以下是博客文章正文的 HTML</p>&#039;, &#039;post-summary&#039;: &#039;我的博客文章摘要&#039; } }, json: true }; request(options, function (error, response, body) { if (error) throw new Error(error); console.log(body); });

复制

➡️ 您现在应该可以在 Webflow 上的收藏中查看您最近创建的博客文章！🎉

观察它是如何表示的，“预计出版。“ （这 表示 您的博客文章仍待发布).

‎通过 API 分发您的 Webflow 网站

最终阶段是传播您的网站，以便您刚刚创建的博客文章可以在您的网站上发布。

您可以使用 发布站点 API 端点.

➡️ 首先，你需要 记录域名 您希望发布到。

➡️随后， 导航至 Webflow Designer.

➡️ 点击“发布” 在右上部分 检索域列表 您可以在哪里发表文章。

我们仅拥有标准 Webflow 域名。未配置任何自定义域名。

➡️你会发现一个 webflow.io‎ 域，如果您配置了自定义域，该域也将可见。您需要 将它们集成到 API 调用的有效负载中:

const 请求 = require('request'); const 选项 = { 方法：'POST'， url：'https://api.webflow.com/sites/YOUR_BLOG_POSTS_COLLECTION_ID/publish'， 标头：{ 'Accept-Version'：'1.0.0'， 授权：'Bearer YOUR_API_TOKEN_HERE'， 'content-type'：'application/json' }， body：{domains：[YOUR_DOMAIN_1， YOUR_DOMAIN_2]}， json：true }; 请求（选项，函数（错误，响应，主体）{if（错误）抛出新的错误（错误）; console.log（主体）; }）;

复制

➡️ 留出一两分钟的时间发布。（发布您的 Webflow 网站所需的时间根据其规模（即您拥有的 CMS 集合项目和页面的数量）而有所不同）。

➡️ 随后，你应该能够 浏览你的实时博客，看看你撰写的博客文章 通过您网站上的实时 API。

恭喜！你成功了！🎉

目前， 您可以修改和删除博客条目 使用 更新集合项端点 和 删除集合项端点。此过程反映了项目的创建。

探索解决方案 2：参与 Zapier Webflow 集成

如果编码不是你的强项， 欢迎来到 sans code 部分！您之所以来到这里，很可能是因为前面的部分看起来像是一堆乱七八糟的文字（我敢打赌工程师们也有同样的感受 😅 ）。

扎皮尔 使您可以将 Webflow 与众多最流行的应用程序链接起来 用于自动执行您的任务。

Airtable 至 Webflow Zap

➡️ 登录您的 Zapier 帐户并创建一个新的工作流程。

➡️点击“创建 Zap“位于左上角。

➡️ 寻找你的源应用程序。（这是您撰写原创博客文章的地方。它可能涉及 Airtable、Google Docs、Notion 等）。

在 Zapier 中建立 Airtable 触发器

我们将利用 空气表 用于此插图。

➡️ 选择 Airtable 作为你的应用后， 选择“新纪录” 作为触发事件。每次您连接的 Airtable Base 中生成新记录时，此 zap 都会起作用。

选择 Airtable 作为源应用程序

➡️ 提供您的 Airtable API 密钥 根据 Zapier 的要求。此密钥可以位于您的 Airtable 帐户页面.

Airtable API 密钥

‎➡️ 随后，在获取你的密钥后， 嵌入到显示框中 在 Zapier 中。

在 Zapier 中输入您的 Airtable API 密钥

建立连接后，您的 Airtable Base 可能以这种方式呈现:

我们认为这是组织内容营销工作的一种拼凑方式，但这就是你的 Airtable 条目的样子

‎➡️ 现在，你可以 安排触发器.

➡️ 选择 Base 中的相关 Base 和表 在仔细检查扳机之前。

‎➡️ 包含一行 在你的 Airtable 中 评估信息是否被传输.

在 Zapier 中建立 Webflow 操作

接下来，通知 Zapier 根据 Airtable 触发器执行哪些操作.

➡️ 选择 Webflow 作为您的应用 在行动部分。

➡️ 选择“创建直播项目”作为事件。（由于 Zapier 中没有专门的发布 Webflow 操作，因此我们选择“Live”而不是“Regular”。因此，我们将同时制作项目并发布）。

Webflow 创建实时项目操作

➡️ ‎将出现一个提示，指导您登录 Webflow 并 指定您想要链接的网站.

Webflow OAuth

➡️ 选择您的 Webflow 收藏，用于博客文章和 对齐 Airtable 中的字段 与您的 Webflow 博客文章中的内容相同。

Airtable 和 Webflow 之间的映射字段可能会变得混乱

➡️ 以确认数据的准确性。