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, Gidon gibi şablon 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 şablonlama motorudur. Bıyık şablonu motorunun bir uzantısıdır. Mantıksız bir motor olduğundan, sunumu temel koddan kesin olarak ayırmak için kullanabilirsiniz.
Gidon, NestJS çerçevesinden bir şablonlama motoru olarak büyük bir desteğe sahiptir.
Şablonlama 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 verileri HTML şablonuna enjekte eder.
Gidon gibi bir şablon oluşturma motoru kurmayı karmaşık bulabilirsiniz, çünkü birçok adım içerir. Yine de, Ekspres sunucu çerçevesi NestJS'nin varsayılan olarak kullandığı, Gidonlar için mükemmel bir desteğe sahiptir.
1. Adım: Bir NestJS Uygulaması Oluşturun
Yeni bir Nest Uygulamasının iskeletini oluşturmak için aşağıdaki komutu çalıştırın:
yuva yeni <uygulamanızın adı>
2. Adım: Gidonları Takın
Gidonları kullanarak yüklemek için aşağıdaki komutu çalıştırın. npm paket yöneticisi:
npm ekspres gidonları kurun@^5.3.0@types/express-handlebars@^5.3.0
3. Adım: Ekspres Örneği Yapılandırın
Adresinize gidin ana.ts dosya ve içe aktarma NestExpressUygulaması itibaren @nestjs/platform-express.
NestExpressApplication öğesini genel bir tür olarak atayın. oluşturmak yöntem.
Şöyle:
const uygulama = beklemek NestFactory.create(Uygulama Modülü)
NestExpressApplication'ı uygulama nesne, ExpressJS'ye özel yöntemlere erişmesini sağlar. Belirli Gidon özelliklerini yapılandırmak için bu yöntemlere ihtiyacınız olacak.
Adım 4: Gidonları Yapılandırın
İlk olarak, uygulamanızın HTML'yi ve diğer statik dosyaları (stil sayfaları, resimler, vb.) bulacağı konumları belirlemeniz gerekir. HTML dosyalarınızı bir “Görüntüleme” klasörü ve diğer statik dosyalar bir “halka açık” klasörü, sırasıyla.
Konumları belirtmek için içe aktararak başlayın katılmak itibaren yol. Ardından, içindeki önyükleme işlevi, stiller için konumu ayarlayın.
Şöyle:
app.useStaticAssets (join (__dirname, '..', 'halka açık'))
birleştirme işlevi isteğe bağlı sayıda sicim argümanları birleştirir ve elde edilen yolu normalleştirir. __dirname bulunduğu klasörün yolunu döndürür. ana.ts dosya bulunur.
Ardından, HTML dosyalarınızın konumunu şu şekilde ayarlayın:
app.setBaseViewsDir (birleştir (__dirname, '..', 'Görüntüleme'));
Ardından, Gidonları ana.ts dosya:
içe aktarmak * olarak hbs itibaren 'ekspres gidon';
ihtiyacınız olacak hbs uzantı adı gibi Gidon özelliklerini yapılandırmak için içe aktarın.
Gidonlar için varsayılan dosya uzantısı adı .gidonlar.
Bu uzantı adı uzundur, ancak bunu şu şekilde yapılandırabilirsiniz: app.engine aramak. app.engine etrafında yerel bir sarmalayıcı işlevidir ekspres.motor yöntem. İki argüman alır: harici ve bir geri arama işlevi. Bkz. Ekspres belgeler app.engine hakkında daha fazla bilgi edinmek için.
Telefon etmek uygulama.motor()ve ilk argüman olarak 'hbs' dizesini iletin. Ardından, ikinci bir argüman olarak hbs işlevini çağırın ve bir özelliğe sahip bir yapılandırma nesnesi iletin. extname ayarlanır 'hbs'. Bu ayar, uzantı adını .handlebars'dan .hbs'ye değiştirir.
app.engine('hbs', hbs({ extname: 'hbs' }));
Son olarak, görünüm motorunu şu şekilde Gidonlara ayarlayın:
app.setViewEngine('hbs');
Adım 5: Klasörler Oluşturun
Projenizin kök dizininde iki yeni klasör oluşturun. ilkini kullanacaksın, halka açık, uygulamanız için stil sayfalarını saklamak için. İçinde Görüntüleme, tüm HTML dosyalarınızı depolayacaksı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 ilişkin bir genel bakışa sahip olacaksı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.
Gidonlar 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 kaşlı ayraç içine sararak belirtirsiniz. Adının önüne bir açılış yardımcı etiketi için bir kare (#) ve bir kapanış etiketi için bir eğik çizgi (/) ekleyin.
Örneğin:
{{!-- eğer değer doğru, div oluşturulacak başka, olmayacak --}}
{{#if değeri}}
<div>Değer verildi</div>
{{/eğer}}
Özel bir yardımcı oluşturursanız, onu hbs yapılandırma nesnesi ana.ts uygulamanızda kullanmadan önce dosya.
// ana.ts
içe aktarmak { özelYardımcı } itibaren './helpers/hbs.helpers';
// Önyükleme işlevinin içinde
app.engine('hbs', hbs({ extname: 'hbs', yardımcılar: { 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 kaşlı ayraçla belirtin, örneğin:
<h1>{{İleti}}</h1>
Kısmi
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 ekleyebilirsiniz.
Statik ve HTML dosyalarınızda olduğu gibi, dosyanızda bir kısmi dizini de ayarlamanız gerekir. app.engine yapılandırma nesnesi.
Yapılandırma nesnenize aşağıdaki kodu ekleyerek kısmi dizininizi kaydedin:
// ana.ts
parsiyelsDir: birleştirme (__dirname, '..', 'görünümler/kısmiler'),
Kısmi çağrı sözdizimini kullanarak bir kısmi erişime erişebilirsiniz. Çift kaşlı ayraçlarda, büyük bir sembol (>) ve ardından kısminin 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. Dinamik verileri enjekte edebileceğiniz bir yer tutucuya sahip bir kapsayıcı görevi görür.
Örneğin:
<!DOCTYPE html>
<html dili="tr">
<kafa>
<meta karakter kümesi="UTF-8">
<meta http-eşdeğeri="X-UA-Uyumlu" içerik="IE=kenar">
<meta adı="görüş alanı" içerik="genişlik=cihaz genişliği, başlangıç ölçeği=1.0">
<Başlık>Gidonlu NestJS'de Şablon Oluşturma</title>
</head>
<gövde>
<başlık>
{{!-- Kısmi Navbar --}}
{{>gezinme çubuğu}}
</header>
<div>
{{!-- Gövde Yer Tutucusu --}}
{{{gövde}}}
</div>
{{!-- Alt Bilgi Kısmi --}}
{{>altbilgi}}
</body>
</html>
Kodunuzu çalıştırdığınızda, Gidon içeriğini alır. .hbs oluşturmak istediğiniz dosya ve bunları gövde Yer tutucu. Ardından sonucu son HTML sayfası olarak işler.
Düzenler dizininizi bilgisayarınıza kaydetmeniz gerekir. app.engine yapılandırma nesnesi ve varsayılan bir düzen dosyası ayarlayın. Varsayılan düzen dosyası, belirli bir düzeni tanımlamazsanız Gidon'un kullandığı düzen dosyasıdır.
Varsayılan bir düzen bildirmek ve bir düzen dizini kaydetmek için yapılandırma nesnenize aşağıdaki kodu ekleyin:
varsayılan Düzen: 'Düzen dosyasının adı',
layoutsDir: birleştirme (__dirname, '..', 'görünümler/düzenler'),
.hbs Dosyası Oluşturma
Denetleyici dosyanızda, Res dekoratör @nestjs/ortak ve Tepki itibaren ifade etmek.
Ardından rota işleyicinizde bir argüman iletin, res. Res dekoratörüyle bir Response türü atayın ve buna açıklama ekleyin. Res dekoratörü, Express'in yerel yanıt işleme yöntemlerini ortaya çıkarır ve NestJS standart yaklaşımını devre dışı bırakır.
Ardından, res üzerinde render yöntemini çağırın ve ilk argüman olarak oluşturmak istediğiniz dosyanın adını iletin. İkinci argüman için, düzenin adını ve bir ifadenin ikame değerini içeren bir nesne iletin.
Gidonlar, cihazınızda ayarlanan varsayılan düzeni kullanacaktır. app.engine bir düzen sağlamazsanız yapılandırma nesnesi.
@Almak()
merhaba(@Res() res: Tepki){
dönüş res.render('Dosyanın adı', { Yerleşim: 'düzenin adı', İleti: 'Selam Dünya' });
}
Gidonlara Alternatifler
Gidon, yardımcılar ve düzenler gibi birçok kullanışlı özelliğe sahip mükemmel bir şablon oluşturma aracıdır. Yine de ihtiyaçlarınıza bağlı olarak EJS (Gömülü JavaScript), Pug veya Bıyık gibi bir alternatif seçebilirsiniz.
