LogoLogo
資源社群課程服務About
  • Welcome!
  • Webflow 101
    • 1 HTML 和 CSS 簡介
      • 掌握 Webflow 的關鍵概念: 網站如何構成 - HTML
      • 掌握 Webflow 的關鍵概念: 網站如何構成 - CSS
      • 掌握 Webflow 的關鍵概念: 網站如何構成 - Javascript
    • 2 Box 盒子模組介紹
    • 3 Designer 介面總覽
      • Webflow 中的樣式設定
      • States 狀態
      • Display settings 顯示設置
      • Position 位置
      • Size 尺寸
      • Background 背景
      • Effects 效果
      • Transitions 過渡
    • 4 元素的類型
      • 布局類型 Section
      • 布局類型 Div Block
      • 布局類型 Grid
      • 基本類型 Link Block
      • 基本類型 List
      • 基本類型 Button
      • 文字類型
      • 媒體類型 Image
      • 媒體類型 Video
      • 表單 Form
      • 組件類型
      • 網站搜索
      • lottie Animation
    • 5 元素的層級
    • 6 CMS
      • Webflow CMS介绍
      • CMS集合
      • 導入集合項目
      • 集合列表
      • 集合頁面
      • 過濾收集列表
      • 有條件的可見性
      • CMS編輯器介紹
    • 7 動畫
      • 嵌入After Effects和Lottie動畫
      • 網頁加載動畫
      • 3D介绍
      • 創建懸停(鼠標移動)時旋轉的動畫
      • 在滾動中顯示和隱藏導航欄
      • 在滾動中顯示元素
      • 建立滾動的進度指示器
      • 懸停時顯示元素
      • 點擊時顯示和隱藏元素
    • 8 項目設定
      • 在Made in Webflow上展示您的網站
      • 複製、轉移或刪除網站
      • 發布Webflow項目
      • 發布您的Webflow網站
      • 保存和恢復備份
      • 分享您的項目並邀請合作者
      • 分享您的網站並邀請合作者
      • 網頁圖標和觸摸圖標
      • Webflow品牌建設
      • 編輯品牌
      • 自定義代碼嵌入
      • 上傳自定義字體
      • 用密碼保護網站或網頁
    • 9 托管和代碼輸出
      • 網域 = 代表你的品牌
      • Webflow 網站計劃
      • 管理網站計劃
      • 透過客戶計費將托管費轉給客戶
      • 連接自定義域名
      • 設置一個默認的域名
      • 透過Webflow購買自定義域名
      • SSL托管
      • 排除網站性能問題的故障
    • 10 SEO
      • 付費搜索與自然搜索簡介
      • Google網站驗證
      • 設置Google Analytics
      • 設置301重定向以保持SEO排名
    • 11. DevLink
      • DevLink 使用指南
    • 模板
      • Webflow模板概述
      • 兌換購買的ThemeForest模板
      • 兌換購買的創意市場模板
    • 帳戶和計劃
      • 管理您的Webflow帳戶
      • 團隊帳戶
      • 帳戶計費
      • 團隊計費概述
      • 項目計費
    • 工作空間計畫
      • 工作區角色和權限
      • 將您的帳戶過渡到工作空間
      • 管理您的工作空間
    • 更新
      • 2024
        • Webflow 表單功能增強 (10-15-2024)
        • 擴充功能: .well-known 檔案支援 (12-16-2024)
        • CMS 草稿和發布工作流程的改進 (12-12-2024)
        • 優化企業數據集成 (12-12-2024)
        • 儀表板排序增強功能 (12-12-2024)
        • 定價和產品更新 (12-11-2024)
        • 棄用邏輯和用戶帳戶 (12-11-2024)
        • 在 CMS 上下文中建立 Component (12-09-2024)
        • 使用Webflow的AI助理快速產生或修改任何文字內容 (12-04-2024)
        • 文字裝飾風格 (11-26-2024)
        • 設計審核增強功能 (11-21-2024)
        • 新變數類型:數字和百分比 (11-20-2024)
        • Component style variants 現已可用 (11-19-2024)
        • 新的產品內導航 (11-18-2024)
        • 斜線指令 (11-18-2024)
        • 直接在畫布上顯示和編輯空的 CMS 綁定元素 (11-12-2024)
        • 通過支持組件插槽使頁面構建更加靈活 (11-12-2024)
        • Webflow Analyze 現已推出 (10-31-2024)
        • Webflow Analyze 現正推出 (10-28-2024)
        • Dashboard 列表視圖 (10-24-2024)
        • 增強功能以改善您的表單體驗 (10-15-2024)
        • CMS API 現在支援批量操作 (10-15-2024)
        • 為所有客戶解鎖本地化樣式,還有更多 (10-15-2024)
        • 介紹 Webflow Analyze (10-15-2024)
        • 使用 Webflow Optimize 最大化轉換 (10-15-2024)
        • 為設計審批帶來更多可見性和微調 (10-15-2024)
        • 拖放式頁面建立使行銷人員能夠更快地啟動行銷活動 (10-15-2024)
        • 使用 Webflow AI Assistant 加快建置速度 (10-15-2024)
        • 推出新的幫助中心以增強支持 (10-15-2024)
        • 簡化 Figma 到 Webflow 同步 (10-03-2024)
        • Webflow 支援 Rive
        • 調整外觀設定
        • 透過機器翻譯支援使編輯模式更加強大
        • 陰影和變數支援的 X 和 Y 偏移
        • 將組件屬性進行分組
        • 自訂暫存域支持
        • 新頁面作為分支並編輯分支中的元件
        • 透過 API 存取您的站點登入紀錄
        • 自訂 CSS 屬性和值
        • Figma 到 Webflow 應用程式
        • 新樣式面板佈局部分和控件
        • 在您的網站上顯示程式碼,無需編寫程式碼和更新有序列表
        • 改進的 API 令牌管理
        • 無需編寫程式碼即可將自訂圖像新增至區域設定切換器
        • 本地化頁面分支
        • 控制您的隊友、訪客和客戶可以訪問哪些站點
        • 使用持久 CMS ID 等自信地恢復網站備份
        • 從“應用程式”面板尋找並安裝 Webflow 應用程式
        • 查看合併摘要以安全地合併頁面分支
        • 將類別作為自訂屬性新增至元素
        • 可用於企業在地化的機器翻譯術語表
        • Lightbox的單一多圖像字段綁定
        • 支援 Figma 中的 Rem 和 Em 單位到 Webflow 同步
        • Webflow 中的 Apple 知名文件
        • 固定標尺和十字準線
        • 額外的尺寸和佈局控制
        • CMS 資源的 WebP 轉換工具
        • 增加了自訂程式碼字元限制
        • 擴充元素轉換
        • 為 Webflow 上的開發人員擴充了 CMS API 功能
        • !Webflow 自訂屬性中的重要標誌
        • 使用頁面模板更快建立品牌一致的頁面,並更新頁面建立模式
        • Webflow Enterprise 上的自動化 JIT 配置和 SCIM 取消配置
        • 用於帳戶復原的輔助電子郵件
        • CMS CSV 匯入/匯出現在支援 HTML 程式碼嵌入
        • 畫布上的 CMS 編輯功能現已推出
        • 學習助手
        • 快速複製組件
        • 使用情況儀表板
        • 站點訪問預設設定
        • 透過 CSV 支援簡化您的 301 重定向管理
        • Webflow 應用程式的最新更新
      • 2023
        • 引入程式碼區塊元素
        • 單一 CMS 專案的批次欄位翻譯
        • Rich Text 中的 Markdown 支持
        • 重新排序您的元件屬性
        • 防止與指標事件發生不必要的點擊和觸控交互
        • 引入自訂元素
        • 在地化現已向所有客戶推出
        • 透過分支暫存更快、更安全地在分支上測試設計
        • Webflow 服務條款的更新
        • Rich Text 編輯器的改善
        • Webflow 多語系在地化功能現可供企業使用
        • 將 Spline 3D 場景新增至您的站點
        • 控制設計元素的縱橫比
        • 為 Webflow 引入新的外觀和感覺
        • 用變數編寫您的設計系統
        • 透過對各個頁面進行 noindex 控制來提高您的 SEO
        • 導航器面板現在支援右鍵單擊
        • 透過組件可用性讓你更快的建構專案
        • Webflow API: 元件、變數和多語系
        • Webflow 留言系統
        • 透過新的切換簡化了發布權限
        • 內容編輯者的站點登入紀錄
        • 使用新的 Quick Stack 功能加快構建頁面的速度
        • 解鎖對頁面分支上的自訂動畫的支持
        • 透過增加頁面來解鎖更大的規模
        • 靜態頁面的限制從 100 頁提升至 150 頁
        • 透過改進的發布工作流程保護您的網站
        • 更好地了解 Webflow 發佈時的進度
        • 在 robots.txt 文件中自定義 sitemap.xml 地址
        • 展示客戶工作區的項目
        • 元件現在可以在集合清單中使用
        • 大型站點的編輯器性能改進
        • Library 測試版的更新
        • Webflow 的 Google Analytics 整合更新
        • 為頁面分支帶來更多控制和可見性
        • 設置默認工作區以將儀表板打開到正確的位置
        • 可變字體更新
        • 選擇您的 Workspace 配置文件 URL
        • 在自定義屬性中使用 CMS 數據
        • 更新我們的開發者平台
        • dotLottie 動畫文件支持
        • 使用過濾器在站點活動日誌中更快地找到您要查找的內容
        • 在 div 或鏈接塊中包裝元素的快捷方式
        • 支持新的 CSS 動態視口單元
        • 不受銷售限制地擴展您的業務
        • webflow.io 網站上分析 cookie 行為的變化
        • 引入文本筆劃樣式
        • 組件的可用性更新
        • SSO 功能更新 (Webflow 企業版用戶)
        • 在文件夾中嵌套集合頁面以進行更多 URL 控制
        • 引入用於移動元素的新鍵盤快捷鍵
        • 用於展開元素和包裹 H Flex 或 V Flex 元素的新快捷方式
        • DevLink 公開測試版
        • Figma 外掛程式改進了響應式設計支援
        • Designer 中大型網站的性能改進
        • 複製或刪除最後一個類別的捷徑
        • 存檔工作區以將其從儀表板中刪除
        • 現在可以在設計器中使用 Webflow 應用程式的強大功能
        • Webflow 中管理自訂網域的改進
        • 透過新的內容編輯和評論者角色不斷發展團隊合作
        • 將站點計劃從一個站點傳輸到另一個站點
        • 現在支援文字換行和斷字
        • 改進了 Figma 插件的複製貼上的功能
        • 在樣式面板中快速搜索色板
        • 透過設計器中的評論集中回饋
        • Private Staging (私人測試站)
        • Figma 到 Webflow 插件的 Combo Class 支援
        • 在資料夾中歸類 CMS 頁面,以實現更多的URL控制
      • 2022
        • 更新了託管配置以支持更安全的 TLS 1.3
        • Webflow 定價和計劃的更新
        • 新創作者頁面
        • Webflow Marketplace
        • 開發者資源
        • 會員資格測試版
        • “Symbols”進化為“Components”
        • 增加電子商務網站的商品規模
        • 頁面分支
        • 以訪客身份免費加入客戶的工作區
        • 更新了 Hosting 選項以支持更安全的 SSL TLS 1.3 協定
        • 一次發布和取消發布多個 CMS 項目
        • Webflow 新功能 Logic (Beta)
        • Webflow 會員功能 (Beta)
        • 直接預覽不同文字大小的佈局
        • 檢測網站元素中的重複 ID
        • 刪除 CMS 內容而不發布您的整個網站
        • Made in Webflow 展示區
        • 在 Designer 中準確查看您的隊友正在處理的頁面
        • 簡化團隊合作:工作區就在這裡
  • MasterClass (大師班)
    • Intro
    • Webflow Pricing
    • Webflow 服務條款
  • 資源
    • 官方 Youtube 課程
    • Webflow 學習資源
    • Webflow 官方資源
Powered by GitBook
On this page
  • 如何將外部數據上傳到Webflow中
  • 如何確定可以導入的項目數量
  • 如何上傳CSV文件
  • 如何指定標題行
  • 如何選擇要導入的項目
  • 如何配置字段和預覽項目
  • 如何配置字段
  • 不要映射字段
  • 創建新字段
  • 映射到現有字段
  • 如何預覽項目
  • 有要求/驗證的字段
  • 如何導入映射的數據
  • 如何建造CSV文件
  • 如何使用支持的數據類型

Was this helpful?

Edit on GitHub
Export as PDF
  1. Webflow 101
  2. 6 CMS

導入集合項目

使用CSV文件,可以一次性導入成千上萬個項目,或者只導入少數的項目到Webflow網站。

創建集合時,您可以手動添加集合項目,或者用CSV文件將它們直接導入到現有的集合。這允許從外部來源直接導入成百上千的數據項目到CMS中,並在導入這些內容時將CSV內容映射到參考字段。為了使大量數據的更新更容易一些,也可以透過CSV導入有選擇地更新現有的CMS項目。

本文會提到:

  1. 如何將外部數據上傳到Webflow中

  2. 如何配置字段和預覽項目

  3. 如何導入映射的數據

  4. 如何建造CSV文件

  5. 如何使用支持的數據類型

如何將外部數據上傳到Webflow中

讓我們來了解一下如何將外部數據上傳到Webflow集合。在這個過程中,我們將涵蓋以下步驟。

  1. 如何確定您可以導入的項目數量

  2. 如何上傳CSV文件

  3. 如何指定標題行

  4. 如何選擇要導入的項目

如何確定可以導入的項目數量

使用免費的入門網站計劃,最多可以發布50個項目。若要導入超過50個項目,您需要為網站添加CMS或商業網站計劃,這兩個計劃分別允許多達2000個和10000個收藏項目。

如何上傳CSV文件

要將CSV文件上傳到Webflow中的指定集合。

  1. 打開CMS面板

  2. 選擇您的數據集

  3. 點擊導入

  4. 拖入您的CSV文件(或點擊瀏覽您的電腦)。

注意 CSV文件的最大文件大小為4MB。

如何指定標題行

在選擇CSV文件後,您會被提示要指定一個標題行。

通常,CSV的標題行包含定義每一列所含內容類型的列標籤。 上傳CSV文件後,您會看到CSV的預覽,並能夠確認第一行是否為標題。選擇"是"或"我不確定"將第一行標記為標題,並將其排除在進口之外。選擇"否"則將該行納入導入範圍。

無論在這階段做出什麽選擇,在下一步可以到第一項,勾選或取消勾選 "標題行"的選項。

這個標題行的值將被設置為這個字段配置步驟的字段標籤。

如何選擇要導入的項目

選擇標題行之後,您會收到確認CSV文件已經完成處理。這個模式也會告訴您新上傳的CSV項目是否與收藏中的任何當前項目相匹配或不匹配。

注意 如果您沒有選擇標題行,或者您不確定第一行是否為標題行,妳將直接進入字段配置,而沒有選擇更新匹配項目。從本質上講,Webflow默認為您創建新的項目,因為沒有標題行,就不可能映射到ID列或字段。 如果您有匹配的項目,您可以選擇:

  1. 更新匹配的項目:將收藏中的現有項目與CSV上傳的項目進行匹配

  2. 將所有項目作為新項目導入:將CSV上傳中的匹配項目作為新項目加入收藏中。

選擇更新匹配的項目是一個很好的方法,可以快速對收藏中的現有項目進行修改。例如在CSV文件中對選定項目的數據進行了更新,只需上傳更新後的項目,就可以快速地用新數據覆蓋CMS項目中的舊內容。

注意 常規的CMS項目是根據"項目ID"字段來匹配的,該字段包含在從集合中導出的CSV文件中。(通過CSV導入更新項目不適用於電子商務項目。)也請記住,如果從備份中執行網站恢復,所有CMS集合和項目ID將被刷新。閱讀更多關於保存和恢復備份的訊息。

選擇更新匹配的項目或將所有項目作為新項目導入後,就可以開始配置CMS字段並將CSV數據映射到這些字段。

如何配置字段和預覽項目

在上傳CSV文件後,它的列將作為字段可用,您可以在導入的項目下的字段配置窗格中進行配置。如果指定,列標題將作為字段標籤出現。

注意 如果CSV標題名稱與現有的字段名稱相匹配,它們將自動相互映射,並為您節省配置步驟。

輸入字段的值將從選定的行中提取。每行將轉化為一個集合項目。您可以在右邊的項目預覽窗格中預覽不同的項目。

如何配置字段

在這一步您將配置字段,選擇哪些列需要映射,還可以為每一列創建新的字段。

不要映射字段

如果CSV裡有不想導入的列,從下拉選單中選擇不要導入。

創建新字段

如果一個字段在集合中不存在,您可以創建一個,並將其映射到一列。

  1. 選擇創建新字段

  2. 從出現的下拉菜單中為這個新字段選擇字段類型。不支持列中內容的字段類型將不可用。

  3. 添加新的字段標簽或保留建議的標籤。

  4. 可選:添加幫助文本

您將有其他選項為不同的字段類型進行設置,新的選項字段將由該列的所有唯一值填充。對於一個新的開關字段,您可以指定哪個值映射到 "不"。

映射到現有字段

您可以將每一列映射到集合中的一個現有字段,列標籤旁邊的綠色指示燈表示該列已經被映射。

  1. 選擇映射到現有字段

  2. 從出現的下拉選單中選擇想把這個列映射到的字段。不支持某一列內容的字段將不可用,並且顯示灰色。

對於開關字段,您可以指定哪個值映射到 "不"。或者,您可以用刷子把一個值映射到 "是"。

注意 不能把一個列映射到已經在使用的現有字段。若需要將一個列映射到一個特定的字段類型,請創建一個新字段。

如何預覽項目

在右邊的項目預覽窗格中預覽將被導入的每個項目的字段和值。 使用預覽窗格頂部的左右箭頭按鈕在項目之間切換。 點擊頂部欄中的顯示項目下拉選單,可以看到所有將被導入的項目的列表。在下拉式項目顯示選單打開的情況下,點擊任何項目的名稱來跳轉到其預覽。在搜索欄中鍵入文字來搜索特定的項目。

將鼠標懸停在左側面板中映射的或創建的字段上的任何地方,將突出顯示預覽項目中的相應字段。預覽項目隨著字段的配置而實時更新。

如果您需要編輯某個項目的字段的值,可以在配置字段之前進行,或者在下拉選單中選擇不要導入。

您也可以選擇跳過導入特定項目到收藏中:

  1. 在預覽窗格中找到不想導入的項目(例如使用箭頭、下拉選單或搜索欄)。

  2. 打開"跳過導入"切換鍵

跳過的項目會在預覽窗格的頂部和顯示項目的下拉選單中以 "跳過導入"的圖標顯示。

有要求/驗證的字段

如果您的CSV列中的單元格被映射到一個必需的參考字段,而它是空的或不包含任何存在於該參考集合中的值,則您會收到一個警告說項目不存在。作為一個必填字段,該行的項目將被導入為草稿,而參考字段將被留空。

如果映射的參考字段不是必需的,並且該列中的單元格是空的,或者不包含任何存在於該參考集的值,那麽一旦導入,該行的項目將被設置為暫定發布,並且參考字段將被留空。

如何導入映射的數據

在您完全配置好CMS字段和CSV數據後,點擊右上方的導入按鈕,將數據添加到收藏中。

等待,直到所有項目都被導入。

如果部分或全部項目沒有被導入到收藏中,您會看到一個沒有被導入的項目列表,導入失敗的原因,以及一個可以下載詳細錯誤報告摘要的連結。

注意 您的網站將創建一個導入前的版本,您可以在網站設置的備份選項卡中恢復,以防導入時出現任何問題。

如何建造CSV文件

一般來說,從其他內容管理系統(如WordPress)導出的CSV文件的結構會與Webflow兼容。

但您可能想創建自己的CSV,並將這些數據導入一個集合。例如,您可以使用Google Sheets、MS Excel或Airtable來創建一個電子表格,列代表字段,行代表項目及其值。電子表格準備好之後,就可以把它保存為CSV文件。

注意 在Excel中保存CSV文件時,一定要選擇CSV類型 "逗號分隔值"。其他CSV擴展名在上傳到Webflow時可能無法正確呈現。為了確保只有一列數據的CSV文件能夠正確導入,請在標題列標籤(如:姓名)後直接添加一個逗號。

如何使用支持的數據類型

當您上傳CSV文件時,Webflow CMS通常會很好地理解您的內容。但是,有些格式,如圖片、日期、數字和顏色的格式,可能無法識別。

關於格式化的一個很好的說明是,導出的Webflow CMS內容將被正確地格式化,以便導入。因此,使用導出的CSV文件將CMS內容從一個Webflow網站移到另一個網站上就可以了。

為了確保您的數據格式正確,並且可以映射到正確的字段類型,在創建您自己的數據庫電子表格時,請遵循以下準則。

  • 名稱字段 - 任何少於256個字符的純文本字段都可以映射到這個字段上

  • Slug字段 - 任何少於256個字符的純文本字段都可以被映射到這個字段上 注意 如果沒有將CSV列映射到默認的名稱和lug字段,CMS將自動生成這些字段。

  • 純文本字段 - 任何純文本值都可以映射到這個字段。

  • 副文本字段 - 任何數值都可以映射到這個字段。要導入副文本,這個字段的值必須是HTML代碼。

    注意 在導入過程中,代碼會被 "清理",以刪除副文本字段不支持的元素、類和屬性,所以記得在導入後檢查所有的副文本內容。

  • 圖片字段 - 圖片應該作為直接的URL(以圖片文件擴展名結尾的鏈接)添加到CSV中。只有支持的圖像文件類型才會被導入到收藏中。

  • 視頻字段 - 只有YouTube或Vimeo的URL可以被映射到視頻字段

  • 連結字段 - 任何URL都可以被映射到連結字段上

  • 電子郵件字段 - 只有電子郵件地址可以被映射到電子郵件字段中

  • 電話字段 - 任何支持的電話號碼格式都可以映射到電話字段上

  • 數字字段 - 只有數字可以被映射到這個字段。如果值包含字母,例如單位、符號或逗號,則無法將數字映射到數字字段。

  • 日期/時間字段 - 任何支持的日期和時間格式都可以映射到這個字段。

  • 交換字段 - 您可以將一個列映射到一個交換字段,當其單元格中只有兩個唯一的值時。例如,如果一列只有 "True"和 "False"兩個值,您可以將其導入為一個開關字段類型,並在映射階段指定哪個值表示 "Yes"。

  • 顏色字段 - web顏色格式的任何值(顏色名稱、十六進制代碼、RGBA)都可以映射到這個字段。十六進制代碼必須在前面加上#,例如#4353ff。

  • 選項字段 - 任何列都可以被映射到選項字段。這一列中的所有唯一值將成為這個字段的選項(最多有100個選項)。

  • 文件字段 - 目前您不能將任何列映射到文件字段。您可以在導入所有數據後手動上傳文件。

  • 參考字段 - 您可以映射格式為普通文本的內容--不需要特殊格式。

  • 多參考字段 - 您可以映射其單元格內由分號分隔的內容,就像多圖像字段內容一樣。

PreviousCMS集合Next集合列表

Last updated 2 years ago

Was this helpful?

多圖像字段 - 與單個圖像一樣,圖像組應作為獨立的直接URL(以圖像文件擴展名結尾的鏈接)添加到CSV中。只有被支持的圖像文件類型才會被導入到收藏中。在一個單元格中的每一組圖像URLs應該用分號隔開。(例如,"; ; ")

https://images.unsplash.com/bird1.jpeg
https://images.unsplash.com/bird2.jpeg
https://images.unsplash.com/bird3.jpeg