// /routes/shop.js
const path = require('path');
const express = require('express');
const rootDir = require('../util/path');
const adminData = require('./admin');
const router = express.Router();
router.get('/', (req, res, next) => {
const products = adminData.products;
res.render('shop', {
prods: products,
pageTitle: 'Shop',
path: '/',
});
});
module.exports = router;
router.get('/', (req, res, next) => {
const products = adminData.products;
res.render('shop', {
prods: products,
pageTitle: 'Shop',
path: '/',
});
객체에 있는 모든 필드는 Shop.ejs템플릿에 전달되고 템플릿 내에서는 이것을 사용 할 수 있게된다.
// /views/includes/head.ejs
// 재사용할 부분을 떼어내고 다른 파일에 저장한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title><%= pageTitle %></title>
<link rel="stylesheet" href="/css/main.css">
// /views/404.ejs
<%- include('includes/head.ejs') %>
</head>
<body>
<header class="main-header">
<nav class="main-header__nav">
<ul class="main-header__item-list">
<li class="main-header__item"><a class="active" href="/">Shop</a></li>
<li class="main-header__item"><a href="/admin/add-product">Add Product</a></li>
</ul>
</nav>
</header>
<h1>Page Not Found!</h1>
</body>
</html>
// /views/404.ejs
<%- include('includes/head.ejs') %>
</head>
<body>
<%- include('includes/navigation.ejs') %>
<h1>Page Not Found!</h1>
<%- include('includes/end.ejs') %>
<ul class="main-header__item-list">
<li class="main-header__item">
<a class="<%= path === '/' ? 'active' : ''%>" href="/">
Shop</a></li>
<li class="main-header__item">
<a class="<%= path === '/admin/add-product' ? 'active' : ''%>" href="/admin/add-product">
Add Product</a></li>
</ul>
class에 삼항 연산자를 넣어서 해결해보자