CodeIgniter 框架集成Twig模板引擎

介绍：

    模版引擎 twig 的模板就是普通的文本文件，也不需要特别的扩展名，.html .htm .twig 都可以。

    模板内的 变量 和 表达式 会在运行的时候被解析替换，标签（tags）会来控制模板的逻辑。CodeIgniter 是一个小巧但功能强大的 PHP 框架，作为一个简单而“优雅”的工具包，它可以为 PHP 程序员建立功能完善的 Web 应用程序。

<br />

关于Twig的介绍可以参考我之前写的一篇文章 <a href="http://lattecake.com/post/postInfo/12" target="_blank">《Twig的核心概念及本站页面结构分析》</a>。

一个这么好的模板引擎，我们把 Twig模板引擎也集成到CodeIgniter框架里边去。

步骤：

&nbsp; &nbsp; 1.先去CI官网把框架给down下来，官网地址：<a href="http://codeigniter.com/" target="_blank">http://codeigniter.com/</a> GitHub地址：<a href="https://github.com/bcit-ci/CodeIgniter/" target="_blank">https://github.com/bcit-ci/CodeIgniter/</a>

&nbsp; &nbsp; 2.然后去Twig框架把模板引擎也down下来，官网地址：<a href="http://twig.sensiolabs.org/" target="_blank">http://twig.sensiolabs.org/&nbsp;</a>&nbsp;GitHub地址：<a href="https://github.com/twigphp/Twig" target="_blank">https://github.com/twigphp/Twig</a>

        下载解压后会有这些目录：

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="http://source.lattecake.com/images/2015/03/ba9e9b3a551ca44359c3239826e86135.png" alt="" />

&nbsp;&nbsp;&nbsp;&nbsp;3.把Twig核心目录<strong>&nbsp;</strong><strong>( ./lib/Twig</strong><strong>&nbsp;</strong><strong>)</strong>&nbsp;复制到CI框架的<strong> ./application/third_part</strong> 目录，如下图所示;&nbsp;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="http://source.lattecake.com/images/2015/03/13ce26c00ab49da1fe53c5f19440bf08.png" alt="" />

&nbsp; &nbsp; 4.在CI框架创建扩展文件，路径：<strong> ./application/libraries/Twig.php</strong> 扩展代码：

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
/**



Created by PhpStorm.
User: LatteCake
Date: 15-3-7

Time: 下午12:10
*/
require APPPATH.'third_party/Twig/Autoloader.php';
class Twig {

public $twig;

public $config;

private $data = array();

/**


读取配置文件twig.php并初始化设置
*
*/
public function __construct($config)
{
$config_default = array(
    'cache_dir' => false,
    'debug' => false,
    'auto_reload' => true,
    'extension' => '.tpl',
);
$this->config = array_merge($config_default, $config);
Twig_Autoloader::register ();
$loader = new Twig_Loader_Filesystem ($this->config['template_dir']);
$this->twig = new Twig_Environment ($loader, array (
    'cache' => $this->config['cache_dir'],
    'debug' => $this->config['debug'],
    'auto_reload' => $this->config['auto_reload'],
) );
$CI = & get_instance ();
$CI->load->helper(array('url'));
$this->twig->addFunction(new Twig_SimpleFunction('site_url', 'site_url'));
$this->twig->addFunction(new Twig_SimpleFunction('base_url', 'base_url'));
}


/**


给变量赋值
*
@param string|array $var
@param string $value
*/
public function assign($var, $value = NULL)
{
if(is_array($var)) {
    foreach($var as $key => $val) {
        $this->data[$key] = $val;
    }
} else {
    $this->data[$var] = $value;
}
}


/**


模版渲染
*
@param string $template 模板名
@param array $data 变量数组
@param bool $return true返回 false直接输出页面
@return string
*/
public function render($template, $data = array(), $return = FALSE)
{
$template = $this->twig->loadTemplate ( $this->getTemplateName($template) );
$data = array_merge($this->data, $data);
if ($return === TRUE) {
    return $template->render ( $data );
} else {
    return $template->display ( $data );
}
}


/**


获取模版名
*
@param string $template
@return string
*/
public function getTemplateName($template)
{
$default_ext_len = strlen($this->config['extension']);
if(substr($template, -$default_ext_len) != $this->config['extension']) {
    $template .= $this->config['extension'];
}
return $template;
}


/**


字符串渲染
*
@param string $string 需要渲染的字符串
@param array $data 变量数组
@param bool $return true返回 false直接输出页面
@return object
/
public function parse($string, $data = array(), $return = FALSE)
{
$string = $this->twig->loadTemplate ( $string );
$data = array_merge($this->data, $data);
if ($return === TRUE) {
    return $string->render ( $data );
} else {
    return $string->display ( $data );
}
}
}
/ End of file Twig.php /
/ Location: ./application/libraries/Twig.php */

    5. 在CI框架创建配制文件，路径： ./application/config/twig.php 配制代码：

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
// 默认扩展名
$config['extension'] = ".twig";



// 默认模版路劲
$config['template_dir'] = APPPATH . "views/";

// 缓存目录
$config['cache_dir'] = APPPATH . "cache/twig/";

// 是否开启调试模式
$config['debug'] = false;

// 自动刷新
$config['auto_reload'] = true;

/* End of file twig.php /
/ Location: ./application/config/twig.php */

<br />

&nbsp; &nbsp; 6.设置自动加载 <strong>./application/config/autol</strong><strong>o</strong><strong>a</strong><strong>d</strong><strong>.</strong><strong>p</strong><strong>h</strong><strong>p&nbsp;</strong>把扩展及配制自动加载

<br />

$autoload['libraries'] = array('Twig');
$autoload['config']   = array('twig');

这样就基本完成了

<br />

OK 咱们测试一下

在框架的<strong>./application/controllers</strong><strong>/</strong><strong>Welcome.php</strong>&nbsp;控制下添加方法：

<br />

public function index()
{
    $this->twig->render('welcome_index.html', array(
        'title' => 'Hello Twig'
    ));
}

然后添加 ./application/views/welcomt_index.html.twig 文件

<br />

<br />

{% extends "default_layout.html.twig" %}


{% block pageTitle %}{{ title }}{% endblock %}

{% block container %}

<div id="container">
    <h1>{{ title }}</h1>

    <div id="body">
        <p>The page you are looking at is being generated dynamically by CodeIgniter.</p>

        <p>If you would like to edit this page you'll find it located at:</p>
        <code>application/views/welcome_message.php</code>

        <p>The corresponding controller for this page is found at:</p>
        <code>application/controllers/welcome.php</code>

        <p>If you are exploring CodeIgniter for the very first time, you should start by reading the <a href="user_guide/">User Guide</a>.</p>
    </div>

    <p class="footer">Page rendered in <strong>0.1530</strong> seconds</p>
</div>


{% endblock %}

再创建父文件 ./application/views/default_layout.html.twig 

<br />

<br />

<!DOCTYPE html>
<html lang="en">
<head>


&lt;meta charset="utf-8"&gt;
&lt;title&gt;{% block pageTitle %}{% endblock %}&lt;/title&gt;

&lt;style type="text/css"&gt;

    ::selection{ background-color: #E13300; color: white; }
    ::moz-selection{ background-color: #E13300; color: white; }
    ::webkit-selection{ background-color: #E13300; color: white; }

    body {
        background-color: #fff;
        margin: 40px;
        font: 13px/20px normal Helvetica, Arial, sans-serif;
        color: #4F5155;
    }

    a {
        color: #003399;
        background-color: transparent;
        font-weight: normal;
    }

    h1 {
        color: #444;
        background-color: transparent;
        border-bottom: 1px solid #D0D0D0;
        font-size: 19px;
        font-weight: normal;
        margin: 0 0 14px 0;
        padding: 14px 15px 10px 15px;
    }

    code {
        font-family: Consolas, Monaco, Courier New, Courier, monospace;
        font-size: 12px;
        background-color: #f9f9f9;
        border: 1px solid #D0D0D0;
        color: #002166;
        display: block;
        margin: 14px 0 14px 0;
        padding: 12px 10px 12px 10px;
    }

&lt;/style&gt;


</head>
<body>

{% block container %}
{% endblock %}

</body>
</html>

OK 咱们来跑一遍，保证一次成功 

<br />

<img src="http://source.lattecake.com/images/2015/03/55b63d10a8b02bfc6a51bab2eadd8ad9.png" alt="" />

就这么任性。。。。。

<br />

其他 ：

    配制文件 twig.php 里的参数可以自己定义 {extension} 扩展名可以自己定义,我用的是 phpStorm 对twig支持 所以就用 twig了

    cache_dir 缓存目录可以自定义 默认是在 ./application/cache/

<strong><span style="color:#E56600;">原创，转载请注明出处，如有兴趣欢迎一起交流学习</span></strong><strong><span style="color:#E56600;">&nbsp;</span></strong>