Koa.js-템플릿

Pug는 템플릿 엔진입니다. 템플릿 엔진은 기존 HTML 템플릿에 문자열을 강력하게 연결하여 HTML로 서버 코드의 복잡함을 제거하는 데 사용됩니다. Pug는 다음과 같은 다양한 기능을 가진 매우 강력한 템플릿 엔진입니다.filters, includes, inheritance, interpolation, 등등. 이것에 대해 다룰 근거가 많이 있습니다.

Koa와 함께 Pug를 사용하려면 다음 명령을 사용하여 설치해야합니다.

$ npm install --save pug koa-pug

pug가 설치되면 앱의 템플릿 엔진으로 설정합니다. 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);

이제보기라는 새 디렉터리를 만듭니다. 디렉터리 내에 first_view.pug라는 파일을 만들고 다음 데이터를 입력합니다.

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

이 페이지를 실행하려면 앱에 다음 경로를 추가하십시오.

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

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

다음과 같이 출력을 받게됩니다.

Pug가하는 일은 매우 간단한 마크 업을 html로 변환하는 것입니다. 태그를 닫는 것을 추적 할 필요가 없으며 class 및 id 키워드를 사용할 필요가 없으며 '.'를 사용합니다. 및 '#'을 사용하여 정의합니다. 위의 코드는 먼저 다음으로 변환됩니다.

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

Pug는 HTML 마크 업을 단순화하는 것 이상을 수행 할 수 있습니다. Pug의 이러한 기능 중 일부를 살펴 보겠습니다.

간단한 태그

태그는 들여 쓰기에 따라 중첩됩니다. 위의 예 에서처럼<title> 안으로 들여 쓰기되었습니다 <head>태그, 내부에있었습니다. 그러나, 그<body> 태그가 같은 들여 쓰기에 있었으므로 <head> 꼬리표.

태그를 닫을 필요가 없습니다. Pug는 동일하거나 외부 들여 쓰기 수준에서 다음 태그를 만나는 즉시 태그를 닫습니다.

태그 안에 텍스트를 넣는 세 가지 방법이 있습니다.

분리 된 공간-

h1 Welcome to Pug

파이프 텍스트 −

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

텍스트 블록-

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.

코멘트

Pug는 주석 작성에 JavaScript (//)와 동일한 구문을 사용합니다. 이러한 주석은 html 주석 (<!-comment->)으로 변환됩니다. 예를 들면

//This is a Pug comment

이 주석은-

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

속성

속성을 정의하기 위해 괄호 안에 쉼표로 구분 된 속성 목록을 사용합니다. 클래스 및 ID 속성에는 특별한 표현이 있습니다. 다음 코드 줄은 주어진 html 태그에 대한 속성, 클래스 및 ID 정의를 다룹니다.

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

이 코드 줄은 다음과 같이 변환됩니다.

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

템플릿에 값 전달

Pug 템플릿을 렌더링 할 때 실제로 경로 핸들러에서 값을 전달하여 템플릿에서 사용할 수 있습니다. 다음 코드를 사용하여 새 경로 처리기를 만듭니다.

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);

그런 다음 다음 코드를 사용하여보기 디렉터리에 dynamic.pug라는 새보기 파일을 만듭니다.

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

열다 localhost:3000/dynamic브라우저에서 다음이 출력되어야합니다. −

텍스트 내에서 이러한 전달 된 변수를 사용할 수도 있습니다. 태그의 텍스트 사이에 전달 된 변수를 삽입하려면 # {variableName} 구문을 사용합니다. 예를 들어 위의 예에서 TutorialsPoint에서 Greetings를 삽입하려면 다음 코드를 사용해야합니다.

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

이 값을 사용하는 방법을 보간이라고합니다.

조건부

조건문과 반복 구조도 사용할 수 있습니다. 이 실용적인 예를 고려해보십시오. 사용자가 로그인하면 "Hi, User"를 표시하고 그렇지 않은 경우 "Login / Sign Up"링크를 표시하려고합니다. 이를 위해 다음과 같은 간단한 템플릿을 정의 할 수 있습니다.

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

경로를 사용하여 이것을 렌더링하고 다음과 같은 객체를 전달하면-

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

Hi, Ayush를 표시하는 메시지가 표시됩니다. 그러나 객체를 전달하지 않거나 사용자 키없이 객체를 전달하면 등록 링크를 받게됩니다.

포함 및 구성 요소

Pug는 웹 페이지의 구성 요소를 만드는 매우 직관적 인 방법을 제공합니다. 예를 들어 뉴스 웹 사이트를 보면 로고와 카테고리가있는 헤더는 항상 고정됩니다. 모든 뷰에 복사하는 대신 include를 사용할 수 있습니다. 다음 예는 include를 사용하는 방법을 보여줍니다.

다음 코드로 세 개의 뷰를 만듭니다.

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.

이에 대한 경로를 다음과 같이 만듭니다.

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);

이동 localhost:3000/components, 다음과 같은 출력이 표시됩니다.

include 일반 텍스트, CSS 및 JavaScript를 포함하는데도 사용할 수 있습니다.

Pug의 다른 많은 기능이 있습니다. 그러나 이는이 튜토리얼의 범위를 벗어납니다. Pug에서 Pug를 더 탐험 할 수 있습니다 .