第五部前端开发增强-莱卡云

欢迎继续阅读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模块来获得类似效果。

Fields on iPhone

另外，你会发现很多以前需要自行处理的东西例如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这些搜索引擎能够比较容易的获取页面背后的信息，例如内容作者等。

Schema.org

##大大增强的访问性

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支持。

  {# link is in html.html.twig #}

      
        {{ page.highlighted }}

        {{ title_prefix }}
        {% if title %}
          {{ title }}
        {% endif %}
        {{ title_suffix }}

        {{ tabs }}

        {% if action_links %}
          {{ action_links }}
        {% endif %}

        {{ page.content }}

        {{ feed_icons }}
      {# /.layout-content #}

      {% if page.sidebar_first %}
        
          {{ page.sidebar_first }}
        
      {% endif %}

      {% if page.sidebar_second %}
        
          {{ page.sidebar_second }}
        
      {% endif %}

    
  ?>

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

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

...

文章来源于互联网:第五部前端开发增强

{{ title }}

相关推荐