【Drupal 8】如何使用twig修改views產生的頁面

其實在Drupal8的views已經有了自己的twig命名規則 而這些命名規則也是有優先套用的順序

Twig優先套用順序
    1. [base template name]--[view machine name]--[view display id].html.twig
    2. [base template name]--[view machine name]--[view display type].html.twig
    3. [base template name]--[view display type].html.twig
    4. [base template name]--[view machine name].html.twig
    5. [base template name].html.twig

由於我們修改的是由views生成的東西 base template name的規則也會照著views的設定走

假如你的views格式設定為HTML清單的話就必須使用views-view-list來作為base template name view machine name是建立views時的機器名稱 view display id則是page或是block的機器名稱

display id可以從這邊修改

範例
    格式設定為HTML清單 機器名稱為news_list display-id為page_1
    twig的檔案名稱就會是 views-view-list--news_list--page_1.html.twig

# 知道命名規則了,但是檔案從哪來呢?

我們要怎麼知道當前要使用的twig要複製哪個檔案來做更改呢? 在建立views的時候我們可以選擇想要呈現的格式,而這些格式各自有對應使用的twig

Grid: views-view-grid.html.twig
Table: views-view-table.html.twig
HTML List: views-view-list.html.twig
Unformatted: views-view-unformatted.html.twig

確定好自己選擇的格式之後就可以複製一份出來修改檔名囉!

假如你想要修改的是views裡面的field的話命名規則也是大同小異 比較常用的命名規則

views-view-field--[views machine name]--[page or block machine name]--[field name].html.twig

但你也能這樣使用它

views-view-field--[views machine name]--[field name].html.twig
views-view-field--[field name].html.twig

參考文章:http://redcrackle.com/blog/drupal-8/theme-views-templates