Drupal8 主题开发（基础篇）

Drupal8 主题开发（基础篇）

这是一个网站很简单：一个联系表单，一个静态页面，文章系统，评论功能——仅此而已。如果你有仔细听我说你应该会意识到：我只要用Drupal核心就可以满足需求了。

要创建一个子主题。我们需要找一个基主题。在网上可以找到。

创建主题的第一步就是为系统提供它需要知道的所有的信息。在使用D7的时候我们通过创建一个mysubtheme.info文件来完成这个步骤。不过在D8中，事情就有所变化了。

D7把所有的配置信息都存储于数据库里面，但是D8是通过YAML的配置文件来达到相同的目的。所以D8的.info文件换成了.info.yml文件。YAML文件是怎样的呢？

它的语法和.info文件很像，但是也有一些不同。在键值中间我们要用冒号替换等于号。我们用井号“#”来标记注释，用缩进来标识文档内容结构。

mysubtheme.info.yml

文件的内容并没有什么根本的变化。但是添加了一个新的必须的元素。我必须告诉Drupal我提供了什么样的扩展，所以我写成了“type: theme”。但如果我们写了个模块，我们应该写成“type: module”，如果我们安装了一个profile，就应该写成“type: profile”。

当然，我还必须定义一个可读的名字，以及这个子主题适用的Drupal核心版本，并且由于这是一个子主题，我还要声明它的基主题（用它的机读名称）

在YAML中的很多声明使用下划线，但是我们还是要写成“base theme”，注意这中间必须是一个空格，不能用下划线。

当然你还可以定义其他的东西，但是他们并不是必须的，我在这里也不做深入的探讨。

我声明了子主题，但是这仅仅只是复制了基主题的样式，我还必须声明一个css文件，用它了定义新的样式。这是我们在Drupal YAML文件中必须使用的方式。并且，你可以看到一个新的YAML语法例子：我们用一个连字符和一个空格来定义一个列表元素。

我们知道子主题继承了基主题的样式表。他们可以被覆写也可以被禁用，但是这个功能在D7中不够完善。这就是为什么D8专门在.info.yml文件中引入了用于添加、覆写和删除样式表的属性。

你看到我讲了很多有关CSS的事情。在D8中CSS的文件结构是遵循SMACSS方法，CSS文件中选择符的声明则遵循BEM方法。我不会更加深入的去探讨这些——但是你能，并且你应该去自己研究！

以上就是关于CSS的全部。但是我还没有讲到用CSS修饰的主体。也就是Drupal输出的HTML。D7使用PHPTemplate 引擎和.tpl.php模板文件来输出HTML。

基于很多原因，PHPTemplate 引擎在时下并不是最好的选择。我们需要寻找一个更好的解决方案。所以——女士么，先生们——我们找到了。我们在核心中使用了Twig。对于这一点，我们很高兴。

但是我们为什么应该高兴呢？让我来告诉你几个理由。

Twig 是一个现代的模板语言及模板引擎。而且它是安全可靠的。使用PHPTemplate你可以不小心的或者恶意的从数据库删除数据或从文件系统删除文件。使用Twig你就不能这样做了。你根本拿不到访问数据库或者文件系统的权限。

Twig 速度快。当你的网页渲染的时候，Twig 引擎把模板转换成存储在受保护的目录中的“编译过的”PHP模板。编译只进行一次。然后模板文件就会被缓存起来。

Twig有一个简洁的，基于标签的语法，很容易学习。对于非开发者来说他很容易理解和学习。

你可以在这里看到一段Twig标记。这只是一个例子，但展示了一些典型的Twig标签。他们都被放在大括号之间。我们可以打印变量和数组或对象的元素。我们可以添加注释，定义表达式如：“if”条件或“for”循环。而且还有翻译功能，它是Twig的过滤类型。

最后一个例子展示了我们如何处理HTML属性。你可以选择那些应单独打印的属性 - 比如上例中的类名 - 和所有其它的*是事后通过使用“属性”变量打印出来。这是D8核心.html.twig模板的标准方法。

更新：“属性对象，现在可以打印多次，并且打印出属性对象的各个属性（例如class属性）不再将其标记为已经打印过的。Twig 的 'without' 过滤器可以用来防止属性被打印。这一变化使得Twig模板中的属性具有相同的行为作为渲染阵列。“查看更多更新记录。

重要的是，你应该只使用一个模板，并且是在你真的需要用到这个模版的时候才使用它。这意味着，如果仅使用CSS，你不能修改输出。如果你想隐藏例如二级菜单，就会遇到这样的情况。

在settings.php中启用twig_debug

我还有一些更高级的例子，其中第一个是有关template.php文件的。在D8中它被重命名为.theme文件，并且具有与主题相同的名称。开发人员可以使用此文件来创建自定义函数或定义自定义变量。所以里面还是纯的PHP代码。让我告诉你一个简单的例子。

在D7中，drupal_add_css（），drupal_add_js（）和drupal_add_library（）函数被用来把JS和CSS添加到页面中。在D8中你必须在渲染数组里使用#attached方法来代替上面的功能。 #attached在D7中已经用了，并被广泛使用，但现在它是唯一的途径。

我的最后一个例子是hook_library_info（）函数。你可能没有用过这个函数，因为D7是自动加载核心库的。

在D8中这个函数被.libraries.yml配置文件所取代。你必须了解它的原因是，在默认情况下D 8不会为匿名用户加载很多的JavaScript。所以你需要使用一个mysubtheme.libraries.yml文件来创建一些依赖加载类的东西比如jQuery.once甚至drupal.js。