移至主內容
首頁  >  Drupal目錄  >  為自定義模組創建自定義的 Twig 模板

為自定義模組創建自定義的 Twig 模板

Tag :
twig, custom
Written by Shiuan on 20 December 2023

在 Drupal 8 中的一般想法是,你要避免在自定義模組的 PHP 代碼中直接創建 HTML。您希望這些內容放在Twig 模板中。要在您的模組中創建新的 Twig 模板,請按照以下步驟進行。

步驟#1:在 .module 檔案中定義 hook_theme

如果您的模組中還不存在 [module].module 檔案,請創建一個,然後添加代碼,定義每個 Twig 模板。陣列中每個項目的鍵是您稍後需要呼叫模板的名稱。檔名請勿使用破折號。

/**
* Implements hook_theme().
*/
function [module]_theme($existing, $type, $theme, $path) {
 return [
   'my_template' => [
     'variables' => ['test_var' => NULL],
   ],
 ];
}

詳情請見:hook_theme()


步驟#2:創建 Twig 模板

在您的模組中,templates folder 內,創建你的 Twig 模板。檔案名稱必須與你在 hook_theme() 中定義的一致(請確保將底線替換為破折號)。在這種情況下,檔案名稱將為 my-template.html.twig

以下是本文用來測試的文件:

{# [module]/templates/my-template.html.twig #}
<p>Test twig template!</p>

<p>test_var: {{ test_var }}</p>

這樣做的美妙之處在於,如果在你的主題中不存在此文件,則將使用在模組中定義的模板文件,詳情請見:file does not already exist in your theme。只需將文件放入主題的 templates folder內,清除快取(使用 drush cache-rebuild),它就會讀取該文件。

你可以將文件放入站點主題中任何嵌套的子文件夾中,以保持事物井然有序。


步驟#3:呼叫模板

以下是三種不同情況的使用範例。您可使用適合您的範例。

步驟#3.1:從控制器呼叫

在返回您的渲染陣列的地方(無論是從路由 yml 檔案中調用的控制器方法,還是其他地方),呼叫你的 Twig 模板。以下是一個從模組的路由 yml 檔案中調用的測試模組範例。

<?php
/**
* @file
* Contains \Drupal\test_twig\Controller\TestTwigController.
*/

namespace Drupal\test_twig\Controller;

use Drupal\Core\Controller\ControllerBase;

class TestTwigController extends ControllerBase {
 public function content() {

   return [
     '#theme' => 'my_template',
     '#test_var' => $this->t('Test Value'),
   ];

 }
}


步驟#3.2:渲染為HTML

如果您需要將此作為代碼中不同工作流程的一部分,還可以使用渲染服務方法來建構輸出: 

$renderable = [
 '#theme' => 'my_template',
 '#test_var' => 'test variable',
];
$rendered = \Drupal::service('renderer')->renderPlain($renderable);

請記住,這是一個基本的執行,並且不做任何類型的緩存。渲染 API 概述文件包含有關如何添加緩存的更多訊息,詳情請見 Render API Overview。談到緩存,變數名稱將被緩存,如果您要更改它們(例如,從 "test_var" 更改為 "my_var"),您將需要刷新快取。


步驟#3.3:渲染作為另一個外掛(例如區塊)的一部分

你還可以將渲染陣列用作自定義的外掛(例如區塊)的輸出:

<?php

namespace Drupal\[module]\Plugin\Block;

use Drupal\Core\Block\BlockBase;

/**
* Provides a 'My Template' block.
*
* @Block(
*   id = "my_template_block",
*   admin_label = @Translation("My Template")
* )
*/
class MyTemplateBlock extends BlockBase {

 /**
  * {@inheritdoc}
  */
 public function defaultConfiguration() {
   return ['label_display' => FALSE];
 }

 /**
  * {@inheritdoc}
  */
 public function build() {
   $renderable = [
     '#theme' => 'my_template',
     '#test_var' => 'test variable',
   ];

   return $renderable;
 }

}

有關上述範例的更多訊息,請參閱 Block API overview

返回Drupal
首頁  >  Drupal  >  為自定義模組創建自定義的 Twig 模板

為自定義模組創建自定義的 Twig 模板

Tag :
twig, custom
Written by Shiuan on 20 December 2023

在 Drupal 8 中的一般想法是,你要避免在自定義模組的 PHP 代碼中直接創建 HTML。您希望這些內容放在Twig 模板中。要在您的模組中創建新的 Twig 模板,請按照以下步驟進行。

步驟#1:在 .module 檔案中定義 hook_theme

如果您的模組中還不存在 [module].module 檔案,請創建一個,然後添加代碼,定義每個 Twig 模板。陣列中每個項目的鍵是您稍後需要呼叫模板的名稱。檔名請勿使用破折號。

/**
* Implements hook_theme().
*/
function [module]_theme($existing, $type, $theme, $path) {
 return [
   'my_template' => [
     'variables' => ['test_var' => NULL],
   ],
 ];
}

詳情請見:hook_theme()


步驟#2:創建 Twig 模板

在您的模組中,templates folder 內,創建你的 Twig 模板。檔案名稱必須與你在 hook_theme() 中定義的一致(請確保將底線替換為破折號)。在這種情況下,檔案名稱將為 my-template.html.twig

以下是本文用來測試的文件:

{# [module]/templates/my-template.html.twig #}
<p>Test twig template!</p>

<p>test_var: {{ test_var }}</p>

這樣做的美妙之處在於,如果在你的主題中不存在此文件,則將使用在模組中定義的模板文件,詳情請見:file does not already exist in your theme。只需將文件放入主題的 templates folder內,清除快取(使用 drush cache-rebuild),它就會讀取該文件。

你可以將文件放入站點主題中任何嵌套的子文件夾中,以保持事物井然有序。


步驟#3:呼叫模板

以下是三種不同情況的使用範例。您可使用適合您的範例。

步驟#3.1:從控制器呼叫

在返回您的渲染陣列的地方(無論是從路由 yml 檔案中調用的控制器方法,還是其他地方),呼叫你的 Twig 模板。以下是一個從模組的路由 yml 檔案中調用的測試模組範例。

<?php
/**
* @file
* Contains \Drupal\test_twig\Controller\TestTwigController.
*/

namespace Drupal\test_twig\Controller;

use Drupal\Core\Controller\ControllerBase;

class TestTwigController extends ControllerBase {
 public function content() {

   return [
     '#theme' => 'my_template',
     '#test_var' => $this->t('Test Value'),
   ];

 }
}


步驟#3.2:渲染為HTML

如果您需要將此作為代碼中不同工作流程的一部分,還可以使用渲染服務方法來建構輸出: 

$renderable = [
 '#theme' => 'my_template',
 '#test_var' => 'test variable',
];
$rendered = \Drupal::service('renderer')->renderPlain($renderable);

請記住,這是一個基本的執行,並且不做任何類型的緩存。渲染 API 概述文件包含有關如何添加緩存的更多訊息,詳情請見 Render API Overview。談到緩存,變數名稱將被緩存,如果您要更改它們(例如,從 "test_var" 更改為 "my_var"),您將需要刷新快取。


步驟#3.3:渲染作為另一個外掛(例如區塊)的一部分

你還可以將渲染陣列用作自定義的外掛(例如區塊)的輸出:

<?php

namespace Drupal\[module]\Plugin\Block;

use Drupal\Core\Block\BlockBase;

/**
* Provides a 'My Template' block.
*
* @Block(
*   id = "my_template_block",
*   admin_label = @Translation("My Template")
* )
*/
class MyTemplateBlock extends BlockBase {

 /**
  * {@inheritdoc}
  */
 public function defaultConfiguration() {
   return ['label_display' => FALSE];
 }

 /**
  * {@inheritdoc}
  */
 public function build() {
   $renderable = [
     '#theme' => 'my_template',
     '#test_var' => 'test variable',
   ];

   return $renderable;
 }

}

有關上述範例的更多訊息,請參閱 Block API overview