6.1.1 - 基于 Zen 创建 Drupal 8 主题

Zen 是 Drupal 最受欢迎的主题构建器。如果你需要快速为网站创建一个基于三栏布局的响应式设计，那么 Zen 正是你所需要的。你只需安装它并运行 npm install，Zen 就会为你的设计准备好基础框架。我们按步骤来看。

从官方网站下载 Zen 父主题：

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

从 Drupal 8 开始，我们可以直接将主题放入 /themes 文件夹，因此我们将 Zen 主题文件夹放入该目录下。

在 /themes/zen/STARTERKIT 文件夹中，有一个子主题模板，你可以手动基于它创建自己的子主题。为此，你需要将所有 STARTERKIT 替换为你的主题名称，并将新子主题的文件夹从 /themes/zen 移动到其他位置（例如 /themes/custom），以防升级 Zen 时丢失你的子主题。但我强烈建议使用 Drush 或主题生成器来完成这一步。

使用 Zen 主题时，还需要安装 Components Libraries 模块：

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

让我们启用 Zen 主题，但不要将其设为默认主题。稍后我们会将我们的子主题设置为默认主题。运行以下 Drush 命令：

drush zen drupalbook

Drush 会为我们创建一个名为 drupalbook 的子主题（你可以将 “drupalbook” 替换为任意主题名称）。现在我们可以将新的 drupalbook 子主题设为默认主题。主题此时已经可以工作，但我们还需要启用 gulp 任务。为此，你需要先安装 Node.js。

https://nodejs.org/en/download/

Node.js 可以安装在 Windows、Mac OS、Ubuntu 等操作系统上。

安装 Node.js 后，你还需要配置它的包管理器 npm：

https://docs.npmjs.com/getting-started/installing-node

现在在 PhpStorm 控制台中切换到 /themes/drupalbook 文件夹：

cd themes/drupalbook

然后运行命令一次性安装所有 Zen 依赖：

npm install

接着，右键点击 gulpfile.js 文件并选择 “Show Gulp Tasks”（显示 Gulp 任务）：

初始状态下，所有样式都已编译并存放在 /themes/drupalbook/components/asset-builds/css 文件夹中。要编写新样式，你需要使用 .scss 文件编写，Gulp 会自动重新编译它们。为此，运行 watch:css 任务。现在，当你修改 .sass 文件时，Zen 会自动生成新的 CSS 文件（或者在 PhpStorm 中按 Ctrl + S 保存文件时自动更新，你也可以修改设置）。

要编辑主题的 JavaScript，可使用附带的文件 /themes/drupalbook/js/script.js。

至此，你基于 Zen 的 Drupal 8 子主题已准备就绪：

安装 Node.js 时，可能会出现与 Gulp 相关的错误。如果你成功配置了 Zen，请在评论中留言分享经验。