CodeIgniter 框架集成Twig模板引擎

介绍:

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

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

关于Twig的介绍可以参考我之前写的一篇文章 《Twig的核心概念及本站页面结构分析》

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

步骤:

1.先去CI官网把框架给down下来,官网地址: http://codeigniter.com/ GitHub地址: https://github.com/bcit-ci/CodeIgniter/

2.然后去Twig框架把模板引擎也down下来,官网地址: http://twig.sensiolabs.org/  GitHub地址: https://github.com/twigphp/Twig

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

3.把Twig核心目录   ( ./lib/Twig   ) 复制到CI框架的 ./application/third_part 目录,如下图所示; 

4.在CI框架创建扩展文件,路径: ./application/libraries/Twig.php 扩展代码:

<?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 */

6.设置自动加载 ./application/config/autol o a d . p h 把扩展及配制自动加载

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

这样就基本完成了

OK 咱们测试一下

在框架的 ./application/controllers / Welcome.php 控制下添加方法:

public function index()
{
    $this->twig->render('welcome_index.html', array(
        'title' => 'Hello Twig'
    ));
}
然后添加  ./application/views/welcomt_index.html.twig

文件

{% 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 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>{% block pageTitle %}{% endblock %}</title>

    <style type="text/css">

        ::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;
        }

    </style>
</head>
<body>

{% block container %}
{% endblock %}

</body>
</html>
OK 咱们来跑一遍,保证一次成功 

就这么任性。。。。。

其他 :

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

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

原创,转载请注明出处,如有兴趣欢迎一起交流学习  

我来评几句
登录后评论

已发表评论数()

相关站点

+订阅
热门文章