728x90
이러한 레이아웃이 있다.
상단 네비게이션 바, 하단 푸터, 중앙부에 콘텐츠가 자리잡고있다.
네비게이션 바와 푸터는 어느 페이지든 항상 있을터인데..
매번 그 긴 코드를 다 적어주어야 할까?
조립식으로 사용하자.
(header.mustache)
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>HTML파일의 맨 위~ nav바까지의 모든 코드를 header.mustache 파일에 저장하였고
(footer.mustache)
<div class="mb-5 container-fluid">
<hr>
<p> @myPage <a href="#">link</a></p>
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
</body>
</html>footer또한 footer부분부터 html의 맨 아래코드까지 따로 footer.mustache에 저장하였다.
{{>layouts/header}}
<div class="bg-dark text-white p-5">
<h1>{{username}} hello!~</h1>
</div>
{{>layouts/footer}}이렇게 나누어 저장해놓은 헤더와 푸터는
{{>경로/파일명}}으로 적어주면 된다.
728x90
'웹개발 > SpringBoot' 카테고리의 다른 글
| 롬복(Lombok) 사용하기(생성자 코드 줄이기, 로깅) (0) | 2023.03.08 |
|---|---|
| h2 데이터베이스 insert, select (0) | 2023.03.08 |
| [Springboot] JPA를 이용하여 DB에 데이터 생성하기 (0) | 2023.03.08 |
| [Spring boot] 폼 데이터를 받아 컨트롤러에서 확인하기 (0) | 2023.03.07 |
| [Spring boot] mustache템플릿, Controller, Model (0) | 2023.03.07 |
댓글