在 drupal 9 中创建子主题 (1)

📌 相关文章

📜 在 drupal 9 中创建子主题 (1)

📅 最后修改于: 2023-12-03 15:37:19.875000 🧑 作者: Mango

在 Drupal 9 中创建子主题

在 Drupal 9 中创建子主题，可以让我们在不影响父主题的情况下，自定义样式和功能。

步骤 1：创建子主题文件夹

在 Drupal 的 themes 目录下创建一个新的文件夹来保存子主题的代码。

cd /path/to/drupal/root/themes/
mkdir mysubtheme

步骤 2：创建子主题信息文件

创建一个子主题信息文件 mysubtheme.info.yml 来定义子主题的基本信息。

name: 'My Subtheme'
type: theme
description: 'My custom subtheme'
core_version_requirement: ^9
base_theme: stable

name：子主题的名称
type：子主题的类型
description：子主题的描述信息
core_version_requirement：所需的 Drupal 核心版本
base_theme：父主题的名称

步骤 3：复制父主题的模板文件

如果父主题的模板文件中没有需要覆盖或修改的部分，我们可以直接使用它们。在子主题目录下创建一个 templates 文件夹，并将需要修改的父主题模板文件复制到这个目录中。

cd /path/to/drupal/root/themes/mysubtheme/
mkdir templates
cp /path/to/drupal/root/themes/parenttheme/templates/page.html.twig templates/

步骤 4：修改子主题模板文件

在子主题的 templates 文件夹中，修改你需要自定义的模板文件。例如，在 templates/page.html.twig 中添加自定义 CSS 文件和 JavaScript 文件：

{# templates/page.html.twig #}

<!DOCTYPE html>
<html{{ html_attributes }}>
  <head>
    <title>{{ title }}</title>
    {{ meta_tags }}
    {{ links }}
    {{ base_path }}    
    {{ css }}
    <!-- Add custom CSS file -->
    {{ attach_library('mysubtheme/global-styling') }}
  </head>
  <body{{ attributes }}>
    {{ page_top }}
    {{ page }}
    {{ page_bottom }}
    {{ javascript }}    
    <!-- Add custom JavaScript file -->
    {{ attach_library('mysubtheme/global-scripts') }}
  </body>
</html>

步骤 5：创建子主题样式文件

在子主题目录下创建一个 css 文件夹，并添加自定义样式文件 mysubtheme.css。

cd /path/to/drupal/root/themes/mysubtheme/
mkdir css
touch css/mysubtheme.css

在子主题信息文件 mysubtheme.info.yml 中添加自定义样式库：

libraries:
  - mysubtheme/global-styling

在自定义 CSS 文件中添加样式：

/* css/mysubtheme.css */
body {
  background-color: #f0f0f0;
  color: #333;
}

步骤 6：创建子主题脚本文件

在子主题目录下创建一个 js 文件夹，并添加自定义脚本文件 mysubtheme.js。

cd /path/to/drupal/root/themes/mysubtheme/
mkdir js
touch js/mysubtheme.js

在子主题信息文件 mysubtheme.info.yml 中添加自定义脚本库：

libraries:
  - mysubtheme/global-scripts

在自定义 JavaScript 文件中添加脚本：

/* js/mysubtheme.js */
(function ($) {
  Drupal.behaviors.mysubtheme = {
    attach: function (context, settings) {
      // Your custom JavaScript here
    }
  };
})(jQuery);

步骤 7：清除缓存

修改之后，需要清除 Drupal 缓存才能生效：

drush cr

总结

使用以上步骤，您就可以在 Drupal 9 中创建一个子主题了。您可以自定义 CSS、JavaScript、模板文件和其他 Drupal 主题设置。