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