7.2.1. 基于 Bootstrap 创建主题：在 PhpStorm 中配置 LESS 编译器以配合我们的主题工作。

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

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

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

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

若要创建基于 Bootstrap 的自定义主题，需要创建一个 子主题（sub-theme）。子主题文件夹可从父主题中复制：

/themes/bootstrap/starterkits/less

将 less 文件夹复制到 /themes 目录，与 bootstrap 同级，然后将其重命名为您的主题名称，例如 drupalbook。同时，将以下文件中的 THEMENAME 替换为主题名：

• THEMENAME.libraries.yml → drupalbook.libraries.yml
• THEMENAME.starterkit.yml → drupalbook.info.yml
• THEMENAME.theme → drupalbook.theme

然后打开 drupalbook.info.yml 文件，在 libraries 部分中也修改名称：

libraries:
  - 'drupalbook/global-styling'
  - 'drupalbook/bootstrap-scripts'

建议也修改主题名称：

name: 'Bootstrap Drupalbook Sub-Theme (LESS)'

同时重命名配置文件：

/config/install/drupalbook.settings.yml
/config/schema/drupalbook.schema.yml

接下来，下载 Bootstrap 框架的源码版本：

http://getbootstrap.com/getting-started/#download

https://getbootstrap.com/docs/4.3/getting-started/download/

我们需要的是包含 LESS 源文件 的源码版本，而不是已经编译好的 CSS 版本：

在子主题中创建一个 bootstrap 文件夹，并将下载的 Bootstrap 源码文件复制进去：

请确保复制的是源码版本，以便我们在主题中覆盖 Bootstrap 的变量文件：

/less/overrides.less
/less/variable-overrides.less

您也可以选择使用 SASS 版本的 Bootstrap，但那需要安装 SASS 编译器。这里我们使用 PhpStorm 自带的 LESS CSS 编译器。

现在可以进入 Drupal 的外观设置页面启用主题：

/admin/appearance

此时样式尚未生效，因为 Bootstrap 的 LESS 文件还未编译。我们将使用 PhpStorm 的 LESS Compiler 插件 进行编译。

打开 PhpStorm 设置：
文件 → 设置（File → Settings）

• 打开 Plugins（插件）页面
• 搜索关键词 “LESS”
• 找到 LESS CSS Compiler 插件
• 点击 “Install JetBrains plugin …” 进行安装

如果无法直接找到插件，可从官方网站下载：

https://plugins.jetbrains.com/plugin/7059-less-css-compiler

下载后通过 “Install plugin from disk …” 安装。

安装完成后，在 PhpStorm 设置中搜索 “LESS” 打开插件配置界面：

点击 “+” 新建一个 LESS 编译配置文件（Profile），命名为 Bootstrap。每个项目需单独创建一个配置。

配置参数如下：

LESS source directory：
C:\OpenServer\domains\drupal8\themes\drupalbook\less

这是主题的 LESS 文件目录，而不是 Bootstrap 的 less 文件夹，因为我们从 style.less 文件中加载 Bootstrap。

Include files by path：
C:\OpenServer\domains\drupal8\themes\drupalbook\less\style.less

我们只需编译 style.less 文件，它是所有 LESS 文件的入口，其余文件会自动被导入并编译。

CSS output directory：
C:\OpenServer\domains\drupal8\themes\drupalbook\css

编译后会生成一个 style.css 文件，非常方便。虽然每次都会重新编译整个 Bootstrap，但省去了手动链接多个文件的麻烦。

Compile automatically on save：
启用后，每次保存文件（Ctrl + S）时会自动重新编译。建议开启。

保存设置后，按下 Ctrl + S 即可触发编译。您也可以右键点击 style.less 文件并选择 “Compile to CSS” 手动编译：

编译通常需要 5–10 秒：

如果编译成功，您将看到新的样式效果：

别忘了在 Drupal 管理后台禁用 CSS 和 JavaScript 聚合：

/admin/config/development/performance

默认情况下这些选项是启用的。

现在您可以开始进行页面布局工作，Bootstrap 自带的响应式布局和汉堡菜单（mobile hamburger menu）将自动生效。

要启用移动菜单，请将菜单区块放入 Navigation (Collapsible) 区域：

在接下来的课程中，我们将基于 Bootstrap 为主题创建 PSD 页面布局。