作者：亚艾元技术部
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文件，也可以通过包含多个。
