Drupal9.2.6自定义主题的配置方法 三步搞定

  之前白龙网曾写过《Drupal8.7.6自定义主题、安装及其查看》、《Drupal9.2.4自定义主题的配置安装与开发查看》文章,详细介绍了Drupal8.7.6自定义主题开发环境搭建方法。按照上述方法来配置Drupal9.2.6自定义主题开发环境,系统是无法运行的。可能原因是升级后的Drupal9.2.6增加了很多Drupal8.7.6没有的内容。
 
  网上也没有Drupal9.2.6相关配置的现成教程,因此,要使用Drupal9.2.6来开发网站,一开始就无从参考,无法下手,让不少drupal新手从业者望而却步。
 
  复制了一份drupal9.2.6自带的主题进行了优化、删减,也没有把开发环境搭建起来。
 
  问题总要解决,于是从drupal官网下载了一个drupal9的主题案例,解压后,放到/themes/目录下,即/themes/my_themes。在“管理->外观”菜单下安装自定义主题my_themes并设置其为默认主题。重建缓存后,刷新前端页面,自定义主题可以正常打印。
 
  写到这里,可能很多同学就明白了,接下来,我们要做的是,借助下载的这个自定义主题,删除冗余内容,留下必要功能,结果就形成了自己的自定义主题。实践证明,这条路是行的通过的,可以正常运行优化后的drupal9.2.6主题。具体来说,可以从以下4个方面入手。
 
  一、自定义主题目录
 
  1.新建/themes/my_themes/主题目录,用来放置css、js、images、templates目录与my_themes.info.yml、my_themes.libraries.yml等配置文件;
 
  2.新建/themes/my_themes/css/目录,用来放置CSS文件;
 
  3.新建/themes/my_themes/images/目录,用来放置网站的图片内容;
 
  4.新建/themes/my_themes/js/目录,用来放置JS文件;
 
  5.新建/themes/my_themes/templates/目录,用来放置网站模板。
 
  6.需要注意的是,主题的名子my_themes要与配置文件及配置文件内相关名称my_themes.info.yml、my_themes.libraries.yml要保持一致。
 
  二、添加静态页内容
 
  分别在/themes/my_themes/css/、/themes/my_themes/images/、/themes/my_themes/js/、/themes/my_themes/templates/等目录下放置网站需要的css、js、images文件与twig模板(例如首页模板:page--front.html.twig)对应的静态页index、list、article。
 
  三、配置相关的文件
 
  1.配置my_themes.info.yml信息文件
 
  (1)新建/themes/my_themes/my_themes.info.yml配置文件,并添加如下内容:

name: my_themes
type: theme
description: '白龙网'
package: core
base theme: false
core: 8.x
core_version_requirement: ^8 || ^9
libraries:
  - my_themes/global-components
regions:
  content: 'content'
 
  (2)这个文件主要是区域的自定义,可以用系统自带的区域,或者手动添加你需要的区域:featured_top:'Featuredtop';
 
  (3)在模板中以{{page.featured_top}}这种形式引用区域。
 
  2.配置my_themes.libraries.yml库文件
 
  (1)新建/themes/my_themes/my_themes.libraries.yml库文件,并添加如下内容:


global-components:
  Version: 1.x
  css:
    theme:
      text/css: {}
      css/animate.css: {}
      css/global.css: {}
      css/style.css: {}
      css/owl.carousel.min.css: {}
  js:  
    js/html5.js: {}
    js/jquery.min.js: {}
    js/owl.carousel.js: {}
    js/main.js: {}
    js/index.js: {}
 
 
  (2)把静态页中的所有css引用剪切过来,修改成上述形式通过drupal加载;
 
  (3)把静态页中的js引用剪切过来,修改成上述形式通过drupal加载;
 
  3.添加模板文件
 
  (1)修改index.html名称为/themes/my_themes/templates/page--front.html.twig,即首页模板文件;
 
  (2)删除body(包含body)之外的所有内容;
 
  (3)修改图片路径/themes/my_themes/images/pic_name.jpg;
 
  (4)如果静态页面中有原生的<scripttype="text/javascript"></script>内容,则去掉<scripttype="text/javascript"></script>包裹标记,全部整理到*.js文件中,然后把*.js放到drupal中js最后面加载,防止破坏前面的JS功能;
 
  (5)如果静态页面中有原生的<styletype="text/css"></style>内容,则去掉<styletype="text/css"></style>包裹标记,全部整理到*.css文件中,然后把*.css文件放到drupal中css最后面加载,防止破坏前面的css样式。
 
  经过上述配置,重建缓存后,刷新前端页面,drupal9.2.6自定义主题就可以正常运行了。