跳转到主要内容

和“
Drupal8
”有关的内容:

Pattern Lab是帮助我们实现前端组件化开发流程的一个前端工具,以下简称PL,顾名思义,它可以帮助我们建立前端模块库(组件库),并且,保持组件之间有着原子设计理论中的相互关系,因为它本身就是原子设计理论的提出者Brad Frost和他的同事一起开发的,这也是我们专门用一节的内容讲原子设计的原因。

需要说明的两点是:

组件化的做法在历史上早已有之,最早是福特汽车的流水线,这个大家应该都知道,把汽车的不同部件放在不同的流水线上生产,最后统一组装——这样做使得成本控制、质量控制、生产效率都得到了极大的改善。比较近的则是大芬村的油画作坊,不要小看这么一个农民村,据说全世界80%的油画都是从这里卖出去的,他们使用的方法也差不多,就是几个画工一起画一幅画,每人只负责自己的一小块,…

原子设计(Atomic Design)理论进一步系统化的描述了页面元素之间的相互关系。Brad Frost在他的书《原子设计》中,引用了原子图、化学式甚至元素周期表来阐述他的原子设计理论。

以下是一个简短的介绍:

原子是构成所有事物最基本的单位(这是一篇关于前端设计的文章,所以请不要过于纠结这个论断的科学性)。…

关于CSS的架构、编写方式,比较重要的四个分别是:BEM,OOCSS,SMACSS和Atomic Design。如果你还不知道他们是什么,请自行学习。以下的简介仅仅起到入门的作用。

BEM

BEM,即Block、Element、Modifier,它把页面上的元素看成一个一个的Block,组成block的是Element,…

随着Drupal8的发布,核心中新加入了两个新的基主题,一个是Stable一个是Classy,其中Stable基主题为系统前端提供尽可能少的HTML标签和类名,CLassy则是适当的增加了更多一些的类名。这一点我们在第一篇第18节中已经提到过了。总而言之他们的任务是:改变之前Drupal6和7时代基主题毫无顾忌的在页面上打印尽可能多的标签和类名的现象。(…

在上一节中我们演示了使用gulp来编译sass文件,接下来,我们来介绍一下sass。如果你还不会sass,是时候补课了,如果已经熟悉,可以跳过。

sass是一个用来快速编写css文件的语言。经过编译之后的sass文件就是我们通常所说的样式表css。

sass的好处我就不多说了,如果你是一个前端,css已经熟练了,…

在第一篇中我们已经提过几种不同的在页面上加载css和js文件的方法。这一节再介绍一种,使用预处理函数来加载它们,即:

THEME_preprocess_HOOK()

其中,THEME是主题的名称,HOOK是模板钩子,模板名的第一组单词。

比如,如果你想在维护页面上加载一个特定的JS文件,维护页面的钩子是”…

在第一篇中我们对模板建议已经有过介绍了,这一节中我们会讲得更深入一些。

查看模板建议最快的方法是开启theme debug模式,然后在页面上查看元素。你可以在源代码中看到类似下面的代码:

<!-- THEME DEBUG --> <!-- THEME HOOK: 'node' --> <!--…

在.theme文件中,你可以通过node预处理函数为node模板添加变量:

function nowicode_preprocess_node(&$variables) { $variables['something'] = 'hello woooo'; }

然后你可以在node模板中将这个变量打印出来:

{#…
.theme文件

在D8中每一个主题都可以包含一个.theme文件。与之对应的是D7中的template.php文件。但它并不是必须的。它总是位于主题的根目录下。

由于英语中template.php文件和tpl.php文件的叫法都是一样的(后者是D7中的模板文件),因此,为了避免歧义,d8的开发者将d7中的template.…