为模版设计师而生的Twig(上)-Twig使用指南

1. 概要

模板是一个简单的文本文件。它可以生成任何基于文本的格式(HTML、XML、CSV等)。它不具有特定扩展名,html或xml都OK。 模板中包含的变量或表达式,用来控制模板的逻辑。当模版被预处理时,它们会被替换为变量值。

下面是说明了一些基本要素的最小模板。稍后我们将介绍更多细节:

<!DOCTYPE html>
<html>
    <head>
        <title>My Webpage</title>
    </head>
    <body>
        <ul id="navigation">
        {% for item in navigation %}
            <li><a href="{{ item.href }}">{{ item.caption }}</a></li>
        {% endfor %}
        </ul>
        <h1>My Webpage</h1>
        {{ a_variable }}
    </body>
</html>

  

Twig有两种类型的分隔符:{%...%} 和 {{...}} 。第一个是用于执行诸如for循环的控制语句,后者则在模板中打印一个表达式的结果。

2. IDEs 集成

许多IDE支持Twig语法高亮和自动完成标签:

※ TextMate 通过 Twig Bundle

※ Vim 通过 Jinja syntax 插件 或 vim-twig 插件

※ NetBeans 通过 Twig syntax 插件(7.2+)

※ PhpStorm(原生2.1+)

※ Eclipse 通过 Twig plugin

※ Sublime 通过 Twig bundle

※ GtkSourceView 通过 Twig language definition

※ Coda and SubEthaEdit 通过 Twig syntax mode

※ Coda 2 通过 other Twig syntax mode

※ Komodo and Komodo Edit 通过 Twig highlight/syntax check mode

※ Notepad++ 通过 Notepad++ Twig Highlighter

※ Emacs 通过 web-mode.el

3. 变量

应用程序将变量传递到操作的模板中。你也可以访问变量的属性或元素。一个变量的可视化表示在很大程度上依赖于应用程序提供的值。你可以使用点(.)或所谓的下标语法([])来访问变量的属性(PHP对象的方法或属性,PHP数组的元素)。

{{ foo.bar }}
{{ foo[‘bar‘] }}

  当属性中包含特殊字符(如 - 这会被解释为减号操作符),使用attribute()函数来替代使用点(.)访问变量属性:

{# equivalent to the non-working foo.data-foo #}
{{ attribute(foo, ‘data-foo‘) }}

  重要提示:要知道,大括号不是变量的一部分,print语句除外。当访问标签内的变量,不要把大括号加在变量上。

如果一个变量或属性不存在,strict_variables选项设置为false时,您将收到一个空值;另外,如果strict_variables设置为true,Twig将会抛出一个错误(参照见 environment options

变量调用机制

为了方便起见,在PHP表现层调用foo.bar时,会进行以下操作:

a.1 检查foo是否是个数组,并检查bar是否是有效的元素

a.2 如果不是,foo是个对象,并检查bar是否是有效的属性

a.3 如果不是,foo是个对象,并检查bar是否是有效方法。(即使bar是一个构造器。那么请使用__construct()方法替代

a.4 如果不是,foo是个对象,会检查getBar()是否是有效的方法

a.5 如果不是,foo是个对象,会检查isBar()是否是有效的方法

a.6 如果不是,返回空值(null)

a.7 检查foo是一个数组和bar是一个有效的元素; 

a.8 如果没有,则返回null值。

4. 全局变量

下面的变量在模板中总是可用:

_self: 引用当前模版;

_context: 引用当前的上下文;

_charset: 引用当前的字符集。

5. 设置变量

您可以将值赋给内部代码块中的变量。赋值使用 set 标签:

{% set foo = ‘foo‘ %}
{% set foo = [1, 2] %}
{% set foo = {‘foo‘: ‘bar‘} %}

  

6. 过滤器

变量可以通过过滤器进行修改。过滤器和变量之间使用管道符号(也就是竖线 | )分隔开,过滤器括号中可能有可选的参数。多个过滤器可以串连使用,滤波器的输出会被应用于下一个过滤器。

下面的示例是从名称中删除所有的HTML标签并应用title-cases格式化:

{{ name|striptags|title }}

  过滤器接受括号中的参数。 这个例子将用逗号连接一个列表:

{{ list|join(‘, ‘) }}

  要对一段代码应用过滤器,只要使用 filter 标签把它包起来:

{% filter upper %}
    This text becomes uppercase
{% endfilter %}

  

访问 Filters 页面,以了解更多关于内置过滤器。

7. 函数

函数可以被调用来生成内容。函数是通过它们的[函数名+()]进行调用的,可能还带有参数。

例如,range()函数返回一个包含一个整数等差数列的列表:

{% for i in range(0, 3) %}
    {{ i }},
{% endfor %}

  

访问  Functions 页面,以了解更多关于内置函数。

8. 命名参数

1.12版本新特性:对命名参数的支持被添加到Twig 1.12版。

{% for i in range(low=1, high=10, step=2) %}
    {{ i }},
{% endfor %}

  使用命名参数,让你的模板更明确的了解,您作为参数传递的值的含义:

{{ data|convert_encoding(‘UTF-8‘, ‘iso-2022-jp‘) }}
{# versus (对比) #}
{{ data|convert_encoding(from=‘iso-2022-jp‘, to=‘UTF-8‘) }}

  命名参数还允许您跳过一些你不希望更改默认值的参数:

{# the first argument is the date format, which defaults to the global date format if null is passed #}
{{ "now"|date(null, "Europe/Paris") }}
{# or skip the format value by using a named argument for the time zone #}
{{ "now"|date(timezone="Europe/Paris") }}

  您也可以在一个调用中使用占位参数和命名参数,在这种情况下,占位参数必须在命名参数之前:

{{ "now"|date(‘d/m/Y H:i‘, timezone="Europe/Paris") }}

  

提示:每个函数和过滤器的文档页面,都有一段内容,列出它们支持的所有参数名称。

9. 控制结构

控制结构指的是所有这些控制程序流程的代码:条件语句(如:if/elseif/else)、for循环以及类似的代码块。控制结构出现在{%...%}块内。

例如,要显示一个由变量(users)提供的用户列表,使用 for 标签:

<h1>Members</h1>
<ul>
    {% for user in users %}
        <li>{{ user.username|e }}</li>
    {% endfor %}
</ul>

  if 标签可以用于测试表达式:

{% if users|length > 0 %}
    <ul>
        {% for user in users %}
            <li>{{ user.username|e }}</li>
        {% endfor %}
    </ul>
{% endif %}

  访问 tags 页面,以了解更多关于内置标签。

10. 注释

要在模板中注释掉一部分,使用注释语法{#...#}。这对于调试或添加信息给其他模板设计者或自己看会很有用:

{# note: disabled template because we no longer use this
    {% for user in users %}
        ...
    {% endfor %}
#}

  

11. 包含其他模板

包含一个模板时,include标签很有用,它会返回该模板(子模版)的内容呈现到当前模版(父模版):

{% include ‘sidebar.html‘ %}

  默认情况下每个被包含的模板都会传递当前上下文(context)。传递给父模板的上下文,还包括在子模板中定义的变量:

{% for box in boxes %}
    {% include "render_box.html" %}
{% endfor %}

  

被包含的模板 render_box.html 能够访问变量 box。

模板的文件名取决于模板加载器。例如,Twig_Loader_Filesystem 允许你通过给文件名来访问其他模板。您可以访问以斜线分隔的子目录中的模板:

{% include "sections/articles/sidebar.html" %}

  此行为取决于应用程序中嵌入Twig。

时间: 2024-10-11 10:09:31

为模版设计师而生的Twig(上)-Twig使用指南的相关文章

为模版设计师而生的Twig(下)-Twig使用指南

原文地址:http://my.oschina.net/veekit/blog/276800 12. 模板继承 Twig最强大的部分是模板继承.模板继承允许你建立一个基本的"骨架"模板,包含您的网站的所有公用的元素,并定义一些区块(block)让子模板可以覆盖. 听起来似乎很复杂,但其实这是非常基本的.通过一个例子将容易理解它. 让我们定义一个基本模板:base.html.它定义了一个简单的HTML框架文档,假设是你要使用的一个简单的两列分布的页面: <!DOCTYPE html&

C#在Linux上的开发指南(续)

续之前的一篇开发指南http://www.cnblogs.com/RainbowInTheSky/p/5496777.html 部分人在部署的时候经常出现dll兼容问题(其实可以看小蝶惊鸿的文章,蝶神早已踩过了坑http://www.cnblogs.com/xiaodiejinghong/tag/mono/) 站点部署后建议使用webbench进行压力测试 1.Microsoft.Web.Infrastructure.dll不用上传,mono已经实现(MS的dll有api依赖的问题),Mono的

C#在Linux上的开发指南

本人才疏学浅,在此记录自己用C#在Linux上开发的一点经验,写下这篇指南.(给想要在Linux上开发C#程序的朋友提供建议) 目前在Linux上跑的网站:http://douxiubar.com | http://douxiubar.com/AdminLogin/Index(MVC4+Dapper+Autofac)的一个作品 在Linux上开发建议上http://www.linuxdot.net/和http://jexus.org/讨论学习,我刚接触那会才知道自己才疏学浅,受益良多(入门题;I

Jquery FormData文件异步上传 快速指南

网站中文件的异步上传是个比较麻烦的问题,不过现在通过jquery 可以很容易的解决这个问题: 使用jquery2.1版本,较老版本不支持异步文件上传功能: 表单代码: [html] view plain copy print? <form id="fileUploadForm"> <input type="file" name="file" class="imageUpload"/> <span 

奉上一份云上数据安全保护指南

摘要: 在数字化转型的浪潮下,无论哪种云的形态,都是企业战略转型的机遇.随着越来越多的数据变得在线,作为云服务商,不能只满足提供"点"上的数据保护技术,而需要为客户提供一整套的数据安全架构方案.在近日举办的2018天府国际网络安全高峰论坛上,阿里云资深安全专家黄瑞瑞提出了从底层云平台到上层云上环境的整体云上数据安全架构方案. 阿里云资深安全专家黄瑞瑞 本方案的目标是为用户提供从底层云平台数据安全到上层的云上环境保护,并标明各层次模块,让用户可以像建房子一样,一层层的搭建可信的在云上数据

云上数据仓库选型指南

前言: 云数据仓库是构建在云上的新一代数据仓库解决方案,如何选择符合企业需求的云数据仓库,选择时应考虑哪些关键问题成为很多企业管理者关心的问题.本文参考TDWI以及Forrester的研究报告内容,对云数据仓库选型参考依据进行介绍,希望能对您在云数据仓库选型时有所帮助. 正文: 云数据仓库的解决方案改变了我们传统的数据平台构建方法.您可以在没有平台技术专家的指导下在几分钟内创建并开始使用数据仓库服务,让企业的数据分析师及其他非技术人员访问并处理大规模的数据以快速获得业务洞察.企业得以在更低的成本

PHP模版引擎 – Twig

在网站开发过程中模版引擎是必不可少的,PHP中用的最多的当属Smarty了.目前公司系统也是用的Smarty,如果要新增一个页面只需把网站的头.尾和左侧公共部分通过Smarty的include方式引入进来,然后主体部分写内容即可,用起来也是相当方便.这也是一种比较通用的做法.但维护一段时间后发现有些凌乱了: 1. 公共部分内容越加越多了,不需要用的js.css在一些页面也被强制引进来了 2.新页面的css只能写在网页的body内,看起来总让人不爽. 3.左侧.头部.尾部若有特殊显示,操作起来不方

专为设计师而写的GitHub快速入门教程

原文出处: Kevin Li 在互联网行业工作的想必都多多少少听说过GitHub的大名,除了是最大的开源项目托管平台,许多企业也都是用GitHub来协同开发工作,当然我 们彩程也是其中之一.笔者最初决定学习Git也是因为在团队内部设计方案初步被开发出来后,难免会有一些细节需要调整,而为了调整几像素的问题再求前端工 程师出马,其实是很影响整体效率的,所以希望通过学习GitHub好在必要的时候直接参与开发,能发挥自己的一点CSS技术以更直接快速的解决问题. 但是期间竟然发现网上无一篇为设计师而备的G

【尊享e生】【守护e生】健康要求严格,投保前请咨询我

[尊享e生][守护e生]线上投保,健康要求严格,投保前,请咨询众安客服或者咨询我.   注意: 1.先仔细阅读官方的健康告知和合同,宣传说的再好都没用,最终以合同为准. 2.保费请在产品详情页选择年龄,就会有相应的费用计算出来,绝非所有年龄一年几百块的问题,自然费率,年龄越大价格越贵:有无社保,保费价格差异巨大.各个年龄阶段费率表在2楼. ============================= 尊享e生查看投保告知和投保请点击链接或者扫描二维码 =======================