Framer CMS 教學:用 Reference 輕鬆打造強大的關聯式資料庫

青魚 Cyan

當專案規模變大,像是要做一個有很多作者的部落格,如果突然要更換某位作家的頭像時該怎麼辦?要點進去 20 幾篇不同的 CMS 文章裡,一篇篇更新圖片嗎?其實有只改一次就好的方法!在 Framer 裡,如果你有設定好 CMS References,就能讓資料庫可以互相串連,建立一個會自動同步的聰明資料庫。一起來看看怎麼做吧~(本教學內容擷取轉寫自 Framer 官方教學:Framer Update: CMS Collection References

什麼是 CMS Collection References?

其實 Framer 築者基地就是這樣典型的案例!我們有好多位作者,然後還會在文章側邊呈現作者的簡短介紹以及相關連結。假設要修改其中一個網址,一篇一篇改的話會很沒有效率!

這時候如果有設定好 References,為「作者資料庫」獨立開一個 Collection,就可以讓所有文章都自動連動「作者資料庫」裡面的資料,只要有更新的話也會直接同步。

實際來看看 Framer 築者基地的資料庫是怎麼建吧!

Step 1:建立作者資料庫(Collection)

  • 首先,我們不直接在文章裡填寫作者資料,而是直接建立一個名為 「Authors(作者)」 的 CMS Collection。

  • 設定你需要的欄位,像是:姓名、頭像、個人簡介、個人網站、各種社群連結。

  • 新增幾筆作者的資料,下一步我們要讓文章來引用這邊的資料。

Step 2:在主要 Collection 中加入引用欄位

  • 建好後,回到主要文章的 Collection ,點選 Edit Fields 來新增欄位

  • 點選「+」後,找到引用 (Reference),接著選擇剛剛建立好的,名為「Authors」的 Collection。

  • 接著就可以為文章指定 Authors 裡面的作者了!

Step 3:在頁面上連動 CMS 內容

接著回到你的文章預覽頁面。我們先前已經做好作者的樣式了,最後一步就是要讓裡面的資料都可以自動同步!這部分的原理其實跟引用 CMS 內容時的步驟一樣,都是透過 Set Variable 來連結,我們以作者的頭像照片區來舉例:

  • 找到原本設定圖片的地方: Styles - Fill

  • 點選 Fill - Set Variable ,會發現可以引用 「Authors」Collection 裡面的資料!

  • 以此類推,其他區塊也用一樣的方式引用

Tips: 同樣可以善用 Conditional Visibility (條件式顯示)!

可能會遇到一個狀況:每位作者需要呈現的連結不同,有些人可能有個人網站、有人沒有,那就可以透過 Conditional Visibility (條件式顯示),來設定 icon 是否要顯示!

未來如果要更新作者的資料,只要回到 Authors 這個資料庫,更改欄位裡面的資料,就會直接同步了!

進階功能:Multi-Reference(多重引用)

有時候,一件事物不只有一個屬性。例如:一篇文章可能有「設計」、「教學」、「心得」三個標籤;或者一個活動由三位講師共同舉辦。這時我們可以使用 Multi-Reference

結語

做網站時,其實有一個蠻重要的重點:我們不只是要做出漂亮的介面,更是要打造一個「好維護」的網站,才能發揮網站最大的效益。References 這項功能我覺得就是一個非常好的體現!

如果你在設定上有遇到問題的話,歡迎來 Framer 交流基地一起討論喔🫶

文章大綱
本文作者介紹
青魚 Cyan

現職於醫藥行銷公司的資訊設計師,同時從事網頁與視覺設計接案。工作之餘,持續投入 Framer 與網頁設計工具的學習與實踐,並打造一個面向中文圈創作者的交流與共學空間。

本文作者介紹
青魚 Cyan

現職於醫藥行銷公司的資訊設計師,同時從事網頁與視覺設計接案。工作之餘,持續投入 Framer 與網頁設計工具的學習與實踐,並打造一個面向中文圈創作者的交流與共學空間。

看看其他文章

Connect, configure and preview
Connect, configure and preview