任何Drupal开发人员需要做的第一个工作之一就是了解Drupal如何工作并习惯它。从头开始创建Drupal主题是他们绝对需要的技能。
但是drupal主题可能很难，而且势不可挡，特别是对于没有这方面经验的新用户。
但别担心。当我们打算通过一个详细的过程来创建您自己的基本和响应式drupal 8主题时，让您的思绪消失。
为什么要从头开始创建D8主题？
- 了解drupal主题如何工作 - 为什么会有这样一个步骤，为什么你需要这些文件。
- 有自己的基本主题，而不是依赖别人的产品。
- 提高Drupal教学技巧。最有用的学习方法是从头开始练习并为自己创造一个。
- 了解Drupal 8和Drupal 7主题之间的区别。
假设
- 阅读我们关于基本Drupal 8主题的帖子（如果你没有，没有问题。你仍然可以创建一个）。
- 关于样式的基本知识（html，css）。
- 关于响应式设计的基础知识（我们使用Bootstrap进行响应）（如果你不想使用Bootstrap，请跳过这个）
了解主题文件夹结构和主题文件
在开始之前，我们需要知道完整的D8主题结构是什么样的。这是为了帮助您在头脑中获得可视图像，以便在后续步骤中更轻松地完成工作。
| - config
| | -install
| | | -themename.settings.yml
| | -schema
| | | -themename.schema.yml
| - css
| | -style.css
| - js
| | -business.js
| - images
| | -buttons.png
| - 包括
| | -bootstrap
| | -flexlider
| - templates
| | -block.html.twig
| | -comment.html.twig
| | -html.html.twig
| | -maintenance-page.html.twig
| | -node.html.twig
| | -page.html.twig
| - favicon.ico
| - logo.png
| - screenshot.png
| - themename.breakpoints.yml
| - themename.info.yml
| - themename.libraries.yml
| - themename.theme
以下是您可以在D8主题中找到的最常见主题文件和键的说明。
.info.yml
此强制文件提供有关您的主题的信息.libraries.yml
定义你的库（主要是你的JS，CSS文件）。.breakpoints.yml
定义适合不同屏幕设备的点。.theme
PHP文件，用于在变量与.html.twig文件中的标记合并之前存储变量的条件逻辑和数据预处理。/css
你的css文件所在的位置。必须在info和libraries文件中定义才能运行。/js
你的js文件所在的位置。必须在info和libraries文件中定义才能运行。/images
存储主题图像的位置。将图像放在此文件夹中是一种很好的做法。/includes
其中放置了第三方图书馆（如Bootstrap，Foundation，Font Awesome等）。将它们存储在此文件夹中是一种很好的做法/templates
放置所有模板文件（提供主题页面的html标记的文件）。logo.png
你的主题标志，如果你正在使用它。favicon.ico
你的主题图标，如果你正在使用它。screenshot.png
你的主题截图将显示在admin/appereance。
您的主题布局显示
我们应该首先确定网站布局的样子。我们将使它变得非常简单。如下所示，您的Drupal模板将包含标题，侧边栏，内容区域和页脚。
头
内容
侧边栏
页脚
在掌握了关于模板文件夹，文件和主题布局的一些基本想法之后，让我们转到主要部分 - 创建一个简单的响应式Drupal 8模板。
一步一步创建你的Drupal主题
1.创建主题文件夹
你必须知道的最重要的事情是，在Drupal 8中，主题文件夹位于core/theme，而不是像Drupal 7中的sites / all / theme。基本主题文件夹将包含图像，CSS，JS，模板的子文件夹（这个包含模板文件），并包含（存储第三方库）。
我们将创建一个基本的主题文件夹结构如下：
- 主题
- CSS
- JS
- 模板
- 包括
2.创建.info.yml文件
Drupal模板引擎如何扫描您的主题信息？该.info.yml文件就是答案。
无可否认，.info.yml文件是您首先需要包含的最重要的文件。
请注意，如果您熟悉Drupal 7主题系统，则不再应用[theme_name] .info。在D8中，您必须使用.info.yml信息文件的扩展名。
完整的info.yml文件将具有以下以下键：
name（必填）
主题的名称，将显示在管理/外观D8管理员中description（可选，但建议）
您想要描述的主题，也出现在管理/外观中version（可选）
主题的版本。它将显示主题名称。type（必填）
通知Drupal有关扩展类型的信息。例如主题，模块或配置文件。core（必需）
支持的Drupal核心主要版本base theme（可选但建议使用）
指明自定义主题将继承的基本主题。如果没有定义，Drupal将使用“稳定”作为基本主题。region（可选）
定义放置块的主题区域。如果不在.info.yml文件中声明任何区域，Drupal将使用核心的默认区域。请记住，如果您只定义一个区域，则不再应用默认区域。如果在info文件中定义区域，则需要存在“content”区域
现在，对于.info.yml文件，我们将包含这些值
名称：基础
类型：主题
基础主题：优雅
描述：“现代和响应的Drupal 8主题”
包：自定义
核心：8.x
区域：
标题：标题
标题：标题
内容：内容
侧栏：侧栏
页脚：页脚
headline，header，content，sidebar，footer已包括在该区域部分。这是为了通知Drupal模板机您的主题将具有这些区域。
但是，在这里定义它们是不够的。这些地区仍然没有出现。您还必须将它们包含在page.html.twig文件中。（我们将在第4步中介绍）。
请注意，classy它用作基本主题。在D8中，有2个默认基本主题 - 稳定和优雅。我们在过去的帖子中解释了两者的不同之处。基本上，
稳定：最小标记和极少数类
Classy：提供一些默认标记，带有合理的样式类
我们喜欢使用Classy，因为它给出了一些预定义的正确类，使样式工作更方便。
3.定义库文件
这是D8的变化。在D7中，您将在.info文件中指出所有库（如样式 - css和scripts -js），现在您必须在单独的文件中定义它们 - .libraries.yml文件。
在您的主题的情况下，我们将style.css用于样式，以及Bootstrap用于响应显示的库。所以我们将把style.css文件放在core/css文件夹中。引导库（bootstrap.css）将位于includes/bootstrap/css目录中。
global-styling：
version：VERSION
css：
theme：
includes / bootstrap / css / bootstrap.css：{}
css / style.css：{}
4.创建主题区域
4.1了解drupal模板文件
如果你问Drupal如何呈现主题的html，答案是template files。它们都以扩展名命名.html.twig。
这是D8中的新更新。由于在D8中Twig取代了D7的PHP引擎，所有tpl.php模板文件都改为.html.twig。这些文件放在templates文件夹中。
让我们浏览每个模板文件的功能。
themename.info.yml - 定义主题 themename.theme - 编程主题
html.html.twig - 定义网站上的每个页面
page.html.twig - 定义网站上的每个页面
node.html.twig - 定义站点上的每个节点
region.html.twig - 定义站点上的每个区域
block.html.twig - 定义网站上的每个块
field.html.twig - 定义站点上的每个动态元素
如果要更改默认HTML和页面的显示方式，可以创建上面文件的自己版本。
您现在要更改的最重要文件是page.html.twig。是页面的所谓HTML框架，因为它将呈现页面HTML布局的外观。
Drupal将读取此文件并告知您的主页如何显示，如果您不包含其他模板文件，甚至会显示所有页面的显示方式。
所以现在的工作就是创建一个page.html.twig文件。
4.2创建page.html.twig文件
从空的page.html.twig文件开始。这里存储了主题正文部分的所有代码。该文件包含3个主要元素：
- 主题的Html标记。
- 区域定义。
- 其他内容项的变量（目前，我们希望它是基本的，所以page.html.twig仅用于创建区域）
注意：您也可以使用核心的page.html.twig core\modules\system\templates\page.html.twig作为参考，并根据您的需要更改此文件。
我们将创建一个基本的HTML区域的页面，包括标题，标题，主，和页脚区域。请注意，如果添加这些区域，则必须先在info.yml文件中定义它们。
<div id="page"> <section id="headline"> </section> <header> </header> <section id="main"> </section> <footer> </footer> </div>
接下来，将页面的所有区域放入Bootstrap容器中，以便于响应。
我们将在每个部分（标题，标题，主页脚，页脚）之间添加这些代码。
<div class="container">... </div>
对于内容和侧边栏区域，我们将使用Bootstrap的列类，以便将这两个区域划分如下：
主要内容将占站点宽度的75％，侧栏将占25％。那是桌面。
对于移动屏幕，主要内容和侧边栏将显示为全宽（100％）。
您的主要部分代码将如下所示
<section id="main"> <div class="container"> <div class="row"> <div id="content" class="col-md-9 col-sm-9 col-xs-12"> {{ page.content }} </div> {% if page.sidebar %} <aside id="sidebar" class="sidebar col-md-3 col-sm-3 col-xs-12"> {{ page.sidebar}} </aside> {% endif %} </div> </div> </section>
page.html.twig文件的最后一步是将这些树枝代码添加到标题部分，以将它们呈现给页面。（如果您不知道twig语法，请返回我们过去的帖子，或阅读twig语法文档）。
{％if headline.sidebar％}
{{headline.sidebar}}
{％endif％}
上面的代码创建了一个条件来检查标题区域是否包含某些内容。如果有，标题区域将被打印出来。这是一种很好的做法，可确保不会在页面上打印空标记。
现在将相似和相关的代码添加到标题，内容，侧边栏和页脚。
内容部分是一个例外。它不需要条件语句，因为内容区域中总会存在某些内容。
完成后，page.html.twig文件的完整代码将如下所示：
<div id="page"> {% if page.headline %} <section id="headline"> <div class= "container"> {{ page.headline }} </div> </section> {% endif %} <header id="header"> <div class="container"> {{ page.header }} </div> </header> <section id="main"> <div class="container"> <div class="row"> <div id="content" class="col-md-9 col-sm-9 col-xs-12"> {{ page.content }} </div> {% if page.sidebar %} <aside id="sidebar" class="sidebar col-md-3 col-sm-3 col-xs-12"> {{ page.sidebar}} </aside> {% endif %} </div> </div> </section> {% if page.footer %} <footer id="footer"> <div class="container"> {{ page.footer }} </div> </footer> {% endif %} </div>
5.创建主题内容
现在您已经为主题提供了足够的定义，让我们开始启用主题，并创建内容。
5.1启用主题
在激活之前，您的主题将无效。
转到/admin/appearance，找到您的基础主题，然后选择设置为默认值。
5.2将内容放在各自的区域
Drupal上的每个部分都将被称为块。要使其显示在正确的位置，您需要将其放在正确的区域。
由于我们已创建区域，导航到basis/admin/structure/block，您将看到许多部分，包括标题，标题，内容，侧边栏，页脚。
对于您的基础主题，我们希望它具有可见的网站设计布局。
标题 - 网站徽标和菜单
内容 - 您的帖子内容
边栏 - 搜索表单
页脚 - 由Drupal页脚提供支持
为此，请将这些块放在相关区域中 basis/admin/structure/block
头 主导航（您的菜单） 网站品牌（您的徽标和标语） 内容（您的头版显示） 侧边栏 搜索表格 页脚 由Drupal提供支持
5.3。创建徽标
默认情况下，Drupal将logo.svg在主题\ logo.svg中查找徽标显示。所以你需要创建一个来启用它。
您还可以选择要显示的内容 - 网站徽标，网站名称或网站标语/admin/structure/block/manage/sitebranding
5.4创建主题截图
您的屏幕截图将显示在管理界面中您主题旁边admin/appearance。要创建一个，请放置screenshot.png在主题目录中命名的图像文件。
6.为您的主题设计样式
现在，您可以使用您的网页设计，前端技巧和创意来创建您喜欢的主题外观。对于我们的D8主题，我们使用Bootstrap进行响应，使用SASS进行风格化。但这是我们的工作方法。做你想做的事。
7.享受结果
最后，您有一个响应式Drupal主题，左侧是菜单和主要内容，右侧是带搜索表单块的侧边栏。并根据您的前端即兴技巧设计它。
您可以使用我们在本文中指导您的主题作为参考。请注意，我们在style.css文件中创建了非常基本的样式，使页面不那么粗糙。因此，如果您想要设置自己的主题样式，只需根据自己的喜好更改css文件即可。
问题：
如果您对创建Drupal 8主题的步骤有任何疑问，或者有关Drupal 8主题的任何问题，请在下面发表评论。
评论