ElectronJS

ElectronJS ile Pug Kullanımı

Merhabalar, Node.JS derslerimize kaldığımız yerden devam ediyoruz. Bu dersimizde ElectronJS ile Pug templatelerini okumayı anlatacağım.
Daha önceki dersimizde ElectronJS kurulumunu anlatmıştım. Şimdi de Node.JS ile web siteleri yapan kişilerin bildiği Pug ile template hazırlama ve ElectronJS ile bu dosyaları okumayı anlatacağım.

Öncelikle bir tane ElectronJS projesi oluşturalım. ElectronJS projesi oluşturmayı bilmiyorsanız buraya tıklayabilirsiniz.
Proje oluşturduktan sonra Pug kütüphanesini indirip projemize dahil etmemiz gerekiyor. ElectronJS’de Pug kütüphanesini doğrudan kullanamıyoruz, bunun yerine electron-pug isimli kütüphaneyi kullanacağız. electron-pug kütüphanesini projemize dahil etmek için terminali (Windows için CMD) açıp
npm i electron-pug
komutunu girelim ve npm’in electron-pug kütüphanesini indirip projemize dahil etmesini bekleyelim.
Kurulumun ardından artık electron-pug kullanacağımız sayfamıza gelerek sayfamıza dahil edelim. Bunuda standart Node.JS eklemeleriyle yapacağız. Yani
const pug = require('electron-pug');
kod satırını sayfamızın en başına yazalım.
Ardından electron-pug kütüphanesini ayarlamamız gerekiyor, yani sayfada çağırsak dahi doğrudan kullanamıyoruz. Ufak bir satır kod ile ayarlamayı yapalım.
pug({pretty: tru});
Evet artık Pug templateleri hazırlayıp rahatlıkla kullanabiliriz.

Ben örnek olsun diye ufak bir Pug template yazacağım fakat siz istediğiniz gibi şeyler yapabilirsiniz.
html
    head
	    title Anasayfa
		meta(charset="utf8")
	body
		h1 Burası Anasayfa
Bu Pug kodunu örneğin main.pug sayfası içine kaydedelim ve artık electron tarafına geçiş yapalım.
ElectronJS’i sayfamızda çağıralım, Pug ayarlamasını yapalım ve son olarakta az önce oluşturduğumuz main.pug dosyasını projemiz çalıştığında açılacak ilk sayfa olarak belirleyelim.
const {app, BrowserWindow} = require('electron');
const pug = require('electron-pug');
app.on('ready', () => {
    pug({pretty: true});
	let window = new BrowserWindow();
	window.loadURL(`file://${__dirname}/main.pug`);
Eveett, sonrasında projemizi çalıştırdığımızda ElectronJS içerisinde Pug’ın çok güzel çalıştığını görebilirsiniz 🙂

Bu dersimizde bu kadardı, tüm ElectronJS derslerimize buraya tıklayarak ulaşabilirsiniz. Herkese hayırlı günler.
Skorumuz:
Oy Vermek İçin Tıklayın
[Toplam: 0 Ortalama: 0]

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Başa dön tuşu