透過 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 中的預設部落格模板

收藏品

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

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

您可以在 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 令牌(Don

產生 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

‎➡️ 你會發現這個系列擁有 集合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 網域。未建立自訂網域。

我們只擁有一個標準的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

Airtable 至 Webflow Zap

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

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

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

在 Zapier 建立 Airtable 觸發器

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

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

選擇 Airtable 作為來源應用程式

選擇 Airtable 作為來源應用程式

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

Airtable API 金鑰

Airtable API 金鑰

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

在 Zapier 中輸入您的 Airtable API 金鑰

在 Zapier 中輸入您的 Airtable API 金鑰

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

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

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

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

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

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

在扎皮爾建立 Webflow 行動

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

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

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

Webflow 建立活動項目操作

Webflow 建立活動項目操作

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

Webflow OAuth

Webflow OAuth

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

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

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

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

就這樣結束了!你已經準備好了。 🎉

啟動 zap 後,每當您在 Airtable 中附加記錄時,它都會向 Webflow 新增 CMS 集合專案並即時發布。

雖然這個過程在理論上似乎有效,但在現實中卻提出了許多挑戰。

很愉快,不是嗎?

不是嗎?

Webflow-Zapier 整合中公認的限制

  • 札皮爾 無法消除 一個專案 來自 CMS,利用他們的 Webflow zap;它僅具有建立和更新集合項目的能力
  • 您缺乏在發布之前暫存專案的能力 因為您無法精確控制網站部署
  • Airtable 的使用者介面對於製作大量內容來說非常糟糕

如果您正在尋找一種透過 Zapier 將內容傳播到 Webflow 的簡單方法, 考慮利用獨特的 CMS.

Letterdrop 採用 Webflow 進行出版 

未來會發生什麼事?

選擇一個內容管理系統 能夠發佈到 Webflow — 一個 專注於作家 並且真正沒有代碼.

信滴 推出專為內容行銷量身訂製的無頭 CMS。它可以無縫發佈到您的 Webflow CMS 集合。

使用 Letterdrop 輕鬆發布

使用 Letterdrop 輕鬆發布

Letterdrop 為您提供熟悉的 CMS 體驗,而且功能更加強大

Letterdrop 是發佈到 WebFlow 的綜合工具。它是 促進專案管理、內容日曆安排和分發的內容營運平台.

Letterdrop 提供以下功能:

  • 目前唯一可用的正品 Webflow CMS 集成 — 叮!叮!叮! Letterdrop 會更新您的 Webflow 系列,並在一分鐘內快速發佈到您的 Webflow 網站。它管理每個特定場景,例如自訂欄位和預覽。事實上,我們是公認的 Webflow 官方合作夥伴。
  • 內建SEO優化工具 — 提供自動建議,從結構上增強您的 Google 文章並從競爭頁面獲取見解
  • AI 驅動的寫作輔助工具和 Grammarly Business — 幫助腦力激盪、內容撰寫和文法驗證
  • 預覽 — 選擇性地在 Webflow 臨時網站上發布您的文章,以便在點擊發布按鈕之前預覽其外觀
  • 帶有語法高亮的代碼 — 支援 Markdown,使您能夠指定語法高亮的語言,並將其轉換為與 Webflow 和 棱鏡.js.
  • 動態內容日曆 - 自動更新專案狀態並通知貢獻者必要的操作
  • 一鍵式電子郵件通訊和社群媒體分發 — 透過社群媒體和電子郵件自動傳播您的部落格文章。不再追逐行銷運作。
  • 即時協作和修訂歷史記錄 — 團隊成員可以在專案上進行互動和協作,所有這些都在您的 CMS 中同步

Letterdrop 中的 SEO 優化器

Letterdrop 中的 SEO 優化器

開始使用 Letterdrop 進行出版以簡化 Webflow

我們理解—您需要所有可以獲得的支援。然而, 深入研究顯然不適合您需求的 CMS 會導致挫折感.

Webflow擅長網站建置。儘管如此,對於部落格發布來說, Webflow 的 CMS 需要工程工作來部署 API 使用 Webflow 開發您的個人化 CMS 工具。這是相當艱鉅的。

當然, 足智多謀的行銷人員可以透過 Zapier 整合解決方案。儘管它整合了一系列無程式碼實用程序,但它仍然表現為 「管道膠帶」修復 為了實現您的目標。 Webhook 請求的數量是有上限的,超過此限制會導致 Zap 無法啟動。 就連札皮爾也承認這一點。

哦親愛的!

以其 SEO 工具、抄襲檢查器、內容日曆、角色和權限以及一鍵發布,Letterdrop 簡化了 Webflow。它實現了 Zapier 能做到的一切… 以上 ——減去那種「弗蘭肯盒子膠帶,引擎著火,機翼脫落,我們正在墜入山中」的焦慮感。

作者

  • 普拉多拉·瑪麗亞

    Maria 擁有超過 11 年的數位行銷經驗,曾在內部和代理商工作。這種多元化的背景使她的寫作充滿了豐富的實踐見解。她擅長撰寫適合初學者的文章,主題涉及關鍵字研究、頁面 SEO 和內容創建等。

    查看所有帖子
點選