如何通过 9 个简单步骤创建自定义 Drupal 9 主题

Drupal 9 为开发人员和网站所有者提供了创建定制组件的灵活性，这些组件可以组合在一起以构建引人入胜的数字体验。 主题是 Drupal 的设计块，代表网站的视觉外观。 Drupal 9 提供了核心主题和第三方主题的选择，最受欢迎的是 Bootstrap 主题。 但是，如果 Drupal 9 主题都不适合您，那么您可能应该考虑自定义主题开发。 借助 Drupal 9 自定义主题，您可以根据具体要求量身定制您的设计。

Drupal 9 提供 Bartik 作为 Drupal 的前端主题，但如果您需要 Drupal 9 自定义主题，那么您可以创建自己的 Drupal 9 主题开发，从而提高您的 Drupal 主题技能。 真正理解 Drupal 9 主题开发的最简单方法是从头开始练习和创建。

Drupal 8 现已停产。 现在是迁移到 Drupal 9 的时候了。但是，如果您仍在尝试在 Drupal 8 中创建自定义主题，这些步骤也适用于 Drupal 8 设置。

自定义 Drupal 9 主题开发入门

让我们开始为我们的 Drupal 网站创建一个 Drupal 9 主题。
第 1 步：首先，我们需要在“web/themes/custom”文件夹下创建一个自定义主题。 我们将文件夹命名为custom_theme 。

第 2步：接下来，我们需要创建一个info.yml 文件。 我们需要为其指定基本键。 让我们在这里指定它 -

代码：
名称：自定义主题
类型：主题
描述： “我的网站的自定义主题。”
包装: 其他
核心版本要求：^8 || ^9

第 3 步：现在，让我们创建 一个libraries.yml文件，用于为我们的自定义 Drupal 9 主题指定我们需要的所有库（CSS 和 JS）。 我们还将在此处创建 CSS 和 JS 目录及其文件以将其链接。 我们将把库命名为global-styling 。

代码：
全局样式：
版本：1.x
js ：
js/script.js ：{}
css :
主题：
css/style.css ：{}

第 4 步：创建libraries.yml文件后，我们需要将其链接到我们的主题。 为此，我们将把它添加到info.yml文件中 然后将其应用于整个主题。

代码：
图书馆：
- custom_theme/全局样式

因此，关键是库，路径是主题名称 - ' custom_theme '/库名称 - 'global-styling' 。

第 5步：接下来，我们需要继承“Base Theme”。在我们的例子中，我们将继承“ classy ”主题，它是 Drupal 的核心主题。 因此，关键将是info.yml 中的基本主题。

代码：
基本主题：优雅

第 6步：现在，我们将为我们的主题定义“区域”。 在info.yml 中，我们必须在 'regions' 键下定义它。

 代码：
地区：
品牌: 品牌
导航：主导航
搜索: 搜索
精选：精选
内容: 内容
right_sidebar : 右侧边栏
footer_first : 页脚第一
footer_second : 页脚第二
footer_third ：第三页脚
footer_bottom : 页脚底部

在“区域”键下，您可以为自定义 Drupal 主题定义您的区域。 这里，
品牌：是地区的ID，应该是小写字母。
Branding：是区域的名称，可以是大写字母。

第 7 步：为自定义 Drupal 主题定义区域后，我们需要覆盖page.html.twig以获取我们的“区域”而不是经典主题。 我们将创建templates/system目录，我们将在该目录下创建page.html.twig 。

 代码：
< header aria-label ="Site header" class ="header" id ="header" role ="banner" >
{{ page.branding }}
{{ page.navigation }}
{{ page.search }}
</标题>
< section class ="featured" id ="featured" role ="complementary" >
{{ page.featured }}
</节>
< section class ="main" id ="main" >
< main aria-label ="站点主要内容" class ="content" id ="content" role ="main" >
{{ 页面内容}}
</主要>
<一边类=“右-侧栏” ID =“栏”角色=“互补”>
{{ page.right_sidebar }}
</一边>
</节>
< footer aria-label ="网站页脚" class ="footer" id ="footer" role ="contentinfo" >
< div class ="footer--top" >
{{ page.footer_first }}
{{ page.footer_second }}
{{ page.footer_third }}
</ div >
< div class ="footer--bottom" >
{{ page.footer_bottom }}
</ div >
</页脚>

在 page.html.twig 中，我们将为我们的区域创建 HTML 结构。 正如你在 {{ page.branding }} 中看到的——这里，

page - 是在页面中呈现“区域”的关键

品牌 -是我们在info.yml文件中定义的区域。

所以现在，我们已经创建了我们的区域并将其呈现在页面上。

第 8 步：转到 Drupal 站点中的外观。 您可以在Uninstalled themes部分看到您的自定义 Drupal 主题。

您需要单击“安装并设置为默认”选项以在站点上安装您的 Drupal 主题。

安装后，转到Structure -> Block Layout 。 您的自定义主题将出现在块布局下。

您将看到“演示块区域（自定义主题） ”的链接。单击该链接。 您可以看到您在info.yml 中声明并在page.html.twig 中添加的所有区域

第 9 步：您现在几乎完成了 Drupal 9 中的主题化！ 接下来，您需要根据您的设计在 CSS 中为每个区域应用样式。 在这种情况下，我们将使用CSS ； 如果您愿意，您甚至可以使用SCSS 。 只需检查品牌区域 - 您应该看到区域类，然后将 CSS 添加到该类。

 . 标题{
 显示：弹性；
 justify-content : space-between ;
 填充： 10像素；
}


. 标题。 区域{
 填充： 5像素；
}


. 标题。 区域品牌{
 弹性： 0 1 20 %；
}
		



. 标题。 区域导航{
 弹性： 0 1 50 %；
}


. 标题。 区域搜索{
 弹性： 0 1 30 %；
}


. 地区。 块区域{
 填充： 15像素；
}


. 精选{
 填充： 40像素20像素；
 背景颜色：印度红；
}


. 主要{
 填充： 50像素0 ；
 显示：弹性；
 justify-content : space-between ;
}


. 主要的。 内容{
 弹性： 0 1 65 %；
}


. 主要的。 右侧边栏{
 弹性： 0 1 30 %；
}


. 页脚--顶部{
 显示：弹性；
 justify-content : space-between ;
 填充： 10像素；
}
		



. 页脚--顶部。 区域{
 填充： 5像素；
}


. 区域页脚优先，。 区域页脚秒，。 区域页脚第三{
 弹性： 0 1 30 %；
}

结果：

您的 Drupal 9 自定义主题已准备就绪！

如果您需要为您的 twig 文件编写任何钩子或创建建议，您可以在您的自定义 Drupal 主题中添加 .theme 文件（如下所示）。