0

0

TWIG 模板设计 快速入门手册 中文_PHP教程

php中文网

php中文网

发布时间:2016-07-13 17:48:00

|

1698人浏览过

|

来源于php中文网

原创

写了好几篇关于twig的东西。。居然还没写个快速入门之类的。现在就写

 

概要
twig 的模板就是普通的文本文件,也不需要特别的扩展名,.html .htm .twig 都可以。
模板内的 变量 和 表达式 会在运行的时候被解析替换,标签(tags)会来控制模板的逻辑
下面是个最小型的模板,用来说明一些基础的东西

 
 
   

 
        My Webpage 
     
     
         
 
       

My Webpage

 
        {{ a_variable }} 
     
 


   
        My Webpage
   
   
       

       

My Webpage


        {{ a_variable }}
   

里面包含两种符号 {% ... %} 和 {{ ... }} 第一种用来控制的比如for循环什么的,第二个是用来输出变量和表达式的


ide 支持
很多ide 都对twig进行高亮支持。大伙自己找需要的吧。
Textmate via the Twig bundle
Vim via the Jinja syntax plugin
Netbeans via the Twig syntax plugin
PhpStorm (native as of 2.1)
Eclipse via the Twig plugin
Sublime Text via the Twig bundle
GtkSourceView via the Twig language definition (used by gedit and other projects)
Coda and SubEthaEdit via the Twig syntax mode
变量
程序会传递给模板若干变量,你需要在模板里输出他们。例如输出 $hello

{{ hello }} 
{{ hello }}如果传递给模板的是对象或者数组,你可以使用点 . 来输出对象的属性或者方法,或者数组的成员。或者你可以使用下标的方式。
{{ foo.bar }} 
{{ foo['bar'] }} 
{{ foo.bar }}
{{ foo['bar'] }}
如果你访问的值不存在就会返回null。TWIG有一整套的流程来确认值是否存在。


for.bar会进行以下操作
。。。如果 foo是个数组,就尝试返回bar成员,如果不存在的话,往下继续
。。。如果foo是个对象,会尝试返回bar属性,如果不存在的话,往下继续
。。。会尝试运行bar方法,如果不存在的话,往下继续
。。。会尝试运行getBar方法,如果不存在的话,往下继续
。。。会尝试运行isBar方法,如果不存在的话,返回null


for['bar'] 就简单很多了 for必须是个数组,尝试返回bar成员,如果不就返回null
全局变量
TWIG定义了有一些全局变量

_self  这个参看macro标签
_context 这个就是当前的环境
_charset: 当前的字符编码


变量赋值
具体参见set标签

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


过滤器 Firters
变量可以被过滤器修饰。过滤器和变量用(|)分割开。过滤器也是可以有参数的。过滤器也可以被多重使用。
下面这例子就使用了两个过滤器。

{{ name|striptags|title }} 
{{ name|striptags|title }}striptas表示去除html标签,title表示每个单词的首字母大写。更多过滤器参见我博客


过滤器也可以用在代码块中,参见 filter标签

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

函数 Function
这个没什么好说的,会写程序的都知道,TWIG内置了一些函数,参考我的博客
举个例子 返回一个0到3的数组,就使用 range函数
{% for i in range(0, 3) %} 
    {{ i }}, 
{% endfor %} 
{% for i in range(0, 3) %}
    {{ i }},
{% endfor %}

流程控制
支持for循环 和 if/elseif/else结构。直接看例子吧,没什么好说的。

Members

 
     
        {% for user in users %} 
           
  • {{ user.username|e }}
  •  
        {% endfor %} 
 

Members



        {% for user in users %}
           
  • {{ user.username|e }}

  •     {% endfor %}

{% if users|length > 0 %} 
   
     
            {% for user in users %} 
               
  • {{ user.username|e }}
  •  
            {% endfor %} 
       
 
{% endif %} 
{% if users|length > 0 %}
   

            {% for user in users %}
               
  • {{ user.username|e }}

  •         {% endfor %}
       

{% endif %}


注释
{# ... #} 包围的内容会被注释掉,可以是单行 也可以是多行。


载入其他模板
详见include标签(我博客内已经翻译好哦),会返回经过渲染的内容到当前的模板里

{% include 'sidebar.html' %} 
{% include 'sidebar.html' %}当前模板的变量也会传递到 被include的模板里,在那里面可以直接访问你这个模板的变量。
比如

{% for box in boxes %} 
    {% include "render_box.html" %} 
{% endfor %} 
{% for box in boxes %}
    {% include "render_box.html" %}
{% endfor %}在 render_box.html 是可以访问 box变量的
加入其他参数可以使被载入的模板只访问部分变量,或者完全访问不到。参考手册


模板继承
TWIG中最有用到功能就是模板继承,他允许你建立一个“骨骼模板”,然后你用不同到block来覆盖父模板中任意到部分。而且使用起来非常到简单。
我们先定义一个基本骨骼页base.html 他包含许多block块,这些都可以被子模板覆盖。

 
 
   

 
        {% block head %} 
             
            {% block title %}{% endblock %} - My Webpage 
        {% endblock %} 
     
     
       
{% block content %}{% endblock %}
 
         
     
 


   
        {% block head %}
           
            {% block title %}{% endblock %} - My Webpage
        {% endblock %}
   
   
       
{% block content %}{% endblock %}

       
   
我们定义了4个block块,分别是 block head, block title, block content, block footer
注意
1、block是可以嵌套的。
2、block可以设置默认值(中间包围的内容),如果子模板里没有覆盖,那就直接显示默认值。比如block footer ,大部分页面你不需要修改(省力),但你需要到时候仍可以方便到修改(灵活)
下面我看下 子模板应该怎么定义。
{% extends "base.html" %} 
 
{% block title %}Index{% endblock %} 
{% block head %} 
    {{ parent() }} 
     
{% endblock %} 
{% block content %} 
   

Index

 
   

 
        Welcome on my awesome homepage. 
   

 
{% endblock %} 
{% extends "base.html" %}

{% block title %}Index{% endblock %}
{% block head %}
    {{ parent() }}
   
{% endblock %}
{% block content %}
   

Index


   


        Welcome on my awesome homepage.
   


{% endblock %}注意 {% extends "base.html" %} 必须是第一个标签。其中 block footer就没有定义,所以显示父模板中设置的默认值
如果你需要增加一个block的内容,而不是全覆盖,你可以使用 parent函数

{% block sidebar %} 
   

Table Of Contents

 
    ... 
    {{ parent() }} 
{% endblock %} 
{% block sidebar %}
   

Table Of Contents


    ...
    {{ parent() }}
{% endblock %}
extends标签只能有一个,所以你只能有一个父模板,但有种变通到方法来达到重用多个模板到目的,具体参见手册的use标签


HTML转义
主要是帮助转义 尖括号等  ,  &,  "  可以有两种办法。一种是用标签,另一种是使用过滤器。其实TWIG内部就是调用 php 的htmlspecialchars 函数

{{ user.username|e }} 
{{ user.username|e('js') }} 
 
{% autoescape true %} 
    Everything will be automatically escaped in this block 
{% endautoescape %} 
{{ user.username|e }}
{{ user.username|e('js') }}

{% autoescape true %}
    Everything will be automatically escaped in this block
{% endautoescape %}
因为{{是TWIG的操作符,如果你需要输出两个花括号,最简单到办法就是

{{ '{{' }} 
{{ '{{' }}
还可以使用 raw 标签和raw 过滤器,详细参考手册

{% raw %} 
   

     
        {% for item in seq %} 
           
  • {{ item }}
  •  
        {% endfor %} 
       
 
{% endraw %} 
{% raw %}
   

        {% for item in seq %}
           
  • {{ item }}

  •     {% endfor %}
       

{% endraw %}

macros宏
宏有点类似于函数,常用于输出一些html标签。
这里有个简单示例,定义了一个输出input标签的宏。

{% macro input(name, value, type, size) %} 
     
{% endmacro %} 
{% macro input(name, value, type, size) %}
   
{% endmacro %}宏参数是没有默认值的,但你可以通过default过滤器来实现。
一般来说宏会定义在其他到页面,然后通过import标签来导入,
{% import "forms.html" as forms %} 
 

{{ forms.input('username') }}

 
{% import "forms.html" as forms %}

DM建站系统幼儿教育机构网站模板1.62
DM建站系统幼儿教育机构网站模板1.62

DM建站系统幼儿教育机构网站模板,DM企业建站系统。是由php+mysql开发的一套专门用于中小企业网站建设的开源cms。DM系统的理念就是组装,把模板和区块组装起来,产生不同的网站效果。可以用来快速建设一个响应式的企业网站( PC,手机,微信都可以访问)。后台操作简单,维护方便。DM企业建站系统安装步骤:第一步,先用phpmyadmin导入sql文件。 第二步:把文件放到你的本地服务器,或上传到

下载

{{ forms.input('username') }}

你也可以只导入一个文件中部分宏,你还可以再重命名。
{% from 'forms.html' import input as input_field, textarea %} 
 
 
   
Username
 
   
{{ input_field('username') }}
 
   
Password
 
   
{{ input_field('password', type='password') }}
 
 

{{ textarea('comment') }}

立即学习PHP免费学习笔记(深入)”;

 
{% from 'forms.html' import input as input_field, textarea %}


   
Username

   
{{ input_field('username') }}

   
Password

   
{{ input_field('password', type='password') }}


{{ textarea('comment') }}

立即学习PHP免费学习笔记(深入)”;

上面的代码表示 从forms.html中导入了 input 和 textarea宏,并给input重命名为input_field。
表达式
TWIG允许你在任何地方使用表达式,他的规则和PHP几乎一模一样,就算你不会PHP 仍然会觉得很简单。
最简单的有
字符串:“hello world”  或者 'hello world' 
数字:42 或者 42.33
数组:['a','b','c']
哈希:{'a':'av', 'b':'bv'} 其中keys 可以不要引号 也可以是数字 还可以是一个表达式,比如{a:'av', b:'bv'}  {1:'1v', 2:'2v'}  {1+2:'12v'}
逻辑: true 或者 false
最后还有null
你可以嵌套定义
{% set foo = [1, {"foo": "bar"}] %} 
{% set foo = [1, {"foo": "bar"}] %}运算符
包括数字运算+ - * /  %(求余数)  //(整除) **(乘方)

{{ 2 * 3 }}=6 

{{ 2 * 3 }}=8 

{{ 2 * 3 }}=6

{{ 2 * 3 }}=8逻辑运算 and or  not
比较运算 > = 包含运算 in 以下的代码会返回 true
{{ 1 in [1, 2, 3] }} 
{{ 'cd' in 'abcde' }} 
{{ 1 in [1, 2, 3] }}
{{ 'cd' in 'abcde' }}测试运算 is 这个不用多说 直接看代码
{{ name is odd }} 
{% if loop.index is divisibleby(3) %} 
{% if loop.index is not divisibleby(3) %} 
{# is equivalent to #} 
{% if not (loop.index is divisibleby(3)) %} 
{{ name is odd }}
{% if loop.index is divisibleby(3) %}
{% if loop.index is not divisibleby(3) %}
{# is equivalent to #}
{% if not (loop.index is divisibleby(3)) %}其他操作符
.. 建立一个指定开始到结束的数组,他是range函数的缩写,具体参看手册

{% for i in 0..3 %} <br>
    {{ i }}, <br>
{% endfor %} <br><pre name="code" class="html">{% for i in 0..3 %}<br>
    {{ i }},<br>
{% endfor %}<p>| 使用一个过滤器<br><br>
{# output will be HELLO #} <br>
{{ "hello"|upper }} <br>
{# output will be HELLO #}<br>
{{ "hello"|upper }}~ 强制字符串连接<br>
{{ "Hello " ~ name ~ "!" }} <br>
{{ "Hello " ~ name ~ "!" }}?:  三元操作符<br>
{{ foo ? 'yes' : 'no' }} <br>
{{ foo ? 'yes' : 'no' }}. [] 得到一个对象的属性,比如以下是相等的。<br><br>
{{ foo.bar }} <br>
{{ foo['bar'] }} <br>
{{ foo.bar }}<br>
{{ foo['bar'] }}<br>
你还可以在一个字符串内部插入一个表达式,通常这个表达式是变量。 格式是 #{表达式}<br>
{{ "foo #{bar} baz" }} <br>
{{ "foo #{1 + 2} baz" }} <br>
{{ "foo #{bar} baz" }}<br>
{{ "foo #{1 + 2} baz" }}</p><p><br>
空白控制<br>
和 php一样,在TWIG模板标签之后的第一个换行符会被自动删掉,其余的空白(包括 空格 tab 换行等)都会被原样输出。<br>
使用spaceless标签就可以删除这些HTML标签之间的空白<br><br>
{% spaceless %} <br>
    </p><div> <br>
        <strong>foo</strong> <br>
    </div> <br>
{% endspaceless %} <br>
 <br>
{# output will be <div><strong>foo</strong></div> #} <br>
{% spaceless %}<br>
    <div>
<br>
        <strong>foo</strong><br>
    </div><br>
{% endspaceless %}<p>{# output will be </p><div><strong>foo</strong></div> #}<br>
使用-操作符,可以很方便的删除TWIG标签之前或之后与html标签之间的空白。<br>
{% set value = 'no spaces' %} <br>
{#- No leading/trailing whitespace -#} <br>
{%- if true -%} <br>
    {{- value -}} <br>
{%- endif -%} <br>
 <br>
{# output 'no spaces' #} <br>
{% set value = 'no spaces' %}<br>
{#- No leading/trailing whitespace -#}<br>
{%- if true -%}<br>
    {{- value -}}<br>
{%- endif -%}<p>{# output 'no spaces' #}<br>
{% set value = 'no spaces' %} <br></p>
  •     {{- value }}   
  •  
     
    {# outputs '
  • no spaces   
  • ' #} 
    {% set value = 'no spaces' %}
  •     {{- value }}   
  • {# outputs '

  • no spaces   
  • ' #}

    结束,如果你坚持看到这里,恭喜自己吧,你又多掌握了一些知识,恭喜恭喜

    摘自 jiaochangyun的专栏

    www.bkjia.comtruehttp://www.bkjia.com/PHPjc/478452.htmlTechArticle写了好几篇关于twig的东西。。居然还没写个快速入门之类的。现在就写 概要 twig 的模板就是普通的文本文件,也不需要特别的扩展名,....

    相关文章

    PHP速学教程(入门到精通)
    PHP速学教程(入门到精通)

    PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

    下载

    本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

    热门AI工具

    更多
    DeepSeek
    DeepSeek

    幻方量化公司旗下的开源大模型平台

    豆包大模型
    豆包大模型

    字节跳动自主研发的一系列大型语言模型

    通义千问
    通义千问

    阿里巴巴推出的全能AI助手

    腾讯元宝
    腾讯元宝

    腾讯混元平台推出的AI助手

    文心一言
    文心一言

    文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

    讯飞写作
    讯飞写作

    基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

    即梦AI
    即梦AI

    一站式AI创作平台,免费AI图片和视频生成。

    ChatGPT
    ChatGPT

    最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

    相关专题

    更多
    Golang 测试体系与代码质量保障:工程级可靠性建设
    Golang 测试体系与代码质量保障:工程级可靠性建设

    Go语言测试体系与代码质量保障聚焦于构建工程级可靠性系统。本专题深入解析Go的测试工具链(如go test)、单元测试、集成测试及端到端测试实践,结合代码覆盖率分析、静态代码扫描(如go vet)和动态分析工具,建立全链路质量监控机制。通过自动化测试框架、持续集成(CI)流水线配置及代码审查规范,实现测试用例管理、缺陷追踪与质量门禁控制,确保代码健壮性与可维护性,为高可靠性工程系统提供质量保障。

    48

    2026.02.28

    Golang 工程化架构设计:可维护与可演进系统构建
    Golang 工程化架构设计:可维护与可演进系统构建

    Go语言工程化架构设计专注于构建高可维护性、可演进的企业级系统。本专题深入探讨Go项目的目录结构设计、模块划分、依赖管理等核心架构原则,涵盖微服务架构、领域驱动设计(DDD)在Go中的实践应用。通过实战案例解析接口抽象、错误处理、配置管理、日志监控等关键工程化技术,帮助开发者掌握构建稳定、可扩展Go应用的最佳实践方法。

    44

    2026.02.28

    Golang 性能分析与运行时机制:构建高性能程序
    Golang 性能分析与运行时机制:构建高性能程序

    Go语言以其高效的并发模型和优异的性能表现广泛应用于高并发、高性能场景。其运行时机制包括 Goroutine 调度、内存管理、垃圾回收等方面,深入理解这些机制有助于编写更高效稳定的程序。本专题将系统讲解 Golang 的性能分析工具使用、常见性能瓶颈定位及优化策略,并结合实际案例剖析 Go 程序的运行时行为,帮助开发者掌握构建高性能应用的关键技能。

    37

    2026.02.28

    Golang 并发编程模型与工程实践:从语言特性到系统性能
    Golang 并发编程模型与工程实践:从语言特性到系统性能

    本专题系统讲解 Golang 并发编程模型,从语言级特性出发,深入理解 goroutine、channel 与调度机制。结合工程实践,分析并发设计模式、性能瓶颈与资源控制策略,帮助将并发能力有效转化为稳定、可扩展的系统性能优势。

    22

    2026.02.27

    Golang 高级特性与最佳实践:提升代码艺术
    Golang 高级特性与最佳实践:提升代码艺术

    本专题深入剖析 Golang 的高级特性与工程级最佳实践,涵盖并发模型、内存管理、接口设计与错误处理策略。通过真实场景与代码对比,引导从“可运行”走向“高质量”,帮助构建高性能、可扩展、易维护的优雅 Go 代码体系。

    19

    2026.02.27

    Golang 测试与调试专题:确保代码可靠性
    Golang 测试与调试专题:确保代码可靠性

    本专题聚焦 Golang 的测试与调试体系,系统讲解单元测试、表驱动测试、基准测试与覆盖率分析方法,并深入剖析调试工具与常见问题定位思路。通过实践示例,引导建立可验证、可回归的工程习惯,从而持续提升代码可靠性与可维护性。

    3

    2026.02.27

    漫蛙app官网链接入口
    漫蛙app官网链接入口

    漫蛙App官网提供多条稳定入口,包括 https://manwa.me、https

    268

    2026.02.27

    deepseek在线提问
    deepseek在线提问

    本合集汇总了DeepSeek在线提问技巧与免登录使用入口,助你快速上手AI对话、写作、分析等功能。阅读专题下面的文章了解更多详细内容。

    51

    2026.02.27

    AO3官网直接进入
    AO3官网直接进入

    AO3官网最新入口合集,汇总2026年可用官方及镜像链接,助你快速稳定访问Archive of Our Own平台。阅读专题下面的文章了解更多详细内容。

    430

    2026.02.27

    热门下载

    更多
    网站特效
    /
    网站源码
    /
    网站素材
    /
    前端模板

    精品课程

    更多
    相关推荐
    /
    热门推荐
    /
    最新课程
    Bootstrap 5教程
    Bootstrap 5教程

    共46课时 | 3.5万人学习

    【web前端】Node.js快速入门
    【web前端】Node.js快速入门

    共16课时 | 2.1万人学习

    Go语言实战之 GraphQL
    Go语言实战之 GraphQL

    共10课时 | 0.9万人学习

    关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
    php中文网:公益在线php培训,帮助PHP学习者快速成长!
    关注服务号 技术交流群
    PHP中文网订阅号
    每天精选资源文章推送

    Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号