6.2. Drupal 8 主题的组成结构。Stark 主题概览

17/10/2025, by Ivan

在 Drupal 7 中，你可以很快地基于 Zen 创建一个子主题并开始构建网站。从 Drupal 8 开始，也有几个主题构建器可以帮助你创建自己的主题。但在基于它们创建子主题之前，你需要先了解一下主题的结构和文件布局。

Drupal 的开发者建议我们以 Stark 主题为例进行学习。这个主题被添加到 Drupal 核心中，主要是为了帮助开发者熟悉主题的结构。让我们来看一下 Stark 主题的内部结构：

Stark.info.yml 文件

我们从 stark.info.yml 文件开始。在 Drupal 7 中，主题信息保存在 .info 文件中；而在 Drupal 8 中，所有配置文件都采用 YML 格式，因此主题文件扩展名变为 .info.yml。在 YML 格式中，键（key）与值（value）之间用冒号分隔。

主题名称：

name: Stark

type —— 项目类型，可以是 theme 或 module，此处为主题：

type: theme

description —— 主题在外观页面上显示的描述：

description: 'An intentionally plain theme with no styling to demonstrate default Drupal’s HTML and CSS. Learn how to build a custom theme from Stark in the Theming Guide'

package —— 用于将 Drupal 项目分组（例如模块），便于管理：

package: Core

# version: VERSION —— 对于贡献模块（contrib module），版本号会自动设置，因此这里的行被注释掉了。实际上版本号会在文件底部由 Drupal.org 自动插入。

Drupal 核心版本同样由 Drupal.org 自动填充：

对于 Drupal 8.8 及更高版本：

core: 8.x
core_version_requirement: ^8 || ^9

对于 Drupal 8.8 以下版本：

# core: 8.x

base theme —— 是否基于其他主题。false 表示不继承任何主题：

base theme: false

Drupal.org 自动插入的版本信息块：

# Information added by Drupal.org packaging script on 2016-02-03
version: '8.0.3'
core: '8.x'
project: 'drupal'
datestamp: 1454490380

stark.libraries.yml 文件

该文件中包含主题的 CSS 和 JS 文件：

global-styling:
  version: VERSION
  css:
    base:
      css/layout.css: {}

我们也可以在其中添加 JavaScript 文件：

global-styling:
  version: VERSION
  css:
    base:
      css/layout.css: {}
  js:
    js/custom.js: {}

需要注意的是，jQuery 现在在 Drupal 中是可选的，可能不会自动加载到页面中。如果你在自定义脚本中使用 jQuery，需要显式添加依赖：

global-styling:
  version: VERSION
  css:
    base:
      css/layout.css: {}
  js:
    js/custom.js: {}
  dependencies:
    - core/jquery

此外，还可以为 CSS 文件设置显示条件，例如哪些文件总是加载，哪些只在打印时加载：

global-styling:
  version: VERSION
  css:
    base:
      css/layout.css: {}
      css/style.css: {}
      css/colors.css: {}
      css/print.css: { media: print }
  js:
    js/custom.js: {}
  dependencies:
    - core/jquery

README.txt 与 screenshot.png 文件

这些文件用于说明主题的安装与使用方法，并展示主题的外观截图。

Logo.svg 文件

如果主题根目录中包含 logo.svg 文件，Drupal 会自动加载该文件作为主题的默认标志。你也可以在主题设置界面中上传自定义 Logo。

Config 文件夹与 stark.schema.yml 文件

另一个与主题相关的 YML 文件，用于存储主题配置。对于 Stark 主题，该文件仅包含主题设置页面的标题。

css 与 js 文件夹

这些文件夹用于存放自定义的 CSS 和 JavaScript 文件。但请注意，仅仅将文件放入文件夹并不会自动加载。每个文件都必须在 stark.libraries.yml 中显式声明。

stark.breakpoints.yml 文件

该文件定义了网站移动端的屏幕断点（breakpoints）。这是 Drupal 的新特性之一，我们将在后续文章中详细讨论。

stark.mobile:
  label: mobile
  mediaQuery: '(min-width: 0px)'
  weight: 0
  multipliers:
    - 1x
stark.narrow:
  label: narrow
  mediaQuery: 'all and (min-width: 480px) and (max-width: 959px)'
  weight: 1
  multipliers:
    - 1x
stark.wide:
  label: wide
  mediaQuery: 'all and (min-width: 960px)'
  weight: 2
  multipliers:
    - 1x

以上就是用于学习主题结构的 Stark 主题。下一篇文章中，我们将学习如何基于 Stable 主题创建自己的主题。

额外区块类型 (EBT) - 全新的布局构建器体验❗

❗额外段落类型 (EPT) - 全新的 Paragraphs 体验