主题是一系列文件的集合,用来定义Drupal的表现层。但是只有一个.info.yml文件是必须的,大多数主题也会包含其它文件。

在本篇教程中我们将学习:

1. 在主题文件夹中的文件类型
2. 你的主题文件夹的存放位置
3. 有组织的存放文件和目录

在哪存放你的主题?

每个主题是一个单独的目录。这个目录名字应该和主题的名字一样,并且是唯一的。如果你的主题名字是icecream, 那么你主题的代码应该存在在icecream/目录里面。这个名字应该都是小写,以字母开头,使用下划线来替代空格。

你自己开发的主题,或者是从drupal.org上下载的主题,都应该被放在Drupal根目录下面的themes/文件夹里面。另外,建议你可以将这个目录分成themes/contrib/和themes/custom/,前者用来存放下载的主题,后者存放你自己的主题。如果是你的项目是多站点,那么你可以放在sites/*/themes/ 下面。

把你的主题放在themes/目录里面,而不是core/themes/下面,这样可以确保当你升级drupal core的时候,你可以替换core/目录里面的东西,而不会丢失你个人的。

Drupal的主题可以放在下面目录中的任何一个:

''Drupal root '' +-- core '' | +-- themes '' | +-- bartik '' | +-- classy '' | +-- engines '' | +-- seven '' | +-- stable '' | +-- stark '' +-- sites '' | +-- * '' | +-- themes '' | +-- maya '' +-- themes '' +-- contrib '' +-- zen
'' +-- custom '' +-- my_custom_theme

大多数情况下,我们建议你把自定义主题放在/themes/custom,下载的主题放在/themes/contrib下面,并且不需要过多关注其它地方。

主题中包含的文件类型

一个主题包含多种文件类型。每个主题的文件类型和数量都不一样。

下文我们使用THEMENAME来表示主题的唯一name/ID

THEMENAME.info.yml

定义了主题需要的原始信息,以及额外的设置选项。

这个文件是每个主题都必须的,并且这个文件的名字决定了主题的名字。

例如:themes/icecream/icecream.info.yml

学习 [如何创建一个.info.yml文件]

templates/.html.twig

Twig模板文件提供了HTML标记和非常基础的展示逻辑。模板文件通常按照特殊的命名规则,并且用来覆盖Drupal的输出。Twig模板要放在templates/子目录里面,这个目录可以被分成若干个子目录。

例如: themes/icecream/templates/node.html.twig, 和 themes/icecream/templates/layout/page--about.html.twig

了解更多:[重写模板文件]

THEMENAME.libraries.yml

定义了主题可以加载的CSS和JavaScript库。所有的CSS和JavaScript都应该通过资源库的形式添加到页面里面。

例如:themes/icecream/icecream.libraries.yml

THEMENAME.breakpoints.yml

定义了你的Drupal主题的响应式设计的breakpoints。

例如:themes/icecream/icecream.breakpoints.yml

config/* 目录

一些主题可能包含额外的Drupal配置。一个常见的例子就是图像风格(image style)。这个可选的配置被放在config/目录下的文件里面。

例如: themes/icecream/config/schema/icecream.schema.yml

CSS, JS, and 图片

任何你主题用到的CSS, JavaScript和图片资源。这些并不是Drupal所特有的,虽然Drupal用了一些转换方法来最佳实践。大多数情况下,你可以分别创建子目录:css/, js/ 和 images/。

例如: themes/\icecream/css/layout.css

一个完整的主题目录可能包含一些或者所有的文件。举个例子,我们来看下Bartik主题的文件:

'' /core/themes/bartik '' +-- bartik.breakpoints.yml '' +-- bartik.info.yml '' +-- bartik.libraries.yml '' +-- bartik.theme '' +-- config '' | +-- schema '' | +-- bartik.schema.yml '' +-- css '' | +-- base '' | | +-- elements.css '' | +-- colors.css '' | +-- components '' | | +-- block.css '' | | +-- book.css '' ... '' | | +-- views.css '' | +-- layout.css '' | +-- maintenance-page.css '' | +-- print.css '' +-- images '' | +-- tabs-border.png '' +-- logo.svg '' +-- screenshot.png '' +-- templates '' +-- block--search-form-block.html.twig '' ... '' +-- status-messages.html.twig

学习主题文件如何组织的最好的方法就是去看第三方主题的例子。你可以选择安装最多的主题,然后浏览源代码,借鉴一些适合你的方法。