开源世界

Drupal8 主题开发基础篇

 原文链接:Drupal 8 theming basics

 

外部链接的图标

 

译者:晴空

从前

…有个哥们须要给一个客户建一个网站。这个网站真的很简单:一个联系表单,一个静态页面,文章系统,评论功能——仅此而已。如果你有仔细听我说你应该会意识到:我只要用Drupal核心就可以满足需求了。并且由于这个故事发生在去年12月(译者注:去年是2013年),所以不但可以用Drupal7(下面简称D7),还可以用Drupal8(下面简称D8)。(在那时我们已经有了一个很不错的D8阿尔法版本了。)

好吧,我坦白交代道:那个客户是我的老婆,而我就是那个开发者。而且我决定使用D8,因为有这个可行性,并且我真的想学习如何使用它。因为我认为从一个实际项目中学习是最好的途径。

D8核心已经可以满足我们的需求了,但是我们不想使用核心自带的bartik主题。我们不希望我们的网站和互联网上的成千上万个网站类似。我们想要一点儿自己的特色,所以我必须自己新建一个主题。。。并且我做到了。

今天我想分享一下我在这个过程中的一些经验以及一些在为D8做主题的时候有所变化的地方。

创建一个子主题

我决定要创建一个子主题。所以我需要找一个基主题。而且我居然找到了!!我当时太高兴了,跑到推特上臭显摆了一番。实话告诉你,那个时候那可是唯一的D8主题。它的名字是:Gratis,作者是:Danny Englander。我真的很喜欢这个主题。

创建主题的第一步就是为系统提供它需要知道的所有的信息。在使用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的事情,你会发现我真的很喜欢和CSS打交道。这里还有一个和它有关的事情(我保证,这是最后一个)。在D8中CSS的文件结构是遵循SMACSS方法,CSS文件中选择符的声明则遵循BEM方法。我不会更加深入的去探讨这些——但是你能,并且你应该去自己研究!你可以在Drupal官网上阅读更多关于CSS编码标准的文献资料。

Twig

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

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

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

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

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

Twig有一个简洁的,基于标签的语法,很容易学习。对于非开发者来说他很容易理解和学习(如网站站长或者写CSS的页面仔)。

你可以在这里看到一段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。

参考文献

想学会所有的新信息,仅靠一篇帖子是不够的。所以,如果你想了解更多,你应该自己做功课。这里有一些资源,可以帮助你。

https://drupal.org/theme-guide/8

外部链接的图标

 

Change records (theme): http://j.mp/1qFSKXq

外部链接的图标

 

http://drupaltwig.org

外部链接的图标

 

Twig Coding Standards: https://drupal.org/node/1823416

外部链接的图标

 

CSS Coding Standards: https://drupal.org/node/1886770

外部链接的图标

 

JS Coding Standards: https://drupal.org/node/172169

外部链接的图标

 

https://api.drupal.org/api/drupal/core!modules!system!theme.api.php/8

外部链接的图标

 

我建议你阅读变更记录,这是非常有用的,它包含了大量的信息。在drupal.org是也有越来越多的关于D8主题化的文档。非常值得一读

我的第一个D8网站

帖子的开篇我已经说过了,我为我的妻子建了这个网站。在Gratis的基础上,我只修改了一些CSS和更改一些小的配置,我就创建了一个新的主题。

它的地址是:http://noi-kerekasztal.hu。我知道我不会因为这个网站而得到一个设计大奖,这太正常了,因为我不是个设计师。但是在互联网上并没有其他网站看上去和它完全一样。这对于我们来说就已经足够了。

希望看到您的想法,请您发表评论x