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