Drupal 8 主题文件夹结构
主题是一组定义表示层的文件。您还可以创建一个或多个“子主题”或主题变体。 只需要 .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