关于twig

官方文档:https://twig.symfony.com/

twig是一款灵活、快速、安全的PHP模板语言。

  • 快速：Twig将模板编译为纯粹的，最优化的PHP代码。它的开销与常规的PHP代码相比，已经降到了极低。
  • 安全：Twig拥有沙盒模式，用于评估未受信任的模板代码。这使得Twig可以用于允许用户自行修改模板设计的应用程序中。
  • 灵活：Twig由一个灵活的词法分析器和解析器驱动。这使得开发者可以自定义标签和过滤器，并创建自己的DSL。


安装

初始化

初始化 package.json

  1. npm init

安装必要的插件

  1. npm install gulp gulp-twig compression browser-sync

新建文件

在路径下新建css文件夹和js文件夹，并且在文件夹内分别创建css文件和js文件。

然后在路径下新建view文件夹，并在里面新家一个index.twig文件，然后在里面引入css和js。

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport"
  6.           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>Document</title>
  9.     <link rel="stylesheet" href="./css/style.css">
  10. </head>
  11. <body>
  14. <script src="./js/main.js"></script>
  15. </body>
  16. </html>

搭建手脚架

在目录下新建文件gulpfile.js

  1. const gulp = require('gulp');
  2. const compress = require('compression');
  3. const twig = require('gulp-twig');
  4. const browserSync = require('browser-sync');
  6. // 静态服务器
  7. gulp.task('browser-sync',()=>{
  8.     browserSync.init({
  9.         server:{
  10.             baseDir:"./",
  11.             middleware:function (req,res,next) {
  12.                 const gzip = compress();
  13.                 gzip(req,res,next)
  14.             }
  15.         }
  16.     })
  17. })
  19. // 监听文件变动
  20. gulp.task('watch',()=> {
  21.     gulp.watch(['src/**','css/**','js/**'], gulp.series('compile:twig'))
  22. })
  24. // twig 编译成 html
  25. gulp.task('compile:twig',()=>{
  26.     return gulp.src('./views/index.twig')     // index.twig的路径
  27.         .pipe(twig({}))
  28.         .pipe(gulp.dest('./'))
  29. })

运行手脚架

新建两个terminal，一个开启监听。

  1. gulp watch

一个用来开启静态服务器。

  1. browser-sync start --server --files "*.html"

新建组件

在view文件夹中新建组件component1.twig。
然后在index.twig引入。

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport"
  6.           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>Document</title>
  9.     <link rel="stylesheet" href="./css/style.css">
  10. </head>
  11. <body>
  13. {% include './view/component1.twig' %}
  15. <script src="./js/main.js"></script>
  16. </body>
  17. </html>

这时候手脚架都会监听到view路径下的变化，实时的编译代码并更新页面。

twig使用

引入组件

  1. {% include './view/component1.twig' %}
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport"
  6.           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>Document</title>
  9.     <link rel="stylesheet" href="./css/style.css">
  10. </head>
  11. <body>
  12. <div class="page" id="page">
  14.     {% include "./component1.twig" %}
  16. </div>
  18. <script src="./js/main.js"></script>
  19. </body>
  20. </html>

声明变量

  1. {%
  2.   set item = {
  3.     'icon': 'fa-picture-o',
  4.     'title': '响应式设计',
  5.     'body': 'At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. ',
  6.     'moreText': '更多',
  7.     'moreLink': '/content'
  8.   }
  9. %}
  11. <div class="box-1">
  12.   <div class="big-icon bg"><i class="fa {{item.icon}}"></i></div>
  13.   <h4 class="title">{{item.title}}</h4>
  14.   <div class="text-small">{{item.body}}<div class="clearfix"></div><br data-tomark-pass>
  15.     <a class="btn btn-default" href="{{item.moreLink}}" target="_blank">{{item.moreText}}</a>
  16.   </div>
  17. </div>

父组件向子组件传参

{# 父组件 showcase-v1.html.twig #}
<div class="container">
  {% include '@easy_ui/ui/box/box-v1.html.twig' with {
    'icon': 'fa-bug',
    'title': '市场应用',
    'body': 'Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. ',
    'moreText': '更多',
    'moreLink': '/content'
  } %}
</div>


{# 子组件 box-v1.html.twig #}
<div class="box-1">
  <div class="big-icon bg"><i class="fa {{icon}}"></i></div>
  <h4 class="title">{{title}}</h4>
  <div class="text-small">
    {{body}}
    <div class="clearfix"></div><br data-tomark-pass>
    <a class="btn btn-default" href="{{moreLink}}" target="_blank">{{moreText}}</a>
  </div>
</div>

for循环

{# 父组件 showcase-v1.html.twig #}
{%
  set items = [
    {
            'icon': 'fa-picture-o',
            'title': '响应式设计',
            'body': 'At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. ',
            'moreText': '更多',
            'moreLink': '/content'
          },
          {
            'icon': 'fa-wrench',
            'title': '组件化开发',
            'body': 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat ',
            'moreText': '更多',
            'moreLink': '/content'
          },{
            'icon': 'fa-bug',
            'title': '市场应用',
            'body': 'Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. ',
            'moreText': '更多',
            'moreLink': '/content'
          }
  ]
%}

<div class="container">
  <div class="row">
    {% for item in items %}
    <div class="col-sm-4 col-md-4">
      {% include '@easy_ui/ui/box/box-v1.html.twig' with item %}
    </div>
    {% endfor %}
  </div>
</div>