原文链接：Theme folder structure
主题就是包含了一系列定义前端层展示的文件集合。你还可以创建一个或更更多“子主题”，或者基于一个主题的变体。只有.info.yml 这个文件是必须有的，但是大多数主题和子主题也会用到其他一些文件。这个页面将会在典型的主题或子主题中列出常用的文件和文件夹。
主题位置
你必须将主题放在你的 Drupal 安装包的“themes”文件夹里。注意 Drupal 的核心主题如 Bartik 和 Seven 是放置在安装包的 core/themes 文件夹里。
最好的做法（good practice）是把贡献主题放在一个叫做“contrib”的子目录里，而你自定义的主题放置在“custom”文件夹里。
你的 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 还定义了一些元数据（meta data），样式表（style sheets），以及区块区域。这是主题中唯一的必须包含的文件。
*.libraries.yml
.libraries.yml 文件是用于定于JavaScript库的 那些可以由主题来加载的。
*.breakpoints.yml
断点（Breakpoints）定义在响应式设计中需要针对不同设备去响应的位置。断点定义在*.breakpoints.yml 文件里
*.theme
.theme文件是一个包含了所有条件逻辑和要输出的（预）处理数据的PHP文件。
css
最好的做法（good practice）是将 .css 文件放在“css”子目录里。Drupal 8 核心主题组织 CSS 文件是遵循 SMACCS 样式指南的。
js
主题特定的 JavaScript 文件放在“js”文件夹里。一个主题想要加载 JavaScript 文件必须先定义在 .libraries.yml文件里。
Images
最好的做法（good practice）是将图片放在“images”子目录里。
Screenshot
如果 screenshot.png 文件在一个主题里被发现，那么它将被用在外观（Appearance）页面。通常你可以在 .info.yml file中定义缩略图。
Logo
如果 logo.svg 文件在一个主题里被发现，那么它将被用在网站的头部。Logo也可以通过“外观” > “设置”（ Appearance > Settings）里上传。
Templates
模板（Templates）通常包含了 HTML 标记和一些逻辑。相比 Drupal 7，Drupal 8 模板（*.html.twig 文件）必须要放在“templates”子目录里。如果你遵循特定的命名约定，那么 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
更多信息
Coding standards: CSS file organization
以下是英文原文，可对照阅读：
Last updated May 5, 2015. Created on October 3, 2014. Edited by rteijeiro, pachabhaiya, zakiya, nitishchopra. You can edit this page, too.
A theme is a collection of files that define the presentation layer. You can also create one or more "sub-themes" or variations on a theme. Only the .info.yml file is required, but most themes and sub-themes will use other files as well. This page lists the files and folders that are found in a typical theme or sub-theme.
Location of themes
You must place themes in the "themes" folder of your Drupal installation. Note that Drupal core themes such as Bartik and Seven are located in the core/themes folder of your installation.
It is good practice to place the contributed themes in a sub folder named "contrib" and your own themes in a folder named "custom".
The (partial) structure of your Drupal installation could look as follows:
|-core | |-modules | |-themes | | |-bartik | | |-seven .. |-modules |-themes | |-contrib | | |-zen | | |-basic | | |-bluemarine | |-custom | | |-fluffiness
Theme folder structure
This is an example of the files and folders that are found in typical theme folder structure:
|-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
Below is a description of the most common files that you can find in a theme.
*.info.yml
A theme must contain an .info.yml file to define the theme. Among other things the .info.yml files defines meta data, style sheets, and block regions. This is the only required file in the theme.
*.libraries.yml
The .libraries.yml file is used to define JavaScript libraries that can be loaded by the theme.
*.breakpoints.yml
Breakpoints define where a responsive design needs to change in order to respond to different devices. Breakpoints are defined in a .breakpoints.yml file
*.theme
The .theme file is a PHP file that contains all the conditional logic and data (pre)processing of the output.
css
It is good practice to store .css files in the 'css' sub folder. Drupal 8 core themes organize CSS files following the SMACCS style guide. For a theme to load CSS files they must be defined in .libraries.yml file and can be overridden or removed in .info.yml file.
js
Theme specific JavaScript files are stored in the 'js' folder. For a theme to load JavaScript files they must be defined in .libraries.yml file.
Images
It is good practice to store images in the 'images' sub folder.
Screenshot
If a screenshot.png file is found in the theme folder then it will be used on the Appearance page. Alternatively you can define a screenshot in .info.yml file.
Logo
If a logo.svg file is found in the theme folder, then it will be used in the header of the website. Logos can also be uploaded at Appearance > Settings.
Templates
Templates usually provide HTML markup and some logic. Contrary to Drupal 7, in Drupal 8 templates (*.html.twig files) must be stored in the 'templates' sub folder. If you follow particular naming conventions, then Drupal will replace the default templates by the ones you provide, allowing you to override the default output.
Core theme Bartik folder structure
For an example, look at the Bartik folder structure that is located at 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