Skip to main content

Drupal 8 教學 - 如何增加側邊欄

Submitted by admin on Thu, 12/19/2019 - 09:16

這篇文章會幫助大家在自己的Drupal網站建立一個側邊欄,以及介紹Drupal中Block的概念。

側邊欄能夠呈現的內容非常自由,可以是單篇文章內容,文章錦集,檔案列表,圖片集等等...只要是views模組能顯示的東西通通可以放進側邊欄裡面。

除了內容自由之外,也能控制這個欄位的顯示頁面或者是對象。例如我們可以設定成使用者必須訪問某個頁面,或是具備已註冊的身份時才會出現。

下面這張圖片左邊黑色方框的內容是我們的成果預覽。在這個範例中我們會對欄位進行下列設定:

  • 使欄位只出現在特定頁面
  • 設置一個欄位標題
  • 顯示內容為可點擊文章標題

並在文末介紹如何變更細節設定,產生右邊的黑色方框,包含文章最後更新時間的內容。

drupal add side bar result demo

     

    還記得我們在Drupal 如何增加主頁面選單當中曾經做過類似的事情嗎。我們當時把「會呈現文章標題列表的Views物件」跟一個Page進行關聯,因此我們可以透過點擊主選單按紐來連結網址,進而去訪問這個呈現Views物件內容的頁面。

    但這次的差異在於,我們要把上述的Views物件跟一個Block進行關聯,用Drupal的語言來描述就是: Views add block display。

    不同於Page,Block在Drupal中是一個輕量化的容器,本身並不帶有一個網址屬性。Block跟我們上一篇所介紹的Menu一樣,必須被放置在某個佈景主題所劃分出的區域當中才能進行訪問。

    在開始之前,讓我們先用Drupal的語言來描述等一下要進行的步驟:

    1. 建立一個會呈現文章標題列表的Views物件並增加一個Block Display。
    2. 將上述的Block放置在預設主題名為Sidebar first的區域中。
    3. 設置被放置在Sidebar first中的Block的出現條件。

     

    好了,讓我們開始吧。

     

    1.建立一個會呈現文章標題列表的Views物件並增加一個Block Display。

    在上一篇增加主頁面選單的教學中,我們建立了一個Views物件,這個物件的顯示規則是呈現所有帶有"#module" tag的文章標題。我們在上一篇文章中已經把這個物件與Page進行關聯了,現在我們要把這個Views物件新增一個Block Display。

    我們可以在管理員選單Structure > Views當中找到我們上次建立的物件,觀察藍色框框內的Page字樣,代表這個Views物件已經建立過Page Display了,還帶有/drupal_module_introduction的路徑名稱,因此我們目前可以透過連結到Page來存取這個Views物件。

    現在,點擊module_introduction物件下的Edit按鈕,並在Views物件管理頁面的左上角點擊「+Add」並選擇「Block」,如下圖所示。

    drupal views add block display

     

    接著我們可以看到左上角的Display底下已經多了一個「Block*」的符號,代表我們新增了一個Block Display。星號的意思是這次做的變更還沒被存檔,要按下左下角的Save才算是正式儲存變更,在儲存之前都是可以按下Cancel裝做甚麼事都沒發生的。

    我們希望新增的側邊欄有一個標題較叫做「文章列表」,因此我們要點擊下圖左上角的Title字樣來輸入我們想要的名稱。這邊注意一點,在名稱編輯欄位中預設是For All displays,我們要把它改成For All block。這是因為在這個Views物件底下已經有一個Page Display了,也就是我們在上一篇文章中建立的頁面,如果選擇For All displays的話連之前頁面的標題也會一起變成「文章列表」。

    然後在畫面右方的BLOCK SETTINGS底下的Block name我們把它設置成「模組介紹文章列表」,這是給管理員看的的名稱,不會顯示在外部。

    最後我們可以在畫面右下角的PAGER選擇每頁要顯示多少物件,完成設定後按下Save儲存。

    在設定過程中我們可以捲動這個頁面,在下方的預覽視窗中看見目前的設定的輸出樣式,在根據結果隨時微調設定的內容。

    drupal views modify block display

     

     

    2.將上述的Block放置在預設主題名為Sidebar first的區域中。

    在上一步我們建立了一個Block,現在我們要把這個名為「模組介紹文章列表」的Block放置到我們希望出現的佈景主題區域中。

    點擊管理員列表Structure > Block layout,根據上一篇增加主頁面選單的文章中,我們可以知道側邊欄放置的目標位置是名為「Sidebar First」的區域。找到這個區域後按下區域名稱旁邊的「Place Block」按鈕,接著在彈出式選單中找到我們剛剛建立的「模組介紹文章列表」Block,接著再按下旁邊的「Place Block」按鈕。

    當Block清單中的項目很多的時候,除了捲動瀏覽表單之外,我們也可以透過關鍵字檢索的方式來加快我們找到目標的速度。

    drupal place block in theme region

    3.設置被放置在Sidebar first中的Block的出現條件。

    按下「模組介紹文章列表」的place block按鈕後,應該會出現下圖的頁面。這個設定頁面可以讓我們控制這個Block的出現條件。

    最上面的Display title可以選擇這個Block再顯示時是否要出現Views內設定好的標題。Items per block可以設定這個Block內有要顯示幾個物件,這個選項跟View有點重複了,但是是以數目小的設定為準。Override title勾選的話則可以在顯Block時使用這裡設定的標題覆蓋Views內設定的標題。

    下面的Visibility欄位可以設定這個Block要滿足何種條件才會出現。

    前面兩個Content type與Content types可以設定這個Block要在何種內容類別內出現,預設的有article以及Basic page兩個內容類別,不勾選即代表不限制。相同內容的會分成兩個欄位是因為來自不同的模組,算是Drupal顯示設定上的一些問題,但不影響使用,有需要的話擇一勾選即可。在本範例中這個欄位請不要勾選任何選項。

    接著Pages分頁可以控制這個Block要出現,或者是不要出現在特定的頁面中。在這個範例中我們希望我們的「模組介紹文章列表」出現在模組介紹的頁面內,因此輸入/drupal_module_introduction並勾選show for listed page。

    Roles分頁可以決定這個Block要顯示在何種使用者面前,預設使用者分別有匿名、已註冊以及管理員三種類別,在這裡不勾選一樣代表不限制。

    最後是否呈現出這個Block取決於上面的規則是否全部滿足。例如如果我們在這個範例中設置了「在article中出現」且「在/drupal_module_introduction中出現」,但由於/drupal_module_introduction屬於Views page不屬於article類別,會產生這個Block不會出現在任何頁面中的結果。

    按下Save之後就可以在/drupal_module_introduction頁面看到我們的成果了。

    drupal configure block display condition

     

    4.新增「最後更新時間」欄位顯示

    目前的Block樣式應該是這篇文章最一開始成果預覽的左邊的方格內容,現在我們要變更一點細節設定,產生右邊方格內的Block顯示。

    我們接著要對Block display進行的操作列表如下:

    1. 在Field欄位中新增Content last modified時間戳記。
    2. 將Field欄位中的Content title定義為Group title
    3. 隱藏Field欄位中的Content title

    在開始進行操作之前,我們先花一小段時間來解釋為何要這麼做。

    在Views Display當中,我們可以指定要呈現出多筆Field。在最一開始的設定中我們只指定了Content:title這個單一的元素做為要顯示的資料,因此我們會看到下方的呈現形式

    • Content:titleA
    • Content:titleB
    • Content:titleC
    • ...

    當我們完成第一步後,這個Block Display會有以下的資料形式

    • Content:titleA
    • Content:LastModifiedDateA
    • Content:titleB
    • Content:LastModifiedDateB
    • Content:titleC
    • Content:LastModifiedDateC
    • ...

    在上面的例子中,我們一共有A B C三筆資料。接著我們會在第二步中把每一筆資料建立成一個Group,並選擇將每一筆資料中的Content:title內容作為Group title。所以我們看到的Block Display會有以下形式。

    • Content:titleA
      • Content:titleA
      • Content:LastModifiedDateA
    • Content:titleB
      • Content:titleB
      • Content:LastModifiedDateB
    • Content:titleC
      • Content:titleC
      • Content:LastModifiedDateC
    • ...

    在第三步中,我們對使用者隱藏作為Field欄位中的Content:title,因此Block Display看起來就會變成這樣。

    • Content:titleA
      • Content:LastModifiedDateA
    • Content:titleB
      • Content:LastModifiedDateB
    • Content:titleC
      • Content:LastModifiedDateC
    • ...

     

    現在我們重新回到「模組介紹文章列表」的Block Display的設定頁面。按照下圖,先在Field::Add中新增一個Content change的欄位後,依序執行步驟二、三,執行的同時也可以看看頁面最下方Preview中的Block結構變化。執行完畢後按下Save,應該就可以看到上面說明中最後一步的Block呈現模式了。

    drupal views group display setting

     

    enjoy~