TWIG Template Design Quick Start Manual Chinese_PHP Tutorial

Written several articles about twig. . I haven’t even written a quick start or anything like that. Write now

Summary
The template of twig is an ordinary text file and does not require a special extension. .html, .htm or .twig are all acceptable.
Variables and expressions within the template will be parsed and replaced at runtime, and tags will control the logic of the template
Below is a minimal template to illustrate some basic things







        

{% for item in navigation %}
                
• {{ item.caption }}

{% endfor %}
                                                                                       
                                                                                                              {{ a_variable }}





                                                                               

         

             {% for item in navigation %}
                
• {{ item.caption }}

           {% endfor %}
                                                                                   
                                       

My Webpage


             {{ a_variable }}


It contains two kinds of symbols {% ... %} and {{ ... }}. The first one is used to control such as for loops, and the second one is used to output variables and expressions


ide support
Many IDEs have highlighting support for twig. Everyone, just find what you need.

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
Variable
The program will pass several variables to the template, and you need to output them in the template. For example, output $hello

{{ hello }}
{{ hello }} If an object or array is passed to the template, you can use dot . to output the properties or methods of the object, or the members of the array. Or you can use subscripting.
{{ foo.bar }}
{{ foo['bar'] }}
{{ foo.bar }}
{{ foo['bar'] }}
If the value you access does not exist, null will be returned. TWIG has a complete process to confirm whether the value exists.


for.bar will perform the following operations
. . . If foo is an array, try to return the bar member. If it does not exist, continue below

. . . If foo is an object, it will try to return the bar attribute. If it does not exist, continue below

. . . Will try to run the bar method, if it does not exist, continue below
. . . Will try to run the getBar method, if it does not exist, continue below
. . . Will try to run the isBar method, if it does not exist, return null


for['bar'] is much simpler for must be an array, try to return the bar member, if not, return null
Global variables

TWIG defines some global variables


_self This refers to the macro tag
_context This is the current environment
_charset: current character encoding


Variable assignment
For details, please refer to the set tag

{% 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 %} 
             
             
        {% endblock %} 
     
     
       

{% block content %}{% endblock %}
 
       
 
            {% block footer %} 
                © Copyright 2011 by you. 
            {% endblock %} 
       
 
     
 


   
        {% block head %}
           
           
        {% endblock %}
   
   
       
{% block content %}{% endblock %}

       

            {% block footer %}
                © Copyright 2011 by you.
            {% endblock %}
       


We have defined 4 blocks, namely block head, block title, block content, block footer
Note
1. Blocks can be nested.
2. The block can set the default value (the content enclosed in the middle). If it is not covered in the sub-template, the default value will be displayed directly. For example, block footer, you don’t need to modify most pages (saving effort), but you can still easily modify it when you need it (flexible)
Let me take a look at how the subtemplate should be defined.
{% 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 %}Note {% extends "base.html" %} must be the first tag. The block footer is not defined, so the default value set in the parent template is displayed
If you need to add the content of a block instead of covering it completely, you can use the parent function

{% block sidebar %}


Table Of Contents


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


Table Of Contents


...
{{ parent() }}
{% endblock %}
There can only be one extends tag, so you can only have one parent template, but there is a workaround to achieve the purpose of reusing multiple templates. For details, see the use tag
in the manual.


HTML escaping
Mainly to help escape angle brackets, etc. <, >, &, " There are two ways. One is to use tags, the other is to use filters. In fact, TWIG internally calls the htmlspecialchars function of php

{{ 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 %}
Because {{ is the operator of TWIG, if you need to output two curly brackets, the easiest way is

{{ '{{' }}
{{ '{{' }}
You can also use the raw tag and raw filter, please refer to the manual for details

{% raw %}



{% for item in seq %}
                                                                                                    {% endfor %}


{% endraw %}
{% raw %}


{% for item in seq %}
                                                                                                  {% endfor %}


{% endraw %}


macros
Macros are somewhat similar to functions and are often used to output some html tags.
Here is a simple example that defines a macro that outputs input tags.

{% macro input(name, value, type, size) %}

{% endmacro %}
{% macro input(name, value, type, size) %}

The {% endmacro %} macro parameter has no default value, but you can achieve it through the default filter.
Generally speaking, macros are defined in other pages and then imported through the import tag,
{% import "forms.html" as forms %}



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


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

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

You can also import only part of the macros in a file, and you can also rename them.
{% from 'forms.html' import input as input_field, textarea %}






Username




{{ input_field('username') }}




Password




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







{{ textarea('comment') }}


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




Username




{{ input_field('username') }}




Password




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







{{ textarea('comment') }}

The above code means that the input and textarea macros are imported from forms.html, and the input is renamed to input_field.
Expression
TWIG allows you to use expressions anywhere. Its rules are almost exactly the same as PHP. Even if you don't know PHP, you will still find it very simple.
The simplest ones are
String: "hello world" or 'hello world'
Number: 42 or 42.33
Array: ['a','b','c']
Hash: {'a':'av', 'b':'bv'} where keys can be without quotes, numbers, or an expression, such as {a:'av', b:'bv'} {1:'1v', 2:'2v'} {1+2:'12v'}
Logic: true or false
Finally there is null
You can nest definitions
{% set foo = [1, {"foo": "bar"}] %}
{% set foo = [1, {"foo": "bar"}] %} operator
Including numerical operations + - * / % (remainder) // (division) ** (exponentiation)



{{ 2 * 3 }}=6


{{ 2 * 3 }}=8


{{ 2 * 3 }}=6


{{ 2 * 3 }}=8 logical operations and or not
Comparison operations > < >= <= == !=
The following code containing the operation in will return true
{{ 1 in [1, 2, 3] }}
{{ 'cd' in 'abcde' }}
{{ 1 in [1, 2, 3] }}
{{ 'cd' in 'abcde' }} Test operation is Needless to say, just look at the code
{{ 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)) %}Other operators
.. Create an array specifying the start to the end. It is the abbreviation of the range function. For details, please refer to the manual



{% for i in 0..3 %} 

{{ i }}, 

{% endfor %} 

{% for i in 0..3 %}

{{ i }},

{% endfor %}

| Use a filter 



{# output will be HELLO #} 

{{ "hello"|upper }} 

{# output will be HELLO #}

{{ "hello"|upper }}~ Force string concatenation

{{ "Hello " ~ name ~ "!" }} 

{{ "Hello " ~ name ~ "!" }}?: Ternary operator 

{{ foo ? 'yes' : 'no' }} 

{{ foo ? 'yes' : 'no' }}. [] Gets the properties of an object. For example, the following are equal. 



{{ foo.bar }} 

{{ foo['bar'] }} 

{{ foo.bar }}

{{ foo['bar'] }}

You can also insert an expression inside a string, usually a variable. The format is #{expression}

{{ "foo #{bar} baz" }} 

{{ "foo #{1 + 2} baz" }} 

{{ "foo #{bar} baz" }}

{{ "foo #{1 + 2} baz" }}


White space control

Like php, the first newline character after the TWIG template tag will be automatically deleted, and the remaining whitespace (including spaces, tabs, newlines, etc.) will be output as is. 

Use the spaceless tag to remove the white space between these HTML tags 



{% spaceless %} 

 

                                                                                               
 

{% endspaceless %} 



{# output will be 
foo
 #} 

{% spaceless %}



                                                                                             


{% endspaceless %}


{# output will be 
foo
 #}

Using the - operator, you can easily delete the space between the TWIG tag before or after it and the html tag. 

{% set value = 'no spaces' %} 

{#- No leading/trailing whitespace -#} 

{%- if true -%} 

{{- value -}} 

{%- endif -%} 



{# output 'no spaces' #} 

{% set value = 'no spaces' %}

{#- No leading/trailing whitespace -#}

{%- if true -%}

{{- value -}}

{%- endif -%}


{# output 'no spaces' #}
{% set value = 'no spaces' %} 

 {{- value }} 
 



{# outputs '
no spaces 
' #} 

{% set value = 'no spaces' %}

 {{- value }} 



{# outputs '
no spaces 
' #}

End, if you insist on reading this, congratulate yourself, you have mastered some more knowledge, congratulations

Excerpted from jiaochangyun’s column




http://www.bkjia.com/PHPjc/478452.html

www.bkjia.comtruehttp: //www.bkjia.com/PHPjc/478452.htmlTechArticleWritten several articles about twig. . I haven't even written a quick start or anything like that. Write now Summary twig templates are ordinary text files and do not require special extensions....