簡介：Listings 文章列表
把文章寫好後，當然希望展示自己努力的成果！使用Elementor Pro的話，你可以透過“Posts”插件做到列表效果。但使用該插件也有很多局限，例如說它對顯示的內容沒有多大的自訂空間，這對於使用JetEngine創造“自訂文章類型”的用家尤其不利。
而本教學介紹的JetEngine“Listings”，是一個自訂列表模板的功能，它尤其適合：
- 使用Elementor免費版的的用家(缺乏“Posts”插件)；
- 想自訂列表的內容(這也是最常見的使用原因)；
- 打算自訂歸檔頁面(Archive Pages)。
前期準備：創造“自訂文章類型”
為了展示“Listings”功能，我特意創造了用於教學示範的文章類型 – “國家介紹”。
*若你本身已建立有文章類型，可跳過本部分。
“國家介紹”用於展示一些國家的基本資訊。首先我為文章添加一些必要模組，例如標題、文字輸入區、摘錄、代表圖片。
然後在客製化欄目 (Meta Fields)加入一些欄目，用以補充資料。由於展示關係，我特意設了不同的欄目類別，包括文字、日期、多選和數字。
*本教學使用了freepik.com的免費圖片，因此添加了“Photo Credit”欄位用以合法使用。
最後，我利用“JetEngine Taxonomies”為國際添加了“國家類型”用以分類這些地方的特色，比如說風景類、玩樂類等。
設置完畢！現在可以輸入不同國家的資料。
總共創造了6個國家。
建立新的列表
文章準備好，是時候向世界展示你的佳作了！現在正式開始教大家建立列表。
我們在WordPress控制面板找到 JetEngine，選取 “Listings”，並按“Add New”新增列表。
這時彈出設置方塊。方塊一共4個選項：
- Listing Source – 選擇列表來源的種類。由於“國家介紹”屬於“Posts”文章類別，這裡不用設置。(關於其它的選項，日後會再講解)。
- From Post Type – 選擇列表模板需要套用到哪個文章類型。這裡我選擇“國家介紹”。你可根據你的需要，找出你需要設置的文章類型。
- Listing Item Name – 為這個列表模板改個名稱。我命名為“國家介紹列表”。
- Listing View：你打算使用什麼方式編輯？我是Elementor愛好者，當然使用默認設置~
完成設置後，可按下“Create Listing Item”。
關於動態內容的說明
現在你已進入了建造模式。這是一個什麼都沒有的版面，所有內容都是自己組裝的。
在正式開始前，我先介紹一個重要概念：列表的建造，是基於動態內容的。例如現在我創造了6個國家，它們的標題分別是：南非、俄羅斯、阿根廷、泰國、日本、瑞典。只要我們建立列表時，選取“標題”這個欄目，它便會自動抽取所有所有國家名稱，自動生成6個結果。也就是說，我們只需建立一個列表模板，那麼所有結果便會根據這個模板的結構呈現所有結果！不知道我在說什麼的沒關係，我們一步步把它完成~
建立列表的動態內容有2個方法。對於Elementor Pro的用家，可以隨意使用任意插件並運用“Dynamic Tags”抽取包括標題、圖片甚至自訂化欄目的數據。
選取“Custom Field”後，在“Field”欄位可找到我們建立的自訂化欄目。
而對於非Elementor Pro用家，我們可以使用JetEngine的“Listing Elements”插件，它們可100%做到同樣效果。由於這是JetEngine教學，往後我將一致使用這堆插件。這裡我們使用3個插件，包括：
- Dynamic Field – 這個插件幾乎能抽取所有文章的內容及自訂化欄目。
- Dynamic Image – 用於顯示圖片，例如文章的代表圖片。
- Dynamic Terms – 用於顯示文章所屬的分類。
組合列表內容
說了那麼多，終於進入實際組合階段，把每個國家的不同資訊放到列表。現在增加一個1/1的結構，並把它的寬度調整為600px，用於模擬2欄的列表。
現在我們試試把“國家”的名稱添加進去。選取“Dynamic Field”插件放到結構當中。
*由於顯示關係，我把結構的背景調整為白色。
結果馬上出來了。大家不用擔心為何只出現“南非”一個結果，這只是編輯狀態，當完成後，列表將顯示所有6個國家的結果。
熱身完畢後，我們根據這個插件的不同“Source”和“Object Field”，分別把文章的不同東西加到列表。
不錯吧，資料大部分都顯示出來了。
不過，有些問題出現了。首先，自訂部分欠缺了前綴部分，例如瀏覽日期只有“2018-01-08”，讀者並不知道代表的是什麼東西。為此，我們可在左邊的編輯區往下拉並找到“Field Format”。欄目的動態數據被設定為“%s”，因此在保留這部分的情況下，我們可以在任意位置添加文字。下圖中，我為洲份添加了“洲份: ”。
然後是“前往方法”。大家發現這個動態數據灰掉了，顯示不出結果，原因是我們需要更變輸出結果。由於它在“客製化欄目”中被設為多選性質，因此我們在編輯區設置開啟“Filter Field Output”，然後在“Callback”選取“Checkbox Field Value”。這時動態內容應該會出現了。最後，可根據自己需要修改間隔方法“Delimiter”。當然，前綴也可以添加的，這裡我添加為“前往方法: ”。
“Filter Field Output”也有相當多多玩法，例如它可格式化數字(即在Callback選取“Format Number”，然後就能像Excel般設置數字的表達了！
最後我把背景設為代表圖片(Elementor Pro專享…😅)，再把各部位稍作美化，列表便完成了。
在頁面顯示文章列表
現在，你可在你的頁面顯示剛才完成的列表。我開一個名為“國家介紹”的新頁面並使用Elementor進行編輯。把“Listing Grid”拉到頁面。
在編輯區的“Listing”位置選取我們製作的“國家介紹列表”。
這裡我介紹一些本編輯區常用的設置：
- Columns Number – 設置每頁列表顯示多少欄。這裡我設置為“2”。注意，請在設計列表前決定欄的數量，否則所有位置將可能會慘不忍睹！
- Use as Archive Template – 若你是為歸檔頁面添加列表，請開啟。
- Status – 可選取不同狀態的文章，甚至連“待審查”的文章也能顯示。
- Use Random Posts Number -可設置最多和最少的隨機文章數量。(不知道這設置的用意何在…)。
- Posts Number – 顯示的文章數量。若打算顯示所有文章，請把它空掉。
- Is Masonry Grid – 設置為瀑布式佈局。這樣列表結果將像磚塊一樣整齊填滿而忽略高度不一的問題。(開啟本選項，將不會出現“Equal Columns Height”)
- Equal Columns Height – 把每個列表結果的高度統一化。這樣看上去會更整齊。本教學中設為開啟。
- Load More – 這個功能日後我將聯同Pagination的教學再深入講解。
- Post Types – 除了剛開始設置列表時選擇的文章類型外，我們也可“環保地”把列表模板套用到其它文章類型！
- Inject Alternative Listing Items – 這個工功能可為列表注入另外的列表模板從而同時顯示2款列表的外觀。有興趣的話可自行研究。
- Slider – 可將列表設置為滑動顯示。
至於其它“Query”類別設置，將於日後的教學詳細講解。
最後為頁面稍加美化，完成！6個國家悉數呈現！
總結
恭喜你完成第三篇的Crocoblock JetEngine教學！雖然頗為臃長，但本文集合了三個JetEngine的最核心功能：“創造文章類型”、“建立分類”以及主角“文章列表”，尤其這次初次介紹了“Dynamic Contents 動態內容”以及實際應用，對於初學者來說，應該是既複雜又新奇的東西。只要多加練習，不久的將來各位對於動態內容將會更得心應手！想把自己的簡單網頁變成進階高端的美妙作品，繼續留意日後的教學吧😆！
功能更新
2.4.8 (July 21, 2020)
新增行內編輯 (Inline Editing) 列表的內容。
以往要編輯列表(Listings)，我們必須先回到管理後台，再選擇 “JetEngine>Listings>你的列表” 才能進行。這種非實時的操作的確有違Elementor的初衷！現在，只要更新至2.4.8，“inline editing the listing items”將容許你實時編輯列表。
(確切來說是2.4.7，由於發現重大bugs，官方即日更新版本修復了問題），用家們趕快更新吧！小弟試用過，真的解決了困擾已久的問題！)
