logo

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

额外区块类型 (EBT) - 样式化、可定制的区块类型:幻灯片、标签页、卡片、手风琴等更多类型。内置背景、DOM Box、JavaScript 插件的设置。立即体验布局构建的未来。

演示 EBT 模块 下载 EBT 模块

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

额外段落类型 (EPT) - 类似的基于 Paragraph 的模块集合。

演示 EPT 模块 滚动

滚动

Drupal 8 主题文件夹结构

03/10/2025, by Ivan

主题是一组定义表示层的文件。您还可以创建一个或多个“子主题”或主题变体。 只需要 .info.yml 文件,但大多数主题和子主题都会使用其他文件。本页列出了典型主题或子主题中的文件和文件夹。

主题的位置

您应该将主题放在 Drupal 安装的 "themes" 文件夹中。请注意,Drupal 的核心主题(如 Bartik 和 Seven)位于安装的 core/themes 文件夹中。

建议将贡献的主题放在 “contrib” 子文件夹中,而将您自己的主题放在 “custom” 文件夹中。

每个单独的主题都包含在以该主题名称命名的目录中。例如,fluffiness。名称必须小写,以字母开头,并使用下划线 (_) 代替空格。

您的 Drupal 安装的(部分)结构可能如下所示:

  |-core
  |  |-modules
  |  |-themes
  |  |  |-bartik
  |  |  |-seven
  ..
  |-modules
  |-themes
  |  |-contrib
  |  |  |-zen
  |  |  |-basic
  |  |  |-bluemarine
  |  |-custom
  |  |  |-fluffiness

主题文件夹结构

以下是典型主题文件夹结构中的文件和文件夹示例:

  |-fluffiness.breakpoints.yml
  |-fluffiness.info.yml
  |-fluffiness.libraries.yml
  |-fluffiness.theme
  |-config
  |  |-install
  |  |  |-fluffiness.settings.yml
  |  |-schema
  |  |  |-fluffiness.schema.yml
  |-css
  |  |-style.css
  |-js
  |  |-fluffiness.js
  |-images
  |  |-buttons.png
  |-logo.svg
  |-screenshot.png
  |-templates
  |  |-maintenance-page.html.twig
  |  |-node.html.twig

以下是主题中最常见文件的说明。

*.info.yml
主题必须包含定义主题的 .info.yml 文件。除了其他内容外,.info.yml 文件定义了元数据、库和区块区域。这是主题中唯一必需的文件。

*.libraries.yml
.libraries.yml 文件用于定义 JavaScript 和 CSS 库,这些库可以由主题加载。

*.breakpoints.yml
断点定义了响应式设计应在何处改变,以适应不同设备。断点定义在 .breakpoints.yml 文件中。

*.theme
.theme 文件是一个 PHP 文件,包含所有条件逻辑和数据预处理。它还可以扩展核心主题设置。创建扩展主题设置。

CSS/
建议将 .css 文件存储在 "css" 子文件夹中。Drupal 8 核心主题根据 SMACSS 风格指南组织 CSS 文件。 为了让主题加载 CSS 文件,它们必须在 .libraries.yml 文件中定义,并且可以在 .info.yml 文件中被覆盖或移除。

JS/
与主题相关的 JavaScript 文件存储在 "js" 文件夹中。为了让主题加载 JavaScript 文件,它们必须在 .libraries.yml 文件中定义。

images/
建议将图像存储在 "images" 子文件夹中。

screenshot.png
如果 screenshot.png 文件位于主题文件夹中,它将显示在 “外观” 页面中。此外,您还可以在 .info.yml 文件中定义截图。

logo.svg
如果主题文件夹中有主题徽标的 SVG 矢量文件,它可以用于网站页眉。徽标也可以在 “外观”>“设置” 中上传。

templates/
模板提供 HTML 标记和部分表示逻辑。与 Drupal 7 不同,Drupal 8 模板文件(*.html.twig 文件)必须存储在 "templates" 子文件夹中。如果您遵循特定的命名约定,Drupal 将用您提供的模板替换默认核心模板,从而允许您覆盖默认标记。您还可以将模板组织在子文件夹中,例如所有区块模板放在 templates/blocks 中,所有视图模板放在 templates/views 中。

核心主题 Bartik: 文件夹结构

例如,查看 Bartik 的文件夹结构(位于 core/themes/bartik):

  |-bartik.breakpoints.yml
  |-bartik.info.yml
  |-bartik.libraries.yml
  |-bartik.theme
  |-color
  |  |-color.inc
  |  |-preview.css
  |  |-preview.html
  |  |-preview.js
  |-config
  |  |-schema
  |  |  |-bartik.schema.yml
  |-css
  |  |-colors.css
  |  |-layout.css
  |  |-maintenance-page.css
  |  |-print.css
  |-images
  |  |-add.png
  |  |-required.svg
  |  |-tabs-border.png
  |-logo.svg
  |-screenshot.png
  |-templates
  |  |-block--search-form-block.html.twig
  |  |-block--system-branding-block.html.twig
  |  |-block--system-menu-block.html.twig
  |  |-block.html.twig
  |  |-comment.html.twig
  |  |-field--taxonomy-term-reference.html.twig
  |  |-maintenance-page.html.twig
  |  |-node.html.twig
  |  |-page.html.twig
  |  |-status-messages.html.twig

更多信息

编码标准: CSS 文件组织