第2.29-2.32节是对2018年在Nashvill举办的Drupalcon中关于在Drupal主题中实现设计系统的Session的翻译及要点分析，你可以在youtube上找到这个视频的原版，也可以在这里分小节观看。

本案例的甲方是美国纽约州最大的医院集团Northwell Health，乙方是Drupal圈子里鼎鼎大名的Phase2。…

大家都知道学习Drupal应该学会读文档。文档中会把很多基本概念和技术讲清楚，但是，文档也有自身的局限，它不可能去解答所有的问题，而只能介绍一些比较基础的方法。学习Drupal需要学习者对于类似的问题能触类旁通，对于深层次的应用能独立专研，并且鼓励先行者在社区中分享他们的经验。

Drupalcon的门票标准价格是650美元，…

前面几节所讲述的技术实现都不难，就好像响应式设计最初的实现方法也仅仅只是浮动（float）、百分比单位和media query而已，但是，响应式的难点在于如何用新的技术去改善用户体验，以及如何调整传统的工作流程来更好的适应新的技术。所以Jen Simmons才会一脸鄙视而又无奈的对她的听众说：你们以为套一个Bootstrap然后把侧边栏移来移去就算是响应式设计么？

…

Joey：

我叫Joey Gros，是P2创意设计部门的主管。P2的介绍（反正就是说我们很牛，此处略）…

I'm Joey gros , director of creative design at phase 2. phase 2 is a digital agency where…

随着团队和业务的发展，项目会变得越来越大，多个设计师会加入到同一个项目中。这就必然导致设计的分工，每一个设计师都只负责设计一小部分界面，比如，一个搜索页面，或者账户管理页面等。这很可能会导致设计缺乏统一性和协调性，因为每个设计师都有自己的风格，当他们独立的而非系统的解决设计问题的时候，就会发生类似的情况。

…

随着科技的发展，我们进入了无线互联网时代，一方面一大批的传统网站面临着移动优先的挑战，另一方面，移动应用市场还有着无数的APP等着设计师去设计。于是，一直标榜“量身定制”的设计，遇到了前所未有的危机。在移动互联网时代，项目是不断变化不断迭代的，传统的设计/前端流程已经跟不上项目的需求了，成为了瓶颈。

我在上一本书的末尾《…

接着我们将Card组件应用到主题上，我们当然可以继续在node/1页面上来来实现这个步骤，但是，card一般来说都是用来和views搭配起来以列表的形式出现的。因此，这一节我们重新回到首页，看看列表怎么做。

需要指出的是，在第一篇的最后几篇内容，我们讲了内容的覆写，这其中就包括内容列表的覆写，以及views的使用，因此，…

在我们开始为Drupal映射PL中的模板之前，我们首先要做一个准备工作。

在第一篇第24节中我们已经讲过，当你为系统安装或者创建一个主题的时候，系统就会为这个主题文件夹中的templates文件夹创建一个名字空间路径（namespaced path）来指向这个文件夹。因此在include模板的时候，…

Pattern Lab（以下简称PL）虽然有为Drupal专门开发的版本，但是，它的定位依然不是一个Drupal的模块，而是一个独立于Drupal的前端工具。

使用PL的目的，是利用PL为Drupal主题建立前端组件库。我们放弃传统的主题工作流程，而把所有的前端资源，包括HTML（也就是Twig模板…

Card可以由一个图片和一个标题组合而成，因此，很显然，它属于Molecules这个级别。

在/source/_patterns/01-molecules文件夹中创建一个新文件夹“01-card”，并在其中创建card.twig文件，内容如下：

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

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

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