zoukankan      html  css  js  c++  java
  • Twig 的 tags学习(中文) 之一

    Twig 是个 简单而强力的模板,因为在学习sf 所以看看她。

    本文来源http://twig.sensiolabs.org/doc/tags/index.html

    目前支持的tags包括

        for    if    macro    filter    set    extends    block    include    import    from    use    spaceless    autoescape    raw    flush    do

    twig在html分为3种

    {{...}} 直接输出其中的变量

    {#...#} 注释标签

    {%...%} 命令标签,就是我们要学习的这些

    for标签

    这个最简单,就是循环。

    基于数组的循环

    1. <h1>Members</h1> 
    2. <ul> 
    3.     {% for user in users %} 
    4.         <li>{{ user.username|e }}</li> 
    5.     {% endfor %} 
    6. </ul> 
    <h1>Members</h1>
    <ul>
        {% for user in users %}
            <li>{{ user.username|e }}</li>
        {% endfor %}
    </ul>

    基于数字的循环,特别要注意,这里会输出0-10 也就是11个数字。

    1. {% for i in 0..10 %} 
    2.     * {{ i }} 
    3. {% endfor %} 
    {% for i in 0..10 %}
        * {{ i }}
    {% endfor %}

    基于字母的循环

    1. {% for letter in 'a'..'z' %} 
    2.     * {{ letter }} 
    3. {% endfor %} 
    {% for letter in 'a'..'z' %}
        * {{ letter }}
    {% endfor %}

    在循环体内部的变量

    变量名描述
    loop.index 循环的次数(从1开始)
    loop.index0 循环的次数(从0开始)
    loop.revindex 循环剩余次数(最小值为1)
    loop.revindex0 循环剩余次数(最小值为0)
    loop.first 当第一次循环的时候返回true
    loop.last 当最后一次循环的时候返回true
    loop.length 循环的总数
    loop.parent 被循环的数组

    loop.length, loop.revindex, loop.revindex0,loop.last 这几个值只有在被循环的是 php数组 或实现了Countable 接口的类,才有效。

    添加一个条件

    跟PHP不一样,在循环内部不支持break和continue语句,你只能通过过滤器去跳过一些循环,就像这样

    1. <ul> 
    2.     {% for user in users if user.active %} 
    3.         <li>{{ user.username|e }}</li> 
    4.     {% endfor %} 
    5. </ul> 
    <ul>
        {% for user in users if user.active %}
            <li>{{ user.username|e }}</li>
        {% endfor %}
    </ul>

    else 分支

    如果 users是个空数组就会输出no user found 。

    1. <ul> 
    2.     {% for user in users %} 
    3.         <li>{{ user.username}}</li> 
    4.     {% else %} 
    5.         <li><em>no user found</em></li> 
    6.     {% endfor %} 
    7. </ul> 
    <ul>
        {% for user in users %}
            <li>{{ user.username}}</li>
        {% else %}
            <li><em>no user found</em></li>
        {% endfor %}
    </ul>

    按keys循环

    1. <h1>Members</h1> 
    2. <ul> 
    3.     {% for key in users|keys %} 
    4.         <li>{{ key }}</li> 
    5.     {% endfor %} 
    6. </ul> 
    <h1>Members</h1>
    <ul>
        {% for key in users|keys %}
            <li>{{ key }}</li>
        {% endfor %}
    </ul>

    按keys, values循环

    1. <h1>Members</h1> 
    2. <ul> 
    3.     {% for key, user in users %} 
    4.         <li>{{ key }}: {{ user.username|e }}</li> 
    5.     {% endfor %} 
    6. </ul> 
    <h1>Members</h1>
    <ul>
        {% for key, user in users %}
            <li>{{ key }}: {{ user.username|e }}</li>
        {% endfor %}
    </ul>

    if标签

    这个不用多说,直接看例子

    1. {% if users %} 
    2.     <ul> 
    3.         {% for user in users %} 
    4.             <li>{{ user.username|e }}</li> 
    5.         {% endfor %} 
    6.     </ul> 
    7. {% endif %} 
    8.  
    9. {% if kenny.sick %} 
    10.     Kenny is sick. 
    11. {% elseif kenny.dead %} 
    12.     You killed Kenny!  You bastard!!! 
    13. {% else %} 
    14.     Kenny looks okay --- so far 
    15. {% endif %} 
    {% if users %}
        <ul>
            {% for user in users %}
                <li>{{ user.username|e }}</li>
            {% endfor %}
        </ul>
    {% endif %}
    
    {% if kenny.sick %}
        Kenny is sick.
    {% elseif kenny.dead %}
        You killed Kenny!  You bastard!!!
    {% else %}
        Kenny looks okay --- so far
    {% endif %}
    
    

    macro标签

    macro(宏标签)类似于其他语言中的函数,常用于填充html标签,以下是一个例子,用来渲染<input>

    1. {% macro input(name, value, type, size) %} 
    2.     <inputtype="{{ type|default('text') }}"name="{{ name }}"value="{{ value|e }}"size="{{ size|default(20) }}"/> 
    3. {% endmacro %} 
    {% macro input(name, value, type, size) %}
        <input type="{{ type|default('text') }}" name="{{ name }}" value="{{ value|e }}" size="{{ size|default(20) }}" />
    {% endmacro %}

    macro与函数的不同之处在于:

    1、参数的默认值是通过macro块内部的 default过滤器来定义的。

    2、参数总是可选的。

    另外,就跟php函数一样,macro内部是无法使用外部的变量的。但你可以传递一个特殊变量_context作为参数来获取整个内容。

    macro可以被定义在任何的模板内,但在你使用之前需要使用 imported

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

    然后就可以这样使用了

    1. <p>{{ forms.input('username') }}</p> 
    2. <p>{{ forms.input('password', null, 'password') }}</p> 
    <p>{{ forms.input('username') }}</p>
    <p>{{ forms.input('password', null, 'password') }}</p>

    如果你要在定义macro的模板里使用,就不需要imported 可以使用特殊变量_self

    1. <p>{{ _self.input('username') }}</p> 
    <p>{{ _self.input('username') }}</p>

    如果你要定义一个macro里 包含另一个macro,并且两个macro在同一个文件里,可以使用特殊变量_self

    1. {% macro input(name, value, type, size) %} 
    2.   <inputtype="{{ type|default('text') }}"name="{{ name }}"value="{{ value|e }}"size="{{ size|default(20) }}"/> 
    3. {% endmacro %} 
    4.  
    5. {% macro wrapped_input(name, value, type, size) %} 
    6.     <divclass="field"> 
    7.         {{ _self.input(name, value, type, size) }} 
    8.     </div> 
    9. {% endmacro %} 
    {% macro input(name, value, type, size) %}
      <input type="{{ type|default('text') }}" name="{{ name }}" value="{{ value|e }}" size="{{ size|default(20) }}" />
    {% endmacro %}
    
    {% macro wrapped_input(name, value, type, size) %}
        <div class="field">
            {{ _self.input(name, value, type, size) }}
        </div>
    {% endmacro %}

    如果两个macro在不同的文件里,你需要使用import

    1. {# forms.html #} 
    2.  
    3. {% macro input(name, value, type, size) %} 
    4.   <inputtype="{{ type|default('text') }}"name="{{ name }}"value="{{ value|e }}"size="{{ size|default(20) }}"/> 
    5. {% endmacro %} 
    6.  
    7. {# shortcuts.html #} 
    8.  
    9. {% macro wrapped_input(name, value, type, size) %} 
    10.     {% import "forms.html" as forms %} 
    11.     <divclass="field"> 
    12.         {{ forms.input(name, value, type, size) }} 
    13.     </div> 
    14. {% endmacro %} 
    {# forms.html #}
    
    {% macro input(name, value, type, size) %}
      <input type="{{ type|default('text') }}" name="{{ name }}" value="{{ value|e }}" size="{{ size|default(20) }}" />
    {% endmacro %}
    
    {# shortcuts.html #}
    
    {% macro wrapped_input(name, value, type, size) %}
        {% import "forms.html" as forms %}
        <div class="field">
            {{ forms.input(name, value, type, size) }}
        </div>
    {% endmacro %}

    filter标签

    就是给整个区块使用过滤器

    1. {% filter upper %} 
    2.     This text becomes uppercase 
    3. {% endfilter %} 
    {% filter upper %}
        This text becomes uppercase
    {% endfilter %}
    1. {% filter lower|escape %} 
    2.     <strong>SOME TEXT</strong> 
    3. {% endfilter %} 
  • 相关阅读:
    为什么非全站升级HTTPS不可?
    使用JSON实现分页
    Git常用命令
    chrome浏览器tab页内存占用变大,网站变慢为哪般?
    我们前端跟后端是怎么合作的
    关于响应式布局
    AngularJS(1)
    关于php语言的使用!
    你必须收藏的Github技巧
    CSS3 动画
  • 原文地址:https://www.cnblogs.com/Kakasi/p/2881003.html
Copyright © 2011-2022 走看看