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 龊龈黨鹸鹵鸓鹖鸏鸎鼷鼴鸲鸍鼺鸭鸩鼈鸮黜 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;
  }

评论 (写第一个评论)