之前白龙网曾写过《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自定义主题就可以正常运行了。