第五部 前端开发增强

欢迎继续阅读Drupal 8终极指南系列的第五篇。

##HTML5

Drupal 7中，所有的输出都转换为XHTML，而在8中，则转换为HTML5。这意味着nav/main/header/section等Drupal缺省模板中的标记，成为清理Drupal缺省标记的一部分重要工作。

HTML5带来了新的Form输入类型，包括date/tel和email，这些类型能在移动设备的界面上进行更好地交互（例如电话号码输入框中只显示输入法的数字部分），方便数据的录入。Drupal Form API提供了这些附加类型，方便直接创建这些字段。Drupal 7也可以使用Elements模块来获得类似效果。

另外，你会发现很多以前需要自行处理的东西例如TextArea的尺寸调整，第一行/最后一行/基数行/偶数行等类，已经有了对应的HTML5/CSS3的处理，Fieldset的折叠功能被替换为detail元素来实现。

##新的前端库以及辅助工具

Drupal 5以后就自带jQuery，从7以后开始自带jQuery UI。Drupal 8打包了更多的前端库。例如Modernizr（用于检测浏览器是否支持触摸，或其他一些HTML5/CSS3特性）、Undescore.js（轻量级JS辅助库）以及Backbone.js（一个MVC JS框架）。这些附加库集成在一起，使得Drupal能够创建移动友好的，体验丰富的应用，这些库也是前面讲到的编辑体验和移动增强的重要支持。

##原生Schema.org输出

Drupal 8的RDF现在输出schema.org标记，这对搜索引擎优化有很大促进。这能够让Google、Yahoo、Bing以及Yandex这些搜索引擎能够比较容易的获取页面背后的信息，例如内容作者等。

##大大增强的访问性

Drupal 8继承并发展了Drupal 7现有的良好访问性。Drupal 8使用WAI-ARIA 属性来提供富前端体验，包括响应式工具栏以及就地编辑特性。在后端，Drupal 8也提供了很多的JavaScript访问性工具，来协助开发者提高应用的访问性。并且还有一个“利用Quail库进行自动化访问性测试”的项目正在进行之中。

这个视频来自于Dries在布拉格DrupalCon的KeyNode，演示了这些新的访问性功能如何为目标用户进行服务。

##Twig：新的主题系统

Drupal 8引入了Twig来代替Drupal 7中的模板系统。跟其他类似的模板引擎一样，让具备HTML/CSS背景的人，在没有PHP专家技能的情况下来修改标记。例如，不需要理解嵌套数组和对象的区别，也不需要关注什么时候使用each，一个简单的{{foo.bar}}语句就完成了。简单的条件判断和循环可以用{% …%}来完成。

下面的例子来自于page.html.twig(相当于Drupal 7中的page.tpl.php)，其中使用了Twig、HTML5以及一些ARIA支持。

  <?php
    <main role="main">
      <a id="main-content"></a>{# link is in html.html.twig #}

      <div class="layout-content">
        {{ page.highlighted }}

        {{ title_prefix }}
        {% if title %}
          <h1>{{ title }}</h1>
        {% endif %}
        {{ title_suffix }}

        {{ tabs }}

        {% if action_links %}
          <nav class="action-links">{{ action_links }}</nav>
        {% endif %}

        {{ page.content }}

        {{ feed_icons }}
      </div>{# /.layout-content #}

      {% if page.sidebar_first %}
        <aside class="layout-sidebar-first" role="complementary">
          {{ page.sidebar_first }}
        </aside>
      {% endif %}

      {% if page.sidebar_second %}
        <aside class="layout-sidebar-second" role="complementary">
          {{ page.sidebar_second }}
        </aside>
      {% endif %}

    </main>
  ?>

可是没有PHP，怎么使用那些变量呢？像平时一样（只不过以前的template.php现在变成了THEME.theme）用*THEME_preprocess_HOOK()*函数来搞定。Twig在表达层和业务逻辑的分离上作出了卓有成效的努力，使得主题层面的可管理性和安全性大大增强（一旦Twig变量自动转义完成，安全性还将进一步提高）。

Twig另外还有一个有意思的事情是如果你在settings.php用$settings[‘twig_debug’] = TRUE启用了debug模式，那么Drupal 8生成的标记里面会出现有用的代码说明，用来提醒你要修改的模板在哪个文件，正在使用什么样的”theme suggestion”来生成标记，例如：

<?php
<div class="content">

<!-- THEME DEBUG -->
<!-- CALL: _theme('node') -->
<!-- FILE NAME SUGGESTIONS:
   * node--1--full.html.twig
   * node--1.html.twig
   * node--article--full.html.twig
   * node--article.html.twig
   * node--full.html.twig
   x node.html.twig
-->
<!-- BEGIN OUTPUT from 'core/themes/bartik/templates/node.html.twig' -->
<article class="node node--type-article node--promoted node--view-mode-full contextual-region clearfix quickedit-processed" data-history-node-id="1" data-quickedit-entity-id="node/1" role="article" about="/node/1" typeof="schema:Article" data-quickedit-entity-instance-id="0">
    ...
</article>

<!-- END OUTPUT from 'core/themes/bartik/templates/node.html.twig' -->

      </div>
?>

这有点像把Theme developer集成到核心一样。

##唯快不破

Acquia的性能大师Wim Leers假设，为领导地位的CMS提速是为整个Internet提速的最好方法，这意味着，CMS的初始安装就应该具有高性能的配置，而不是让用户自己学习这些技能。在Drupal 8中，我们就在做这种努力。你可能注意到，Drupal 8缺省安装时，CSS JS聚合等特性就已经设置为打开了。

如果你是一个前端开发者，这对你意味着：Drupal的缺省安装对你来说可能不是一个好的开发环境，除非你手动去关掉这些性能选项（即使Hack掉核心的CSS也没用）。幸运的是，Drupal 8自带了一个sites/example.settings.local.php文件用来完成这个任务。这个文件用硬编码的方式把这些性能选项关掉，所以这个配置文件对开发者是很有用的。只要把这个文件复制成为sites/default/settings.local.php，并在sites/default/settings.php中把下面的行注释掉：

<?php
# if (file_exists(__DIR__ . '/settings.local.php')) {
#   include __DIR__ . '/settings.local.php';
# }
?>

接下来说说没被注释掉的行，你的新的settings.local.php文件中也有一些关于Twig的选项是缺省关闭的，例如打开debug模式，以及关闭缓存。去掉这些注释很显然会把开发站点变慢，不过也能让Theme开发简单一点，因为对模板的修改能够立即看到了，而不用等着清空缓存。

另外一个前端性能相关的新闻，为了尽可能提高前端性能，尤其是移动设备的前端性能，Drupal会带着最新版本的jQuery和jQuery UI，相对于普通的JavaScript，这实际上存在很大的差异。缺省Drupal 8安装不会为匿名用户载入任何JavaScript。

总的说来，性能方面的优化，还有很多工作要做，Drupal 8将带着有更好的前端性能面世。

##新的界面元素

Drupal 8带着很多新的界面元素。包括模态对话框和下拉按钮，在Drupal7和以前的版本中，这两个组件本来是CTools模块的一部分。Drupal 8还引入了一个概念，“按钮类型”分为“首要”（在Seven主题中渲染为蓝色），以及”危险“（红色），来帮助用户在具有众多选项的时候作出正确选择。

##响应式主题

在移动增强一篇中介绍过，Drupal 8中包含了很多响应式的特性，包含主题，工具栏，图片以及表格等。

为了支持这些特性，可以在主题中声明Breakpoints（为了符合浏览器和设备的需要，定义的高度宽度和分辨率），断点可以用来支撑这些多种多样的相应式特性。（然而，注意“把Breakpoint设置转移到*.info.yml中”）还是一个正在开发中的补丁。

另外，Drupal 8很可能支持新的元素，这个元素将会在今年秋天被浏览器支持。会对前端性能有很大增强。针对移动设备来说，会发送小尺寸图片给小屏幕，节省流量和时间。（多谢Marc Drummond提供了本节内容）

##选择性添加JS/CSS的新方法

继续前端性能的话题。过去，如果想要在某个页面加入CSS或者JS，需要使用drupal_add_css()以及drupal_add_js()函数。现在只要在渲染数组中加入#attached属性就可以了，例如：

seven.theme

function seven_form_node_form_alter(&$form, &$form_state) {
...
  $form['#attached'] = array(
    'css' => array(drupal_get_path('module', 'node') . '/css/node.module.css'),
  );
...
}

着对于一次性的使用很有帮助，而且没有什么依赖，更通用并且推荐的方式是在你的MODULE/THEME.libraries.yml中注册一个或多个CSS/JS项目，然后在#attached属性中添加一个引用。

seven.libraries.yml

maintenance-page: version: VERSION js: js/mobile.install.js: {} css: theme: maintenance-page.css: {} dependencies: - system/maintenance

install-page: version: VERSION js: js/mobile.install.js: {} css: theme: install-page.css: {} dependencies: - system/maintenance

drupal.nav-tabs: version: VERSION js: js/nav-tabs.js: {} dependencies: - core/matchmedia - core/jquery - core/drupal - core/jquery.once - core/jquery.intrinsic

seven.theme

<?php
function seven_preprocess_install_page(&$variables) {
  // ...
  $libraries = array(
    '#attached' => array(
      'library' => array(
        'seven/maintenance-page',
        'seven/install-page',
      ),
    ),
  );
  drupal_render($libraries);
}
?>

这种方式看起来不如drupal_add_foo()的方式直观，但是这意味着这些内容可以被缓存从而提高性能，可以容易的在不同地方进行重用。

##安息吧，IE678

最后，来一个忧郁的结尾，最大一个对前端开发者而言的进步就是，Drupal 8核心已经放弃了对IE 6-8的支持，启用了jQuery 2.0以及现代的HTML5/CSS3的浏览器支持（还在讨论关于停止对Android 2.3以及更旧版本的支持的问题）。

html5shiv（一个为兼容性差的浏览器准备的HTML5处理器）也包含在Drupal 8中，这使得IE 8之类的浏览器不会完全坏掉， 还有个IE8项目被提供给必须支持IE8的开发者们。

我们正在寻找简洁有效的前端代码，而不想为5岁以上的浏览器担忧。

##还有更多

Drupal 8还在开发之中，连Beta还没开始，有些API还没能够最终确定（RC之前这些修饰类的事情都不会停止）。前端还有些编码和复审之类的大事需要做。

• 前端的事情还没有完全完成（提示：这里有个学习Twig的好机会），向Twig模板移植所有核心主题功能这一工作还在持续进行中，除了很罕见的性能相关的一些问题之外，主题的工作和从前并无不同。这一工作将会使主题制作过程更加直观，原因是降低了对设计师PHP水平的要求，而让设计师绝大多数工作完全集中在一些小标记中。

• 把页面元素（包括标题、TAB、Actions以及Messages）转换为Block以及把Menu_block模块功能嵌入核心会去掉那些看起来很奇怪的变量。统一的页面元素将会以Block的形式统一呈现。

• Dream Markup（梦之标么。。——译者喝多了）项目尝试去掉Drupal所有麻烦的标记（尤其是DIV）。这一活动在奥斯汀DrupalCon中形成了一份提议：《剥掉所有Drupal核心中的缺省标记》，这份提议建议移除所有多余的东西，提供一份仅包含有用的类和包装的基础主题。

• 还是在奥斯汀DrupalCon，Headless Drupal提出，希望能够使用完全自定义的前端框架，例如Angular JS。

##这是一个转折

下一次，我们将会讲一些Drupal 8中的后端开发的特性。