drupal8 － 自定义theme工作流程

模板引擎改为 Twig 使模板创建更简单，更安全。
调试工具：
DEVEL KNIT
sites/default/services.yml

twig.config:
    debug: true

自定义theme是如何工作的。

routing 找到controller，controller函数return数组，里面有'#type' => 'my_element', 就会找到my_element

return [
      'example one' => [
        '#type' => 'my_element',
        '#description' => $this->t('This is the description text one.'),
        '#attached' => [
          'library' => [
            'theme_example/sample_library',
          ],
        ],
      ],

class MyElement extends RenderElement {
  /**
   * {@inheritdoc}
   */
  public function getInfo() {
    $class = get_class($this);
    return [
      '#theme' => 'my_element',
      '#label' => 'Default Label',
      '#description' => 'Default Description',
      '#pre_render' => [
        [$class, 'preRenderMyElement'],
      ],
    ];
  }

my_element是个theme ，去找到hook_theme

/**
 * Implements hook_theme().
 */
function theme_example_theme() {
  $items = [
    'my_element' => [
      'render element' => 'element',
    ],
  ];
  return $items;
}

render的时候发现有preRender，preRenderMyElement 定义element参数值。

  public static function preRenderMyElement($element) {
      $element['description'] = [
         '#markup' => $element['#description']
      ];
    return $element;
  }
}

如果此时还有preprocess之类的也会先执行。
完成之后，theme elment 按照twig的样子打印出结果。

<div>
  <div>Random Number: {{ element['#random_number'] }}</div>
  <p>{{ element.description }}</p>
  {{ element.link }}
</div>

其中library，css，js需要先定义theme_example.libraries.yml, 调用的地方type和attached一起才生效。

sample_library:
  css:
    theme:
      css/example.css: {}
  js:
    js/example.js: {}
  dependencies:
    # jQuery is not included by default, so we add it as a dependency
    - core/jquery
    # We are also going to use jQuery.once so that code doesn't trigger multiple times.
    - core/jquery.once
    # drupal and drupalSettings are not included by default either.
    - core/drupal