JAVA/Spring Boot

(프로젝트 진행)mustache레이아웃 나누기.

ri5 2021. 3. 19. 15:35

-header.mustache생성.

1. template안에 layout폴더 생성한후 그밑에 header 생성

2. header에 들어갈 기본 html 작성. (기존 html의 헤더로 쓰일 부분만 가져온다.)

<!DOCTYPE HTML>
<html>
    <head>
        <title>스프링 부트 웹서비스</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
        <!-- 부트스트랩 사용-->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    </head>
    <body>

 

-footer.mustache 생성.

1. header 1번과정과 같음.

 

2. footer에 들어갈 기본 html 작성. (body와 html의 시작 태그는 header의 안에 있으므로 footer안에서 닫아줘야함.)

        <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

        <script src="/js/app/index.js"></script>
    </body>
</html>

 

 

-index.mustache 수정.

1. index.mustache 수정.

<!-- //header 파일 가져오기 -->
{{>layout/header}}
    <h1>스프링 부트로 시작하는 웹 서비스</h1>
{{>layout/footer}}