Drupal8 社区文档之主题文件夹结构

主题是一组文件，定义了表示层。你也可以创建一个或多个“子主题”或主题变奏曲。只有。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