Yii2 Jade
The Tale Jade Template Engine brings the popular and powerful Templating-Language Jade for Node.js to PHP!, (*1)
Tale Jade for PHP, (*2)
Requirements
Installation
The preferred way to install this extension is through composer., (*3)
To install, either run, (*4)
$ php composer.phar require conquer/jade "*"
or add, (*5)
"conquer/jade": "*"
to the require
section of your composer.json
file., (*6)
Configuration
return [
//....
'components' => [
'view' => [
'defaultExtension' => 'jade', // Set jade as default to use base view file names without extension.
'renderers' => [
'jade' => [
'class' => 'conquer\jade\JadeRenderer',
'cacheDuration' => 0, // seconds. 0 - compile every time
],
],
],
],
];
Usage
class SiteController extends Controller
{
// if you do not specify a defaultExtension, you should specify it here
$layout = 'main.jade';
...
public function actionIndex()
{
return $this->render('index', []);
// or
// return $this->render('index.jade', []);
}
}
Examples
Main layout
-
use yii\bootstrap\Html;
use assets\AppAsset;
/* @var $this \yii\web\View */
/* @var $content string */
AppAsset::register($this);
-$this->beginPage()
doctype html
html(lang=Yii::$app->language)
// BEGIN HEAD
head
meta(charset="utf-8")
title
!= Html::encode($this->title)
meta(http-equiv="X-UA-Compatible", content="IE=edge")
meta(content="width=device-width initial-scale=1", name="viewport")
!= Html::csrfMetaTags()
meta(content="", name="description")
meta(content="", name="author")
link(rel="shortcut icon", href="/favicon.ico")
- $this->head()
// END HEAD
body(class=$this->params['body-class'])
- $this->beginBody()
!= $content
- $this->endBody()
- $this->endPage()
Sub layout
-
use yii\web\YiiAsset;
use yii\base\Widget;
use yii\bootstrap\Html;
use yii\helpers\Url;
/* @var $this \yii\web\View */
/* @var $content string */
$this->params['body-class'] = 'page-header-fixed page-sidebar-closed-hide-logo';
YiiAsset::register($this);
- $this->beginContent('@views/layouts/main.jade');
// BEGIN HEADER & CONTENT DIVIDER
include header
.clearfix
// END HEADER & CONTENT DIVIDER
// BEGIN CONTAINER
.page-container
// sidebar.jade is placed at @views/layouts/partials/sidebar.jade
// jade engine just puts rendered content here
include partials/sidebar
!= $content
// END CONTAINER
include partials/footer
- $this->endContent();
Login
-
use yii\helpers\Html
use yii\bootstrap\ActiveForm
$this->title = 'Login'
$this->params['breadcrumbs'][] = $this->title;
.site-login
h1 #{$view->title}
p Please fill out the following fields to login:
.row
.col-lg-5
- $form = ActiveForm::begin(['id' => 'login-form'])
!= $form->field($model, 'username')
!= $form->field($model, 'password')->passwordInput()
!= $form->field($model, 'rememberMe')->checkbox()
.form-group
!=Html::submitButton('Login', ['class' => 'btn btn-primary', 'name' => 'login-button'])
- ActiveForm::end()
Custom filters
For example, you can wrap \Yii::t('category', $message) function to short form of :t
You should define a new filter in config file:, (*7)
return [
//....
'components' => [
'view' => [
'defaultExtension' => 'jade',
'renderers' => [
'jade' => [
'class' => 'conquer\jade\JadeRenderer',
'filters' => [
't' => function($node, $indent, $newLine){
return "<?=\Yii::t('category', '" . trim($node->text()) ."')?>";
},
],
],
],
],
];
Now you can use this filter:, (*8)
-
use yii\helpers\Html;
use yii\widgets\ActiveForm;
/* @var $this yii\web\View */
/* @var $model common\models\User */
/* @var $form yii\widgets\ActiveForm */
.h3
:t Change password
-
$form = ActiveForm::begin([
'action' => '/user/profile#tab_1_2',
'options' => [
'class' => 'form-horizontal'
]
]);
!= $form->field($model, 'current_password')->passwordInput()
!= $form->field($model, 'password')->passwordInput()
!= $form->field($model, 'password_repeat')->passwordInput()
.margin-top-10
button.btn.btn-primary(type='submit')
:t Submit
a.btn.default(href="javascript:;")
:t Cancel
- ActiveForm::end();
Links
License
Jade extension for Yii2 Framework is released under the MIT license., (*9)