透過 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。如果沒有，請將其重定向給工程師，或繼續閱讀下一節，使用 Zapier 和 Webflow 等無程式碼平台。

如果您仍在關注，那麼我們就開始吧。

以下是您應該掌握的一些基本術語：

Webflow 關鍵概念

收藏

A 集合鏡像 Webflow 中的資料庫.

它充當內容儲存庫，並有助於從 Webflow 網站上的集合中引用資料。

例如，一個 部落格文章 Webflow中的集合封裝了部落格文章數據，以及包含基本部落格必需欄位的預設部落格範本（例如，純文字類型的標題、富文本類型的正文、數字類型的閱讀時間等）。主題獲得自 Webflow模板 通常包括部落格功能。

Webflow 中的預設部落格模板

收藏品

集合項目代表部落格文章集合中的各個帖子.

每篇文章都引用一個特定的部落格文章頁面，其中包含部落格集合架構中定義的相同資料。

您可以在 Webflow CMS UI 中產生收藏品（儘管如此努力迴避它）或 透過 API 嵌入集合.

由集合項目代表的部落格文章

所以， 如何從後端伺服器建立到 Webflow 站點的連接 發起API請求？

開始與 WebFlow 網站的連接

先決條件:

1. A Webflow 網站以部落格集為特色
   1. 如果缺少模板，您可以在 啟動 Webflow 模板 彙編
2. A 伺服器 喜歡 Node.js 或者 薑戈
   1. 如果選擇 無伺服器部署，選擇 解決方案如 AWS Lambda 函數 或者 Google雲端功能
3. 這 Webflow SDK 以您選擇的語言 或相應的庫 執行 API 請求（例如 要求 或者 阿克西奧斯 對於 Node.js）

透過 API 令牌啟動 Webflow 站點連接

在修改 Webflow 站點資料之前，必須建立連線。這可以透過 個人API金鑰.

取得網站 API 金鑰的過程:

➡️ 訪問您的 Webflow 儀表板。

➡️ 導航至要連接的站點，然後按一下 三個點 （選項選單）。

➡️選擇「設定」。

訪問設定

➡️ 前往集成，找到 API 訪問，然後點擊「產生 API 令牌」。

（確保令牌安全；避免共享或將其提交到公共儲存庫）。

產生 API 令牌（別擔心。我們已經更改了此令牌。它不是我們的）

➡️ 將此 API 令牌合併到每個 API 請求的標頭中。

這是 範例標頭結構:

headers: { '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-12" "2022-10-01T00:24:42.955Z", "previewUrl": "https://screenshots.webflow.com/sites/6ee3aee90fa1d92e4f760a0f/20221001001825_e4f區" ：“美國/洛杉磯”，“資料來源": "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 呼叫中引用這一點。這樣，我們就可以識別在哪個集合中產生項目（例如，您的部落格文章）。不過，在此之前，我們應該 識別此集合中的字段 以及如何引用它們。

➡️讓我們 執行 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." ", "slug": "博客", "singularName": "博客文章", "fields": [ { "title": "標題", "slug": "姓名", "kind": "純文字", "強制”：true，“可修改”：true，“helpText”：“”，“標識”：“9260ce6725dc623d8f5e6768728d6660”，“驗證”：{} }，{“title”：“URL”，“slug”：“ slug” ，“種類”：“純文本”，“強制”：true，“可修改”：true，“helpText”：“”，“標識”：“6a474648c22ad777613f6429dd510415”，“驗證”：{} }，{“標題」：「 Body", "slug": "post-body", "kind": "RichText", "mandatory": false, "可修改": true, "helpText": "", "identification": " 24207669717864dc68511c63fb32c281", "驗證「：{} }，... }

複製

這裡， 你可以感知到以下內容:

• 這 部落格文章的標題 內部稱為 姓名
• 這 部落格文章的標題 在內部被識別為 蛞蝓
• 這 部落格文章的正文 內部引用為 後身體

➡️ 記下這一點以供您收藏，因為您將需要 在形成您的收藏項目時使用這些欄位標題.

透過API建構集合項字段

現在，利用 建立集合項API端點 以及在 Node.js 中執行 API 請求的 Request 包，我們將 執行 API 呼叫來建構集合項.

➡️ 將您的資料合併到請求正文中，將數據納入 領域。 （您將需要 利用欄位標題 來自上一節）。

const request = require(&#039;請求&#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;, 授權: &#039;Bearer YOUR_API_TOKEN_HER &#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:假，_draft：假，作者：&#039;580e640c8c9a982ac9b8b778&#039;，&#039;post-body&#039;：&#039;<p>這是您的部落格文章正文的 HTML</p>&#039;, &#039;post-summary&#039;: &#039;我的部落格文章摘要&#039; } }, json: 真 };請求（選項，函數（錯誤，回應，正文）{ if（錯誤）拋出新錯誤（錯誤）; console.log（正文）; }）;

複製

➡️ 您現在應該能夠在 Webflow 上的收藏中查看您最近創建的部落格文章！ 🎉

觀察它是如何指示的，“預定出版。 表示 您的部落格文章仍在等待發布).

‎透過 API 分發您的 Webflow 網站

最終階段是傳播您的網站，以便您剛建立的部落格文章條目出現在您的網站上。

您可以透過以下方式實現這一目標 發布網站 API 端點.

➡️最初，你需要 記錄域名 您希望發佈到。

➡️隨後， 導航至 Webflow Designer.

➡️ 點擊“發布” 在右上角部分 檢索網域列表 您可以在哪裡發布。

我們只擁有一個標準的Webflow網域。未配置自訂域。

➡️你會發現一個 網路流io‎ 域，如果您配置了自訂域，該域也將可見。您將需要 將它們整合到 API 呼叫的有效負載中:

const request = require('請求'); const options = { method: 'POST', url: 'https://api.webflow.com/sites/YOUR_BLOG_POSTS_COLLECTION_ID/publish', headers: { '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 集成

如果編碼不是你的強項， 歡迎來到無程式碼部分！您很可能會來到這裡，因為前一段看起來像是一堆文字（我敢打賭工程師也有同樣的感覺😅）。

札皮爾 使您能夠將 Webflow 與眾多最受歡迎的應用程式鏈接 用於自動化您的任務。

Airtable 至 Webflow Zap

➡️ 登入您的 Zapier 帳戶並建立新的工作流程。

➡️點選“創建 Zap」位於左上角。

➡️ 尋找您的來源應用程式。 （這是您原始部落格文章的製作位置。它可能涉及 Airtable、Google Docs、Notion 等）。

在 Zapier 建立 Airtable 觸發器

我們將利用 空中桌 對於這個插圖。

➡️ 選擇 Airtable 作為您的應用程式後， 選擇“新記錄” 作為觸發事件。每次在您連接的 Airtable Base 中產生新記錄時，此 zap 都會起作用。

選擇 Airtable 作為來源應用程式

➡️ 提供您的 Airtable API 金鑰 按照扎皮爾的要求。此密鑰可以位於您的 Airtable帳號頁面.

Airtable API 金鑰

‎➡️ 隨後，在獲取您的鑰匙後， 將其嵌入到顯示的框中 在札皮爾。

在 Zapier 中輸入您的 Airtable API 金鑰

‎建立連線後，您的 Airtable Base 很可能以這種方式呈現:

我們認為這是組織內容行銷工作的一種拼湊方式，但這就是您的 Airtable 條目的外觀

‎➡️ 現在，您可以 安排觸發器.

➡️ 選擇相關的基地和基地內的桌子 在仔細檢查觸發器之前。

‎➡️ 包括一行 在您的 Airtable 中和 評估資訊是否被傳輸.

在扎皮爾建立 Webflow 行動

接下來，讓札皮爾知道 根據 Airtable 觸發器執行哪些操作.

➡️ 選擇 Webflow 作為您的應用 在行動部分。

➡️ 選擇“建立即時專案”作為事件。 （由於 Zapier 中沒有專門的發布 Webflow 操作，我們選擇「即時」而不是「常規」。因此，我們將製作該專案並同時發布）。

Webflow 建立活動項目操作

➡️ ‎將會出現提示，引導您登入 Webflow 並 指定您想要連結的網站.

Webflow OAuth

➡️ 選擇您的 Webflow 收藏來發表部落格文章，然後 對齊 Airtable 中的字段 與您的 Webflow 部落格文章中的內容相同。

Airtable 和 Webflow 之間的對應欄位可能會變得混亂

➡️ 以確認數據的準確性。