Drupal9搜索功能七大模板·熟练使用开发效率可倍增

  Drupal9的搜索功能在企业站中是经常使用的一个模块。白龙网认为,与drupal9搜索功能相关的模板可以细分为两部分,一是搜索框相关模板,二是搜索结果页相关模板。
 
  而drupal搜索功能涉及哪些模板的增、删、改、查,需要在/sites/default/services.yml文件中把debug的值设置为true;重建缓存后,在前端网页中搜索功能位置,通过“点击右键->审核元素”,即可看到涉及搜索功能的相关模板使用建议。
 
  一、搜索框模板
 
  当{{page.search}}出现在.html.twig模板页面中用以打印内容时,就会在产生region、block、form、input、submit等搜索相关的页面模板,而且还会在这五个模板中插入额外的div、span、H、ul、li等不同类型的标签,影响目标模板样式的输出。
 
  我们梳理这些模板的初衷,就是要了解这些模板,熟悉这些模板的生效范围,并且编辑、删减诸如{{page.search}}的占位符产生的冗余标签、样式,让现有代码与目标搜索功能的代码保持一致,确保原样输出搜索功能。
 
  1.区域模板:region--search.html.twig
 
  在.info.yml文件中配置区域变量后,drupal就会产生对应的区域模板,就搜索功能来说,系统推荐了region.html.twig、region--search.html.twig等两个区域模板。实际应用中,我们要根据debug建议,使用region--search.html.twig区域模板,更精准的、唯一的输出搜索区域相关内容,而不去影响其它功能区域的样式。
 
  具体来说,就是要把region.html.twig模板复制到自定义主题的相关目录下,并重新命名为region--search.html.twig,然后结合目标搜索功能模块的html结构、样式要求,删除冗余标签与样式,增加目标搜索功能模块自带的标签与样式,让现有搜索功能模块代码与目标搜索功能模块代码保持一致。
 
  2.区块模板:block--search-form-block.html.twig
 
  一般来说,白龙网会建议使用drupal系统自带的搜索区块,即:在已定义好的搜索区域直接放置系统自带的搜索区块,同时debug会推荐这样的三个区块模板使用:block--search-form-block.html.twig、block--search.html.twig、block.html.twig。我们会使用最精准的模板block--search-form-block.html.twig,让这个模板仅仅应用于搜索功能。
 
  实际操作时,我们发现,系统并没有block--search-form-block.html.twig这个区块模板。此时,需要复制block.html.twig区块模板到自定义主题下相关目录,并重命名为block--search-form-block.html.twig,最后,对比目标搜索功能模块代码,在该区块模板中删除冗余的标签与样式,确保目标搜索功能正常输出。
 
  3.表单模板:form.html.twig
 
  一般来说,使用drupal系统自带的搜索区块实现站内搜索功能,表单模板form.html.twig只需要按照目标搜索功能模块的form代码标准,配置下样式即可。尤其是action="/search/node"参数,必须保持原样,不能修改,否则就搜索不出来内容。
 
  4.输入模板:input--search.html.twig
 
  根据debug提示,drupal系统会推荐两个输入模板:input--search.html.twig、input.html.twig,通常情况下,我们建议使用input--search.html.twig模板。复制input.html.twig模块到自定义主题下相关目录,并重命名为input--search.html.twig,增加/删除/修改该模板中标签、样式,与目标搜索功能的input标签、样式保持一致即可,其它参数不需要配置。
 
  5.提交模板:input--submit.html.twig
 
  drupal提交模板是一个type="submit"类型的输入模板,他也有两种形式:input--submit.html.twig、input.html.twig,就搜索功能而言,我们推荐使用input--submit.html.twig模板。复制input.html.twig到自定义主题相关目录下,并重新命名为input--submit.html.twig。然后在该提交模板中编辑标签、样式,与目标搜索功能中的提交标签、样式保持一致。
 
  二、搜索结果页模板
 
  drupal搜索结果页主要涉及搜索结果页面模板、搜索内容模板。在上述配置的基础下,参考目标搜索结果页面的html结构、CSS样式和要动态输出的内容,调试标签与样式、配置输出参数即可。
 
  6.搜索页面模板:page--search.html.twig
 
  相对来说,drupal这个模板是个通用模板,取所有页面的共同部分即可,主要用来布局搜索页面的基本样式,通过{{page.content}}变量连接搜索结果,该模板的命名规则,类似于列表页模板的命名规则。
 
  7.搜索内容模板:search-result.html.twig
 
  Drupal的这个模板是动态的,从新闻列表中取新闻的条目内容即可,主要是用来输出标题、描述、发布日期、缩略图、分页功能等节点内容。
 
  在白龙网看来,drupal的搜索功能基本上就涉及这7大类模板,重点是在自定义主题下,修改、配置上述7类模板的结构与样式与目标搜索功能模块的结构、样式保持一致,同时调取相关数据,实现drupal9搜索功能。