你在这里

Drupal 模板引擎Twig 转换说明(由tpl.php到html.twig)

原文地址:https://www.drupal.org/docs/8/theming/drupal-twig-conversion-instructions-tplphp-to-htmltwig

Drupal 模板引擎Twig 转换说明(由tpl.php到html.twig)

这篇文档常用于drupal8 Twig模板转换过程,对于在drupal8中用Twig模板引擎更新主题和模块来说也是很有帮助的。

说明:在Drupal的核心问题中Twig的工作已经完成,只是用Twig的转换沙箱找到以前转换的模板和函数。

关键步骤:

  • 找到核心问题打补丁
  • 不能在沙箱中打补丁
  • 不能给沙箱创建补丁
  • 只用沙箱测试或检索以前的转换代码
  • 首先,在优酷视频网上观看这个过程的概览

 

安装

首先下载

git clone -b 8.0.x的下载地址: http://git.drupal.org/project/drupal.git d8

将当前版本的安装在文件夹(文件夹的名字可以自己指定)

  1. 正常安装Drupal(使用标准的安装文件)
  2. 在services.yml中设置twig的3个属性(debugging, cache, auto_reload)的值为True

转换

主题函数

将主题函数转换成模板文件和预处理函数:

  1. 确定主题函数文件的路径:(theme.inc? a core/modules/color/?)
  2. 为主题函数创建一个模板文件X.html.twig
  • 正确命名新文件
  • 移除函数开始的"theme_", 以" .html.twig"的文件名结尾
  • 将下划线“­­_”转换成中间线”-”
  • 例如:
  • theme_link()变成link.html.twig
  • theme_user_signature()变成user-signature.html.twig

 

  1. 将新的Twig模板放在stark主题的模板文件夹中(沙箱中):

来自特定的模块stark/templates/comment, etc

来自theme.inc, stark/templates/theme.inc

来自form.inc, stark/templates/form.inc

  1. the Drupal 8 API的文档中搜索函数

电子表格中有所有函数的链接

  1. 在文件的头部添加PHP格式的代码块{##},并包装在Twig的评论中
  • 在每行的开头增加@file标记
  • 在@file行下面复制函数的定义,用“Default theme implementation ...”替换“Returns HTML ...”,写在一行上。
  • 增加“Available variables:”行(替换 @param 变量)
  • 在api.drupal.org上的参数文档中,复制指定的变量
  • 如果有@see template_preprocess()行,就删除它
  • 增加@see template_preprocess_THEME_HOOK()行
  • 增加@ingroup themeable行(见下面的代码块示例)
  1. 在下面的代码块中复制函数的源代码(见下面的示例)
  2. 将PHP代码转换成常见的HTML代码,并注释说明)
  1. )在HTML代码中删除PHP代码,例如:

function whatever() {

// …

return $output; }

  1. )删除PHP的注释说明并用{{ }}代替,

把转换为简单的名字:$variables['title'] 变成 {{ title }}

用点语法代替数组语法:$variables['page']['tabs'] 变成 {{ page.tabs }}

  1. )用twig的{% %}代替PHP的<?php  ?>
  2. )用twig的注释语法{##}代替php的注释
  3. )用t 过滤器代替文字函数:{{ 'text in quotes'|t }}
  4. )移除预处理函数变量的PHP格式(见下面的预处理说明)

8.做了这些之后,如果你要改进将冗余的模板合并成一个,或者改进标记或者变量名这些事,就要在电子表格中做注释,或者在沙箱中做一个焦点,例如:http://drupal.org/node/180591

转换或者合并预处理函数

说明;

  1. 预处理函数将替代所有的模板函数
  2. 如果模板文件中有PHP的语法影响输出变量,这些代码需要移动到预处理函数中
  3. 如果模板以主题函数开始,主题函数需要转换成预处理函数
  4. 如果主题函数已经有相关的预处理函数,主题函数中处理代码的变量需要移动到预处理函数中
  5. 不要在hook_theme的实现中加一条线表明drupal使用模板文件而不是主题函数
  6. 说明
  7. 将template_preprocess_YOURFUNCTION重命名为template_preprocess_YOURFUNCTION
  8. 通过加&传递变量,关键是theme_select($variables)变成template_preprocess_select(&$variables)
  9. 编辑函数处理变量的处理逻辑,去掉任何标记(关键是 $output)

如果在模板中有丢失的函数

如果在模板中需要的过滤器或者函数的入口还没有工作,把它加在开放的焦点里。记住大部分或者函数应该移动到预处理函数中。只有你认为主题驱动需要这个函数的入口,那么此函数应该留在模板中。

简单的转换示例

  1. 代码来源http://api.drupal.org/api/drupal/core!includes!theme.inc/function/theme_...

function theme_link($variables) { return '' . ($variables['options']['html'] ? $variables['text'] : check_plain($variables['text'])) . ''; }

  • 模板(文件名:link.html.twig)

{# /** * @file * Default theme implementation to display a link. * * Available variables: * - text: The link text for the anchor tag. * - url: The complete URL being linked to, such as * "/node/34" or "http://example.com/foo". * - attributes: Remaining HTML attributes for the containing element. * * @see template_preprocess_link() * * @ingroup themeable */ #} <a href="{{ url }}" class="{{ attributes.class }}"{{ attributes }}>{{ text }}</a>

改成预处理函数

/** * Prepares variables for link templates. * * Default template: link.html.twig. * * @param array $variables * An associative array containing: * - text: The translated link text for the anchor tag. * - path: The internal path or external URL being linked to. * - options: An associative array of additional options. */ function template_preprocess_link(&$variables) { $variables['url'] = url($variables['path'], $variables['options']); }

评论:

Andriy Podanenko: http://drupal.org/node/1783130如何重命名变量

  • 以 {# 和 #}为开始和结束的标志
  • 标准的PHP代码块标记生成器要遵循Twig注释标记标准
  • 从api.drupal.org复制粘贴这个定义

James Wilson:如果从函数中复制这个定义,应该用"Default theme implementation"重写"Returns HTML ..."

  • 从api.drupal.org复制粘贴参数

James Wilson:如果需要从文档中引用另一个变量块,变量要使用单引号,在变量名称中去掉$标志,。(见讨论http://drupal.org/node/1804710])

  • 在twig中使用{{ }}语法输出变量
  • 可以参考属性可以修改的类
  • 像url()一样大部分函数可以从模板文件中移动到预处理函数中