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

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

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

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

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

什麼是 Loop 技術

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

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

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

票選十大男明星：

金城武

⭐⭐⭐⭐⭐

彭于晏

⭐⭐⭐⭐

莊菈喜

⭐⭐⭐⭐

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

那接下來實例操作一次。

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

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

Step2. 選擇資料來源

Step3. 設計模板

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

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

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

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

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

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

▼ 準備好的 Hahow 課程資料

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

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

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

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

這裡我們用機會再來說明一次「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 取得資料。