Koa.js - Templating

Mops to szablonowy silnik. Silniki szablonów służą do usuwania bałaganu w kodzie naszego serwera za pomocą HTML, łącząc ciągi znaków z istniejącymi szablonami HTML. Mops to bardzo potężny silnik szablonów, który ma wiele funkcji, takich jakfilters, includes, inheritance, interpolationitp. Jest wiele powodów do omówienia w tej sprawie.

Aby używać Mopsa z Koa, musimy go zainstalować za pomocą następującego polecenia.

$ npm install --save pug koa-pug

Po zainstalowaniu mopsa ustaw go jako silnik szablonów dla swojej aplikacji. Dodaj następujący kod do pliku app.js.

var koa = require('koa');
var router = require('koa-router');
var app = koa();

var Pug = require('koa-pug');
var pug = new Pug({
   viewPath: './views',
   basedir: './views',
   app: app //Equivalent to app.use(pug)
});

var _ = router(); //Instantiate the router

app.use(_.routes()); //Use the routes defined using the router
app.listen(3000);

Teraz utwórz nowy katalog o nazwie views. W katalogu utwórz plik o nazwie first_view.pug i wprowadź w nim następujące dane.

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

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

_.get('/hello', getMessage); // Define routes

function *getMessage(){
   this.render('first_view');
};

Otrzymasz wynik jako -

To, co robi Pug, to konwertuje ten bardzo prosty 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 do

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

Mops jest w stanie zrobić znacznie więcej niż upraszczanie znaczników HTML. Przyjrzyjmy się niektórym z tych funkcji 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. Jednakże<body> tag był na 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.

Istnieją trzy metody umieszczania tekstu w tagu:

Przestrzeń oddzielona -

h1 Welcome to Pug

Tekst potokowy -

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

Blok tekstu -

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 -

<!--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 obejmuje definiowanie atrybutów, klas i identyfikatora dla danego tagu html.

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

Ta linia kodu jest konwertowana na -

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

Przekazywanie wartości do szablonów

Kiedy renderujemy szablon Pug, możemy faktycznie 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ącym kodem.

var koa = require('koa');
var router = require('koa-router');
var app = koa();

var Pug = require('koa-pug');
var pug = new Pug({
   viewPath: './views',
   basedir: './views',
   app: app // equals to pug.use(app) and app.use(pug.middleware)
});

var _ = router(); //Instantiate the router

_.get('//dynamic_view', dynamicMessage); // Define routes

function *dynamicMessage(){
   this.render('dynamic', {
      name: "TutorialsPoint", 
      url:"https://www.tutorialspoint.com"
   });
};

app.use(_.routes()); //Use the routes defined using the router
app.listen(3000);

Następnie utwórz nowy plik widoku w katalogu views o nazwie dynamic.pug, używając poniższego kodu.

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

otwarty localhost:3000/dynamicw przeglądarce i po nim powinno być wyjście. -

Możemy również użyć tych przekazanych zmiennych w tekście. Aby wstawić przekazane zmienne między tekstem tagu, używamy składni # {nazwa_zmiennej}. Na przykład w powyższym przykładzie, jeśli chcemy wstawić Pozdrowienia z TutorialsPoint, musimy użyć poniższego kodu.

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

Ta metoda używania wartości nosi nazwę interpolacji.

Warunki

Możemy również używać instrukcji warunkowych i konstrukcji pętli. Rozważmy ten praktyczny przykład, jeśli użytkownik jest zalogowany, chcielibyśmy wyświetlić „Cześć, Użytkownik”, a jeśli nie, to chcielibyśmy pokazać mu link „Zaloguj / Zarejestruj się”. 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 i przekazujemy obiekt taki jak -

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

Zostanie wyświetlony komunikat Hi, Ayush. Jeśli jednak nie przekażemy żadnego obiektu lub przekażemy go bez klucza użytkownika, otrzymamy link Zarejestruj się.

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 widoku, możemy użyć dołączania. Poniższy przykład pokazuje, jak możemy użyć funkcji include -

Utwórz trzy 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 koa = require('koa');
var router = require('koa-router');
var app = koa();

var Pug = require('koa-pug');
var pug = new Pug({
   viewPath: './views',
   basedir: './views',
   app: app //Equivalent to app.use(pug)
});

var _ = router(); //Instantiate the router

_.get('/components', getComponents);

function *getComponents(){
   this.render('content.pug');
}

app.use(_.routes()); //Use the routes defined using the router
app.listen(3000);

Iść do localhost:3000/components, powinieneś otrzymać następujące dane wyjściowe.

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

Mopsa ma wiele innych funkcji. Jednak są one poza zakresem tego samouczka. Możesz dalej odkrywać Pug w Pug .