Bir uygulamanın karmaşıklığı arttıkça ihtiyaçları da artar. Bir noktada, statik HTML dosyalarının sunulması ilerlemeyi engelleyebilir veya uygulamanın işlevselliğini engelleyebilir. Bunun yerine, Gidonlar gibi şablon oluşturma motorlarının mümkün kıldığı bir görev olan dinamik içerik sunmak isteyeceksiniz.
Gidon, NodeJS için minimal, mantıksız bir şablon oluşturma motorudur. Bu, bıyık şablon motorunun bir uzantısıdır. Mantıksız bir motor olduğundan, sunumu temel koddan kesin olarak ayırmak için kullanabilirsiniz.
Gidonlar, NestJS çerçevesinden şablon oluşturma motoru olarak büyük desteğe sahiptir.
Şablon Oluşturma Motoru Nedir?
Şablon oluşturma motoru, minimum kodla bir HTML şablonu oluşturmak için HTML etiketlerini ve bir programlama dilini birleştiren bir araçtır.
Çalışma zamanında şablon motoru, tarayıcıda son görünümü oluşturmak için HTML şablonuna veri enjekte eder.
Pek çok adım içerdiğinden, Gidon gibi bir şablon oluşturma motoru kurmayı karmaşık bulabilirsiniz. Ancak, NestJS’nin varsayılan olarak kullandığı Ekspres sunucu çerçevesi , Gidonlar için mükemmel desteğe sahiptir.
1. Adım: Bir NestJS Uygulaması Oluşturun
Yeni bir Nest Uygulaması oluşturmak için aşağıdaki komutu çalıştırın:
nest new <name of your app>
Adım 2: Gidonları Takın
Gidonları npm paket yöneticisini kullanarak kurmak için aşağıdaki komutu çalıştırın :
npm install express-handlebars@^5.3.0 @types/express-handlebars@^5.3.0
3. Adım: Ekspres Örneği Yapılandırın
main.ts dosyanıza gidin ve NestExpressApplication’ı @ nestjs /platform-express adresinden içe aktarın .
Create yöntemine genel bir tür olarak NestExpressApplication atayın .
Şöyle:
const app = await NestFactory.create<NestExpressApplication>(AppModule)
NestExpressApplication’ı uygulama nesnesine iletmek, onun ExpressJS’ye özel yöntemlere erişmesini sağlar. Belirli Gidon özelliklerini yapılandırmak için bu yöntemlere ihtiyacınız olacak.
4. Adım: Gidonları Yapılandırın
Öncelikle, uygulamanızın HTML’yi ve diğer statik dosyaları (stil sayfaları, resimler vb.) bulacağı konumları belirtmeniz gerekir. Sırasıyla , HTML dosyalarınızı bir ” görünümler ” klasöründe ve diğer statik dosyalarınızı bir ” ortak ” klasörde saklayabilirsiniz.
Konumları belirtmek için, birleştirme yolundan içe aktararak başlayın . Ardından, önyükleme işlevinin içinde stiller için konumu ayarlayın.
Şöyle:
app.useStaticAssets(join(__dirname, ‘..’, ‘public’))
Birleştirme işlevi, rastgele sayıda dize bağımsız değişkeni alır, bunları birleştirir ve ortaya çıkan yolu normalleştirir. __dirname , main.ts dosyasının bulunduğu klasörün yolunu döndürür .
Ardından, HTML dosyalarınızın konumunu şu şekilde ayarlayın:
app.setBaseViewsDir(join(__dirname, ‘..’, ‘views’));
Ardından, Gidonları main.ts dosyanıza aktarın:
import * as hbs from ‘express-handlebars’;
Uzantı adı gibi Gidon özelliklerini yapılandırmak için hbs içe aktarmaya ihtiyacınız olacak .
Gidonlar için varsayılan dosya uzantısı adı .handlebars’dır .
Bu uzantı adı uzundur, ancak bunu app.engine çağrısıyla yapılandırabilirsiniz. app.engine , express.engine yöntemi etrafındaki yerel bir sarmalayıcı işlevidir . İki bağımsız değişken alır: ext ve bir geri arama işlevi. Hakkında daha fazla bilgi edinmek için app.engine’daki Express belgelerine bakın .
app.engine() öğesini çağırın ve ilk bağımsız değişken olarak ‘hbs’ dizesini iletin. Ardından, ikinci bir bağımsız değişken olarak, hbs işlevini çağırın ve extname özelliği ‘hbs’ olarak ayarlanmış bir yapılandırma nesnesini iletin . Bu ayar, uzantı adını .handlebars’tan .hbs’ye değiştirir.
app.engine(‘hbs’, hbs({ extname: ‘hbs’ }));
Son olarak, görüntüleme motorunu şu şekilde Gidon olarak ayarlayın:
app.setViewEngine(‘hbs’);
5. Adım: Klasörler Oluşturun
Projenizin kök dizininde iki yeni klasör oluşturun. Uygulamanızın stil sayfalarını depolamak için ilkini, public kullanacaksınız. görünümlerde , tüm HTML dosyalarınızı saklayacaksınız.
Bu, geliştirme ortamınızın kurulumunu tamamlar. Bir sonraki bölümde, Gidon sözdizimine ve bunun bir NestJS uygulamasında kullanımına genel bir bakış bulacaksınız.
Gidon Sözdizimi
Bu bölüm, dosyalarınızı dinamik olarak sunmak için ihtiyaç duyduğunuz gidon sözdiziminin çoğunu kapsayacaktır.
Yardımcılar
Yardımcılar, çıktıyı dönüştüren, veriler üzerinde yinelenen ve koşullu çıktı oluşturan işlevlerdir.
Gidon iki tür yardımcı sağlar (Blok ve Yerleşik) ve ihtiyaçlarınıza uygun özel yardımcılar oluşturabilirsiniz.
Bir yardımcıyı çift kıvrık parantez içine alarak belirtirsiniz. Açılış yardımcı etiketi için adının önüne bir kare (#) ve kapanış etiketi için eğik çizgi (/) ekleyin.
Örneğin:
{{!– if the value is true, the div will be rendered else, it won’t –}}
{{#if value}}
<div>The value has been rendered</div>
{{/if}}
Özel bir yardımcı oluşturursanız, uygulamanızda kullanabilmeniz için önce onu main.ts dosyanızdaki hbs yapılandırma nesnesine kaydetmeniz gerekir.
// main.ts
import { customHelper } from ‘./helpers/hbs.helpers’;
// Inside the bootstrap function
app.engine(‘hbs’, hbs({ extname: ‘hbs’, helpers: { customHelper } }));
İfade
İfadeler, bir gidon şablonunun birimidir. İfadeleri kullanımınız, görevin karmaşıklığına bağlı olarak değişir. Bunları bir şablonda tek başına kullanabilir, yardımcılara girdi olarak iletebilir ve daha fazlasını yapabilirsiniz.
İfadeleri çift kıvrık parantez ile belirtin, örneğin:
<h1>{{message}}</h1>
Kısmi Parçalar
Kısmi, birkaç HTML dosyasında göründüğü için önceden kaydedilmiş bir HTML parçasını ifade eder. Örneğin, gezinme çubukları ve altbilgiler. Bu içeriği tek bir dosyada saklayabilir ve gerektiğinde dahil edebilirsiniz.
Statik ve HTML dosyalarınızda olduğu gibi, app.engine yapılandırma nesnenizde de bir kısmi dizini ayarlamanız gerekir.
Yapılandırma nesnenize aşağıdaki kodu ekleyerek kısmi dizininizi kaydedin:
// main.ts
partialsDir: join(__dirname, ‘..’, ‘views/partials’),
Kısmi çağrı sözdizimini kullanarak bir kısmiye erişebilirsiniz. Çift kıvrık parantez içinde, büyüktür simgesi (>) ve ardından kısmi öğenin adını girin.
Örneğin:
{{> nameOfPartial}}
Düzenler
Gidon düzeni, uygulamadaki diğer HTML sayfaları için temel meta verileri veya genel yapıyı ayarlamak için kullanılan bir HTML sayfasıdır. İçine dinamik veri enjekte edebileceğiniz bir yer tutucuya sahip bir kap görevi görür.
Örneğin:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Templating in NestJS with Handlebars</title>
</head>
<body>
<header>
{{!– Navbar Partial –}}
{{>navbar}}
</header>
<div>
{{!– Body Placeholder –}}
{{{body}}}
</div>
{{!– Footer Partial –}}
{{>footer}}
</body>
</html>
Kodunuzu çalıştırdığınızda, Gidon işlemek istediğiniz .hbs dosyasının içeriğini alır ve gövde yer tutucusuna enjekte eder . Ardından sonucu nihai HTML sayfası olarak işler.
Düzenler dizininizi app.engine yapılandırma nesnenize kaydetmeniz ve varsayılan bir düzen dosyası ayarlamanız gerekir. Belirli bir düzen tanımlamazsanız, varsayılan düzen dosyası, Gidon’un kullandığı düzen dosyasıdır.
Varsayılan bir düzen bildirmek ve bir düzenler dizini kaydetmek için yapılandırma nesnenize aşağıdaki kodu ekleyin:
defaultLayout: ‘Name of the layout file’,
layoutsDir: join(__dirname, ‘..’, ‘views/layouts’),
.hbs Dosyası Oluşturma
Denetleyici dosyanızda, @nestjs/common’dan Res dekoratörünü ve express’ten Response’u içe aktarın .
Ardından rota işleyicinizde bir argüman iletin, res . Res’e bir Yanıt türü atayın ve Res dekoratörüyle açıklama ekleyin. Res dekoratörü, Express’in yerel yanıt işleme yöntemlerini gösterir ve NestJS standart yaklaşımını devre dışı bırakır.
Ardından, res üzerinde render yöntemini çağırın ve oluşturmak istediğiniz dosyanın adını ilk argüman olarak iletin. İkinci bağımsız değişken için, düzenin adını ve bir ifadenin ikame değerini içeren bir nesne iletin.
Bir düzen sağlamazsanız , gidonlar app.engine yapılandırma nesnenizde ayarlanan varsayılan düzeni kullanır .
@Get()
getHello(@Res() res: Response){
return res.render(‘Name of file’, { layout: ‘name of layout’, message: ‘Hello World’ });
}
Gidonlara Alternatifler
Gidon, yardımcılar ve düzenler gibi pek çok kullanışlı özelliğe sahip mükemmel bir şablon oluşturma aracıdır. Yine de ihtiyaçlarınıza göre EJS (Gömülü JavaScript), Pug veya Mustache gibi bir alternatif seçebilirsiniz.