PHP Template engine –twig

Source: Internet
Author: User
Tags php class php template

In the Web site development process, the template engine is essential, PHP used by the most of the genus Smarty. At present, the company system is also used smarty, if you want to add a page just the head of the site, tail and the public part of the left through the smarty include way to introduce, and then the main part of the content can be used up is quite convenient. This is also a more general approach. But after a period of maintenance, we find a bit messy:

1. The public part of the more and more, do not need to use JS, CSS in some pages have been forced to introduce

2. The CSS of the new page can only be written in the body of the Web page, it always looks uncomfortable.

3. Left, head, tail if there is a special display, operation is not convenient, only in public places to make judgments.

Of course, these page problems in the design can be reasonable to split the Web page to achieve, of course, the most important is the developers, in the good system also can not withstand the development of the toss, a project after several hands, the next maintenance personnel that is quite painful. Do not pull far, now to say is another kind of template development ideas.

In PHP class used many times, there is a very useful feature that is inherited, subclass inherits the parent class can directly call the parent class method, can also be overridden by the parent class method, the same PHP template engine twig also implemented this point, the template can be written in a more convenient way.

Twig is the default template engine for the open source framework Symfony2, the home page is http://twig.sensiolabs.org/the current version is stable:1.12.1, and other template engines can do it, Here the main collation of the use of Twig block way to write template page.

To a common layout for example, there are three links, respectively, is the home page, about, contact three pages, and then the head shared, the tail is common, the middle part is divided into two parts, the left side of the common, the right side of the display of specific content, seemingly a lot of backstage are this layout.
First look at the homepage twig_index.php, and Smarty almost, initialize the settings, and then set the variables and display.

123456789101112 <?phprequire ‘./Twig-1.12.1/lib/Twig/Autoloader.php‘;Twig_Autoloader::register();$loader = new Twig_Loader_Filesystem(‘./view/twig/templates‘);$twig = new Twig_Environment($loader, array(    ‘cache‘ => ‘./view/twig/templates_c‘,    ‘auto_reload‘ => true));$twig->display(‘index.html‘, array(‘name‘ => ‘Bobby‘));?>

Other pages of PHP content in addition to the template name, the other content is exactly the same, so the subsequent PHP page will not be written.
The next major task is to write the template, since support inheritance, there should be a parent class, other pages to inherit the class. Base.html is the template's parent class, which reads as follows:

12345678910111213141516171819202122232425262728293031323334353637383940414243444546 {# /view/twig/templates/base.html #}<!DOCTYPE html><html><head><title>{% block title %}Home{% endblock %} - Twig</title><style type="text/css">{% block stylesheet %}#header, #main, #footer{width:600px; margin:0px auto; border:1px solid #333;}#main{border:0px;}#header { height:120px;margin-bottom:10px;}#footer{ height:80px;clear:both;margin-top:10px;}#header h1{margin-left:20px;}#header span{margin-left:20px;}#leftsider{width:125px; float:left; border:1px solid #333; height:200px;padding-top:10px;}#leftsider span{width:100%; height:30px; line-height:30px; clear:both; padding-left:15px; display:block;}#rightsider{width:460px; float:right; border:1px solid #333; height:250px;}.clear{clear:both;}{% endblock %}</style></head><body>    <div id="header">        <h1>Twig Template Test</h1>        <span><a href="twig_index.php">Home</a></span>        <span><a href="twig_about.php">About</a></span>        <span><a href="twig_contact.php">Contact</a></span>    </div>    <div id="main">        <div id="leftsider">            {% block leftsider %}            <span>系统模块1</span>            <span>系统模块2</span>            {% endblock %}        </div>        <div id="rightsider">            {% block rightsider %}Hello {{name}}{% endblock %}        </div>    </div>    <div class="clear"></div>    <div id="footer">        {% block footer %}<h1>Twig Footer</h1>{% endblock %}    </div></body></html>

Basic page frame not much to say, mainly look at the middle there are 5 blocks-{% block blockname%}{% endblock%} Each block represents a chunk, where the block can be interpreted as a method in the PHP parent class.

When the basic HTML frame is set up, how can index.html write it? First, you should inherit the base page, and then consider whether you want to rewrite the contents of the base page, and then just inherit to see the effect.

12 {# /view/twig/templates/index.html #}{% extends "base.html" %}

The first behavior of the comment section, can be omitted, the second line represents Index.html inherited base.html, not overridden in the case will be directly used in base.html content to display, that is, the page will see the following effect:

The effect is relatively simple, but very magical, index.html just inherited base.html, did not write other content? Yes, no writing, when the parent class method is not overridden. A subclass is a method that can call the parent class directly.

Then look at about, assuming that the About page and the index page are different except for the right area, the rest is exactly the same, that is, you just need to rewrite the Rightsider block:

1234 {# /view/twig/templates/about.html #}{% extends "base.html" %}{% block title %}About{% endblock %}{% block rightsider %} {% include ‘about_content.html‘ %} {% endblock %}

The content of the title is changed to about, the content of Rightsider is read from the about_content.html file, the other part remains original. That is, in addition to the content of Hello Bobby, other parts and the home page are the same, is not it convenient?

How do I write the contact page again? I need to add a menu to the Leftsider and show the contents of the other block in the Rightsider. Look at the following:

12345 {# /view/twig/templates/contact.html #}{% extends "base.html" %}{% block title %}Contact{% endblock %}{% block leftsider %}{{ parent() }}<span>系统模块3</span>{% endblock %}{% block rightsider %} {{ block(‘footer‘) }} {% endblock %}

Call the parent to display the contents of the base class, and through block (' footer ') you can get the twig footer content in the footer. So the picture works as follows:

It's amazing! This way of typesetting is worth a try, waiting for the opportunity ...
Using block after the sub-page can not be HTML in any place to add HTML, that is, write anything outside the block will be error, so it is necessary to set the base to a reasonable setting block,block more flexible. Concrete also get the actual project to try.

As for Twig's specific grammar has time in the collation, but this kind of way to write a template is really very attractive, as if Smarty3 also support the function, have time to see.

See Twig after Lenovo to Lesscss, dynamic style language, home http://www.lesscss.net interested friends can see.

--eof--

PHP Template engine –twig

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.