Drupal8在它的内核中提供了一个叫做Responsive Images的模块，你可以通过这个模块轻松为图片字段根据不同的断点设置不同的尺寸/版本。另外，还有一个叫做Inline responsive images的贡献模块，可以让用户在编辑器中上传的图片也能根据断点选择不同的版本——这两个模块同时使用的话，…

上一节我们讲了Focal point模块的用法，但是，等等，不知道你是否已经注意到了，虽然我们已经可以实现艺术剪辑了，但是却不是响应式的！！因为在”显示管理“中我们把图像字段的显示格式修改为了”image“。因此，图片会在所有的屏幕尺寸上显示同样的经过Focal point模块剪辑后的版本。而且，如果此时你跟我一样，一厢情愿的把格式改回”…

Focal Point模块解决的就是前面提到的艺术剪辑的需求。

下载和安装的步骤这里就不多说了，在安装的过程中会提示你要先启用crop api模块。

安装之后需要做的事情很简单：

在图像样式（/admin/config/media/image-styles）中新建立一个样式并添加Focal point效果，…

针对上文中所讲到的两种最典型的响应式图片的使用场景，前端行业也给出了自己的解决方案。

标准的<img>元素传统上仅仅让你给浏览器指定唯一的资源文件。

我们可以使用两个新的属性——srcset…

经过前几节的铺垫，从这一节开始，我们正式进入一个新的话题——对Drupal网站上的图片进行更专业的处理。这里所谓的“更专业”，具体来说，是为网站提供响应式的图片、让网站编辑能更好的控制图片，与此同时依然保证网页的一致性、加载速度以及安全性。

另外，随着这个话题的逐步展开，我们还将进一步加深和巩固前面讲过的一些知识点，比如：…

关于.breakpoints.yml文件中的multiplier，下面两张图能比较清晰的说明各个设备之间的情况：

举个例子，ipad2的屏幕分辨率是1024×768，而the new ipad，也就是Ipad3的屏幕分辨率是2048×1536，但是ipad2和ipad3的屏幕物理尺寸是一样的。这样的结果是，…

breakpoint，即断点，是响应式设计中的基本概念之一，它和Media Queries（即媒体查询）一起是现在的前端工程师所必须掌握的知识点。

使用断点可以将屏幕根据尺寸划分为不同的规格。比如，我们可以规定宽度在400像素以下的是小屏幕，1024像素以上的为大屏幕，这里的400和1024就是断点。…

Attribute对象存在于很多模板中。我们在前面的章节中，多次使用到了它，比如，在第一篇的27节中我们用下面的代码

来为ul标签添加一个名为nav的class。

Attribute对象的作用就是用来存储一组HTML属性，…

我们在第一篇的第31，32节中讲了如何在node模板中打印字段。笼统的来说，有下面两个方法：

或者

第三种方法要使用预处理函数，在第二篇的第12节中讲过了。

注意代码中，哪个使用了“…

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

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