面向PHP开发人员的Jade 模板

分享于 

18分钟阅读

Web开发

  繁體

。样例图像- 最大宽度为 600像素

介绍

Jade 是一个模板引擎,在 node.js/express 社区中引起了大量的轰动。 它使得HTML视图模板结构良好,易于维护,但却没有被PHP开发者广泛使用。 主要原因是在 Jade 语法中将PHP代码段合并成了难以维护的代码,类似于使用 Jade的对象。 我将使用一个简单的Jade 扩展来提供一个开发工作流,它允许PHP开发人员获得 Jade 语法的所有优点。

背景

  • 什么是 Jade?

    Jade 是一种编译为HTML的语言,它是将应用程序逻辑与表示标记分离的一种很好的方法。 简单地说,Jade 是没有标签的HTML。

    下面是 Jade 模板和等价HTML的示例,以满足你的需求。

    doctype html
    html(lang="en")
     head
     meta(charset="utf-8")
     title Jade Example
     meta(name="description" content="")
     meta(name="author" content="")
    //- Mobile Specific Metas
     meta(name="viewport" 
     content="width=device-width, 
     initial-scale=1, maximum-scale=1")
     body
     div
     h1 Jade is Wonderful....
     div
     p.
     Nullam a dolor id arcu semper 
     finibus ut pulvinar orci. Proin
     sodales nisi et dictum pulvinar. 
     Duis orci velit, suscipit et
     porttitor gravida, molestie ac purus. 
     Cum sociis natoque penatibus
     et magnis dis parturient montes, 
     nascetur ridiculus mus. Cras felis
     neque, gravida a blandit ac, 
     rutrum ut sapien. Vivamus tincidunt
     volutpat libero eget tempor. 
     Nam dolor mauris, mollis in euismod
     vitae, viverra ac libero
     div
     p Copyright 2014 www.jade4php.com. 
     All rights reserved.
    //- Scripts
     script(type="text/javascript" 
     src="js/jquery-1.8.0.min.js")
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="utf-8"><title>Jade Example</title><metaname="description"content=""><metaname="author"content=""><metaname="viewport"content="width=device-width, 
     initial-scale=1, maximum-scale=1"></head><body><div><h1>Jade is Wonderful....</h1></div><div><p> Nullam a dolor id arcu semper 
     finibus ut pulvinar orci. Proin
     sodales nisi et dictum pulvinar. 
     Duis orci velit, suscipit et
     porttitor gravida, molestie ac purus. 
     Cum sociis natoque penatibus
     et magnis dis parturient montes, 
     nascetur ridiculus mus. Cras felis
     neque, gravida a blandit ac, 
     rutrum ut sapien. Vivamus tincidunt
     volutpat libero eget tempor. 
     Nam dolor mauris, mollis in euismod
     vitae, viverra ac libero
     </p></div><div><p>Copyright 2014 www.jade4php.com. 
     All rights reserved.</p></div><scripttype="text/javascript"src="js/jquery-1.8.0.min.js"></script></body></html>

    To Jade 编程语言,以及如何改变你与HTML的关系,看看 Jade 语言网站或者a CodeProject Jade? 别这样。

  • 爱 Jade的原因

  • 没有标签

    不再是spaghetti的HTML代码,因为它在每次被抗拒的更改中都变得更加难以管理。 Jade 很简单。元素缩进,因这里无需关闭标签,因这里格式化很重要,无论你的老板。

  • 主模板

    你可以创建主布局来组织网站,并为站点地图中的各个页面或者部分包含不同的"方块"内容。

  • Markdown

    你可以在模板文件中轻松地包含 Markdown 语法,并使用内置的Markdown 过滤器。

  • 补充客户端框架

    如果你使用的是客户端框架( 如 ),那么你将在服务器和客户端上享受良好的结构化。可以维护代码的全部好处。 在没有注释的情况下引用 Pangloss,这就像一样轻松地翻译。

  • 你可以交互式学习 Jade

    例如 Jade 是一个很好地探索的好地方,并尝试了。

  • 你可以重构代码

    不愿意触摸脆弱的代码,因为它会崩溃。 Jade 正确地邀请你在按下上一分钟的更改时重构它。

  • 用mixin简化通用代码

    简单且容易使用 Jade 参数化mixin生成菜单。面板和导航小部件。

  • 轻松将现有的HTML转换为 Jade

    已经有一个网站你很惭愧? 无问题,[Convert HTML to Jade] ( http://html2jade.aaron-powell.com/ ) 是一个在线资源,你可以用它来给那些疲劳的旧网站。

  • 你可以在PHP中使用 Jade

    我们可以在一个共享主机和 PHP/MySQL的世界中生存,这是一个很好的开发环境。 在 Jade 中不能分离,但我希望能够在正常工作流程中使用它。 如果我真实的话,我真的有一个安静的对PHP和 Jade的影响。

  • Jade 很酷

    简单地说,Jade 代码的时间较少,代码行更少,比HTML更漂亮。 什么是不爱的。

使用代码

  • PHP开发人员如何使用 Jade?

    迄今为止,我已经描述了代码 Eutopia,我可以告诉你,你不能等待将它集成到你的PHP开发人员工具包中。 但有一个问题。 使用 Jade 和PHP意味着引入一些原始的HTML来注入PHP逻辑和变量。 例如:

    <?phpecho htmlspecialchars($foo, ENT_QUOTES, 'UTF-8');>?

    这是多么糟糕但在你抛出你的手前,回到地下室去,有一个简单的方法来解决问题。

    使用名为 jade4php的Jade 扩展,你可以编写:

    p!= php('$foo')

    现在不让你高兴了? 这个简洁的语句将导致以下编译的HTML标记,但没有痛苦。 != 只是告诉 Jade 不要转义段落内容,因为它已经用 PHP htmlspecialcharacters 函数转义了。

    <p><?php echo htmlspecialchars($foo, ENT_QUOTES, 'UTF-8');> </p>

    不同于它的他人在HTML健身的痛苦中发汗时,蓝色的Jade 方法都有所增加,没有痛苦( 我想我将把那个标语放在t 恤上)。

  • 示例项目

  • 下载jade4php示例网站并将它的解压到你的项目文件夹中。 这并不重要,这个文件夹在哪里或者你叫它什么,但我建议在你的主文件夹中。

    示例项目的现场演示在 www.jade4php.com 可用,包括在线源代码资源管理器。

  • nodejs.org 下载并安装 node.js。 这将安装你将用来安装项目 Jade 依赖项的节点包管理器( npm )。

  • 在步骤( 1 ) 中打开一个终端窗口并导航到你安装示例网站的文件夹,然后键入:

    npm install

    这将安装在项目中定义的node.js 依赖项,以便你可以使用grunt运行。

    package.json file:

    {
     "name": "jade4php-example",
     "version": "0.0.0",
     "description": "An example jade4php project",
     "homepage": "http://www.jade4php.com",
     "main": "Gruntfile.js",
     "scripts": {
     "test": "echo"Error: no test specified" && exit 1" },
     "author": {
     "name": "Brian Etherington",
     "email": "brian.etherington@outlook.com",
     "url": "http://www.jade4php.com" },
     "repository": {
     "type": "git",
     "url": "git://github.com/BookArt/jade4php-example.git" },
     "bugs": {
     "url": "https://github.com/BookArt/jade4php-example/issues" },
     "licenses": [
     {
     "type": "MIT",
     "url": "https://github.com/BookArt/jade4php-example/blob/master/LICENSE-MIT" }
     ],
     "devDependencies": {
     "grunt": "^0.4.5",
     "grunt-contrib-clean": "^0.6.0",
     "grunt-jade4php": "^1.0.0" },
     "private": true
    } 
  • 使用节点包管理器 npm (。已经在上面的步骤 2中安装了节点) 安装 grunt-cli:

    npm install -g grunt-cli

    你将使用grunt来运行 Jade 来编译你的模板。 有关grunt及其可以做什么的更多信息,请参见 gruntjs.com

    grunt任务是在 Gruntfile.js 中定义的:

    module.exports = function(grunt) {
     grunt.initConfig({
     pkg: grunt.file.readJSON('package.json'),
     clean: {
     compile: ['htdocs/templates/**/*.phtml'],
     },
     jade4php: {
     compile: {
     options: {
     pretty: true
     },
     expand: true,
     cwd: 'jade',
     src: ['**/*.jade', '!_**/*.jade', '!layout/*.jade', '!mixins/*.jade', '!includes/*.jade'],
     dest: 'htdocs/templates/',
     ext: '.phtml' }
     }
     });
     grunt.loadNpmTasks('grunt-contrib-clean');
     grunt.loadNpmTasks('grunt-jade4php');
     grunt.registerTask('default', ['clean','jade4php']);
    }; 
  • 在终端窗口中,键入grunt以运行默认任务:

    grunt
    Running "clean:compile" (clean) task
    >> 8 paths cleaned.
    Running "jade4php:compile" (jade4php) task
    File htdocs/templates/amazium.phtml created.
    File htdocs/templates/conditional.phtml created.
    File htdocs/templates/forms.phtml created.
    File htdocs/templates/intro.phtml created.
    File htdocs/templates/menu.phtml created.
    File htdocs/templates/paras.phtml created.
    File htdocs/templates/setup.phtml created.
    File htdocs/templates/tables.phtml created.
    Done, without errors.

    刚才 发生 什么 了?

    在 jade4php_example/Jade 文件夹中的模板被编译为。phtml文件到 jade4php_example/htdocs/templates 文件夹中。

    查看 Jade 模板和等效的文件来查看生成的内容。

  • 如果你还没有一个,你将需要一个支持PHP的Web服务器。

    如果你想要快速运行和运行,你可以使用构建在PHP中的开发web服务器。 从下载并安装 PHP ( )。

    有关配置和安装的完整说明可以在 php.net/manual/en/install.php 找到。

    如果使用 are Windows,你将使用 命令行 PHP来确保PHP可以执行文件的路径在你的PATH 环境中。

    打开第二个终端窗口,导航到 jade4php 项目文件夹并键入。

    cd htdocs
    php -S localhost:8000

    这将在端口 8000上启动一个web服务器,并将文档 root 设置为项目htdocs文件夹的 。 在浏览器中,键入:

    localhost:8000/phpinfo.php

    这将显示有关已经安装版本的PHP的信息。 如果收到错误,请返回并检查PHP的安装和配置。

    如果已经成功安装了 PHP,那么在浏览器中,你现在可以键入:

    localhost:8000/index.php

    这将显示示例网站的主页。

    或者,可以将PHP支持添加到许多web服务器( IIS,Xitami等) 中,但是大多数通常使用,服务器。 有关如何安装和配置Apache的信息,请访问 httpd.apache.org/docs/current/install.html

  • jade4php 项目文件夹中找到 Jade 文件夹并编辑 intro.jade 以更改某些文本并保存已经编辑的文件。 在第一个终端窗口中,键入 grunt 以更新已经更改的模板。

    grunt
    Running "clean:compile" (clean) task
    >> 8 paths cleaned.
    Running "jade4php:compile" (jade4php) task
    File htdocs/templates/amazium.phtml created.
    File htdocs/templates/conditional.phtml created.
    File htdocs/templates/forms.phtml created.
    File htdocs/templates/intro.phtml created.
    File htdocs/templates/menu.phtml created.
    File htdocs/templates/paras.phtml created.
    File htdocs/templates/setup.phtml created.
    File htdocs/templates/tables.phtml created.
    Done, without errors.

    以前一样,Jade 模板已经编译到你的/模板文件夹。

  • 刷新浏览器以查看更改。

  • 模板类

    管理模板变量和显示HTML代码的工作被委托给 Template.class.php。

    这段代码基于 Brian Lozier原始代码,为了管理 Jade 生成的插件模板,我大大简化了它。

    我很感谢布莱恩的文章,除了模板引擎之外的 )。 但是随着 Jade的出现,我认为关于PHP模板的思想完全符合这个标准。

    <?php/**
     * A simple template class
     *
     * Based upon original code by:
     *
     * Copyright (c) 2003 Brian E. Lozier (brian@massassi.net)
     *
     * Permission is hereby granted, free of charge, to any person obtaining a copy
     * of this software and associated documentation files (the"Software"), to
     * deal in the Software without restriction, including without limitation the
     * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
     * sell copies of the Software, and to permit persons to whom the Software is
     * furnished to do so, subject to the following conditions:
     *
     * The 上面 copyright notice and this permission notice shall be included in
     * all copies or substantial portions of the Software.
     *
     * THE SOFTWARE IS PROVIDED"AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
     * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
     * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
     * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
     * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
     * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
     * IN THE SOFTWARE.
     */class Template {
     private $vars = []; // Holds all the template variables/**
     * Set a template variable.
     */ public function assign($name, $value) {
     $this->vars[$name] = $value;
     }
     /**
     * Open, parse, and return the template file.
     *
     * @param $file string the template file name
     */ public function fetch($file) {
     extract($this->vars); // Extract the vars to local namespace ob_start(); // Start output buffering include($file); // Include the file$contents = ob_get_contents(); // Get the contents of the buffer ob_end_clean(); // End buffering and discardreturn$contents; // Return the contents }
     public function display($file) {
     echo $this->fetch($file);
     }
    } 
  • 将模板类与 /表。php 一起使用:

    <?phpinclude "lib/Template.class.php";$template = new Template();$table = [
     ['id' => 1, 'first_name' => 'Bruce', 'last_name' => 'Wayne', 'location' => 'Gotham City'],
     ['id' => 2, 'first_name' => 'Clarke', 'last_name' => 'Kent', 'location' => 'Metropilis'],
     ['id' => 3, 'first_name' => 'Oliver', 'last_name' => 'Queen', 'location' => 'Star City'],
     ['id' => 4, 'first_name' => 'Diana', 'last_name' => 'Prince', 'location' => 'Themyscira']
    ];
    $template->assign('table', $table);
    $template->display('templates/tables.phtml');
  • Jade/表格中对应的Jade 代码。jade。

    This is an example of a table generated in PHP on the server. 
    table
     thead
     tr
     th(scope='col') #ID:
     th(scope='col') First Name:
     th(scope='col') Last Name:
     th(scope='col') Location:
     tbody.striped
     //----------------------------------------------//- Assign php row expressions to jade variables - id = '#'+php("$row['id']")
     - first_name = php("$row['first_name']")
     - last_name = php("$row['last_name']")
     - location = php("$row['location']")
     //---------------------------------------------- :php foreach($table as $row):
     tr
     td!= id
     td!= first_name
     td!= last_name
     td!= location
     :php endforeach;
  • 工作流

    在你的web工作流中包含 Jade 很容易。 首先将应用程序逻辑与模板类分离,比如在示例项目lib文件夹中,并将数据变量分配给模板变量。 然后,在设置所有内容后,对模板类进行调用,将已经编译的模板输出到浏览器。

    在 Jade 模板中保留一个单独的文件夹,使用grunt来运行 Jade 编译器,以生成你需要的PHP模板类的 。

    关于如何组织项目和 jade4php 足够灵活,允许你使用首选的文件夹结构,你可能有自己的想法。 如果你想要做很多数据库工作,那么考虑同时移动到 model-view-controller Pattern 以获得更多的好处。 但我认为是另一篇文章和另一天。

历史记录

  • 13th 2014年10月: 初始版本

PHP  TEMP  JAD  JADE  
相关文章