Node.js express Şablon Motorları

Paylaş

Yazıda express modülü içerisinde yer alan şablon motoru sisteminin projeye dahil edilmesi ve kullanımı ile ilgili bilgiler yer almaktadır.

Geliştirilen web sayfaları genellikle benzer yapıdadır.

Sadece sayfa içerisindeki bazı bölümler değişiklik gösterir.

Örneğin; Bu sitedeki yazılar sayfasında sadece yazı başlığı ve yazı içeriği değişmekte sitenin alt ve üst kısmı her sayfada aynı kalmaktadır.

Express ile geliştirilen projeye şablon motoru eklemek için set metodu view engine değeri kullanılır.

app.set('view engine', 'şablon-moturu');

Express şablonları varsayılan olarak aynı klasördeki views klasörüne ayarlıdır.

Şablon yolunu değiştirmek için set metodu views değeri kullanılır.

app.set('views', 'şablon-yolu');

Express modülü çeşitli JavaScript şablon motorlarını desteklemekte ve şablon motoru oluşturmaya imkan vermektedir.

Desteklenen şablon motorlarının kullanımı değişiklik göstermektedir.

Şablon motoru seçerken şablon motorunun kullanım çokluğu, kullanım kolaylığı ve JavaScript komutlarını şablon içerisinde kullanma imkanı gibi koşullara bakılır.

Express Pug, Mustache, EJS, Dust, Handlebars, nunjucks .vb şablon motorlarını destekler.

Şablon motorunu projeye dahil etmek

Seçilen şablon motorunu projeye dahil etmek için öncelikle şablon motoruna ait paket NPM aracılığıyla indirilir.

npm install pug --save

Şablon moturu indirildikten sonra gerekli ayarlar yapılır.

'use strict';

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

app.set('view engine', 'pug');
app.set('views', './gorunum');

app.listen(1453, function () {
  console.log('Sunucu çalışıyor...');
});

Gerekli ayarlar yapıldıktan sonra express şablonu HTML’e çevirmek için hazır hale gelir ve çevrilecek dosyayı bekler.

Aşağıdaki kodları şablon klasörü olarak ayarlanan gorunum içerisinde index.pug olarak kaydedin.

<!DOCTYPE html>
html
head
    meta(charset="UTF-8")
    title Merhaba
body
    h1 Merhaba Pug

Express ile bir dosyayı şablon motoru ile HTML’e çevirmek için Express modülü içerisinde yer alan render metodu kullanılır.

'use strict';

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

app.set('view engine', 'pug');
app.set('views', './gorunum');

app.get('/', function (req, res) {
  res.render('index');
});

app.listen(1453, function () {
  console.log('Sunucu çalışıyor...');
});

Web sunucusuna bağlanıldığında express pug şablon motorunu çalıştıracak ve gorunum klasöründe yer alan index.pug dosyasını HTML’e çevirecektir.

Şablon dosyası içerisine değer göndermek için render metodunun ikinci parametresine nesne parametresi geçirilir.

'use strict';

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

app.set('view engine', 'pug');
app.set('views', './gorunum');

app.get('/', function (req, res) {

  res.render('index', {
    baslik: 'Merhaba Pug ve Express'
  });

});

app.listen(1453, function () {
  console.log('Sunucu çalışıyor...');
});

Nesne parametresi içerisinde yer alan değerler şablon dosyası içerisinde aşağıdaki gibi kullanılır.

<!DOCTYPE html>
html
head
    meta(charset="UTF-8")
    title=baslik
body
    h1=baslik

Parametre olarak gönderilen nesne içinde nesne, dizi gibi birden fazla farklı değer olabilir.

'use strict';

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

app.set('view engine', 'pug');
app.set('views', './gorunum');

app.get('/', function (req, res) {

  res.render('index', {
    baslik: 'Merhaba Pug ve Express',
    adi: 'Yusuf',
    soyadi: 'SEZER'
  });

});

app.listen(1453, function () {
  console.log('Sunucu çalışıyor...');
});

Birden fazla değer aşağıdaki gibi kullanılabilir.

<!DOCTYPE html>
html
head
    meta(charset="UTF-8")
    title=baslik
body
    h1=baslik
    p Merhaba benim adım #{adi} 
    p Soyadım #[strong #{soyadi}]

Şablon motorlarının en önemli özelliği şablon içerinde JavaScript komutlarının kullanılmasına imkan vermesidir.

<!DOCTYPE html>
html
head
    meta(charset="UTF-8")
    title=baslik
body
    h1=baslik
    ul 
        -for (let sira = 1; sira <= 10; ++sira )
            li #{sira} Merhaba

Pug şablon motorunu kullanırken boşluklara dikkat edilmesi gerekir aksi halde beklenmedik sonuçlar verebilir.

EJS şablon motorunu kullanmak

Pug şablon motoruna alternatif olarak EJS şablon motoru kullanılabilir.

EJS şablon motorunun projeye dahil edilmesi için öncelikle şablon motoruna ait paket NPM aracılığıyla indirilir.

npm install ejs --save

Şablon motoru indirildikten sonra Pug şablon motorunda olduğu gibi gerekli ayarlar yapılır ve EJS dosyaları render metodu ile HTML’e çevrilir.

'use strict';

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

app.set('view engine', 'ejs');
app.set('views', './gorunum');

app.get("/", function (req, res) {

  res.render('index', {
    baslik: 'Merhaba EJS ve Express',
    adi: 'Yusuf',
    soyadi: 'SEZER'
  });

});

app.listen(1453, function () {
  console.log('Sunucu çalışıyor...');
});

Aşağıdaki kodları şablon klasörü olarak ayarlanan gorunum klasörü içerisine index.ejs olarak kaydedin ve çalıştırın.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title><%=baslik%></title>
</head>
<body>
<h1><%=baslik%></h1>
<p>Merhaba benim adım <%=adi%></p>
<p>Soyadım <strong><%=soyadi%></strong></p>
</body>
</html>

EJS içerisinde JavaScript komutları <% buraya %> yazılır.

Aşağıdaki kodları şablon klasörü olarak ayarlanan gorunum klasörü içerisine index.ejs olarak kaydedin ve çalıştırın.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title><%=baslik%></title>
</head>
<body>
<ul>
<% for (let sira = 1; sira <= 10; ++sira ) { %>
<li><%=sira%> Merhaba</li>
<% } %>
</ul>
</body>
</html>

Şablon motorlarının kullanımı genel olarak aynıdır.

Ancak şablon motorlarına göre kullanılan özellikler farklılık gösterebilir.

Node.js Derslerine buradan ulaşabilirsiniz…

Hayırlı günler dilerim.

Facebook

E-Posta ile paylaş

Yazdır

Şablon motorunu projeye dahil etmek

EJS şablon motorunu kullanmak

Bunlarda ilgini çekebilir