在用drupal9开发网站的过程中,白龙网发现,代码中会出现很多你没有加入的额外标签,如div、p、a、span等,可能截断了程序的js功能与交互效果、css样式与页岩排版,影响网站的整体效果,这让很多drupal9新手望洋兴叹。
那么如何消除drupal9中冗余的标签,让程序正常运行呢?一般来说,可以从以下两个方面入手解决:
一、通用方法:修改模板
首先,要分离好外围包裹代码和drupal9循环输出的代码。drupal9循环输出内容时,会在区域region、区块block、字段field等层面额外的添加上div、p、span、a等行内元素、块状元素标签,这些标签将破坏程序固有的功能。
其次,理论上说,我们要从内到外,逐层删除模板中多出的标签。方法是,点击右键,选择审核元素,根据debug提示,分别找到field、block、region等模板,复制到自定义主题对应的目录下,最好用唯一的模板名称来标记模板名子,以唯一定义该功能模板,防止覆写其它模块功能。然后对比drupal9的field、block、region模板与对应静态页面的代码,删除冗余标签,重建缓存即可生效。
另外,要明白,只所以会产生field、block、region包裹的多余标签,是因为我们在定义字段与使用字段、设置区域与引用区域变量、定义区块与放置区块时会产生对应的冗余标签。所以,找对冗余标签,删除即可。
二、样式修改:横竖排版
例如,网站底部的友情链接“友情链接:链接1,链接2,链接3”模块,友情链接的内容是在一行上。当用drupal9把友情链接接入后台时,因为drupal9多加了块状元素的标签,因此,会导致几个本在一行的友情链接内容分行显示成几行,即横排变成了竖排。
这个时间,要解决这个问题,可以使用display把多出来的标签全部变成行内元素,或者flex弹性布局,即可解决。
反之,如果是多行内容(即竖排),接入drupal9时,他变成了一行内容(即横排),也可以使用display把多出的标签由行内元素变成块状元素,让它自动换行。
上述两种方法,在drupal9开发过程中经常交叉使用。当可以通过修改模块快速实现目标功能时,直接修改模板消除冗余代码即可;当循环输出内容外包裹的是同一类型的标签,或者不同类型的标签时,可以使用display变换行内元素与块状元素,实现目标功能。