القوالب السريعة

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

Express قادر على التعامل مع محركات القوالب من جانب الخادم.

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

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

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

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

في أي مشروع جديد ، يجب عليك استخدام Pug أو محرك آخر من اختيارك. الموقع الرسمي للصلصال هوhttps://pugjs.org/.

يمكنك استخدام العديد من محركات القوالب المختلفة ، بما في ذلك Pug و Handlebars و Moustache و EJS والمزيد.

باستخدام الصلصال

لاستخدام Pug ، يجب أولاً تثبيته:

npm install pug

وعند تهيئة تطبيق Express ، نحتاج إلى ضبطه:

const express = require('express')
const app = express()
app.set('view engine', 'pug')

يمكننا الآن البدء في كتابة قوالبنا بتنسيق.pugالملفات.

إنشاء عرض حول:

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

والنموذج بتنسيقviews/about.pug:

p Hello from Flavio

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

You can interpolate a variable using

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

This is a very short introduction to Pug, in the context of using it with Express. Look at the Pug guide for more information on how to use Pug.

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 than Pug) will be a great help: https://jsonformatter.org/html-to-jade

Also see the differences between Jade and Pug

Using Handlebars

Let’s try and use Handlebars instead of Pug.

You can install it using npm install hbs.

Put an about.hbs template file in the views/ folder:

Hello from {{name}}

and then use this Express configuration to serve it on /about:

const express = require('express')
const app = express()
const hbs = require('hbs')

app.set(‘view engine’, ‘hbs’) app.set(‘views’, path.join(__dirname, ‘views’))

app.get(’/about’, (req, res) => { res.render(‘about’, { name: ‘Flavio’ }) })

app.listen(3000, () => console.log(‘Server ready’))

You can also render a React application server-side, using the express-react-views package.

Start with npm install express-react-views react react-dom.

Now instead of requiring hbs we require express-react-views and use that as the engine, using jsx files:

const express = require('express')
const app = express()

app.set(‘view engine’, ‘jsx’) app.engine(‘jsx’, require(‘express-react-views’).createEngine())

app.get(’/about’, (req, res) => { res.render(‘about’, { name: ‘Flavio’ }) })

app.listen(3000, () => console.log(‘Server ready’))

Just put an about.jsx file in views/, and calling /about should present you an “Hello from Flavio” string:

const React = require('react')

class HelloMessage extends React.Component { render() { return <div>Hello from {this.props.name}</div> } }

module.exports = HelloMessage

Download my free Express.js Handbook


More express tutorials: