create custom twig(Render Array)

发表于

概念

  • Elements
    在drupal中，页面的各个部分被组织微elements。这些elements通常包括其他elements。
    比如：links, buttons, fields, images, nodes, blocks, pages都是elements。

  • Render arrays
    用来存储关于elements信息的php概念叫做Render arrays.
    Render arrays包括以下三种类型

    • #markup
    • #theme
    • #type

  • Twig templates
    Twig templates是将Render Arrays转换成markup的文件。

render pipeline

d8_render_pipeline_1.png

Overview of the available patterns

D8RenderArrayEntireMap.png

Render arrays #theme 方式创建模板

  1. 在hook_theme中注册模板

    1
    2
    3
    4
    # for #theme
    'my_template' => [
    'variables' => ['test_var' => NULL],
    ],

  2. 在controller中调用模板

    1
    2
    '#theme' => 'my_template',
    '#test_var' => $this->t('Test Value'),

  3. 渲染步骤1中注册的模板
    templates/my-template.html.twig

    1
    2
    3
    <p>Test twig template!</p>
    <p>test_var: {{ test_var }}</p>

Render arrays #type 方式创建模板

  1. 在hook_theme中注册模板

    1
    2
    3
    4
    # for #type
         'my_element' => [
             'render element' => 'element',
         ],

  2. 在controller中调用模板

    1
    2
    '#type' => 'my_element',
    '#label' => $this->t('Example Label'),

  3. 调用RenderElement子类模板逻辑
    src/element/MyElement.php

    1
    2
    3
    4
    5
    6
    7
    8
    class MyElement extends RenderElement {
      # 定义element结构
      public function getInfo() {
      }
      # 设定element值
      public static function preRenderMyElement($element) {
      }
    }

  4. 渲染步骤1中注册的模板
    templates/my-element.html.twig

    1
    2
    3
    4
    5
    <div class="myElement">
        <div class="randomNumber">Random Number: {{ element['#random_number'] }}</div>
        <p>{{ element.description }}</p>
        {{ element.link }}
    </div>

修改Render arrays的值

  1. hook_preprocess_HOOK

    1
    2
    3
    function test_twig_preprocess_my_template(&$variables) {
        $variables['test_var'] = 'Test Value changed by hook_preprocess_HOOK';
    }

  2. 修改block Render arrayhook_block_view_alter 和 修改entity Render arrayhook_entity_view_alter
    刚构建完Render arrays时修改

    1
    2
    3
    4
    5
    function test_block_view_alter(array &$build, \Drupal\Core\Block\BlockPluginInterface $block) {
        if ($build['#plugin_id'] == 'system_menu_block:menu-title-link') {
            $build['#configuration']['label'] = '<a href="/test5">xxxx</a>';
        }
    }

参考资料

Creating Elements, Theming Elements, and Managing Front-end Libraries
Create custom twig templates from custom module