All Projects → pug-php → Pug

pug-php / Pug

Licence: mit
Pug template engine for PHP

Programming Languages

language
365 projects

Projects that are alternatives of or similar to Pug

Jade
Jade.go - pug template engine for Go (golang)
Stars: ✭ 251 (-26.39%)
Mutual labels:  template, template-engine, pug, jade
Phug
Phug - The Pug Template Engine for PHP
Stars: ✭ 43 (-87.39%)
Mutual labels:  hacktoberfest, template, template-engine, pug
Node.js Bootstrap Starter Template
Node.js, Express, Pug, Twitter Bootstrap, Starter Template
Stars: ✭ 107 (-68.62%)
Mutual labels:  template, pug, jade
pypugjs
PugJS syntax adapter for Django, Jinja2 and Mako templates
Stars: ✭ 237 (-30.5%)
Mutual labels:  template-engine, pug, jade
Jade Html5 Boilerplate
HTML5 Boilerplate ported to Jade. Great as a drop and go markup skeleton for Express apps.
Stars: ✭ 111 (-67.45%)
Mutual labels:  template, pug, jade
tale-pug
Tale Pug is the popular JavaScript Template Engine Pug, formerly Jade, for PHP!
Stars: ✭ 32 (-90.62%)
Mutual labels:  template-engine, pug, jade
Email Templates
📫 Create, preview, and send custom email templates for Node.js. Highly configurable and supports automatic inline CSS, stylesheets, embedded images and fonts, and much more!
Stars: ✭ 3,291 (+865.1%)
Mutual labels:  template, template-engine, pug
idiots.win
Google Autocomplete Guessing Game
Stars: ✭ 26 (-92.38%)
Mutual labels:  pug, jade
emitty
A platform for finding dependencies between files and building tools for incremental compilation or build.
Stars: ✭ 69 (-79.77%)
Mutual labels:  pug, jade
bit-css
用原子类赋予元素属性,减少甚至不写css
Stars: ✭ 19 (-94.43%)
Mutual labels:  pug, jade
pug4py
Use Pug.js within any python framework
Stars: ✭ 17 (-95.01%)
Mutual labels:  template-engine, pug
pretty-harp-jade-skeleton
💀 Harp & Jade/Pug skeleton theme for a personal blog
Stars: ✭ 15 (-95.6%)
Mutual labels:  pug, jade
Wemake Python Package
Bleeding edge cookiecutter template to create new python packages
Stars: ✭ 235 (-31.09%)
Mutual labels:  hacktoberfest, template
pug-symfony
Pug (Jade) template engine for Symfony
Stars: ✭ 40 (-88.27%)
Mutual labels:  pug, jade
lsxc
Compile Livescript + Pug + React + SASS as a single component
Stars: ✭ 17 (-95.01%)
Mutual labels:  pug, jade
Gulp Front
Frontend boilerplate and framework based on gulp, pug, stylus and babel
Stars: ✭ 237 (-30.5%)
Mutual labels:  hacktoberfest, pug
pug-server
🐶 A simple pug server
Stars: ✭ 19 (-94.43%)
Mutual labels:  pug, jade
web-generator
👑 Gulp based task runner which creates HTML output from Pug HTML templates
Stars: ✭ 13 (-96.19%)
Mutual labels:  pug, jade
virtual-jade
Compile Jade templates to Hyperscript for Virtual DOM libraries
Stars: ✭ 31 (-90.91%)
Mutual labels:  pug, jade
generator-vintage-frontend
Modern front-end workflow
Stars: ✭ 15 (-95.6%)
Mutual labels:  pug, jade

Pug-php

Latest Stable Version Monthly Downloads License Build Status StyleCI Test Coverage Code Climate Dependencies

Pug-php adds inline PHP scripting support to the Pug template compiler. Since version 3, it uses Phug, a very customizable Pug template engine made by the tale-pug and pug-php developers as the new PHP Pug engine reference.

Official Phug documentation
See Pug-php demo
Get supported pug-php/pug with the Tidelift Subscription

Install

First you need composer if you haven't yet: https://getcomposer.org/download/

Then run:

composer require pug-php/pug

Pug in your favorite framework

Phalcon: https://github.com/pug-php/pug-phalcon

Symfony: https://github.com/pug-php/pug-symfony

Laravel: https://github.com/BKWLD/laravel-pug

CodeIgniter: https://github.com/pug-php/ci-pug-engine

Yii 2: https://github.com/rmrevin/yii2-pug

Slim 3: https://github.com/MarcelloDuarte/pug-slim

Zend Expressive: https://github.com/kpicaza/infw-pug

Use

<?php

include 'vendor/autoload.php';

$pug = new Pug([
    // here you can set options
]);

$pug->displayFile('my-pug-template.pug');

Since pug-php 3.1.2, you no longer need to import the class with use Pug\Pug; as we provide an alias.

Main methods are render, renderFile, compile, compileFile, display, displayFile and setOption, see the complete documentation here: phug-lang.com.

You can also use the facade to call methods statically:

<?php

use Pug\Facade as PugFacade;

include 'vendor/autoload.php';

$html = PugFacade::renderFile('my-pug-template.pug');

Pug options

Pug options should be passed to the constructor

$pug = new Pug([
    'pretty' => true,
    'cache' => 'pathto/writable/cachefolder/',
]);

Supports for local variables

$pug = new Pug();
$output = $pug->renderFile('file.pug', [
    'title' => 'Hello World',
]);

New in pug-php 3

pug-php 3 is now aligned on pugjs 2, it aims to be a perfect implementation of the JS project. That's why there are breaking changes in this new version.

See the changelog to know what's new

See the migration guide if you want to upgrade from pug-php 2 to 3

Support for custom filters

Filters must be callable: It can be a class that implements the __invoke() method or an anonymous function.

$pug->filter('escaped', 'My\Callable\Class');

// or

$pug->filter('escaped', function($node, $compiler) {
    foreach ($node->block->nodes as $line) {
        $output[] = $compiler->interpolate($line->value);
    }

    return htmlentities(implode("\n", $output));
});

Built-in filters

  • :css
  • :php
  • :javascript
  • :escaped
  • :cdata

Install other filters with composer

http://pug-filters.selfbuild.fr/

Publish your own filter

https://github.com/pug-php/pug-filter-base#readme

Support for custom keywords

You can add custom keywords, here are some examples:

Anonymous function:

$pug->addKeyword('range', function ($args) {
    list($from, $to) = explode(' ', trim($args));

    return [
        'beginPhp' => 'for ($i = ' . $from . '; $i <= ' . $to . '; $i++) {',
        'endPhp' => '}',
    ];
});

$pug->render('
range 1 3
    p= i
');

This will render:

<p>1</p>
<p>2</p>
<p>3</p>

Note that the existing for..in operator will have the precedence on this custom for keyword.

Invokable class:

class UserKeyword
{
    public function __invoke($arguments, $block, $keyWord)
    {
        $badges = array();
        foreach ($block->nodes as $index => $tag) {
            if ($tag->name === 'badge') {
                $href = $tag->getAttribute('color');
                $badges[] = $href['value'];
                unset($block->nodes[$index]);
            }
        }

        return [
            'begin' => '<div class="' . $keyWord . '" data-name="' . $arguments . '" data-badges="[' . implode(',', $badges) . ']">',
            'end' => '</div>',
        ];
    }
}

$pug->addKeyword('user', new UserKeyword());

$pug->render('
user Bob
    badge(color="blue")
    badge(color="red")
    em Registered yesterday
');

This will render:

<div class="user" data-name="Bob" data-badges="['blue', 'red']">
    <em>Registered yesterday</em>
</div>

A keyword must return an array (containing begin and/or end entries) or a string (used as a begin entry).

The begin and end are rendered as raw HTML, but you can also use beginPhp and endPhp like in the first example to render PHP code that will wrap the rendered block if there is one.

PHP Helper functions

If you want to make a php function available in a template or in all of them for convenience, use closures and pass them like any other variable:

$myClosure = function ($string) {
    return 'Hey you ' . $string . ', out there on your own, can you hear me?';
};

$pug->render('p=$myClosure("Pink")', array('myClosure' => $myClosure));

This will render:

<p>Hey you Pink, out there on your own, can you hear me?</p>

You can make that closure available to all templates without passing it in render params by using the share method:

// ... $pug instantiation
$pug->share('myClosure', $myClosure);
$pug->render('p=$myClosure("Pink")');

This will render the same HTML than the previous example. Also note that share allow you to pass any type of value.

Cache

Important: to improve performance in production, enable the Pug cache by setting the cache option to a writable directory, you can first cache all your template at once (during deployment):

$pug = new Pug([
    'cache' => 'var/cache/pug',
]);
[$success, $errors] = $pug->cacheDirectory('path/to/pug/templates');
echo "$success files have been cached\n";
echo "$errors errors occurred\n";

Be sure any unexpected error occurred and that all your templates in your template directory have been cached.

Then use the same cache directory and template directory in production with the option upToDateCheck to false to bypass the cache check and automatically use the cache version:

$pug = new Pug([
    'cache' => 'var/cache/pug',
    'basedir' => 'path/to/pug/templates',
    'upToDateCheck' => false,
]);
$pug->render('path/to/pug/templates/my-page.pug');

Templates from pug-js

First remember pug-php is a PHP template engine. Pug-js and Pug-php provide both, a HAML-like syntax for markup and some abstraction of the language behind it (loops, conditions, etc.). But for expressions and raw code, pug-js uses JS, and pug-php uses PHP. By default, we do some magic tricks to transform simple JS syntax into PHP. This should help you to migrate smoother from pug-js if you already have some templates, but benefit from the PHP advantages.

If you start a new project, we highly recommend you to use the following option:

$pug = new Pug([
    'expressionLanguage' => 'php',
]);

It will disable all translations, so you always have to use explicit PHP syntax:

- $concat = $foo . $bar
p=$concat

If you want expressions very close to JS, you can use:

$pug = new Pug([
    'expressionLanguage' => 'js',
]);

It will allow both PHP and JS in a JS-style syntax. But you have to stick to it, you will not be able to mix PHP and JS in this mode.

Finally, you can use the native pug-js engine with:

$pug = new Pug([
    'pugjs' => true,
]);

This mode requires node and npm to be installed as it will install pug-cli and directly call it. This mode will flatten your local variables (it means complex object like DateTime, or classes with magic methods will be stringified in JSON to simple objects) and you will not benefit from some features like mixed indent, pre/post render hooks. But in this mode you will get exact same output as in pug-js.

Write locals object to JSON file with pug-js

If your locals object is large it may cause a RuntimeException. This is because locals object passed directly to pug-cli as argument. To fix this problem you can use the localsJsonFile option:

$pug = new Pug([
    'pugjs' => true,
    'localsJsonFile' => true
]);

Then your locals will be written to a JSON file and the path of the file will be passed to the compiler.

Pug CLI

Pug also provide a CLI tool:

./vendor/bin/pug render-file dir/my-template.pug --output-file

See the complete CLI documentation here

Check requirements

To check if your environment is ready to use Pug, use the requirements method:

$pug = new Pug([
    'cache' => 'pathto/writable/cachefolder/',
]);
$missingRequirements = array_keys(array_filter($pug->requirements(), function ($valid) {
    return $valid === false;
}));
$missings = count($missingRequirements);
if ($missings) {
    echo $missings . ' requirements are missing.<br />';
    foreach ($missingRequirements as $requirement) {
        switch($requirement) {
            case 'streamWhiteListed':
                echo 'Suhosin is enabled and ' . $pug->getOption('stream') . ' is not in suhosin.executor.include.whitelist, please add it to your php.ini file.<br />';
                break;
            case 'cacheFolderExists':
                echo 'The cache folder does not exists, please enter in a command line : <code>mkdir -p ' . $pug->getOption('cache') . '</code>.<br />';
                break;
            case 'cacheFolderIsWritable':
                echo 'The cache folder is not writable, please enter in a command line : <code>chmod -R +w ' . $pug->getOption('cache') . '</code>.<br />';
                break;
            default:
                echo $requirement . ' is false.<br />';
        }
    }
    exit(1);
}

Contributing

All contributions are welcome, for any bug, issue or merge request (except for security issues) please refer to CONTRIBUTING.md

Security

To report a security vulnerability, please use the Tidelift security contact. Tidelift will coordinate the fix and disclosure.

Contributors

This project exists thanks to all the people who contribute.

And all the people contributing to our dependencies, in particular: The Phug engine The JS syntax converter Js-Phpize

Backers

Thank you to all our backers! 🙏 [Become a backer]

Sponsors

Support this project by becoming a sponsor. Your logo will show up here with a link to your website. Become a sponsor

And a big thank-you to Jet Brains who provides such a great IDE:

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].