Crocoblock Loop 技術打造獨特的動態網站

上一篇我們介紹過 Crocoblock 來自動取得聯盟行銷的連結，打造自動化網站。今天我們來看看要怎麼用 Loop 功能，來打造獨特的動態網站。

也許你對 Loop 有點陌生，簡單來說 Loop 功能就是讓我們從數據庫中檢索文章或內容，然後將其顯示在網站的前端頁面上。例如說，我們的文章列表或是 Hahow 好學校的線上課程列表。

▼ Hahow 好學校 – 台灣最大線上學習平台

先帶大家認識一下 Loop ，然後用實際的例子帶大家操作一次。

什麼是 Loop 技術

Loop 技術是一種網頁設計技術，它可以通過設置模板和自定義字段，將特定內容從數據庫中提取並動態地呈現在網站的各個部分中。使用 Loop 可以讓網站內容更加豐富多樣，也更容易管理和更新。

簡單來說，用表格資料來設計網頁，所以先建立一份資料，像是：

| | name | star | Image URL | 票數 |
| — | — | — | — | — |
| 1 | 金城武 | 5 | https://upload.wikimedia.org/wikipedia/commons/b/b8/Takeshi_Kaneshiro_at_BIFF_Square%2C_2011_(cropped).jpg | 0 |
| 2 | 彭于晏 | 4 | https://upload.wikimedia.org/wikipedia/commons/thumb/3/34/2008TIBE_Day2_Hall2_MightyMedia_Honey_and_Clover_Signing_EddiePeng.jpg/440px-2008TIBE_Day2_Hall2_MightyMedia_Honey_and_Clover_Signing_EddiePeng.jpg | 0 |
| 3 | 莊菈喜 | 4 | https://lashiblog.com/wp-content/uploads/2022/11/14207.png | 100 |

▼ 然後我們可以在網頁中呈現出這樣的效果

---

票選十大男明星：

金城武

⭐⭐⭐⭐⭐

---

彭于晏

⭐⭐⭐⭐

---

莊菈喜

⭐⭐⭐⭐

---

這樣的設計和呈現方式一定比表格好，也比純程式來得方便修改和管理。而 Loop 也不僅僅只有這樣的功能。

那接下來實例操作一次。

Crocoblock Loop 實例操作

#1 文章列表

那我們先由文章的內容為例來操作一次。

Step1. 由 JetEngine 進入 Listings 頁面，然後「新增」。

Step2. 選擇資料來源

Step3. 設計模板

我們以方格子為參考，由下至下為：

• 封面
• 標題
• 作者圖
• 作者名
• 分類
• 發佈時間
• 愛心和收藏

直接看影片比較方便，大叔是不是懶得打字呢，這樣就完成我們要的模板。

Step4. 使用 Listing Gird 元素呈成內容。

打開 Elementor 找到 Listing Grid ，然後將它拖到編輯區。

選擇剛剛我們設計的模版名，就可以看到畫面中出現文章以我們設計的模版來呈現。但明顯還需要一點微調，雖然我不是專家，但看起來好得不可思議吧!

#2 新。好學校 Hahow 線上課程列表

我們再做一個例子，用 Crocoblock Loop 來打造好學校 Hahow 全新的課程模板。首先我們要先準備線上課程的相關資料，大叔直接在 Hahow 將課程資料放入我的網站資料庫裡，然後我們要通過這些資料來設計「 新。線上課程模版」。

▼ 準備好的 Hahow 課程資料

我們就從 Step3. 設計模板開始，我們這次參考 hahow 的介面設計來學習怎麼操作和設計。一樣參考 Hahow 的模板設計。

和文章列表不同的是，我們這次選擇了自定義的「網站資料庫」，而畫面中 Custom Content Type 就是 Crocoblock 的自定資料庫功能，這未來我們有機會在聊。

在設計區中，大叔做一個橫式的新。Hahow 線上課程列表的模版。

完成後，我們將新的模板設計放入文章中就會像這樣。詳細可以看「【精選課程】Hahow 好學校線上課程推薦：2023 必修的 10 堂課」

#3 聯盟網最新活動

這裡我們用機會再來說明一次「Crocoblock Rest API 」，這是上一篇文章寫到的功能，我們使用串接聯盟網的 API 資料，打造一個最新活動列表，並且自動更新活動，來達成躺著都可以賺錢的自動化網站。 😈

也就是我們要從聯盟網把優惠訊息，複製貼上到我們的網站，但優惠活動常常都在變動，手動更新是不是有點太辛苦，所以我們須要學習「自動化」。

如果你還沒看過之前的文章的話，推薦你先閱讀一下 Crocoblock Rest API 認識它有什麼功能怎麼操作，以及為什麼它可以提高我們的聯盟行銷收益。

首先我們到聯盟網的 API 頁面，來取得「請求URL」。

然後我們需要兩種資料 –

• API Endpoint URL

• Items path
  由之前的文章教學中很容易就可以得到：

• API Endpoint URL – “https://api.affiliates.one/api/v1/affiliates/creatives.json?api\_key=\[API-KEY\]&ids=2906”

• Items path – “/data/creatives”
  將資料填入 Crocoblock 需要的資料框中，如果出現 Connected 的話，表示我們正確地從聯盟網的 API 取得資料。

再來我們就來設計模板，一樣由 JetEngine 進入 Listings 頁面，然後「新增」。

▼ 我們做一個優惠活動的模板，

[elementor-template id=”62242″]

將它放入相關文章推廣的話，那它就會自動更新聯盟網的最新活動，走過路過再也不會錯過。人生最不爽的事情，優惠在旁邊，你還付原價。

Crocoblock Loop 也能讓列表變成像是 BANNER 或是 Slider 的方法來呈現，在旁邊放上方向箭或是讓活動可以自動輪轉，還可以設定輪轉的頻率。

以上就是 3 種 Loop 技術的實際利用，如果還有任何想看的內容，可以下面留言讓大叔知道。

透過 Loop 優化動態網站的 SEO

利用 Loop 的功能可以讓網頁上呈成很酷炫的動態內容，讓網頁更為豐富精彩。例如說，動態的 Banner 或是服務的介紹都可以使用 Loop 的功能表示。

例如說，Agoda 的房間介紹都是使用這類的技術，更方便修改、更容易的維護及管理。當使用者更容易尋找他們需要的內容，就有機會和他們深度互動，並提高點擊和銷售的可能。

▼ Agoda 世界最大的訂房網站

心得 & 結論

Loop 是很好用的功能，無論我們想要商品顯示、文章列表、線上課程等等，使用 Crocoblock 來打造 Loop 動態網站都是簡單而且好操作的選擇。

Loop 籍由讀取後台資料，然後顯示在網站的前台，這表示我們只需要新增和管理後台的資料，就可以輕鬆打造數百筆、數千筆的資料內容。

Crocoblock Loop 推薦給有興趣學習和製作動態網站的朋友。