如果你打开 Stable 主题的 page.html.twig 模板文件：

/core/themes/stable/templates/layout/page.html.twig

你会发现它与 Drupal 7 的 page.tpl.php 模板不同，首先是文件扩展名不同，其次是大量使用花括号 {}。这都是因为 Drupal 使用了 Twig 模板引擎。

在之前的教程中，我们已经将 CSS 连接到了我们的主题。为此，我们在 drupalbook.info.yml 文件中指定了：

libraries:
  - drupalbook/global-styling

接着，我们创建了 drupalbook.libraries.yml 文件，在其中指定要包含的 CSS 文件：

global-styling:
  version: 1.x
  css:
    theme:
      css/style.css: {}
      css/print.css: { media: print }

从现在开始，我们将详细了解如何在我们的主题中使用 CSS。

我们已经看到 Drupal 内置了 Twig，并了解了它的使用方式。本文将讲解如何在 Drupal 中使用模板：包括 Drupal 核心 Stable 主题中有哪些模板、如何重写 Stable 模板，以及如何为不同类型的 Drupal 实体自定义模板。

首先，让我们从 Stable 主题 的模板开始，进入该主题的 templates 文件夹：

模板按功能分类存放：

如果您希望在 Drupal 中添加一个新的 区域（Region） 来显示区块（Blocks），需要执行以下步骤：

• 在主题的 theme.info.yml 文件中添加区域信息。
• 编辑 page.html.twig 文件，在其中添加新区域的输出。

在 drupalbook.info.yml 文件中添加区域数据

所有区域都通过 regions 键定义：

首先，让我们回顾一下如何在主题中引入自定义 JavaScript 文件。在 .libraries.yml 文件中，我们需要添加 js 部分：

global-styling:
  version: 1.x
  css:
    theme:
      css/style.css: {}
      css/print.css: { media: print }
  js:
    js/custom.js: {}
  dependencies:
    - core/jquery
    - core/jquery.once

请注意缩进，必须为两个空格。这样，我们就包含了 js/custom.js 文件。但仅仅这样还不够，Drupal 核心默认并不会自动加载 jQuery。要启用 jQuery，必须显式地声明依赖：

dependencies:
  - core/jquery

此外，我们还使用 jQuery.once() 插件，它可以确保事件和方法只绑定到选择器一次，避免重复执行。

很多时候，Views 默认模板并不能满足我们的需求，因此我们可以通过 模板重写（override） 的方式自定义 Views 的输出效果。不幸的是，Views 本身并没有提供用于查找可用模板的 UI 界面，但我们可以根据模板命名规则（patterns）来自行重定义模板。

关于模板命名规则的更多内容，请参阅以下文章：

6.6. 在 Drupal 中使用模板：了解 Drupal 核心中的模板。

我们主要关注以下部分：

以下是可用于重写的模板名称格式：

视图名称（View Name）— foobar（机器名称）
显示格式（Display format）— unformatted（未格式化列表，可根据样式不同调整）
显示风格（Display Style）— fields
显示名称（Display Name）— page

Drupal 不仅仅是一个 CMS，它还是一个用于开发 Web 应用的平台。如果您决定创建自己的主题，那么有多个主题框架可供选择。本文将介绍其中最受欢迎的几种。

Bootstrap

https://www.drupal.org/project/bootstrap
http://getbootstrap.com/

Bootstrap 是目前最受欢迎的前端框架之一，您可以基于它轻松创建自己的 Drupal 主题。它提供了一整套 CSS 样式、栅格系统以及 JavaScript/jQuery 插件。借助它，您可以快速完成网站布局并灵活调整各个区块的位置。

Zen

https://www.drupal.org/project/zen

Drupal 拥有的现成主题虽然不多，而且大多数在美观性与功能性方面都比较基础，但它可以非常轻松地与各种第三方库和服务集成。例如，您可以基于 Bootstrap 创建主题，从而在保留 Drupal 强大功能的同时获得现代化的外观。

在 drupalbook.org 网站的本节中，我们将学习如何从任何设计稿快速、方便地创建 Drupal 主题。

PSD 设计稿下载：
https://drupalbook.org/sites/default/files/blueasy-freebie.zip

源码地址：
https://github.com/Drupalbook/bootstrap

我们还将学习如何进行响应式布局（自适应排版），使同一套 HTML 同时适用于桌面端和移动端。

在之前的课程中，我们已经学习了如何基于另一个 Stable 主题创建自定义主题。在本教程中，我们将演示如何基于 Bootstrap（一个流行的网页布局框架）创建 Drupal 主题。

假设您已经安装好了 Drupal。接下来我们开始安装 Bootstrap：

https://www.drupal.org/project/bootstrap

与 Drupal 7 不同，在 Drupal 8 中，所有主题都应放在站点根目录下的 /themes 文件夹中：

在开始 Drupal 8 开发之前，您必须先禁用缓存。与 Drupal 7 不同，在 Drupal 8 中，不仅实体（entity）、视图（views）、字段（fields）会被缓存，连编译后的 Twig 模板 和 Render 模板 也会被缓存。要禁用所有这些缓存，请按照以下步骤操作：

1. 复制文件：
将 /sites/example.settings.local.php 文件复制为 /sites/default/settings.local.php。

此文件中已包含用于禁用缓存的必要配置。

2. 在 settings.php 文件中取消注释以下代码：
这样可以启用我们刚创建的 settings.local.php 文件。