[Drupal 筆記] 從 file-link template,學習 Template Preprocess function

很長一段時間苦惱於「附加檔案」的外觀,直到最近,受益於學習了 Drupal API,終於知道怎麼對模板進行深度自訂。

Before

After

before after

什麼是 "Preprocess function"

讓我們直接從 template 來看。我用的版型(theme)是 "Bootstrap Barrio",它的 file-link.html.twig 如下:

{#
/**
* @file
* Theme override for a link to a file.
*
* Available variables:
* - attributes: The HTML attributes for the containing element.
* - link: A link to the file.
* - icon: The icon image representing the file type.
*
* @see template_preprocess_file_link()
*/
#}
{{ attach_library('bootstrap_barrio/file') }}
<span{{ attributes }}>{{ icon }} {{ link }}</span>

我們可以看到,最後的輸出是由各種 variables 組成的,包括: attributes icon link 等,註解裡的 "Available variables" 有說明它們各自的用途;註解也指出,詳情請見 template_preprocess_file_link()

這個 template_preprocess_file_link() ,就是所謂的 "Preprocess function"。"Preprocess function" 是各種版型用來定義 variables 的地方,我們會把它寫在各版型的 *.theme 檔案裡面,例如 Barrio 的 bootstrap_barrio.theme

如何複蓋(override)既有的 template preprocess function?

簡單的說就是:根據 template 註解裡的提示,google 找出原始的 preprocess function,例如 file-link.html.twig 的就是在這裡(是 file.module 裡的一段),把它整段複製起來,貼到我們自訂版型的 *.theme、或是自訂模組的 *.module 裡。

我的成果請見此


要注意的小地方是:

  • 記得 function 名稱要改一下就是了。例如我的版型名叫 "otakupapa",就要改成 function otakupapa_preprocess_file_link(&$variables) {...
  • 要注意原本的程式有沒有引用非核心的 Class ,例如我們這個 function 裡,就有用到 File Class,如果沒特別引用,程式會跑不動。要在 function 前面加上:
use Drupal\file\Entity\File;

  • 承上,但要怎麼檢查必須引用的 Class 呢?
    • 說真的我也不知道怎樣比較有效率,我這次是抄 Drupal Answers 的。
    • 也許可以對照原始檔案(在此是 file.module),把引用的全部貼上去就不會錯?
    • 也許有什麼 debug 方法可以使用?不曉得,我還在學習中。

標籤 (Tags)