9.1 创建元素,主题化元素和管理前端库

本课内容

  • 龵龳 examples/theme_example 龘龗
  • 龓龏龍龉龅龁
  • 齾齼齹齶齳齯齮齫齪龍龉龅龁
  • 齧齤 Twig 龘齕
  • 齧齤齒龅龁齐齌 JavaScript 鼺 Css
  • 齧齤 Drupal 8 鼯鼭鼬鼨鼧鼥齫齪龘鼢

鼡鼞鼝鼙鼕鼒鼐鼎鼊鼈鼇鼨龍龉龵鼄鼂龅龁鼁黿黻黹黷黳黯黭 JavaScript黫Css 黪黦黥黤黡黠點黜黛黗鼝黕鼕黒黐黏 PHP 黅黥龓龏黤龉龅龁黿黯黭黁麾齫齪黫麻麸 JavaScript 鼺 CSS 齹齶麵鼈鼇鼨麳龉齼麰黜

定义

龅龁

Drupal 麬黿鼈鼇鼨麫麩麾龵麨麥龅龁黿黤黡龅龁麤麢麠黻麝鼧鼥鼨龅龁黜麛麘黛黗麗黤黡麫麩麖麒麐麍鼨麋麊麇麃黿麁鹾黤黡麫麩黿鹺黅齹齶麐鼈鼇鹷齫齪麐鼧鼥鼨鹳鹱鹯鼢黜龅龁黻黹鹮鹭鼂links鼁黿鹧鹥鼂buttons鼁黿鹡麩鼂fields鼁黿鹛麫鼂 images鼁黿鹙鹖鼂nodes鼁黿鹓龗鼂blocks鼁黿鼈鼇鼂pages鼁黪黪黜鹏鹋黠點鹈鹄鹃鹀鸾鸻鼨龅龁黜

齹齶齳龵

PHP 鸹鸵鼯麾鼬鸱鸯鸫龅龁鸧鸦鼨黠點鸣鸢齹齶齳龵鼂 render array 鼁黿黁黻麝鸟齹齶龅龁鼨鹏鹋鸧鸦黜

齹齶齳龵黻麝龓龏龅龁麫麩鸧鸦鼨龅龁鼂鸝黒黁鼨鸾鸻鼁鼺鸜鸚黜鸝黒黿龍龉鹮鹭鹋龍龉鸾鸻 link 鼺鼭鼬 title黫URL 鸎鸋龍龉 HTML <a> 龅龁黜鹮鹭鸆鹋鸂鸀鼧鼥鸟鷽鼨鸜鸚黿鸝黒 class 鼺 id 黜

鹺黦鼨鼞麰麬黛黗鷹麤鷵齼鷱鷰鷬鸎鸋齹齶齳龵黿黤黡齹齶齳龵齾麢鹈鹄鷨鷧鼡鼨鹯鼢黜齹齶齳龵鷣鷠麗龅龁鷜鷛麐鸂鷧鼡鼨鹯鼢黿鷘黅齾齼鸟鷗黕鼨鷣鷠齌鷓黁黗鷐鷌麥麐 HTML 黷黳黜

黏齫齪齼麰鼯黿鷋鷈鷆鼝麾鷄齌麵齹齶齳龵黿龓龏龅龁鸾鸻鼨鷁鷀黯黭龘龗黫鶾鶻鶷鶵鶳鶰麠麾鶮鶪黿鷨黅齹齶齳龵麠麾鶦鶣鶡鸎鸋黷黳鼨龘齕黜

黛黗鼝麃鼊龍龉鶝鶜龅龁黿鷵鶛鶙齹齶齳龵麵鹯麥鷨鶖龅龁鼨齫齪齮麰黜鹏鹋齹齶齳龵麠黻麝黯鶛鶓鶑鼯鼨龍龉鶎

  • #markup
  • #type
  • #theme

鼡鼞麍鸀齳鶈鶅麬黿黛黗鼝鶵鶃 #markup #type

Twig 龘齕

龘齕鹄麗齹齶齳龵鶀鸜麐黷黳鼨鵼鼄黜齾麢龘齕麠黻麝鵹鹋鵶鵴鵱鼨黷黳黜

<aside>
{{ element.aside }}
</aside>

Twig 鹄 Drupal 8 鼯鼭鼬鼨龍龉鷧鸱 PHP 鼨龘齕鵤鵡黜鹺黦鼨鵝鼡黿龘齕鵼鼄鼭鼬 PHP 鼡鵛鶀鵚齹齶齳龵黫鼎鼊 HTML 黷黳黜鹺黦鼨鵝鼡鸆鵘鵔鼭鼬 PHP 鵒齳鷐鹭鹳鹱黷黳黜Drupal 8 鵑鵎鵍鼭鼬龘齕鹳鹱黷黳黜

龘齕鵤鵡鹾麐 Twig 鼭龘齕鼎鼊鵉鶝鶜黿鵉鵆鵅黜

Drupal 鹺黦鼨鵝鼡黿麛麐鵆鵅鼺鶑鵁鼨鵀麛黿鴿麾鴼鴻鴷鴶黏龘齕鵼鼄鴳鴱鴰鶳鶰黜Twig 鴭鷰鴩鴧鸀黿黁鴣鴡鼨麇麃鹋鴞鸱鴛鴚黤鹀鴗鴖黿鴕鴔鶷鴓鸱鼧鼥黦黥鷣鷠鴩鴧鶝鶜黿黦黥鴐鴍鴌鵉鴈鴇鴆鴃黜

JavaScript / 鼐鼢鳿/ 黦黥鳾

Drupal 8 麬黿黛黗麖麒鳽龅龁鶷鶵鼨鹏鹋 JavaScript 鼺 Css 麐龍龉黦黥鳾黿鳻齌鼂鼭鼬 #attached鼁黤龉鳾麵齹齶齳龵黜黤鸆鹄 Drupal 7 鼯麾鵎鵍鼨鳷鼢黿鳳鸂鳱麾鼭鼬黜Drupal 7 鼯鸆鳮鳪鳨鶪鼯齐齌 JavaScript 鼺 CSS黜

鳧鳥龍黡鳢鼨鸜鳟黿JavaScript 鼺 CSS 鼡鵛鳽黏鹺黦鼨 Drupal 鳛鳗麍鹓鳔黜

定义我们的元素

鼡鼞黛黗鼝鼎鼊龍龉鸣鸢 My Element 鼨龅龁黿黁黻麝龍龉鹮鹭黫龍龉鳑鳍鼺龍龉麻鳊齳黜黤龉龅龁鸆麠齌鳇鶷鶵鼨 CSS 鼺 JavaScript黜

<div>
<div>Random Number: 42</div>
<p>Here is a description</p>
<a href="http://www.drupal.org">Drupal.org</a>
</div>

鴶鲸鼕黤龉龅龁黿黛黗鼝鼎鼊龍龉黻麝黤龉龅龁鼨鼈鼇黜

安装我们的模块

黛黗鲴鲱鼎鼊龘龗黿鴣鴡鲸鼕黤龉鲮龅龁鼨鸝鲪鼈鼇黜

theme_example.info.yml

name: Theme Example
type: module
description: Example showing how to add a custom element and add JavaScript and CSS as a library
core: 8.x
package: Examples

theme_example.routing.yml

theme_example.simple:
 path: 'examples/theme-example/simple'
 defaults:
 _controller: '\Drupal\theme_example\Controller\ThemeExampleController::simple'
 requirements:
 _access: 'TRUE'

src/Controller/ThemeExampleController.php鼂鲟鲜鴞鴳鴈鹓鼁

<?php

/**
 * @file
 * Contains \Drupal\theme_example\Controller\ThemeExampleController.
 */

namespace Drupal\theme_example\Controller;

use Drupal\Core\Controller\ControllerBase;

/**
 * Controller routines for theme example routes.
 */
class ThemeExampleController extends ControllerBase {

  public function simple() {
    return [
      'example one' => [
        '#markup' => '<div>Markup Example</div>',
      ],
      'example two' => [
        '#type' => 'my_element',
        '#label' => $this->t('Example Label'),
        '#description' => $this->t('This is the description text.'),
      ],
    ];
  }
}

创建渲染数组

黏黤龉鷱鷰鷬鼂 ThemeExampleController.php 鼁麬黿黛黗鼎鼊鳥鲚龉龅龁齹齶齳龵黜鲗龍龉鹄鴈鷬黿黻麝 example one example two 鲖龉齹齶齳龵黜 example one 鹄鷨鷧鼡鸾鸻鼨齹齶齳龵黜鷨鶝鶜鹯鼢鼨齹齶齳龵黻麝龍龉鲓 #markup 黯黭黷黳鹳鹱鼨龍龉鶵鲒鷆黜

$output = [
 '#markup' => '<div>Markup Example</div>',
];

example two 黤鼐鴩鴧鲁鱾龍黡鼨齹齶齳龵黻麝龍龵黯 # 麐黦鱺鼨鸜鸚黜

鲗鱸龉齹齶齳龵鷨鶖鼝麥麐黛黗鼨龅龁黷黳黜麾 #type my_element 龓龏黿黻麝 label description 鸜鸚黜麘鶈黁鴷黻麝鹮鹭鹷麻鳊齳鱵鲪龅龁黜黤黡黛黗鼝黏黅鼇齐齌黜

$output = [
 '#type' => 'my_element',
 '#label' => $this->t('Example Label'),
 '#description' => $this->t('This is the description text.'),
];

用渲染元素插件定义一个元素

黛黗鷹麤鷵齼龅龁麾黻麝黏鷱鷰鷬鼯鼨鱬鱪黿黛黗鱧鴶龓龏龅龁鹄鱣鱢黿黯黭黁鼝黒黐麾齫齪黜黛黗鼝鼭鼬 #type 黿鼭鼬龍龉齹齶龅龁鱞鼄黜鲂鼧鼥鱞鼄龍鼐黛黗黏 src/Element/ 麬鼎鼊龍龉鲮鸾黿鱚鱗鷧鸾 RenderElement 黜黤鹀鹯鼢鱕鱒黛黗麗龅龁鶷鶵鼨鹏鹋鸧鸦鼺鶳鶰鸯鸫黏龍龉鵼鼄鴳黜

鶃鴚

黤龉龅龁鼨鶃鴚龓龏龅龁鱎黿黤鼐鷣鷠鱊鸟黯鱈麵黁黜黛黗齐齌鶃鴚 @RenderElement 黿鱃鱁鰿麐黛黗鼨 #type 鱎黜

getInfo()

getInfo() 鵒齳龓龏鳥黛黗鼨龅龁鹄鼒鼐鼨麇麃黜黛黗鴣鴡鳥鷋鷈鷆黿鸆鼬 #type 鶷鰷鼨鱎鹡齐齌鳥龍龉 #theme 鸜鸚黜鰴黅黛黗鼝黏龘龗鼨 hook_theme() 鴳龓龏黤龉 #theme 黜

麍鸀齳鸾鰱鼨鰰鰿鷹麤鰮麵 YML 鵼鼄黿鳳鶾鶻鷣鷠黏 Drupal 8 鴳鰧鹄鹋黡鲁鱾黜

#pre_render 鵒齳

黛黗鼨龵鼄黻麝龍龉 #pre_render 鵒齳黿鼬鸱齫齪鷧鼡鼨齹齶齳龵黯黭麐龘齕鼎鼊鰤鴶鼨麫鰣黜Drupal 7 鼯黿鰢齫齪鵒齳鸢黤黡鰟鱬黜鰢齫齪鵒齳鰜鷘鸯黏黿鵑鹄鴓龘龗鼺鶾鶻鹋鰙龏黿鴷鰘龓龏龅龁黜黏 pre_render 鵒齳麬黿黛黗鼭鼬鸜鸚鼎鼊鳥龍龉齹齶齳龵黿黻麝鰕龉鱵鲪鼺龍龉鸜鸚 #random_number

src/Element/MyElement.php 鼂鲟鲜鴞鴳鴈鹓鼁

hook_theme()

hook_theme() 麬黿鰑龓鼭鼬齹齶龅龁龘鼢黿鱃鴣鴡鳥龍龉 Twig 鸜鸚 element 黜鼭鼬鷨鰍鰌鼨鰉鹄齹齶龅龁龘鼢鼺 Twig 龘齕黜黏鹺黦鼨 Drupal 鵝鼡黿麍鸀齳龅龁鸧鸦麾龓龏黏 hook_theme() 鴳黿鳳黏 Drupal 8 麬黿黤黡鶳鶰鷛黏黏鱞鼄鴳黜

theme_example.module

<?php

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

<?php
/**
 * @file
 * Contains \Drupal\theme_example\Element\MyElement.
 */

namespace Drupal\theme_example\Element;

use Drupal\Core\Render\Element\RenderElement;
use Drupal\Core\Url;

/**
 * Provides an example element.
 *
 * @RenderElement("my_element")
 */
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'],
      ],
    ];
  }

  /**
   * Prepare the render array for the template.
   */
  public static function preRenderMyElement($element) {
    // Create a link render array using our #label.
    $element['link'] = [
      '#type' => 'link',
      '#title' => $element['#label'],
      '#url' => Url::fromUri('http://www.drupal.org'),
    ];

    // Create a description render array using #description.
    $element['description'] = [
      '#markup' => $element['#description']
    ];

    $element['pre_render_addition'] = [
      '#markup' => 'Additional text.'
    ];

    // Create a variable.
    $element['#random_number'] = rand(0,100);

    return $element;
  }

评论 (写第一个评论)