You are here

Drupal8中页面快速构建

作者:亚艾元技术部

 Drupal8中,对于复杂的页面,构建页面的方式很多,基于page manger,创建一个node,覆写模板文件,这里介绍一个简单易学的,对于从java转学Drupal的来说,易于掌握。对于学习Drupal的初学者,先掌握一种方式,完成任务,后面再逐步扩展知识。

   首页安装亚艾元开发content template模块,这个模块暂时还没有传到drupal.org上。

   创建一个模块mypages,增加info.yml文件:

name: My Pages
type: module
description: 'My Pages.'
core: 8.x

 

增加一个mypages.routing.yml文件:

mypages.index:
  path: '/index'
  defaults:
    _title: '首页'
    _controller: '\Drupal\mypages\Controller\MypagesIndexController::indexPage'
  requirements:
    _permission: 'access content'

  增加对应的控制器类:

namespace Drupal\mypages\Controller;
use Drupal\Core\Controller\ControllerBase;
 
 
/**
 * Returns responses for feed routes.
 */
class MypagesIndexController extends ControllerBase {
 
  /**
   * Presents the feeds feed creation form.
   *
   * @return array
   *   A form array as expected by drupal_render().
   *
   * @todo When node page gets converted, look at the implementation.
   */
  public function indexPage() {
 
 
       $content['top'] = '<p>top 内容</p>';
       $content['left'] = '<p>left 内容</p>';
       $content['tight'] = '<p>right 内容</p>';
      
    $build['content'] = [
      '#theme' => 'content',
      '#content' => $content,
    ];
    //$build['#attached']['library'][] = 'mypages/index';
 
    return $build;
  }
}

 

在你的主题的templates目录下面,创建一个content文件夹,新建一个文件content--index.html.twig

添加以下内容:

<section id="content-top">
	<div class="">
       {{ top }}
	</div>
</section>
<section class="content">
  <div class="row">
    <div class="col-md-8">{{ left }}</div>
	<div class="col-md-4">{{ tight }}</div>
  </div>
</section>

 

在controller里面定义的变量,可以直接在模板文件 里面输出。

$content['left'] = '<p>left 内容</p>';  //控制器里面的代码。

<div>{{ left }}</div>  //模板文件中的输出这个变量。

 

启用这个模块即可。

 

 

为这个页面增加自己的js和css文件。

 

新建mypages.libraries.yml文件,里面添加以下代码:

index:
  version: VERSION
  js:
    libraries/index/index.js: {}
  css:
    theme:
      libraries/index/index.css: {}    
  dependencies:
- core/drupal

在模块的根目录下面新建一个libraries目录,再建一个index目录,里面新增两个文件,一个js文件,一个css文件。mypages\libraries\index下面的index.js文件,添加以下内容:

/**
 * @file
 * index behaviors.
 */
 
(function ($, Drupal) {
 
  'use strict';
 
 
  /**
   * Add custom js.
   *
   * @type {Drupal~behavior}
   *
   * @prop {Drupal~behaviorAttach} attach
   *
   */
  Drupal.behaviors.index = {
    attach: function (context, settings) {
              console.log('success');
    }
  };
 
}(jQuery, Drupal));

这个文件里面,我们只调用了console.log,这里是Drupal的标准写法,当然也可以使用jquery的常用标准写法,也能工作。使用Drupal的标准写法,可以通过Drupal后端向前端传递数据,比较方便。如果没有这个需求,使用jquery的标准写法也可以。

增加一个index.css文件,添加以下内容:

/**

 * @file

 * Stylesheet for the index page .

 */

   与这个页面相关的css都放在这里。

 

让js,css生效,在控制器的代码里面,添加一行代码:

  public function indexPage() {
 
 
       $content['top'] = '<p>top content</p>';
       $content['left'] = '<p>left content</p>';
       $content['tight'] = '<p>right content</p>';
      
    $build['content'] = [
      '#theme' => 'content',
      '#content' => $content,
    ];
    $build['#attached']['library'][] = 'mypages/index';
 
    return $build;
  }

 

通过

$build['#attached']['library'][] = 'mypages/index';

我们可以增加一个一个库,里面包含我们想要的js,css文件。库里面,可以只包含一个css文件,也可以只包含一个js文件,也可以通过包含多个。


论坛:

Drupal版本: