Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
使用CSV文件,可以一次性導入成千上萬個項目,或者只導入少數的項目到Webflow網站。
創建集合時,您可以手動添加集合項目,或者用CSV文件將它們直接導入到現有的集合。這允許從外部來源直接導入成百上千的數據項目到CMS中,並在導入這些內容時將CSV內容映射到參考字段。為了使大量數據的更新更容易一些,也可以透過CSV導入有選擇地更新現有的CMS項目。
本文會提到:
如何將外部數據上傳到Webflow中
如何配置字段和預覽項目
如何導入映射的數據
如何建造CSV文件
如何使用支持的數據類型
讓我們來了解一下如何將外部數據上傳到Webflow集合。在這個過程中,我們將涵蓋以下步驟。
如何確定您可以導入的項目數量
如何上傳CSV文件
如何指定標題行
如何選擇要導入的項目
使用免費的入門網站計劃,最多可以發布50個項目。若要導入超過50個項目,您需要為網站添加CMS或商業網站計劃,這兩個計劃分別允許多達2000個和10000個收藏項目。
要將CSV文件上傳到Webflow中的指定集合。
打開CMS面板
選擇您的數據集
點擊導入
拖入您的CSV文件(或點擊瀏覽您的電腦)。
注意 CSV文件的最大文件大小為4MB。
在選擇CSV文件後,您會被提示要指定一個標題行。
通常,CSV的標題行包含定義每一列所含內容類型的列標籤。 上傳CSV文件後,您會看到CSV的預覽,並能夠確認第一行是否為標題。選擇"是"或"我不確定"將第一行標記為標題,並將其排除在進口之外。選擇"否"則將該行納入導入範圍。
無論在這階段做出什麽選擇,在下一步可以到第一項,勾選或取消勾選 "標題行"的選項。
這個標題行的值將被設置為這個字段配置步驟的字段標籤。
選擇標題行之後,您會收到確認CSV文件已經完成處理。這個模式也會告訴您新上傳的CSV項目是否與收藏中的任何當前項目相匹配或不匹配。
注意 如果您沒有選擇標題行,或者您不確定第一行是否為標題行,妳將直接進入字段配置,而沒有選擇更新匹配項目。從本質上講,Webflow默認為您創建新的項目,因為沒有標題行,就不可能映射到ID列或字段。 如果您有匹配的項目,您可以選擇:
更新匹配的項目:將收藏中的現有項目與CSV上傳的項目進行匹配
將所有項目作為新項目導入:將CSV上傳中的匹配項目作為新項目加入收藏中。
選擇更新匹配的項目是一個很好的方法,可以快速對收藏中的現有項目進行修改。例如在CSV文件中對選定項目的數據進行了更新,只需上傳更新後的項目,就可以快速地用新數據覆蓋CMS項目中的舊內容。
注意 常規的CMS項目是根據"項目ID"字段來匹配的,該字段包含在從集合中導出的CSV文件中。(通過CSV導入更新項目不適用於電子商務項目。)也請記住,如果從備份中執行網站恢復,所有CMS集合和項目ID將被刷新。閱讀更多關於保存和恢復備份的訊息。
選擇更新匹配的項目或將所有項目作為新項目導入後,就可以開始配置CMS字段並將CSV數據映射到這些字段。
在上傳CSV文件後,它的列將作為字段可用,您可以在導入的項目下的字段配置窗格中進行配置。如果指定,列標題將作為字段標籤出現。
注意 如果CSV標題名稱與現有的字段名稱相匹配,它們將自動相互映射,並為您節省配置步驟。
輸入字段的值將從選定的行中提取。每行將轉化為一個集合項目。您可以在右邊的項目預覽窗格中預覽不同的項目。
在這一步您將配置字段,選擇哪些列需要映射,還可以為每一列創建新的字段。
如果CSV裡有不想導入的列,從下拉選單中選擇不要導入。
如果一個字段在集合中不存在,您可以創建一個,並將其映射到一列。
選擇創建新字段
從出現的下拉菜單中為這個新字段選擇字段類型。不支持列中內容的字段類型將不可用。
添加新的字段標簽或保留建議的標籤。
可選:添加幫助文本
您將有其他選項為不同的字段類型進行設置,新的選項字段將由該列的所有唯一值填充。對於一個新的開關字段,您可以指定哪個值映射到 "不"。
您可以將每一列映射到集合中的一個現有字段,列標籤旁邊的綠色指示燈表示該列已經被映射。
選擇映射到現有字段
從出現的下拉選單中選擇想把這個列映射到的字段。不支持某一列內容的字段將不可用,並且顯示灰色。
對於開關字段,您可以指定哪個值映射到 "不"。或者,您可以用刷子把一個值映射到 "是"。
注意 不能把一個列映射到已經在使用的現有字段。若需要將一個列映射到一個特定的字段類型,請創建一個新字段。
在右邊的項目預覽窗格中預覽將被導入的每個項目的字段和值。 使用預覽窗格頂部的左右箭頭按鈕在項目之間切換。 點擊頂部欄中的顯示項目下拉選單,可以看到所有將被導入的項目的列表。在下拉式項目顯示選單打開的情況下,點擊任何項目的名稱來跳轉到其預覽。在搜索欄中鍵入文字來搜索特定的項目。
將鼠標懸停在左側面板中映射的或創建的字段上的任何地方,將突出顯示預覽項目中的相應字段。預覽項目隨著字段的配置而實時更新。
如果您需要編輯某個項目的字段的值,可以在配置字段之前進行,或者在下拉選單中選擇不要導入。
您也可以選擇跳過導入特定項目到收藏中:
在預覽窗格中找到不想導入的項目(例如使用箭頭、下拉選單或搜索欄)。
打開"跳過導入"切換鍵
跳過的項目會在預覽窗格的頂部和顯示項目的下拉選單中以 "跳過導入"的圖標顯示。
如果您的CSV列中的單元格被映射到一個必需的參考字段,而它是空的或不包含任何存在於該參考集合中的值,則您會收到一個警告說項目不存在。作為一個必填字段,該行的項目將被導入為草稿,而參考字段將被留空。
如果映射的參考字段不是必需的,並且該列中的單元格是空的,或者不包含任何存在於該參考集的值,那麽一旦導入,該行的項目將被設置為暫定發布,並且參考字段將被留空。
在您完全配置好CMS字段和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中。只有支持的圖像文件類型才會被導入到收藏中。
多圖像字段 - 與單個圖像一樣,圖像組應作為獨立的直接URL(以圖像文件擴展名結尾的鏈接)添加到CSV中。只有被支持的圖像文件類型才會被導入到收藏中。在一個單元格中的每一組圖像URLs應該用分號隔開。(例如,"https://images.unsplash.com/bird1.jpeg; https://images.unsplash.com/bird2.jpeg; https://images.unsplash.com/bird3.jpeg")
視頻字段 - 只有YouTube或Vimeo的URL可以被映射到視頻字段
連結字段 - 任何URL都可以被映射到連結字段上
電子郵件字段 - 只有電子郵件地址可以被映射到電子郵件字段中
電話字段 - 任何支持的電話號碼格式都可以映射到電話字段上
數字字段 - 只有數字可以被映射到這個字段。如果值包含字母,例如單位、符號或逗號,則無法將數字映射到數字字段。
日期/時間字段 - 任何支持的日期和時間格式都可以映射到這個字段。
交換字段 - 您可以將一個列映射到一個交換字段,當其單元格中只有兩個唯一的值時。例如,如果一列只有 "True"和 "False"兩個值,您可以將其導入為一個開關字段類型,並在映射階段指定哪個值表示 "Yes"。
顏色字段 - web顏色格式的任何值(顏色名稱、十六進制代碼、RGBA)都可以映射到這個字段。十六進制代碼必須在前面加上#,例如#4353ff。
選項字段 - 任何列都可以被映射到選項字段。這一列中的所有唯一值將成為這個字段的選項(最多有100個選項)。
文件字段 - 目前您不能將任何列映射到文件字段。您可以在導入所有數據後手動上傳文件。
參考字段 - 您可以映射格式為普通文本的內容--不需要特殊格式。
多參考字段 - 您可以映射其單元格內由分號分隔的內容,就像多圖像字段內容一樣。
使用條件可見性來顯示或隱藏動態設計中的元素,並根據不同的標準為集合項目創建獨特的設計。
有條件的可見性是在動態設計中顯示或隱藏元素的最適用的方法,並根據不同的標準為不同的集合項目創建獨特的設計。
與過濾器不同--過濾器指定哪些集合項目在集合列表中可見--條件指定任何元素(靜態或動態)在集合列表或集合頁面中何時可見。
本文會提到:
設置條件的可見性
理解條件規則
理解條件與過濾器
用條件可見性支持您的電子商務項目
舉例
• 在一個集合列表中顯示或隱藏元素
• 顯示或隱藏標籤
• 突出當前項目
• 顯示或隱藏集合頁面中的一個部分
• 如果產品不能運輸,添加"到店取貨"的徽章(電子商務)
• 根據是否設置了價格比較,顯示或隱藏銷售徽章(電子商務)
• 根據訂單小計顯示或隱藏"免運費"徽章(電子商務)
• 在向某些國家發貨時,顯示或隱藏特定的信息(電子商務)
有條件的可見性指定元素何時可見。這個條件是基於一個字段的值或您所處的集合列表或集合頁面中的項目。
如何設定條件:
選擇一個元素,靜態的或動態的,在集合列表內或集合頁面上,您想在滿足特定條件時才顯示的元素
按D鍵,打開設置面板
在條件可見性部分,通過點擊加號(+)按鈕添加一個條件
在第一個下拉選單中,選擇想要的可見性所基於的領域
在第二個下拉選單中選擇條件
如果需要,指定一個值
點擊保存
您可以根據您的需要添加條件。 當應用多個條件時,必須滿足所有的條件,才能使其可見。您可以通過點擊條件旁邊的垃圾桶圖標來刪除條件。
條件規則像過濾規則一樣,基於字段或是基於項目。
基於字段的條件
• 被設置或未被設置
• 等於或不等於某個值
• 包含或不包含某個值
• 大於,小於,或者是兩個數值之間的一個數字
• 開或關
• 屬於某個日期範圍
基於項目的條件
基於項目的條件適用於當一個集合項目是或不是當前項目時。
集合列表過濾器允許您根據一個規則在集合列表中顯示或隱藏集合項目。
而條件性可見性使用相同的規則來顯示或隱藏集合列表內或集合頁面上的元素。
例如,您可以使用規則"特色(開關)是打開的"來顯示特色博客文章的"特色"文本標籤,並對特色開關設置為關閉的元素隱藏這個標籤。
另一方面,如果您希望只在列表中顯示有特色的文章,您可以將這一規則設定為集合列表的過濾器。
以下是一些您可以應用條件和過濾器的方法。
假設有一個包含團隊成員的集合列表,一些人有電子郵件地址,但其他人沒有。在收集列表中,您有一個文本連結,從電子郵件字段中提取URL。
讓我們看看如何為那些沒有電子郵件地址的團隊成員隱藏文本連結。
選擇文本連結
添加一個條件,說明當電子郵件地址字段被設定時,該元素是可見的
保存
假設您有一個部落格文章的集合列表,您想為特色項目顯示一個 "特色"標籤。 因為任何添加在集合列表中的元素都會出現在所有的集合項目中,您可以使用條件可見性來隱藏不符合條件的項目中的這個元素:"特色項目已開啟"。
在您的部落格文章集合列表中創建一個"特色"標籤
選擇該標籤
添加一個條件,說明該元素在"精選"時是可見的?
點擊保存
假設您在一個文章收集頁面上有一個文章列表。這個列表還包括當前文章的文章項目,也就是您目前所在的頁面。
您可以用過濾器來隱藏這個當前的文章,或是您可以為系列項目創建第二個設計來突出它。
現在集合列表中的每個收藏品項目中為每篇文章有2個代表。
由於您想只為當前的部落格文章顯示獨特的設計,您需要做兩件事:
添加一個條件來隱藏第一個設計。在這個例子中,為當前項目添加一個條件,隱藏第一個設計:"Post item wrapper"。
添加一個條件來顯示新的設計。本例中的"當前的文章包裝",只針對當前的文章。
您可能有一個部分只想在某些集合頁面上顯示,您可以創建一個條件,使這個部分和它的所有子部分都只顯示,例如當類別是"聖誕節"時:
選擇該部分
添加一個條件
在第一個下拉選單中選擇"類別"字段
在第二個下拉選單中選擇等值
將"聖誕節"指定為值
保存
在您的電子商務商店中創建獨特的設計。使用條件可見性來顯示或隱藏基於產品或訂單數據的元素--突出產品屬性或在結帳時提供額外訊息。
通過對變體字段(如主圖、價格比較、長度、寬度、SKU等)設定條件可見性,將特定設計與獨特的產品變體聯繫起來。
要顯示或隱藏獨特產品變體的元素:
選擇想在滿足某個條件時顯示的元素
在設置面板上,添加一個條件
在下拉選單中選擇一個產品字段(例如,比較價格)
設置一個條件(例如,存在或等於一個特定的值)
保存
使用SKU條件可見性選項,同樣的橫幅或呼出概念可以應用於產品變體。創建心目中的呼出元素,並將其設置為只在產品變體被選中時顯示。
範例
• 如果產品不能發貨,添加一個"到店提貨"的徽章
• 根據是否設置了價格比較,顯示或隱藏一個銷售徽章
您可以添加取決於結帳訊息的橫幅或呼出。例如一個橫幅可以根據購物車的總額、小計或運輸訊息來顯示。
要在結帳頁面設置有條件的可見性:
選擇您想在滿足某個條件時顯示的元素
添加一個條件
在下拉選單中選擇一個發貨字段(如小計)
設定一個條件(例如,存在或等於一個特定的值)
保存
範例
• 根據訂單小計,顯示或隱藏"免運費"徽章
• 向某些國家發貨時,顯示或隱藏特定的訊息
重要提示
當根據國家或帳單地址設定有條件的可見性時,國家必須被輸入為2個字母的縮寫,例如美國需要被輸入為US。
重要提示
當添加一個基於價格的條件時,金額應該被格式化為1000.00--使用一個點分隔符作為小數點--不管您的商店的價格格式設置如何。例如100,50歐元應該被輸入為100.50。
Webflow CMS使您能夠完全控制您的內容結構以及這些內容在整個項目中的設計方式--所有這些都不需要接觸任何一行代碼。
CMS(內容管理系統)是存儲和維護所有動態內容的地方。網站在不同的頁面上引用這些動態內容。因此,當您或您的客戶在CMS中創建或更改任何內容時,它都會立即更新所有被引用的頁面。
Webflow的"可視化"內容管理系統--CMS,使您能夠創建結構化的內容,圍繞這些內容進行設計,並對其進行更新--而無需觸及任何一行代碼。
一切從創建一個集合開始,它可以是部落格文章、團隊成員、招聘信息的集合。
當創建集合時,您可以決定該集合中的每個項目將有什麽樣的結構。例如,如果您要創建一個"團隊成員"的集合,您可能需要每個團隊成員的名字、照片和電子郵件。您可以為每種類型的內容創建一個字段--在這個例子中,它是一個純文本字段、一個圖片字段和一個電子郵件字段。
當字段到位,並且創建了集合,您就可以開始創建集合項目。例如,在創建了"團隊成員"集合後,您可以開始創建每個團隊成員。對於每個團隊成員,需要填寫您先前定義的字段。
您也可以透過導入CSV文件一次導入大量的項目,甚至可以用假的內容創建項目。
現在您已經構建了集合,並在其中有了一些項目,您可以開始向您的項目添加動態內容。有兩種方法可以做到這一點:建立一個集合列表,或建立一個集合頁面。
集合列表元素讓您從任何集合中添加內容。在任何頁面上投放集合列表元素,當它被連接到一個集合,該集合中的所有內容都可以為您所用。您可以根據字段中的值來顯示特定的項目,您也可以對內容進行排序。
在您的集合中的每個項目都會自動創建一個集合頁面。與集合列表一樣,您可以在每個集合項的頁面中引用任何字段。編輯一個合集的合集頁將更新所有的合集頁,但要更新它們各自的內容。
您可以在任何時候編輯或添加更多的內容到您的系列。編輯或添加內容可以在設計器中完成,也可以使用編輯器。編輯器可以讓合作者登錄並訪問這些集合。使用編輯器可以讓客戶直接在實時網站上快速添加和編輯內容。
了解如何過濾和限制集合列表中的項目
了解如何過濾和限制集合列表中的項目
當您將集合列表連接到集合,它將顯示該集合的前100個項目。 您可以透過使用過濾器來選擇顯示哪些項目,也可以透過啟用分頁來顯示超過100個項目。 過濾項目可以在元素設置面板(D)的集合列表設置中進行。
本文會提到:
添加過濾器
刪除過濾器
篩選器實例
只顯示特色項目
隱藏當前項目
顯示相關內容
過濾器讓您在集合列表中顯示符合創建的任何過濾器的特定集合項目。
您可以從每個集合字段類型的一些過濾規則中選擇。
如何創建過濾器:
選擇要過濾的集合列表
轉到設置面板(D)
通過點擊加號(+)在集合列表設置下添加一個過濾器
在第一個下拉選單中選擇您想過濾的字段
在第二個字段中選擇一個規則
如果需要,指定一個值
點擊保存
您可以添加想要的過濾器,這些過濾器將由AND運算符組合。
注意 您不能為同一個集合字段應用多個字段。
您可以透過點擊過濾器旁邊的垃圾桶圖標來刪除應用的過濾器。
在主頁上只顯示特色部落格文章:
添加、創建和設計一個"部落格文章"集合列表
在設置面板中添加一個過濾器
在第一個下拉選單中選擇"特色"開關字段
在第二個下拉選單中選擇"打開"
點擊保存
如果希望每個部落格頁面都有其他文章的列表,您可以用一個過濾器將當前文章從列表中排除。 如何排除當前的收藏項目:
添加、創建和設計一個"部落格文章"集合列表
在設置面板中添加一個過濾器
從第一個下拉選單中選擇集合名稱
在第二個下拉選單中選擇不是
第三個字段將顯示"當前收藏項目"
點擊保存
想在"作者"頁面上顯示某個作者寫的所有文章,您可以使用一個過濾器,只顯示那些引用該作者的文章:
添加、創建和設計一個"部落格文章"集合列表
添加一個過濾器
從第一個下拉選單中選擇作者的參考字段
在第二個下拉選單中選擇"等於"
在第三個下拉選單中選擇"當前作者"
點擊保存
每個作者頁面將顯示引用該作者的文章列表。 如果您想只顯示特定數量的相關內容,則可以限制這個列表。
集合就像數據庫--它是內容可以被存儲並在整個項目中被動態引用的地方。不同的集合標誌著不同的內容類型,例如您可以有部落格文章、作者、客戶、項目等的集合。對於電子商務項目,您也會有產品和類別的集合。
本文會提到:
創建集合
編輯集合
創建集合項目
用集合進行設計
您可以在CMS面板中創建CMS集合。電子商務集合是在電子商務面板中自動創建的。
給新集合創建一個名字,為URL結構選擇一個slug,並通過選擇模板或添加自定義集合字段來創建數據結構。
如果您不確定需要什麽內容結構的集合,您可以使用我們預設的集合模板之一來開始。
這些模板中都有自己的字段集,可以添加或刪除。
一旦指定了集合的名稱,該名稱的單數和複數版本將被生成並在整個項目的不同地方使用。收藏品名稱可以在任何時候被訂定。
下一步是指定集合的URL(slug),它是集合頁面將被存儲的文件夾的名稱。在這裡指定的文本將決定集合頁面的URL結構--為每個集合項目生成的所有頁面。這個URL可以與集合名稱的單數或複數版本相同,也可以自定義。
例如,如果您正在創建 "Blog Posts"的集合,您可以將集合的URL命名為 "blog-post",這樣它就變成了"yourwebsite.com/blog-post/blog-post-page"。或者可以將集合的URL命名為 "blog",這樣它就會顯示為"website.com/blog/blog-post-article"。
您可以隨時重新命名收集的URL。但如果網站已經發布了,將需要設置301重定向,以確保現有的外部連結到這個集合的頁面將繼續工作。以下是如何輕鬆的設置重新定向,而不必對每個集合頁面進行重新定向。
舊路徑。/old-collection-url/(.*) 重定向到路徑。/new-collection-url/%1
注意
在命名頁面時,有一些保留的詞組不能使用。
目前不能重命名電子商務集合的集合slug。還有一點需要注意,如果您想在一個現有的網站上啟用電子商務,目前不能有CMS集合和靜態頁面或文件夾,並為電子商務保留slug,如產品和類別。
雖然預設是快速開始使用CMS集合的一個好方法,但您也可以從頭開始建立集合,根據正在處理的內容類型添加或刪除字段。
集合字段不是網站元素。它們只是為每個集合項目存儲數據的字段,您可以在您的設計中引用這些數據。
在構建您的作品集時,有許多不同的字段類型可供選擇。每個字段都轉化為不同類型的內容,您可以將其納入項目設計中。
即使在項目發布後,您還是可以回去編輯集合的結構和設置。
要訪問集合設置,請在CMS中打開集合並點擊設置。您也可以在收藏品面板上點擊集合旁邊的設置圖標。 您可以添加新字段,編輯現有字段,完全刪除字段。 在每個字段中可以修改標籤和幫助文本,訂定幫助文本可以使合作者清楚地了解每個字段的用途。
您只能刪除那些在設計中沒有使用的字段,集合頁面設置,集合列表設置,如過濾器或條件可見性。
拖動和重新排序您的收藏,以保持您最重要的收藏的組織和訪問。在設計器中進行的重新排序將反映在編輯器中,不需要重新發布您的網站。
您可以在設計器或編輯器中開始創建集合項目,如部落格文章、產品、列表等。您也可以透過過濾和排序來管理收藏項目。
創建了集合之後,您可以從它們中提取內容,並將它們連接到元素和畫布上的設計。
結構和風格收集頁面,像模板一樣工作,自動更新設計。
任何時候在集合中創建新的項目(如部落格文章等),都會為它自動創建一個頁面。集合頁的工作方式類似於模板--集合頁的布局和設計適用於所有自動生成的項目頁。
本文會提到:
創建一個集合頁面
添加和連接內容
預覽集合頁面
連結到集合頁面
集合頁面設置
創建一個集合時,一個集合頁面也將自動創建。您可以在頁面面板上選擇這個集合頁面,並在集合頁面部分選擇它。集合頁旁邊的紫色圖標表示它是CMS生成的頁面。
您可以像其他靜態頁面一樣設計和開發集合頁面--但當想把動態內容引入該設計時,集合頁面的力量就會出現。
添加靜態和動態元素 就像集合列表一樣,放入集合頁面的元素是靜態的,直到它們被連接到集合中的一個字段。像設計其他頁面一樣設計集合頁面,但該頁面作為所有集合項目的模板。
您可以透過以下步驟將您設計中的不同元素連接到集合字段。
在集合頁上選擇一個元素
點擊設置圖標(或進入元素設置面板--快捷鍵:D)
勾選從集合中獲取的內容
打開下拉選單,選擇要獲取內容的集合字段
當一個元素從一個字段獲取內容,它就不僅僅是針對這一個項目。這個字段在該集合的所有項目的頁面上都與該元素相連。
當在編輯一個集合頁面時,看起來好像您只是在編輯集合中的一個項目。事實上您在同時編輯所有其他的頁面,因為是在編輯一個模板。
您可以使用頂部欄的下拉選單將頁面中的內容切換到任何集合項目。您可以在Collection頁面下拉選單頂部的搜索欄或快速查找欄中輸入一個特定的頁面名稱,從而進入該頁面。
您可以從其他集合頁面或集合列表中連結到一個集合頁面。請按照以下步驟從集合列表中連結。
添加一個集合列表
將它連接到一個集合集
添加一個按鈕,或任何其他連結元素到集合列表中
選擇連結元素,點擊齒輪圖標(或進入元素設置面板)
選擇紫色的集合頁面連結選項
選擇當前項目 這將把集合列表中的每個按鈕連結到為每個項目創建的各自的集合頁面
專業提示 可以在連結設置的URL字段類型中把任何連結元素連接到一個連結字段。
在集合頁設置中,您可以為集合頁模板設置SEO元標題和描述,Open Graph標題和描述,RSS,以及自定義代碼。然而與靜態頁面設置不同的是,集合頁面設置可以有動態值,意思是它們會導致每個集合項目頁面的獨特信息。
您可以透過設置圖標訪問集合頁設置,當把鼠標懸停在頁面面板中的集合頁模板上時,會出現這個圖標。
您可以使用集合字段為頁面標題和描述定義一個模板。而且可以在預覽框中看到它們在搜索引擎結果頁(SERP)中的樣子。
在這裡可以設置在Facebook、Twitter、LinkedIn、Pinterest和Google+上分享集合頁面的連結時將會呈現的訊息。使用Collection字段將為每個頁面創建一個模板,從而為每個頁面帶來獨特的Open Graph訊息。
您可以在集合頁面設置中為合集啟用一個RSS 2.0 feed。這將發布一個RSS閱讀器用戶可以訂閱的feed,並在發布新的集合項目時獲得更新。
在這裡可以定義feed的設置,您可以使用集合字段為RSS頻道的標題、描述和其他設置創建動態模板,也可以在頁面設置中直接看到feed的預覽,甚至可以複製RSS URL,用於其他應用程序,在網站上添加連結。
您可以將自定義代碼和腳本添加到Collection頁面模板的或標籤中,適用於所有集合頁面。 而且如果這段代碼包含任何您希望每個收藏品頁面有獨特的信息,那麽您可以在代碼中用收藏品字段替換這個值。簡單地說,選擇該值,然後點擊位於自定義代碼文本字段右上方的紫色+添加字段。
使用內容管理系統 (CMS) 為您的網站內容提供動力讓生活變得更加輕鬆。
使用 Webflow CMS,您可以定義、設計和發布功能強大的動態網站 — 無需聘請開發人員,甚至無需查看代碼,並且可以邀請利益相關者直接在實時站點上更新內容。
如果不熟悉數據庫的概念,剛開始接觸動態內容可能會讓人感到害怕。但這個簡短的介紹將改變您對建立項目和管理內容的思考方式。
靜態內容
動態內容
靜態內容是逐一創建的正常元素,我們可以使用class來一次設計多個元素。
但是如果想創建內容不斷變化的網站,例如部落格、新聞網站,在這些以及其他許多情況下,使用靜態內容將需要手動複製和修改大量的內容。
動態內容隨時添加、更新和導入內容。而在您的設計中與該數據相關的每一部分都會自動建立和更新。同樣重要的是,您可以對使用這些內容的設計元素的創建和調整進行極其細致的控制。
集合列表是從集合中添加和設計動態內容的兩種方式之一。
集合列表是在CMS集合或電子商務集合中添加和設計動態內容的兩種方式之一。
您可以在任何類型的頁面上添加集合列表。另一種添加動態內容的方式是使用集合頁面。
本文會提到:
添加集合列表
將集合列表連接到集合
設計集合列表
理解集合列表的結構
配置集合列表的設置
只要有一個或多個帶有項目的集合,就可以在您的項目中的任何靜態頁面或集合頁面上添加集合列表。您可以簡單地從添加面板上拖動集合列表,或者從快速查找(CMD/CTRL+E)中添加一個。
除非連接到集合體,否則集合體列表是沒有用的。 雙擊集合列表,打開集合列表設置,從下拉選單中選擇您想要的集合。
選擇集合之後,集合列表將顯示該集合中的所有項目,作為空塊。 您將能夠向列表中添加元素,將其連接到集合字段後,將會自動獲得每個集合項目的正確數據。
把元素放到空的集合項目塊中時,這個項目會對該集合中的所有項目進行重複。這被稱為"靜態"內容,或不來自集合的內容。
現在當元素連接到集合字段時,那麽它將自動用每個集合項的內容替換該元素中的內容。這就變成了"動態"內容,因為這些內容來自CMS。
您可以將靜態元素連接到集合字段,並動態地更新該元素的內容。 靜態元素呈現藍色,而動態元素或CMS的數據的元素呈現紫色。
要連接元素到集合字段:
在集合列表中選擇該元素
打開元素設置
勾選標有 "從獲取"的方框。
打開下拉選單,選擇想獲得內容的集合字段
就像將靜態元素添加到集合列表中會重復這些項目一樣,將樣式添加到任何元素(靜態或動態)中會在該列表中的所有集合項目中應用該樣式。 例如我們將標題連接到一個字段,然後將該標題樣式化為綠色文本顏色,該列表中的所有項目將有不同的內容,但有相同的綠色樣式。
您可以透過從顏色和圖像字段中提取顏色和背景圖像來應用動態樣式設置。
默認情況下,一個集合列表包裝器包含以下組件:集合列表和空狀態。如果分頁功能被啟用,它還包含分頁包裝器。您可以通過複製包裝器來添加多個分頁包裝器。
集合列表組件包含列表的集合項,您不能向這個組件添加其他元素。
集合項目組件包含添加到集合列表中的實際內容。
任何丟在這裡的項目都會填充到列表中的所有項目。這些元素是靜態的,直到它們被連接到集合字段或有條件的可見性應用到它們後,才會把它們轉換為動態元素。
在導航器中,動態元素用紫色圖標表示。
當列表沒有項目可供顯示時,空狀態會取代集合列表。默認情況下,它有灰色背景並包含文本塊,這可以改變風格,替換或添加更多的元素來創建自定義的空狀態。
分頁組件包含兩個連結塊:上一個按鈕和下一個按鈕。每一個都可以進行樣式設計和設定,但是不能在這個包裝上添加其他元素。
集合列表有自己的設置來控制被顯示的內容,還可以通過多種方式改變列表的布局。透過選擇集合列表包裝器或集合列表元素,然後按Enter鍵或按D鍵打開元素設置面板來訪問這些設置。
在這裡您可以選擇想連接到集合列表的哪個項目。只有當列表裡面的元素都沒有連接到當前連接的集合的字段時,您才能改變連接到集合列表的項目。
這個設置允許您在項目視圖和空狀態視圖之間切換,以便可以編輯集合列表的那個狀態。
這個設置並不設置實時站點上的集合列表的狀態。集合列表的實際狀態是由其項目決定的。空狀態只在集合中沒有項目或被過濾掉時顯示。
可以保持列表的垂直堆疊,或者可以把布局改為列,類似於列元素。
也可以將網格應用到集合列表中以創建一個動態網格,請確保將集合列表設置中的布局設置為"列表"。
專業提示 建議使用flexbox來為Collection列表建立等高的布局。每個集合項目中的內容可能會有所不同,並導致非基於flexbox的列布局出現錯位。
添加過濾器可以只顯示您想要的集合項目--符合設置中規定的一個或多個標準的集合項目。
排序順序可以讓根據特定的字段對集合列表進行排序。
給集合列表分頁以顯示特定數量的項目/頁。
這個選項可以讓您定義在集合列表中顯示多少個項目,以及從哪個項目開始列出。例如可以設定讓列表從項目5開始,只顯示3個項目。這將顯示項目5、6和7。
除非啟用分頁功能,否則每個集合列表的最大限制是100個項目,每頁20個列表。
編輯器讓您在一個簡單的界面中更新和添加內容,這對不需要設計器的複雜性的客戶或團隊成員來說是非常好的。
在設計器中您可以建立和設計您的網站,而編輯器只允許您和工作區成員編輯和管理內容。憑借其簡化的界面,編輯器為您提供了多種工具來管理一個已發布的網站。
透過訪客編輯權限,您可以邀請您的客戶在不破壞設計的情況下管理他們自己的網站。
本文會提到:
訪問編輯器
剖析編輯器的工具條
頁面上的編輯
管理頁面設置
創建和管理動態內容
查看和發布更改
訪問表單提交
元素的編輯設置
您可以在發布您的網站(無論是到webflow.io暫存子域還是到自定義域)後訪問Webflow編輯器。它允許您直接在頁面上編輯網站的內容,或透過編輯器面板管理頁面和內容。
如果您在Webflow儀表板中或在設計器中設計網站,您可以通過以下方式訪問編輯器。
• 從儀表板的網站選單中
• 從網站設置中的頂部工具條
• 從設計器中的選單
訪客編輯可以透過在瀏覽器地址欄中的網站URL末尾添加/?edit來訪問他們網站的編輯器(例如,yourwebsite.com/?edit)。登錄之後,訪客可以在編輯器模式下訪問他們的網站。
當他們以後回到網站時,他們可能會看到右下角的"編輯網站"按鈕,他們可以點擊它來跳到編輯模式。
讓您的訪客編輯知道,他們需要將他們的瀏覽器設置為接受來自所有第三方的cookies來使用編輯器--否則,他們在試圖登錄編輯器時可能會看到一個錯誤訊息。
Webflow官方支持編輯器在最新版本的Chrome或Safari的常青版本上使用,另外還有2個版本用於不同的更新周期。Webflow還非官方地支持使用所有現代瀏覽器。
• CSS變換3D--由交互式使用 • CSS過渡--被交互使用 • CSS flexbox--被樣式布局面板所使用 • CSS過濾器--由交互使用 • CSS網格--將被樣式布局面板所使用
2022年6月15日,微軟正式終止了對Internet Explorer 11(IE11)的支持。雖然在Webflow中發布的網站使用了現代網絡瀏覽器支持的行業標準功能,但IE11不支持的一些功能在該瀏覽器上可能會出現錯誤的功能。
Webflow在任何情況下都不支持IE9或IE10。
注意 常青的瀏覽器是指能自動更新的瀏覽器,意思是大多數人擁有最新的、自動更新的版本。 如果您在實驗性瀏覽器上使用Webflow時遇到問題,請在Webflow論壇的實驗性瀏覽器類別下報告您的問題。
注意 您可以透過"我的瀏覽器是什麽"來確定您所使用的瀏覽器和操作系統版本。
當您打開編輯器時,您可以在預覽模式或"實時網站"模式下探索網站。要切換到編輯模式,點擊頁面右下方的"編輯網站"按鈕。
當您想在預覽模式下看到網站時,去"回到實時網站"。
如果您、您的工作區成員,或者您的訪客編輯在嘗試登錄編輯器時看到錯誤信息,請嘗試以下修復方法:
• 檢查您的瀏覽器是否接受cookies • 退出編輯器,清除您的瀏覽器的緩存,然後重新登錄 • 通過隱身模式的窗口登錄編輯器 • 嘗試透過一個不同的瀏覽器登錄 • 嘗試向您的內容編輯發送一個新的客人編輯邀請,並要求他們使用隱身窗口來創建他們的新帳戶 • 嘗試刪除或禁用自定義代碼 • 如果這些都不起作用,請聯繫技術支持
注意 如果您的網站上有自定義代碼,自定義代碼可能會影響編輯器。發生這種情況是因為編輯器在發布的網站上進行渲染,嘗試刪除或禁用您的自定義代碼。
編輯器允許多個團隊成員和訪客編輯在同一時間編輯靜態和動態網站內容。如果兩個人同時編輯相同的內容,最後編輯的人"獲勝",所以您仍然要與您的隊友和訪客編輯協調編輯時間。編輯器還提供一個網站活動日誌,這樣您就可以在發布網站之前看到誰編輯了您的網站,以及他們做了哪些編輯。
與編輯器類似,如果您想編輯您的網站的設計,可以在設計器中與團隊成員協作。
當您訪問編輯器時,您會看到實時網站,編輯器工具欄(灰色條)折疊在屏幕的底部。透過這個工具欄,您可以訪問各種編輯器面板來管理頁面設置、動態內容、表單和您的編輯器帳戶。您還可以看到並發布您通過編輯器所做的修改。
編輯器工具欄上有以下標籤和圖標:
• 選單--使用此選單可進入儀表板、網站設置或設計器。這個按鈕有Webflow的標誌。
• 頁面--打開頁面面板,其中列出了網站的靜態頁面和動態集合頁面。在這裡您可以瀏覽一個頁面,點擊查看實時頁面並管理任何頁面的設置。
• 收藏--打開收藏面板,它列出了您所有的集合。點擊一個集合,在工具欄上打開一個新的標籤,打開集合項目的面板,列出該集合中的所有項目。在這裡您可以編輯任何項目或創建新項目。這與設計器中的CMS面板非常相似。
• 表格--打開表格面板,您可以看到和下載網站上提交的表格。
• 帳戶設置(圖標)--打開帳戶設置面板,您可以編輯您的訪客編輯帳戶訊息和上傳個人資料圖片。
• 幫助和支持(圖標)--打開幫助和支持面板,在這裡您可以找到關於使用編輯器的一些常見問題的答案。
• 註銷(圖標)--在確認後將您從編輯器中註銷。
• 回到真實網站(按鈕)--從編輯器模式切換到真實網站模式,這樣您就可以像您的網站訪問者看到的那樣查看您的網站。
• 節省/保存--所有的改變都會自動保存在編輯器中。當您在編輯器中對您的網站進行修改時,您會看到 "保存..."或 "已保存"狀態。
• 更新日誌--這顯示了左下方發布按鈕旁邊的未發布變化的數量。點擊變更日誌可以看到有未發布變更的項目和頁面的列表,您可以看到是哪個訪客編輯或工作區成員做了這些變更。
• 發布(按鈕)--允許您在編輯器中發布您所做的所有修改。
您可以用編輯器在頁面上進行編輯。當您把鼠標懸停在各種元素上時,在可編輯元素的右上方會出現一個"鉛筆"圖標或"圖片"圖標。要編輯任何這些元素,只需點擊該圖標。
注意 一些造型和自定義代碼不會以它們應該出現在發布的網站上的方式顯示。這是您在編輯器中的正常行為。
當懸停在可編輯的文本元素上時,您會看到文本元素周圍有一個淺灰色的輪廓,右上方有一個"鉛筆"圖標。您可以透過點擊進入該方框來編輯文本。
您也可以通過選擇單詞或短語,並從出現的浮動工具欄中選擇格式化。
對於副文本元素,您可以做更多的事情:添加媒體,創建列表,樣式,以及進一步格式化您的文本。
您也可以在網站上直接替換圖片。只要將您的光標懸停在想替換的圖片上,然後點擊"圖片"圖標。這將允許您從電腦中選擇並上傳一個新的圖片。
注意 您在設計器中為一個元素創建的任何視覺樣式,如純色覆蓋、邊框顏色或陰影,將自動適用於您通過編輯器替換的任何圖像或背景圖片。
要編輯一個按鈕元素,將鼠標懸停在按鈕上,點擊右上方出現的設置"齒輪"圖標。
您會看到兩個選項:
• 編輯連結設置
• 編輯文本
在編輯器的頁面面板中,您可以管理重要的頁面設置,如SEO元標題和描述,Open Graph標題和描述,以及Open Graph圖片。您還可以管理靜態頁面的頁面密碼保護設置和收集頁面的RSS訂閱設置。
要訪問一個頁面的設定:
打開編輯器面板中的"頁面"選項卡
將您的鼠標懸停在列表中的一個頁面上
點擊出現的"設置"按鈕
您也可以使用搜索欄按名稱搜索頁面。
注意 點擊頁面而非設置按鈕,將關閉頁面面板並打開相應的頁面。
如果您的網站有收藏,您可以在編輯器中透過收藏標籤訪問它們。集合面板列出了您所有的集合。點擊一個集合,會打開一個新的標籤,標題是該集合的名稱。這個選項卡包含了該集合中的所有集合項目。
您可以透過點擊現有項目來編輯它們,或者點擊"新建"按鈕來創建新項目,並填寫項目的各個字段。
完成輸入內容或更新字段時,您可以選擇:
• 創建一個新項目或保存一個現有項目。它將被分期發布,在您下次發布時在您的網站上上線 • 立即發布您的項目(無需等待下一次全站發布) • 如果您還沒有準備好在網站上發布該項目,可以保存為草稿 • 取消以放棄修改
您可以點擊項目名稱右側的"頁面"圖標來查看該項目收藏的頁面。這將折疊面板,讓您在瀏覽器中看到您目前正在查看的項目的頁面。
要回到收藏項目的列表,請點擊"返回"按鈕。
在"集合面板"中,您可以看到您所有的收集項目和它們的狀態。您可以同時刪除、草稿或存檔幾個項目:
點擊"選擇"按鈕
選擇您要管理的項目
從頂部的工具欄中選擇您想要的操作(刪除、草稿或存檔)
要關閉收藏標籤,請點擊標籤右上方的"關閉"(X)按鈕。
在做完所有這些修改後,您會想查看它們,並確保它們被保存並準備好在點擊發布前發布。
在編輯器中工作時,編輯器面板覆蓋了您的網站的大部分內容。要折疊編輯器面板並查看您的網站,點擊頂部的查看網站按鈕。
在這個視窗中,您可以像平時一樣瀏覽您的網站,並對任何頁面進行修改或查看。
在編輯器中所做的修改不會在實時網站上進行,直到您單獨發布所編輯的項目或按下"發布"按鈕來發布所有的階段性修改。
重要提示 當您從編輯器發布時,您的網站將同時發布到webflow.io的暫存域和自定義域。為了避免這種情況,請從設計器或網站設置中發布。
如果您的網站上有任何表格,編輯器將包括一個表格標籤。在這裡,您可以查看人們提交的表格的一些基本訊息,但它最有用的地方是您可以下載完整的表格數據。在下載的CSV文件中(這種格式適用於所有主要的電子表格應用程序),您將能夠看到所有提交的訊息。
默認情況下,您、工作區成員和訪客編輯可以使用編輯器來編輯實時網站上的所有內容,但您也可以讓訪客編輯無法編輯的元素:
在設計器中打開網站
選擇您想使之不可編輯的元素
轉到元素設置(D)。
取消勾選"合作者可以編輯此元素"
您也可以使用Command + Shift + L (在Mac上)或Control + Shift + L (在Windows上)在一個選定的元素上切換客人編輯。
重要提示 CMS元素總是可以在編輯器中進行編輯。
如果您的Workspace網站有一個CMS、Business或Ecommerce網站計劃,您可以邀請訪客編輯在您的網站上進行合作。除了在編輯器中打開網站、編輯內容和暫存更改之外,訪客編輯還可以添加CMS內容和編輯頁面設置。
訪客編輯也有與工作區成員不同的發布權限。