ExpressJS - tworzenie szablonów

Pug to silnik szablonów dla Express. Silniki szablonów są używane do usuwania zaśmiecania naszego kodu serwera za pomocą HTML, łącząc ciągi znaków z istniejącymi szablonami HTML. Pug to bardzo potężny silnik do tworzenia szablonów, który ma wiele funkcji, w tymfilters, includes, inheritance, interpolationitp. Jest wiele powodów do omówienia w tej sprawie.

Aby używać Pug z Expressem, musimy go zainstalować,

npm install --save pug

Teraz, gdy Pug jest zainstalowany, ustaw go jako silnik tworzenia szablonów dla swojej aplikacji. tydon'ttrzeba tego „wymagać”. Dodaj następujący kod do plikuindex.js plik.

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

Teraz utwórz nowy katalog o nazwie views. Wewnątrz tworzy plik o nazwiefirst_view.pugi wprowadź w nim następujące dane.

doctype html
html
   head
      title = "Hello Pug"
   body
      p.greetings#people Hello World!

Aby uruchomić tę stronę, dodaj następującą trasę do swojej aplikacji -

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

Otrzymasz wynik jako - Hello World!Mops konwertuje ten bardzo prosto wyglądający znacznik do HTML. Nie musimy śledzić zamykania naszych tagów, nie musimy używać słów kluczowych class i id, a raczej używać '.' i'#'aby je zdefiniować. Powyższy kod jest najpierw konwertowany na -

<!DOCTYPE html>
<html>
   <head>
      <title>Hello Pug</title>
   </head>
   
   <body>
      <p class = "greetings" id = "people">Hello World!</p>
   </body>
</html>

Mops jest w stanie zrobić znacznie więcej niż upraszczanie znaczników HTML.

Ważne cechy mopsa

Przyjrzyjmy się teraz kilku ważnym cechom Mopsa.

Proste tagi

Tagi są zagnieżdżane zgodnie z ich wcięciem. Podobnie jak w powyższym przykładzie,<title> został wcięty w <head>tag, więc był w środku. Ale<body> tag był w tym samym wcięciu, więc był rodzeństwem <head> etykietka.

Nie musimy zamykać tagów, gdy tylko Pug napotka następny tag na tym samym lub zewnętrznym poziomie wcięcia, zamyka tag za nas.

Aby umieścić tekst w tagu, mamy 3 metody -

Space seperated

h1 Welcome to Pug

Piped text

div
   | To insert multiline text, 
   | You can use the pipe operator.

Block of text

div.
   But that gets tedious if you have a lot of text.
   You can use "." at the end of tag to denote block of text.
   To put tags inside this block, simply enter tag in a new line and 
   indent it accordingly.

Komentarze

Pug używa tej samej składni co JavaScript(//)do tworzenia komentarzy. Te komentarze są konwertowane na komentarze html (<! - comment ->). Na przykład,

//This is a Pug comment

Ten komentarz zostanie przekonwertowany na następujący.

<!--This is a Pug comment-->

Atrybuty

Aby zdefiniować atrybuty, używamy listy atrybutów oddzielonych przecinkami, w nawiasach. Atrybuty klasy i ID mają specjalne reprezentacje. Poniższy wiersz kodu zawiera definicję atrybutów, klas i id dla danego tagu html.

div.container.column.main#division(width = "100", height = "100")

Ten wiersz kodu zostanie przekonwertowany na następujący. -

<div class = "container column main" id = "division" width = "100" height = "100"></div>

Przekazywanie wartości do szablonów

Kiedy renderujemy szablon Pug, możemy przekazać mu wartość z naszego programu obsługi trasy, której możemy następnie użyć w naszym szablonie. Utwórz nową procedurę obsługi trasy z następującymi elementami.

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

app.get('/dynamic_view', function(req, res){
   res.render('dynamic', {
      name: "TutorialsPoint", 
      url:"http://www.tutorialspoint.com"
   });
});

app.listen(3000);

I utwórz nowy plik widoku w katalogu views o nazwie dynamic.pug, z następującym kodem -

html
   head
      title=name
   body
      h1=name
      a(href = url) URL

Otwórz localhost: 3000 / dynamic_view w przeglądarce; Powinieneś otrzymać następujące dane wyjściowe -

Możemy również użyć tych przekazanych zmiennych w tekście. Aby wstawić przekazane zmienne między tekstem tagu, używamy#{variableName}składnia. Na przykład w powyższym przykładzie, gdybyśmy chcieli umieścić Pozdrowienia z TutorialsPoint, moglibyśmy zrobić co następuje.

html
   head
      title = name
   body
      h1 Greetings from #{name}
      a(href = url) URL

Ta metoda używania wartości jest nazywana interpolation. Powyższy kod wyświetli następujące dane wyjściowe. -

Warunki

Możemy również używać instrukcji warunkowych i konstrukcji pętli.

Rozważ następujące -

Jeżeli użytkownik jest zalogowany, strona powinna się wyświetlić "Hi, User" a jeśli nie, to "Login/Sign Up"połączyć. Aby to osiągnąć, możemy zdefiniować prosty szablon, taki jak -

html
   head
      title Simple template
   body
      if(user)
         h1 Hi, #{user.name}
      else
         a(href = "/sign_up") Sign Up

Kiedy renderujemy to za pomocą naszych tras, możemy przekazać obiekt, jak w następującym programie -

res.render('/dynamic',{
   user: {name: "Ayush", age: "20"}
});

Otrzymasz wiadomość - Hi, Ayush. Ale jeśli nie przekażemy żadnego obiektu lub przekażemy go bez klucza użytkownika, otrzymamy link rejestracyjny.

Uwzględnij i składniki

Mops zapewnia bardzo intuicyjny sposób tworzenia komponentów dla strony internetowej. Na przykład, jeśli widzisz witrynę z wiadomościami, nagłówek z logo i kategoriami jest zawsze stały. Zamiast kopiować to do każdego tworzonego widoku, możemy użyćincludefunkcja. Poniższy przykład pokazuje, jak możemy korzystać z tej funkcji -

Utwórz 3 widoki za pomocą następującego kodu -

HEADER.PUG

div.header.
   I'm the header for this website.

CONTENT.PUG

html
   head
      title Simple template
   body
      include ./header.pug
      h3 I'm the main content
      include ./footer.pug

FOOTER.PUG

div.footer.
   I'm the footer for this website.

Utwórz do tego trasę w następujący sposób -

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

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

app.listen(3000);

Idź do localhost: 3000 / components, otrzymasz następujące dane wyjściowe -

include może również służyć do dołączania zwykłego tekstu, CSS i JavaScript.

Mopsa ma wiele innych funkcji. Ale to jest poza zakresem tego samouczka. Możesz dalej odkrywać Pug w Pug .