Drupal模板命名方式

zhangzhijun 44次浏览 0个评论

Drupal的模是基于明确的命名约定来加载的,因此他允许你通过明确的命名来覆写(override)模板。这在Drupal主题开发中是非常有用的,可以按照自己的设计样式及主题期望的展示形式进行定制化的主题开发。

HTML (<head> template)

HTML模板提供了基础的网页结构,包括了 <head>, <title> 和 <body>标签。 
基础模板(Base template): html.html.twig (base location: core/modules/system/templates/html.html.twig)
模板覆写样例:

html--[internalviewpath].html.twig
html--node--[nodeid].html.twig
html.html.twig

Page template

模式(模式(Pattern)): page--[front|internal/path].html.twig
基础模板(Base template): page.html.twig (base location: core/modules/system/templates/page.html.twig)
模板样例:


page--node--edit.html.twig
page--node--1.html.twig
page--node.html.twig
page.html.twig

Regions

模式(模式(Pattern)): region--[region].html.twig
基础模板(Base template): region.html.twig (base location: core/modules/system/templates/region.html.twig)

Blocks

模式(模式(Pattern)): block--[module|--[delta].html.twig
基础模板(Base template): block.html.twig (base location: core/modules/block/templates/block.html.twig)

block--[module]--[delta].html.twig
block--[module].html.twig
block.html.twig
{# module :模块名称 #}
{# Delta:模块分配的ID或名称 #}

样例:
场景1:用户创建的block,且ID为1,block--block--1.html.twig
场景2:自定义模块custom,delta为my-block,block--custom--my-block.html.twig
场景3:通过视图(views) front_news 创建,block--views-block--front-news-block-1.html.twig
场景4:Layout builder blocks

block--inline-block--[block-type].html.twig
block--inline-block.html.twig
block--[block-type].html.twig
block--layout-builder.html.twig
block.html.twig

Nodes

模式(模式(Pattern)): node--[content-type|nodeid]--[viewmode].html.twig
基础模板(Base template): node.html.twig (base location: core/modules/node/templates/node.html.twig)

node--[nodeid]--[viewmode].html.twig
node--[nodeid].html.twig
node--[content-type]--[viewmode].html.twig
node--[content-type].html.twig
node--[viewmode].html.twig
node.html.twig

Taxonomy terms

模式(模式(Pattern)): taxonomy-term--[vocabulary-machine-name|tid].html.twig
基础模板(Base template): taxonomy-term.html.twig (base location: core/modules/taxonomy/templates/taxonomy-term.html.twig)

taxonomy-term--[tid].html.twig
taxonomy-term--[vocabulary-machine-name].html.twig
taxonomy-term.html.twig

Fields

模式(Pattern): field--[[type|name]|[entity-type]--[field-name|content-type]].html.twig
基础模板(Base template): field.html.twig (base location: core/modules/system/templates/field.html.twig)

field--node--[field-name]--[content-type].html.twig
field--node--[field-name].html.twig
field--node--[content-type].html.twig
field--[field-name].html.twig
field--[field-type].html.twig
field.html.twig

Comments

模式(Pattern): comment--[comment-field-name]--[node-type].html.twig
基础模板(Base template): comment.html.twig (base location: core/modules/comment/templates/comment.html.twig)

注意:针对节点类型明确的node,评论模板格式与其他模板命名格式不同,如article-type节点的是comment--field-comments--article.html.twig

Comment wrappers

模式(Pattern): field--node--[comment-field-name]--[content-type].html.twig
基础模板(Base template): field--comment.html.twig

Forums

模式(Pattern): forums--[[container|topic]--forumID].html.twig
基础模板(Base template): forums.html.twig (base location: core/modules/forum/templates/forums.html.twig)

forum container:

forums--containers--[forumid].html.twig
forums--[forumid].html.twig
forums--containers.html.twig
forums.html.twig

forum topics:

forums--topics--[forumid].html.twig
forums--[forumid].html.twig
forums--topics.html.twig
forums.html.twig

Maintenance page

模式(Pattern): maintenance-page--[offline].html.twig
基础模板(Base template): maintenance-page.html.twig (base location: core/modules/system/templates/maintenance-page.html.twig)

Search result

模式(Pattern): search-result--[search-type].html.twig
基础模板(Base template): search-result.html.twig (base location: core/modules/search/templates/search-result.html.twig)

Views

模式(Patterns):


views-view--[viewid]--[view-display-id].html.twig
views-view--[viewid]--[view-display-type].html.twig
views-view--[view-display-type].html.twig
views-view--[viewid].html.twig
views-view.html.twig

基础模板(Base template): views-view.html.twig (base location: core/themes/stable/templates/views/views-view.html.twig)
views-view.html.twig可通过如下模板覆写:

views-view--[viewid]--[view-display-id].html.twig
views-view--[viewid]--page.html.twig
views-view--block.html.twig
views-view--[viewid].html.twig
views-view.html.twig

views-view-field.html.twig也可通过视图(views)字段ID( field id)覆写一个单独的字段:

views-view-field--[viewid]--[view-display-id]--[fieldid].html.twig
views-view-field--[viewid]--page--[fieldid].html.twig
views-view-field--block--[fieldid].html.twig
views-view-field--[fieldid].html.twig
views-view-field.html.twig

表格视图模板的覆写:

views-view-table--[viewid].html.twig

完整样例:

View名称:foobar.
Style: unformatted. 
Row style: Fields. 
Display: Page.

views-view--foobar--page.html.twig
views-view--page.html.twig
views-view--foobar.html.twig
views-view.html.twig
views-view-unformatted--foobar--page.html.twig
views-view-unformatted--page.html.twig
views-view-unformatted--foobar.html.twig
views-view-unformatted.html.twig

All fields:

views-view-fields--foobar--page.html.twig
views-view-fields--page.html.twig
views-view-fields--foobar.html.twig
views-view-fields.html.twig

Single field:

views-view-field--foobar--page--[fieldid].html.twig
views-view-field--foobar--[fieldid].html.twig
views-view-field.html.twig

Media

基础模板(Base template): media.html.twig (base location: core/modules/media/templates/media.html.twig).

media--source-[source-id].html.twig
media--[media-type]--[view-mode].html.twig
media--[media-type].html.twig
media--[view-mode].html.twig
media.html.twig

版权申明:

本博客所有文章除特别声明外均采用 BY-NC-SA 4.0 许可协议。依据 BY-NC-SA 4.0 许可协议,转载请附上原文出处链接及本声明。

原文链接: https://zhangzhijun.life/drupalmobanmingmingfangshi.html

Default Avatar

客官,说点什么吧!

此字段内容将保密,不会被其他人看见。