API 및 Zapier를 통한 Webflow CMS에 업로드 가이드

우리는 Letterdrop에서 Webflow를 사용하는 것을 좋아하지만 사전 설치된 CMS는 블로그에 게시하기에 번거로울 수 있습니다.:

• 그만큼 권한 지원, 협업 기능 및 SEO 도구가 없습니다. 외부 애플리케이션을 사용하지 않고도 콘텐츠 생성 및 전략에 대해 팀이 협력하는 것이 어려워집니다.
• Google Docs나 기타 쓰기 플랫폼과 통합되지 않아 수동 복사 및 붙여넣기 사용이 필요하고(어색한 서식 변경 처리도 필요함)
• 특히 웹 개발이 주요 역할이 아닌 경우 Flexbox, CSS 그리드 및 기타 프런트엔드 프로그래밍 개념에 대한 광범위한 전문 지식이 필요하며 시간이 많이 소요됩니다.

간단히 말해서, Webflow CMS는 콘텐츠 마케팅 팀에 적합하지 않습니다..

우리의 요점을 이해하시나요?

디자이너와 웹 개발자가 코딩 없이 빠르게 사이트를 만들 수 있다는 것은 엄청난 이점이지만, 대량으로 콘텐츠를 게시하려는 마케터에게는 실망스러울 수 있습니다.

조직은 직원의 정신 건강에 대한 관심이 부족하여 직원 유지에 어려움을 겪고 있습니다.

대부분의 회사는 결국 작가, 편집자, 마케터가 선호하는 애플리케이션(예: Airtable, Google Docs, Notion 또는 헤드리스 CMS)에서 Webflow로 데이터를 수집하게 됩니다.

어떻게? 두 가지 선택이 있습니다: CMS 연결을 위한 코드 활용 ~을 통해 그만큼 Webflow API 또는 코드 없는 솔루션을 활용하세요 ~와 같은 자피어.

각 단계를 안내해 드리겠습니다.

솔루션 1: Webflow API를 통한 게시

그만큼 Webflow API CMS 항목 조작(생성, 업데이트 또는 삭제)이 가능합니다. 그러나, 코딩 지식은 필수입니다.

귀하께서는 Webflow Designer에 대해 잘 알고 계시고 다음과 같은 기술적 능력을 보유하고 있다고 가정합니다. API를 처리하다그렇지 않은 경우 엔지니어에게 이 문제를 리디렉션하거나 Webflow를 사용하여 Zapier와 같은 무코드 플랫폼을 사용하는 후속 섹션으로 진행하세요.

아직도 따라오셨다면, 시작해 볼까요.

알아두어야 할 기본 용어는 다음과 같습니다.

Webflow 개념의 핵심

컬렉션

ㅏ 컬렉션은 Webflow의 데이터베이스를 미러링합니다..

이는 콘텐츠 저장소 역할을 하며 Webflow 사이트 전반의 컬렉션에서 데이터 참조를 용이하게 해줍니다.

예를 들어, 블로그 게시물 Webflow의 컬렉션은 블로그 게시물 데이터를 캡슐화합니다., 기본 블로그에 필요한 필드(예: 일반 텍스트 유형의 제목, 서식 있는 텍스트 유형의 본문, 숫자 유형의 읽기 시간 등)를 포함하는 사전 설정된 블로그 템플릿과 함께. 다음에서 얻은 테마 Webflow 템플릿 일반적으로 블로그 기능이 포함됩니다.

Webflow의 기본 블로그 템플릿

컬렉션 아이템

컬렉션 항목은 블로그 게시물 컬렉션 내의 개별 게시물을 나타냅니다..

각 게시물은 블로그 컬렉션 스키마에 정의된 것과 동일한 데이터를 포함하는 특정 블로그 게시물 페이지를 참조합니다.

Webflow CMS UI 내에서 컬렉션 항목을 생성할 수 있습니다(매우 부지런히 회피했음에도 불구하고) 또는 API를 통해 컬렉션을 임베드.

컬렉션 항목으로 표현된 블로그 게시물

그래서, 백엔드 서버에서 Webflow 사이트에 연결을 어떻게 설정합니까? API 요청을 시작하려면?

WebFlow 사이트와의 연결 시작

필수 조건:

1. ㅏ 블로그 컬렉션을 제공하는 Webflow 사이트
   1. 템플릿이 없는 경우 다음에서 찾을 수 있습니다. 스타트업 Webflow 템플릿 편집
2. ㅏ 섬기는 사람 좋다 노드.js 또는 장고
   1. 선택하는 경우 서버리스 배포를 선택하세요 다음과 같은 솔루션 AWS 람다 또는 Google 클라우드 기능
3. 그만큼 Webflow SDK 선택한 언어로 또는 해당 라이브러리 API 요청을 수행하려면(예: 요구 또는 악시오스 (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 --location --request GET 'https://api.webflow.com/sites' --header '권한 부여: Bearer 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","time zone": "America/Los_Angeles", "data source": "6ee3aee90fa1d92e4f760a0f" } ]

뒤로 젖히다

➡️ 다음 옵션이 있습니다. 이 API 토큰을 Webflow SDK와 함께 활용하세요JavaScript SDK를 사용하는 경우 Webflow 객체를 초기화할 때 API 토큰을 제공해야 합니다.

예를 들어:

const Webflow =require("webflow-api"); const webflow = new Webflow({ token: "API 토큰을 환경 변수에 보관하고 여기서 참조하세요", });

뒤로 젖히다

이제 서버에서 Webflow 사이트로 연결되었습니다. 놀랍죠!

API를 통한 컬렉션 필드 검색

이제 우리는 블로그 게시물 컬렉션에 새로운 컬렉션 항목을 설정하세요.

➡️ Designer 관점 시작 Webflow 사이트용입니다.

➡️ "CMS 컬렉션"을 누르세요 왼쪽 메뉴에서.

블로그 게시물 컬렉션을 선택하세요

➡️ "설정" 옵션을 탭하세요 이 컬렉션의 오른쪽 상단 모서리에 있습니다.

컬렉션 ID를 복제하세요

‎➡️ 이 컬렉션에는 다음이 포함되어 있음을 알 수 있습니다. 컬렉션 ID. 복제하세요.

우리는 API 호출에서 이것을 참조할 것입니다. 이런 식으로 우리는 어떤 컬렉션에서 항목을 생성할지 인식합니다(예: 블로그 게시물). 그러나 그 전에 우리는 이 컬렉션 내의 필드를 인식합니다. 참조하는 방법.

➡️ 하자 API 호출을 실행하다 셸에서 해당 제목을 검색합니다.

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": "PlainText", "mandatory": true, "modifiable": true, "helpText": "", "identification": "6a474648c22ad777613f6429dd510415", "validations": {} }, { "title": "Body", "slug": "post-body", "kind": "RichText", "mandatory": false, "modifiable": true, "helpText": "", "identification": "24207669717864dc68511c63fb32c281", "validations": {} }, ... }

뒤로 젖히다

여기, 당신은 다음을 인식할 수 있습니다:

• 그만큼 블로그 게시물의 제목 내부적으로는 ~로 알려져 있습니다 이름
• 그만큼 블로그 게시물의 슬러그 내부적으로 다음과 같이 식별됩니다. 강타
• 그만큼 블로그 게시물 본문 내부적으로 참조됩니다 포스트 바디

➡️ 컬렉션에 이것을 기록해두세요. 컬렉션 항목을 구성할 때 이러한 필드 제목을 사용합니다..

API를 통한 컬렉션 항목 필드 구성

이제, 활용 컬렉션 항목 API 엔드포인트 설정 그리고 Node.js에서 API 요청을 실행하기 위한 Request 패키지를 사용할 것입니다. 컬렉션 항목을 빌드하기 위한 API 호출 실행.

➡️ 요청 본문에 데이터를 통합하세요, 데이터를 통합하여 전지. (필요합니다 필드 제목을 활용하세요 (이전 섹션에서)

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;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 도메인만 소유하고 있습니다. 사용자 정의 도메인은 구성되지 않았습니다.

➡️ 당신은 발견할 것이다 웹플로우.io‎ 도메인이며 사용자 정의 도메인을 구성한 경우 해당 도메인도 표시됩니다. API 호출의 페이로드에 이것을 통합하세요:

const 요청 = require('요청'); const 옵션 = { 메서드: 'POST', url: 'https://api.webflow.com/sites/YOUR_BLOG_POSTS_COLLECTION_ID/publish', 헤더: { '수락 버전': '1.0.0', 권한 부여: 'Bearer YOUR_API_TOKEN_HERE', '콘텐츠 유형': 'application/json' }, 본문: {도메인: [YOUR_DOMAIN_1, YOUR_DOMAIN_2]}, json: true }; 요청(옵션, 함수(오류, 응답, 본문) { 오류가 발생하면 새 오류를 발생시킵니다. console.log(본문); });

뒤로 젖히다

➡️ 게시하는 데 1~2분 정도 소요됩니다.. (Webflow 사이트를 게시하는 데 걸리는 기간은 사이트 규모, 즉 CMS 컬렉션 항목 수와 보유한 페이지 수에 따라 다릅니다.)

➡️ 그 후에 당신은 할 수 있어야 합니다 라이브 블로그를 탐색하고 내가 만든 블로그 게시물을 보세요. 귀하의 사이트에서 API를 실시간으로 활용하세요.

축하합니다! 당신은 그것을 달성했습니다! 🎉

현재, 블로그 항목을 수정하고 지울 수 있는 기능이 있습니다. 사용하여 컬렉션 항목 엔드포인트 업데이트 그리고 컬렉션 항목 엔드포인트 제거이 과정은 아이템 생성과 동일합니다.

솔루션 2 탐색: Zapier Webflow 통합을 활용하세요

코딩이 당신의 강점이 아니라면, 코드 없는 섹션에 오신 것을 환영합니다! 아마 이전 세그먼트가 단어의 혼합물처럼 보여서 여기에 도착했을 겁니다(엔지니어들도 똑같은 생각을 할 거라고 확신합니다 😅).

자피어 Webflow를 가장 널리 쓰이는 다양한 앱과 연결할 수 있습니다. 작업을 자동화하는 데 사용됩니다.

에어테이블에서 Webflow Zap으로

➡️ Zapier 계정에 로그인하여 새로운 워크플로를 만드세요.

➡️ "를 클릭하세요Zap 만들기" 왼쪽 상단 모서리에 위치합니다.

➡️ 소스 애플리케이션을 찾아보세요. (여기서 원래 블로그 게시물이 작성됩니다. 여기에는 Airtable, Google Docs, Notion 등이 포함될 수 있습니다.)

Zapier에서 Airtable Trigger 설정

우리는 레버리지를 활용할 것이다 에어테이블 이 그림의 경우.

➡️ 앱으로 Airtable을 선택한 후, "새로운 기록"을 선택하세요 트리거 이벤트로. 이 잽은 귀하가 연결하는 Airtable Base에서 새 레코드가 생성될 때마다 작동합니다.

소스 앱으로 Airtable을 선택하세요

➡️ 제공하세요 에어테이블 API 키 Zapier에서 요구한 대로. 이 키는 귀하의 Airtable 계정 페이지.

에어테이블 API 키

‎➡️ 그 후, 열쇠를 구매한 후, 표시된 상자에 삽입합니다 자피어에서.

Zapier에 Airtable API 키를 입력하세요

연결을 설정하면 Airtable Base는 아마도 이런 방식으로 표현될 것입니다.:

우리는 이것이 콘텐츠 마케팅 활동을 구성하는 해킹된 방법이라고 생각하지만 이것이 Airtable 항목의 모습입니다.

‎➡️ 이제 가능합니다 트리거를 준비하다.

➡️ Base 내에서 관련 Base 및 테이블을 선택하세요 방아쇠를 면밀히 살펴보기 전에.

‎➡️ 행을 포함하다 귀하의 Airtable에서 정보가 전송되는지 평가하다.

Zapier에서 Webflow 액션을 설정하세요

다음으로 Zapier에 알려주세요. Airtable 트리거를 기반으로 수행할 작업.

➡️ 귀하의 애플리케이션으로 Webflow를 선택하세요 액션 부문에서.

➡️ 이벤트로 "라이브 항목 만들기"를 선택하세요. (Zapier에 전용 Publish Webflow 작업이 없기 때문에 "일반" 대신 "실시간"을 선택합니다. 따라서 항목을 제작하고 동시에 게시합니다).

Webflow 라이브 아이템 액션 생성

➡️ ‎Webflow에 로그인하라는 메시지가 나타납니다. 링크하고 싶은 사이트를 지정하세요.

Webflow 오오티

➡️ 블로그 게시물을 위한 Webflow 컬렉션을 선택하세요 Airtable에서 필드 정렬 Webflow 블로그 게시물에 있는 내용과 같습니다.

Airtable과 Webflow 간의 매핑 필드가 복잡해질 수 있습니다.

➡️ 데이터의 정확성을 확인하려면.