base.html에 아래의 소스를 추가한다.
<!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>{{ title }}</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="container" style="padding-top: 10px;">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-9">
<ul class="nav navbar-nav">
<li class="active">
<a href="/admin/products">List</a>
</li>
<li><a href="/admin/products/write">Write</a></li>
</ul>
</div>
</div>
</nav>
{% block content %}{% endblock %}
</div>
</body>
</html>이 후 http://localhost:3000/admin/products/ (자신이 지정한 y와 같이 자신이 지정한 포트의 url에 접근하면 메뉴바가 뜨는 것을 볼 수 있다.
현재 소스에서는 첫 번째 List에만 검정색 블록이 활성화 되어있고 Write를 클릭해도 블록이 활성화되지 않는다.
템플릿에서 현재 url에 접근이 가능해야 하기 때문에 app.js에 locals변수를 하나 추가한다.
app.use( (req,res,next) => {
app.locals.isLogin = false;
//새로 추가한 변수
app.locals.req_path = req.path; // express에서 현재 url을 보내주는 변수
next();
});
base.html 파일에 해당 변수가 정상적으로 출력되는지 해당 변수를 뿌려주는 소스 코드를 추가해본다.
이제 url에 접근하면 해당 페이지 주소가 뜨는 것을 확인할 수 있다.
테스트가 끝났으면 base.html에 {{req.path}}는 다시 지워주고 base.html 을 수정한다.
이제 req_path 변수를 활용해 url을 가져올 수 있어 아래와 같이 변경할 수 있다.
<li {% if req_path = 'admin/products' %}>
하지만 이렇게 하게되면 url이 늘어날 때마다 계속 추가를 해줘야 하기 때문에 번거롭다.
그래서 이걸 macro 기능을 이용해서 처리한다.
우선 template 하위 폴더로 macro 폴더를 만들고 link.html 이라는 새 파일을 생성한다.
생성한 파일에 아래와 같은 소스를 추가한다.
{% macro link( href , text , current_url ) %}
<li {% if href == current_url %} class="active" {% endif %}>
<a href="{{ href }}">{{ text }}</a>
</li>
{% endmacro %} 
추가가 끝났으면 base.html로 돌아가
{# <li {% if req_path = 'admin/products' %}>
<a href="/admin/products">List</a>
</li>
<li><a href="/admin/products/write">Write</a></li>
#}부분을 아래의 소스코드로 바꿔준다.
{% from "macro/link.html" import link %}
{{ link( '/admin/products' , "List" , req_path ) }}
{{ link( '/admin/products/write' , "Write" , req_path ) }}
완료되었으면 3000번 포트로 접속하여 List와 Write클릭 시 해당 블록이 활성화 되는 것을 확인할 수 있다.
출처 : 본 포스트는 패스트캠퍼스의 Node 웹 프로그래밍 올인원 패키지 Online의 박준영 강사님의 강의를 보고 직접 정리한 내용입니다.
'Javascript > Node' 카테고리의 다른 글
| [node] Sequelize에서의 모델 작성 (0) | 2020.09.07 |
|---|---|
| [node] Sequelize DB 접속 (0) | 2020.09.07 |
| [node] 404, 500 error handling (0) | 2020.09.07 |
| [node] Global View Variable (0) | 2020.09.07 |
| [node] 파일 읽기 (0) | 2020.09.07 |
