nuxt3集成webflow

1. 在 Webflow 中设置 CMS 并导出数据

Webflow 提供了强大的 CMS（内容管理系统），你可以通过 Webflow 的 API 来获取这些数据，并在 Nuxt 3 项目中显示。首先，你需要在 Webflow 中创建一个项目，并设置 CMS 集合。

1. 创建 Webflow 项目：首先在 Webflow 中设计并创建网站，使用 Webflow 的 CMS 功能管理动态内容（比如博客文章、产品或作品集等）。

2. 启用 Webflow API 访问：

   • 进入你的 Webflow 项目仪表盘。
   • 在项目设置的 Integrations（集成）标签页中，你可以生成一个 API token。
   • 保存这个 API token，之后将用于通过 Webflow API 访问 CMS 数据。

3. 使用 Webflow CMS 集合：

   • 在 Webflow 中创建你需要在 Nuxt 中展示的 CMS 集合（例如：博客文章、作品集等）。
   • 每个集合都有一个 API 端点，你可以通过这个端点拉取数据。

2. 从 Webflow API 获取数据

你可以使用 Webflow 提供的 API 来获取你需要的数据。下面是一个简单的示例，说明如何从 Webflow API 中获取数据。

1. 安装 axios 库，它是一个流行的 HTTP 请求库，用来与 Webflow API 交互：

   bash复制npm install axios
   

2. 创建 API 服务，在你的 Nuxt 项目中封装一个获取 Webflow 数据的函数：

   在 ~/services/webflow.js（或者 ~/composables/webflow.js）中创建以下代码：

   js复制import axios from 'axios';
   
   export const useWebflowData = () => {
     const fetchWebflowData = async () => {
       const token = 'YOUR_WEBFLOW_API_TOKEN';  // 你的 Webflow API token
       const collectionId = 'YOUR_COLLECTION_ID';  // 你需要拉取数据的集合 ID，例如 Blog Posts
   
       const response = await axios.get(`https://api.webflow.com/collections/${collectionId}/items`, {
         headers: {
           Authorization: `Bearer ${token}`,
           'accept-version': '1.0.0',
         }
       });
   
       return response.data.items;  // 返回 Webflow CMS 集合中的所有项目
     };
   
     return {
       fetchWebflowData
     };
   };
   

3. 在 Nuxt 3 中显示 Webflow 数据

你可以在 Nuxt 3 的页面或组件中拉取并显示这些数据。

1. 在 pages/index.vue 页面中使用 useWebflowData 函数：

   vue复制<template>
     <div>
       <h1>来自 Webflow 的博客文章</h1>
       <div v-if="posts && posts.length">
         <ul>
           <li v-for="post in posts" :key="post._id">
             <h3>{{ post.name }}</h3>
             <p>{{ post.slug }}</p>
           </li>
         </ul>
       </div>
       <div v-else>
         <p>加载中...</p>
       </div>
     </div>
   </template>
   
   <script setup>
   import { ref, onMounted } from 'vue';
   import { useWebflowData } from '~/services/webflow';
   
   const posts = ref([]);
   const { fetchWebflowData } = useWebflowData();
   
   onMounted(async () => {
     posts.value = await fetchWebflowData();
   });
   </script>
   

上述代码在页面加载时会从 Webflow 的 CMS 中获取数据，并显示博客文章的名称和链接。

4. 使用 Webflow Webhooks 来动态更新内容

如果你希望在 Webflow 中有新内容发布时，Nuxt 应用能够实时更新，可以使用 Webflow 的 Webhook 功能。

1. 在 Webflow 项目设置中，进入 Webhooks 标签页，设置一个 Webhook 监听你需要的事件（比如 "Item Published" 或 "Item Updated"）。

2. 当 Webflow 中的内容发生变化时，Webhook 会通知你的应用。你可以使用 WebSockets 或轮询方式，在 Nuxt 应用中实时获取并刷新数据。