
Drupal 具有强大的图像管理系统,它允许创建图像样式,这些样式可以对图像应用各种效果,并从原始图像生成派生图像。这个功能可以用在主题中,如果你希望包含一组为该主题设计的默认图像样式,而不是依赖核心提供的样式。
在主题中包含图像样式的过程类似于在模块中包含默认配置的过程。
- 使用用户界面创建你想要包含的图像样式
- 将图像样式导出为 YAML
- 将导出的 YAML 放入主题的 config/install 目录中,并遵循相应的命名规则。
首先,通过管理界面在「配置」>「多媒体」>「图像样式」(admin/config/media/image-styles) 中创建图像样式。一旦图像样式被创建并保存,该样式的配置就会被保存在站点的活动配置中。
该配置可以通过以下方式导出:


许多开发者更喜欢将页眉 / 页脚的代码保存在单独的文件中,并在 page.html.twig 中调用该文件。
过程
假设你在主题文件夹中为页眉创建了以下文件:
THEME_NAME/templates/includes/header.html.twig
现在你想在以下文件中包含它:
page.html.twig
推荐方法
Drupal 8 主题的正确方法是使用 Twig 命名空间来声明当前主题的 "templates" 目录。示例如下:
{% include '@THEME_NAME/includes/header.html.twig' %}
下面的示例来自 Drupal.org 上的一个实际主题,名为 Architect。
“@architect” 指的是工作主题 (architect) 的 /templates 目录。


许多 Twig 模板会有一个或多个 Attribute 对象作为变量传入。Attribute 对象的任务是存储一组 HTML 属性,同时为开发者提供有用的方法与这些数据交互,并且可以轻松打印属性。例如,attribute.addClass('myclass') 可以方便地添加一个类,而不必担心字符串拼接的细节。
在模板中,属性通常应如下所示:
<div{{ attributes }}></div>
在标签名和 Twig 语法之间不应有空格。Drupal 8 核心附带的 "stable" 主题中有许多属性的示例可供学习。
默认情况下,以下 Attribute 对象变量在所有模板中都可用:attribute、title_attributes 和 content_attributes。
你可以使用调试工具(kint()、dump()、dpm() 等)来检查可用的内容。下面是 node.html.twig 文件中使用 {{kint(attribute)}} 的示例。


Как и в Drupal 7, вы можете влиять на вывод определенного HTML с помощью функций предварительной обработки. Например, если вы хотите добавить класс в меню и предпочитаете делать это на уровне PHP, вы можете это сделать. Это хороший способ изменить разметку, относящуюся к теме, но если вы хотите сделать разметку, не зависящую от темы, лучше написать собственный модуль.
(Примечание: для целей документации здесь «mytheme» - это имя машины вашей темы; например, «bartik» - это имя машины темы.)
Для работы с функциями предварительной обработки:


在 Drupal 8 中没有用于编辑 breakpoints 的用户界面。由于 breakpoints 是在配置文件中定义的,因此在 contrib 模块中也无法提供用户界面。
Breakpoints 用于将视口(屏幕、打印机和其他媒体输出类型)的高度或宽度划分为阶段,并确保响应式设计能够在不同设备上正确显示。Breakpoints 模块标准化了 breakpoints 的使用,并允许模块和主题公开或使用彼此的 breakpoints。Breakpoints 模块根据高度、宽度和分辨率来跟踪 breakpoints。
请注意,只有在 Drupal 需要与 breakpoints 交互时(例如 Responsive Images 模块),才需要在 breakpoints.yml 文件中输入 CSS breakpoints。


在 Drupal 的管理部分,每个主题都有自己单独的设置页面,路径为 admin/Appeance/Settings/themeName。该页面包含一个带有标准设置的表单,例如“Logo 图像设置”和“快捷图标设置”。


核心类的变化
简化后的辅助类名称 “element-x”
Drupal 7 引入了几个新的类:element-hidden、element-invisible 和 element-focusable。仅从名称上很难准确理解这些类的作用,因此 类名被更改。新的名称应更易于理解,并且更符合流行的 HTML 5 环境 HTML 5 Boilerplate。下面是转换与使用的对照表:


本文档在 Drupal 8 的 Twig 转换过程中大部分时间都被使用过,并且也可能对你在更新自己的主题和模块以使用 Drupal 8 中的 Twig 模板引擎时有所帮助。
注意:所有与 Twig 相关的工作现在都在 Drupal 核心问题队列 中进行。仅使用 Twig 转换沙盒 来查找已转换的模板和函数。
核心贡献者步骤:


使用自动化工具可以简化主题的开发工作。在这里我们将使用 gulp js 为自定义主题创建一个自动化工具。
适用于 Gulp 3.x 和 Node 10.x 及以下版本
步骤:
1. 安装 Node.js
从 nodejs.org 下载并安装最新版本的 NodeJS。安装过程可能因操作系统不同而有所差异。
2. 安装 Gulp
npm install gulp-cli -g
3. 配置 gulpfile.js
进入自定义主题目录。
手动创建 gulpfile.js,可以使用 cmd/terminal,也可以右键新建文件。
touch gulpfile.js
复制并粘贴以下代码:
