システム開発部の長谷川です。
今回はWebflow CMSの機能について解説してみました。
Webflow CMSの機能についてはIntro to Webflow CMSで説明しています。
今回はIntro to Webflow CMSで出てきた3つの要素について簡単に解説してみます。
- CMS Collections
- Collection list
- Collection pages
目次
CMS Collections
CMS Collectionsはデータベースのようにデータを保存できます。
CMS Collectionsに保存されているデータは、
Collection listやCollection pagesから参照できます。
CMS Collectionsを追加するにはメニューから選択していきます。
CMS Collectionsにはテンプレートの数種類用意してあり、
作りたいコンテンツによって簡単に使い分けることができます。
Blog Postsを追加します。
ダミーのデータを20追加してみます。
CMS Collectionsを追加できました。
Import collection items
CMS Collectionsを作成する場合、
通常はデータ項目を手動で入力する必要があります。
しかし、CSVファイルを使用して、CMS Collectionsのデータ項目を、
一度にインポートすることができます。
さらに、同じWebflowのプロジェクトや別のWebflowのプロジェクトから、
エクスポートしたCMS CollectionsのCSVもインポートすることもできます。
Modify a collection
CMS Collectionsは公開した後でも、
設定やデータ項目の編集ができたり、
CMS Collectionsを削除できたりします。
Collection list
Collection listはCMS Collectionsのデータを一覧で表示できます。
ページにCollection listを追加します。
Collection listで表示したいCMS Collectionsを選択します。
Collection listのレイアウトは5種類が用意されていますので、
好きなレイアウトを選択します。
この状態はCollection listと選択したCMS Collectionsを関連づけをしているだけで、
CMS Collectionsのデータは表示されません。
CMS Collectionsのデータを表示するために、
Collection listに要素を追加します。
Collection listにCMS Collectionsのデータを表示できました。
Filter Collection lists
Collection listにはフィルター機能があります。
Blog PostsのCMS CollectionsにはFeatured?というSwitch fieldがあり、
フィルター機能でBlog PostsのFeatured?がONのときに表示するとした場合に、
編集中のBlog Postsは表示しないようにできたりします。
Paginate Collection lists
Collection listは選択したCMS Collectionsのデータを、
1件から100件しか表示できません。
しかし、ページネーションの設定を追加すると100件以上を表示できます。
Collection pages
Collection pagesはCMS Collectionsのデータ項目をページ毎に表示できる機能です。
Collection pagesのレイアウトやデザインは、
CMS Collectionsのデータ毎に自動的に作成される、
すべてのページに適用されます。
Collection pagesは、ブログ記事、ヘルプ記事、ランディングページなど、
繰り返し使用するコンテンツに役に立つそうです。
Collection pagesは新しいCMS Collectionsを作成すると、
Collection pagesが自動的に作成されます。
Collection pagesを選択して、
CMS Collectionsのデータを表示する要素を追加します。
追加した要素に対して、
CMS Collectionsのデータを表示するように設定していきます。
CMS Collectionsのデータを表示することができました。
すでに他のCMS Collectionsのデータ毎のページもできています。
まとめ
Webflow CMS機能について解説してみて思ったことは、
Webflow CMSの大元の機能である、
CMS Collectionsが扱いやすいと感じました。
SQLやDBの構築を知らなくても、
データ項目を簡単に保存や編集ができたり、
CMS Collectionsの連携も簡単にできてしまいます。
みなさんも触ってみてはいかがでしょうか？