Drupal8.7.6用page和node输出各种样式的内容页

  第一次使用drupal开发网站的时候,被卡在了内容页的输出环节。
 
  按照白龙对官方文档的理解,用node.html.twig模板,结合content涉及的变量{{label}}、{{content.field_author_name}}、{{content.field_date}}、{{content.field_body}},就可以成功输出内容页的标题、作者、日期、正文等字段。但是,在node.html.twig对应的内容页面,当白龙使用page变量{{page.primary_menu}}调用page页面定制好的导航菜单、header、footer等区域内容时,失败了,无法正常显示!!说明{{page.primary_menu}}无法直接在node.html.twig模板正常输出。
 
  根据内容页debug的SUGGESTIONS,白龙把内容页面模板名字改成了page--node--%.html.twig,重建缓存后,page--node--%.html.twig模板对应页面,定制的菜单导航{{page.primary_menu}}、{{page.header}}、{{page.footer}}等区域可以正常输出了,但是,内容页的字段又不显示了,这是什么原因呢?
 
  基于以上2点,白龙总结了下,page--node--%.html.twig页面,可以正常输出定制的区域,但无法正常输出node.html.twig页面对应的字段。而单独的node.html.twig页面,可以正常输出对应字段,却无法正常输出page--node--%.html.twig模板定义的区域。
 
  带上上述疑惑,通过查看官方文档说明,网上检索资料,很遗憾,可参考的教程几乎没有,仍然没有结果。一个偶然的机会,白龙在drupal7的一个文档中发现,内容页的输出是通过page--node--%.html.twig和node.html.twig两个模板协同工作来完成对应功能的。然后,白龙再次研读了这两个模板的官方说明,意外发现了这两个模板的共同之处,那就是:page.html.twig模板有content变量,可以通过{{page.content}}输出文章的所有字段。而node.html.twig也有一个content变量,可以通过{{content}}输出所有字段,或者通过{{content.field_name}}变量输出某一个字段。
 
  基于以上分析,白龙意外的找到了两个模板的契合点,即,在page--node--%.html.twig模板中通过{{page.content}}来调用node.html.twig中的全部字段,或者部分字段。这样,就可以保证page--node--%.html.twig中定制的区域、node.html.twig模板中的部分或全部字段同时分别输出到2个模板。
 
  整体思路搞清楚了,接下来,白龙用一个案例印证了上述猜想。
 
  一、把内容页article.html转换成page--node--%.html.twig,并放入templates目录下;同时新建node.html.twig模板。
 
  1.复制article.html到article.html目录下,并把其名子修改为page--node--%.html.twig;
 
  2.去掉body(包括body本身)以外的所有代码;
 
  3.引入CSS/JS,并修改images路径;
 
  4.新建node.html.twig模板。

网站seo快速排名
 
  二、在page--node--%.html.twig中找到要输出文章(或者内容)的代码,用{{page.content}}替代。

移动网站seo
 
  三、把{{page.content}}代替的内容剪切到templates\node.html.twig模板,并分别用对应变量label、{{content.field_date}}、{{content.field_body}}替代标题、时间、正文。

黑帽seo教程
 
  四、重建缓存,刷新内容页,文章(标题、日期、正文)按照指定格式输出。

seo网站优化平台
 
  同时,大家可以注意下上图,在内容页中,使用page--node--%.html.twig模板定制的导航菜单也可以正常输出了。这就实现了通过page与node模板协同工作,同时输出定制的区域和文章内容。
 
  值得注意的是,page--node--%.html.twig、node.html.twig是通用模板,即所有内容页显示为一个相同的内容页。如果有特殊内容页需求,譬如内容类型A的内容页与其它内容页样式不一样,则可以使用page--node--A.html.twig、node--A.html.twig模板,结合上面分享的方法来实现。