跳转到主要内容

和“
主题开发
”有关的内容:

关于PatternLab,在官网上你可以找到详细的英文文档。以下我们只对一些重点进行讲解。

Pattern lab的安装

PatternLab有很多不同版本,我们要安装的是专门为Drupal开发的版本。

1. 在终端中先CD到你的主题文件夹,然后运行以下命令:

composer create-project…

composer在Drupal的开发生态圈中也扮演着很重要的作用,很多工具、插件、甚至模块和主题的安装都需要使用它,因此,如果要深入使用Drupal,composer是必备的工具。

Composer的官网上有详细的介绍。这里是中文翻译版本。

下面的安装步骤是在MAC上进行的。如果你使用的是windows,参见这里。…

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' --> <!--…