✏️ PUG
- HTML 의 중복되는 부분을 제거하기 위한 모듈
📍 설치
npm i pug✏️ setting
- views 디랙토리를 생성 후 원하는 pug 파일을 생성한다.
- 파일은 아래와 같이 작성해줬다.
doctype html
html(lang="ko")
head
title This is PUG
body
h1 Good Dog~!
footer © #{new Date().getFullYear()} PUG- express 에서 pug 를 설정해주면 된다.
app.set('view engine', 'pug')
app.set('views', 'my_app/views') // views 파일에 대한 경로를 설정해주면 됨- 이제 응답을 pug 파일로 할 수 있다.
app.get('/write', (req, res) => {
res.render('home');
});✏️ 템플릿 사용하기
📍 base 템플릿
include 파일명을 사용해 템플릿 조각을 사용할 수 있다.block 블록명을 사용해 공통되지 않는 부분을 표시할 수 있다.- 이 라인에서 템플릿을 확장시킬 수 있다.
html
head
title it's title
body
include nav
block content📍 템플릿 조각
- base 템플릿에서 이미 조각의 경로와 파일명을 선언했기 때문에 특별히 해야될 건 없다.
nav
ul
li Home
li About
li Content📍 템플릿 확장
extends 템플릿명으로 깔아놓을 템플릿을 선언하면 된다.block 블록명으로 확장시키려는 라인의 블록명을 입력하면 된다.
extends base
block content
h1 Hello Pug
p this is the pug..📍 호출
app.get('/pug', (req, res) => {
res.render('pug');
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
</head>
<body>
<nav class="navbar bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Logo</a>
<a href="/write">글 작성</a>
</div>
</nav>
<!-- -->
<footer>
<p>Footer</p>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
</body>
</html>{% extends 'base.html' %}
{% block content %}
<h1>메인 페이지</h1>
{% if list %}
{{ list }}
{% else %}
<p> 작성된 글이 없습니다.</p>
{% endif %}
{% endblock %}
잘못된 내용 PR 환영