دليل الصلصال

كيفية استخدام محرك القالب الصلصال

مقدمة إلى الصلصال

ما هو الصلصال؟ إنه محرك قالب لتطبيقات Node.js من جانب الخادم.

Express قادر على التعامل مع محركات القوالب من جانب الخادم. تسمح لنا محركات القوالب بإضافة البيانات إلى طريقة العرض وإنشاء HTML ديناميكيًا.

الصلصال هو الاسم الجديد لشيء قديم. إنهاليشم 2.0.

نظرًا لوجود مشكلة في العلامة التجارية ، تم تغيير الاسم من Jade إلى Pug عندما أصدر المشروع الإصدار 2 في عام 2016. لا يزال بإمكانك استخدام Jade (المعروف أيضًا باسم Pug 1.0) ، ولكن من الأفضل استخدام Pug 2.0.

راجع أيضًا ملفالاختلافات بين Jade و Pug

يستخدم Express Jade كإعداد افتراضي. كما ذكرنا سابقًا ، Jade هو الإصدار القديم من Pug - تحديدًا Pug 1.0.

على الرغم من أن الإصدار الأخير من Jade يبلغ من العمر 3 سنوات (وقت كتابة هذا التقرير ، صيف 2018) ، إلا أنه لا يزال هو الإصدار الافتراضي في Express لأسباب تتعلق بالتوافق مع الإصدارات السابقة.

الموقع الرسمي لـ Pug هوhttps://pugjs.org/.

كيف تبدو الصلصال؟

p Hello from Flavio

This template will create a p tag with the content Hello from Flavio.

As you can see, Pug is quite special. It takes the tag name as the first thing in a line, and the rest is the content that goes inside it.

If you are used to template engines that use HTML and interpolate variables; like Handlebars (described next), you might run into issues, especially when you need to convert existing HTML to Pug. This online converter from HTML to Jade (which is very similar, but a little different to Pug) will be a great help: https://jsonformatter.org/html-to-jade

Install Pug

Installing Pug is as simple as running npm install:

npm install pug

Setup Pug to be the template engine in Express

and when initializing the Express app, we need to set it:

const path = require('path')
const express = require('express')
const app = express()
app.set('view engine', 'pug')
app.set('views', path.join(__dirname, 'views'))

Your first Pug template

Create an about view:

app.get('/about', (req, res) => {
  res.render('about')
})

and the template in views/about.pug:

p Hello from Flavio

This template will create a p tag with the content Hello from Flavio.

Interpolating variables in Pug

You can interpolate a variable using:

app.get('/about', (req, res) => {
  res.render('about', { name: 'Flavio' })
})
p Hello from #{name}

Interpolate a function return value

You can interpolate a function return value using:

app.get('/about', (req, res) => {
  res.render('about', { getName: () => 'Flavio' })
})
p Hello from #{getName()}

Adding id and class attributes to elements

p#title
p.title

Set the doctype

doctype html

Meta tags

html
  head
    meta(charset='utf-8')
    meta(http-equiv='X-UA-Compatible', content='IE=edge')
    meta(name='description', content='Some description')
    meta(name='viewport', content='width=device-width, initial-scale=1')

Adding scripts and styles

html
  head
    script(src="script.js")
    script(src='//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js')
link(rel='stylesheet', href='css/main.css')</code></pre>

Inline scripts

script alert('test')

script. (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]= function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date; e=o.createElement(i);r=o.getElementsByTagName(i)[0]; e.src=’//www.google-analytics.com/analytics.js’; r.parentNode.insertBefore(e,r)}(window,document,‘script’,‘ga’)); ga(‘create’,‘UA-XXXXX-X’);ga(‘send’,‘pageview’);

Loops

ul
  each color in ['Red', 'Yellow', 'Blue']
    li= color

ul each color, index in [‘Red’, ‘Yellow’, ‘Blue’] li= 'Color number ’ + index + ': ’ + color

Conditionals

if name
  h2 Hello from #{name}
else
  h2 Hello

else-if works too:

if name
  h2 Hello from #{name}
else if anotherName
  h2 Hello from #{anotherName}
else
  h2 Hello

Another example:

if users.length > 2
    each user in users
    ...

Set variables

You can set variables in Pug templates:

- var name = 'Flavio'
- var age = 35
- var roger = { name: 'Roger' }
- var dogs = ['Roger', 'Syd']

Incrementing variables

You can increment a numeric variable using ++:

age++

Assigning variables to element values

p= name
span.age= age

Iterating over variables

You can use for or each, they are interchangeable and there is no difference:

for dog in dogs
    li= dog
ul
  each dog in dogs
    li= dog

You can use .length to get the number of items:

p There are #{values.length}

while is another kind of loop:

- var n = 0;

ul while n <= 5 li= n++

Including other Pug files

In a Pug file you can include other Pug files:

include otherfile.pug

Defining blocks

A well-organized template system will define a base template, and then all the other templates will extend from it.

Part of a template can be extended by using blocks:

html
  head
    script(src="script.js")
    script(src='//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js')
link(rel='stylesheet', href='css/main.css')
block head

body block body h1 Home page p welcome

In this case one block, body, has some content, while head does not. head is intended to be used to add additional content to the heading, while the body content is made to be overridden by other pages.

Extending a base template

A template can extend a base template by using the extends keyword:

extends home.pug

Once this is done, you need to redefine blocks. All the content of the template must go into blocks, otherwise the engine does not know where to put them.

Example:

extends home.pug

block body h1 Another page p Hey! ul li Something li Something else

You can redefine one or more blocks. The ones not redefined will be kept with the original template content.

Comments

Comments in Pug can be of two types: visible or invisible in the resulting HTML.

Visible

Inline:

// some comment

Block:

//
  some
  comment

Invisible

Inline:

//- some comment

Block:

//-
  some
  comment  

Download my free Node.js Handbook


More node tutorials: