Home / PostsPost

CodeIgniter 框架集成Twig模板引擎

嘟噜聪2015/03/07 04:50:17 7483人已阅

简介 模版引擎 twig 的模板就是普通的文本文件,也不需要特别的扩展名,.html .htm .twig 都可以。 模板内的 变量 和 表达式 会在运行的时候被解析替换,标签(tags)会来控制模板的逻辑。CodeIgniter 是一个小巧但功能强大的 PHP 框架,作为一个简单而“优雅”的工具包,它可以为 PHP 程序员建立功能完善的 Web 应用程序。

介绍:

    模版引擎 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;&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 %}

&lt;div id="container"&gt;
    &lt;h1&gt;{{ title }}&lt;/h1&gt;

    &lt;div id="body"&gt;
        &lt;p&gt;The page you are looking at is being generated dynamically by CodeIgniter.&lt;/p&gt;

        &lt;p&gt;If you would like to edit this page you'll find it located at:&lt;/p&gt;
        &lt;code&gt;application/views/welcome_message.php&lt;/code&gt;

        &lt;p&gt;The corresponding controller for this page is found at:&lt;/p&gt;
        &lt;code&gt;application/controllers/welcome.php&lt;/code&gt;

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

    &lt;p class="footer"&gt;Page rendered in &lt;strong&gt;0.1530&lt;/strong&gt; seconds&lt;/p&gt;
&lt;/div&gt;

{% 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 />

其他 :

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

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

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

很赞哦! (0)

文章评论

标签

站点信息

  • 微信公众号