6.3. 基于 Stable 主题创建你自己的 Drupal 主题

从这篇文章开始，我们将在 Drupal 上创建我们自己的主题。在本教程的这一部分，我们将分析 Drupal 主题的基础内容——文件结构、如何包含和使用 CSS、JavaScript。我们的主题将基于核心的 Stable 主题构建。如果你想学习 Drupal，那么从 Stable 开始是一个很好的选择。不要一开始就使用 Bootstrap，否则你会经常遇到各种问题和错误。在本系列的下一部分，我们将在掌握了 Drupal 主题创建基础之后，再开始学习如何基于 Bootstrap 构建主题。

以下是官方文档：

https://www.drupal.org/theme-guide/8

为我们的主题创建文件夹

我们将所有新主题放在 /themes 文件夹中。你也可以像 Drupal 7 一样放在 sites/all/themes，但更推荐使用新的 Drupal 文件结构，即直接放在 /themes 文件夹中。

我将在 /themes 目录下创建文件夹 drupalbook，你可以根据需要命名你的主题：

创建主题信息文件 drupalbook.info.yml

在我们主题的文件夹中创建文件 theme_name.info.yml，例如：

关于 YAML 格式的详细信息，请参阅：

https://en.wikipedia.org/wiki/YAML

请注意两点：

1. 不要使用制表符（Tab）进行缩进，只能使用空格。
2. 缩进必须为一个或多个空格（例如 name: value，而不是 name:value）。

在 drupalbook.info.yml 文件中插入以下内容：

name: Drupalbook
type: theme
base theme: stable
description: My first Drupal theme.
core: 8.x
core_version_requirement: ^8 || ^9
libraries:
  - drupalbook/global-styling
regions:
  header: Header
  content: Content  # 此区域是必需的
  sidebar_first: 'Sidebar first' # 多词名称需加引号
  footer: Footer

解释每一行的含义：

name —— 我们主题的名称。主题的机器名称（machine name）来自文件夹名和文件名 drupalbook.info.yml，即 drupalbook。

type —— 项目类型。在这里是 theme（主题）。

base theme —— 我们继承自 Stable 主题。如果你希望从零开始创建主题，则可以写 false。

description —— 主题的描述，会显示在管理界面的外观部分。

core —— 指定该主题适用于的 Drupal 核心版本。

libraries —— 在这里包含我们主题所使用的库。我们会在接下来的 drupalbook.libraries.yml 文件中定义这些库。注意其中的 global-styling，我们将在该文件中引用它。

regions —— 定义主题中的区域（regions）。content 区域是必需的，Drupal 的内容通过该区域显示。如果区域名称包含两个或以上单词，请务必使用引号包裹。机器名称使用下划线（_）书写。

创建我们主题的库文件

创建 drupalbook.libraries.yml 文件，并添加以下内容：

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

逐行解释：

global-styling —— 这是我们在 drupalbook.info.yml 中引用的库名称。

css —— 这里包含我们要加载的 CSS 文件。注意，我们为 print.css 指定了 media: print，仅用于打印版本。

js —— 这里包含我们要加载的 JavaScript 文件。由于 jQuery 在 Drupal 中是可选的，如果我们的自定义 JS 中需要使用 jQuery，就要添加依赖：

dependencies:
  - core/jquery

创建 css 和 js 文件夹，并添加文件：

• css/style.css
• css/print.css
• js/custom.js

由于我们继承自 Stable 主题，因此模板文件也会自动继承自它。现在进入网站的外观设置页面：

/admin/appearance

清除缓存并启用我们的主题：

现在，我们的网站已经启用了全新的 Drupalbook 主题：