指南/編輯網站/範本/變更「查詢迴圈」區塊的外觀

變更「查詢迴圈」區塊的外觀

你可使用「查詢迴圈」區塊,在網站上以不同的視覺版面形式顯示部落格文章 (或其他內容類型,例如頁面、顧客評論或專案)。本指引會協助你調整內容在「查詢迴圈」區塊的呈現方式。

選擇查詢迴圈版面形式

你可以依照下列步驟,在「查詢迴圈」區塊中選擇不同的設計來呈現文章 (或其他類型的內容):

  1. 在網站的儀表板,前往「外觀」→「編輯器」
  2. 選取你要編輯的範本,或按一下網站預覽畫面以編輯首頁。
  3. 使用「清單檢視」以選取「查詢迴圈」區塊。
  4. 在區塊上方或下方顯示的工具列中,按一下「變更設計」按鈕。
  5. 瀏覽預先設計的版面形式系列,按一下你最喜歡的樣式即可套用。
  6. 接著你可以依照本指引後續章節中的步驟,進一步自訂版面形式。

自訂文章範本

「查詢迴圈」區塊中的「文章範本」包含每篇文章的個別元素,例如標題、日期、精選圖片、內容或摘要等。

自訂文章元素

你可以在「文章範本」中,顯示下列文章元素:

  • 標題:顯示每篇發表內容的標題。
  • 日期:顯示每篇內容的發表日期。
  • 修改日期:顯示文章上次編輯的日期。 
  • 內容:顯示每篇文章的完整發表內容。
  • 文章摘要:顯示每篇發表內容的簡短摘要,並可自訂「閱讀更多內容」的連結文字。
  • 精選圖片:顯示你為內容設定的精選圖片
  • 文章分類:顯示你為發表內容指派的分類
  • 文章標籤:顯示你為內容新增的標籤
  • 分頁:顯示上一篇和下一篇文章的連結。
  • 作者:顯示文章作者的詳細資料,例如姓名、大頭貼和個人簡介。
  • 查詢總數:顯示查詢結果總數。
  • 無結果:新增文字或區塊,若系統未傳回任何查詢結果時即可顯示。

你的佈景主題可能包含部分或所有區塊。你可以用「清單檢視」檢視目前的區塊結構,並視需要新增移動刪除個別元素:

展開的清單檢視,顯示查詢迴圈中不同的區塊。
「清單檢視」顯示「文章範本」中使用的元素

上述許多元素在區塊設定側邊欄中都有各自專屬設定。例如,你可以選取「日期」區塊來設定日期顯示的格式,並在日期新增導回文章的連結。在多數情況下,區塊也包含包含標準的區塊設定,如顏色文字設計尺寸進階區塊設定

選擇清單或格狀顯示版面形式

你可以在文章範本中,將內容調整為清單格狀顯示格式:

  1. 在「清單檢視」中選取內嵌於「查詢迴圈」區塊的「文章範本」。
  2. 在區塊上方或下方顯示的工具列中,選擇清單格狀顯示圖示。
  3. 按一下「儲存」按鈕。
已在「清單檢視」中選取「文章範本」。箭頭指向區塊工具列中的清單和格狀顯示圖示。

新增分頁至查詢迴圈

若要為「查詢迴圈」區塊中顯示的文章新增分頁功能,請依照下列步驟操作:

  1. 從「清單檢視」展開「查詢迴圈」區塊,然後選取「文章範本」:
已選取「查詢迴圈」底下的「文章範本」。
透過「清單檢視」顯示的「文章範本」區塊,
  1. 按一下「文章範本」旁的省略符號 (三點圖示) 並選取「在後方新增」。
  2. 按一下「+」區塊插入工具,然後搜尋「分頁」。按一下即可新增至文章範本,將「分頁」區塊顯示於「文章範本」之後:
已選取「查詢迴圈」底下的「分頁」。
  1. 視需要調整側邊欄中的設定,包括方向、顏色,以及是否顯示含分頁連結的箭頭或曲線符號。
  2. 按一下「儲存」按鈕,套用變更。

調整查詢迴圈的寬度

你可以在「查詢迴圈」區塊自訂元素的寬度

  1. 從網站的儀表板,前往「外觀」→「編輯器」
  2. 選取你要編輯的範本,或按一下網站預覽畫面以編輯首頁。
  3. 開啟「清單檢視」並選取現有的「查詢迴圈」區塊
  4. 檢視右側邊欄中的區塊設定。如果沒有出現側邊欄,請按一下右上角的「設定」圖示叫出設定。此圖示外觀為正方形中有兩個大小不同的欄位:
編輯器中的「設定」圖示,下方顯示「設定」的工具提示。
按一下「設定」圖示即可開啟區塊設定
  1. 將名為「內部區塊使用內容寬度」的設定切換為開啟
  2. 在「內容寬度」方塊中,以像素 (或選擇百分比或 em 等其他單位) 為單位自訂內容的一般寬度。
  3. 為內容的寬幅寬度設定自訂值,此值會套用到設定中設為「寬幅」的區塊。
  4. 在「對齊方式」底下,設定「查詢迴圈」中的內容對齊頁面的左側、中間或右側。
  5. 按一下「儲存」按鈕,儲存變更。
「查詢迴圈」區塊版面形式設定顯示「內部區塊使用內容寬度」已切換為開啟。
Copied to clipboard!