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;
  }

评论 (写第一个评论)