七月 19, 2019 | 前端與Vue

【D8教學】Drupal8超新手入門開發系列-views

前言 這次的Drupal8超新手入門開發系列來到了第二篇-views,還沒看過上一篇content type的人可以先觀看這篇[D8教學]Drupal8超新手入門開發系列-content type,看完後緊接著繼續views的開發流程吧! 什麼情況下會使用到views? 超新手入門第一篇建立完content type前我們有拿下面這張圖舉例 正常網頁會先瀏覽列表頁,找到感興趣的項目才會點選其中一個並跳轉到對應內容頁,Drupal的views可以很快速的建立出這類列表頁,所以實際開發上有需要類似的列表都可以用views來完成!

前言

這次的Drupal8超新手入門開發系列來到了第二篇-views,還沒看過上一篇content type的人可以先觀看這篇[D8教學]Drupal8超新手入門開發系列-content type,看完後緊接著繼續views的開發流程吧!

什麼情況下會使用到views?

超新手入門第一篇建立完content type前我們有拿下面這張圖舉例正常網頁會先瀏覽列表頁,找到感興趣的項目才會點選其中一個並跳轉到對應內容頁,Drupal的views可以很快速的建立出這類列表頁,所以實際開發上有需要類似的列表都可以用views來完成!

views 設定教學

首先我們點選架構 > Views > Add view 進入後可以新增view,我們直接來新增一個吧! 每次都要注意機器可讀名稱的修改。 可以看到圖中間的view設定我們選擇Content對應類型為超新手入門開發系列,這樣一來就能把指定的content type內容做成列表頁哦!我們可以從上圖看到有頁面設定及區塊設定,views的好處在於可以直接做成一個頁面或者一個區塊,我們以下圖來舉例:圖中紅色框框內的列表內容與content type有關聯性,而紅框外的內容與content type則沒有,這時候我們就能選擇建立一個區塊等同於紅色框框。 假設點選上圖中文最近新書旁的更多,跳轉到完整的中文最近新書,如下圖。這個完整的中文最近新書頁面就能用views的頁面設定實現。

views細部設定

下圖紅框為新手製作views應注意的重點!第一個格式可以選擇內容顯示的模式,選擇自己適合的呈現方式可以快速完成列表,常用的HTML清單可以配合樣式選項可以自訂ul、li的class,這樣就能針對自訂class寫css。顯示的內容項目也能選擇只有欄位或者將全部內容顯示出來,這邊我們選擇把全部content type的內容顯示出來。設定完就能看到我們建立的列表就完成了。不過這樣的列表頁排版還有很大的問題,下一篇超新手入門開發系列將介紹twig來修改這些列表的內容,配合css將能實現精美的列表頁,敬請期待超新手入門開發系列第三篇-twig。

結論

超新手入門開發系列目前進入到基礎列表頁實現,跟隨這個流程開發相信基本的列表頁都能順利且快速實現,當然中間還有很多細節暫時未提及,等到後續系列文章進入進階篇時將會回過頭來詳細介紹更深入的細節設定!