主题是一组文件，定义了表示层。你也可以创建一个或多个“子主题”或主题变奏曲。只有。info.yml文件是必需的，但最重要的主题和分主题将使用其他文件以及。本页列出的文件和文件夹，发现在一个典型的主题或主题。

定位主题

你必须把主题在你的Drupal安装的“主题”文件夹。注意，Drupal主题如Bartik七位于core/themes的安装文件夹。

是很好的练习的地方提供的主题在子文件夹命名为“贡献”和你自己的主题，在一个名为“自定义”。

每个主题都包含在一个目录下的主题本身后。例如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.png |-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文件。

*。主题

的。主题文件是一个PHP文件包含所有的逻辑和数据（预）的输出处理。

CSS

这是很好的做法，店。在“CSS”子文件夹中的CSS文件。Drupal 8核心主题组织CSS文件后，smaccs风格指南。一个主题加载CSS文件必须libraries.yml文件中定义的。可重写或删除。info.yml文件。

JS /

主题特定的JavaScript文件存储在“JS”文件夹。一个主题加载JavaScript文件必须libraries.yml文件中定义的。。

图像

这是很好的做法，存储的图像在images文件夹的子文件夹。

screenshot.png

如果一个screenshot.png文件在主题文件夹中找到并将外观采用页。或者你可以在info.yml文件定义一个截图。。

明珠台

如果在主题文件夹中找到一个你的主题LOGO的SVG矢量文件，然后可以在网站的标题。标志也可以上传外观>设置。

模板/

模板提供的HTML标记和表示逻辑。相反，Drupal 7，在Drupal 8模板文件（*. html.twig文件）必须保存在“模板”文件夹的子文件夹。如果你遵循特定的命名规则，那么Drupal将由您提供的替换默认的核心模板，允许你重写默认的标记。

核心主题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