기록장

스프링부트 게시판 만들기 (3) - thymeleaf-layout-dialect 이용하여 레이아웃 만들기 본문

인턴 기록/게시판?블로그?만들기

스프링부트 게시판 만들기 (3) - thymeleaf-layout-dialect 이용하여 레이아웃 만들기

210_yy 2021. 4. 7. 13:27

블로그 페이지에는 반복적으로 사용되는 부분이 많기 때문에 thymeleaf, 그안에 layout dialect 를 사용하여 페이지 레이아웃을 만들고자 한다.

 

 

반응형 디자인은 내가 직접.. 만들기는 할 것도 많고 그래서 부트스트랩 템플릿을 무료로 사용해보려고 한다.

startbootstrap.com/template/blog-post 나는 이 템플릿을 사용했다 (나중에 customize 할 것이다)

 

 

먼저 다운로드를 하고 내 프로젝트 폴더에 넣어준다

 

 

 

 

 

나는 레이아웃 구조를 위의 그림처럼 짰다. 

필요한 fragment들은 topbarFragment, sidebarFragment, footerFragment이고 content부분은 페이지마다 바뀔 예정이다. 

 

 

 

1. dependency 추가 

 

sts에서 프로젝트를 생성할 때 thymeleaf를 추가 했다면 pom.xml에 

 

이것이 이미 있을 것이다. 근데 thymeleaf-layout-dialect를 사용하기 위해선 또 다른 의존성을 하나 더 추가 해야한다.

 

<dependency>
	<groupId>org.springframework.boot</groupId>
	<artifactId>spring-boot-starter-web</artifactId>
</dependency>

 

이 코드를 바로 아래에 추가해주도록 하자.

 

 

2. topbarFragment 생성

 

다운 받은 템플릿에 index.html 파일을 열어 위의 메뉴바 부분만 복사해서 가져와야한다!

 

↓ index.html안에 nav 부분

<!-- Navigation -->
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
    <div class="container">
      <a class="navbar-brand" href="#">Start Bootstrap</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarResponsive">
        <ul class="navbar-nav ml-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="#">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Services</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Contact</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

 

 

 

 

내 프로젝트 구조는 이렇게 되어 있는데 topbarFragment는 header.html 에 추가할 것이다.

 

 

- header.html -

 

먼저 thymeleaf 문법을 사용하기 위해서는 

xmlns:th="http://www.thymeleaf.org"를 추가해주어야 한다는 걸 알아야한다.

 

<html lang="ko" xmlns:th="http://www.thymeleaf.org">



	
<th:block th:fragment="topbarFragment">
	<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
    <div class="container">
      <a class="navbar-brand" href="#">210's blog</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarResponsive">
        <ul class="navbar-nav ml-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="#">Board</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Portfolio</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Profile</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
 </th:block>

<th:block th:fragment="topbarFragment">는 이 block안에 애들을 topbarFragment라는 이름으로 정한다는 의미이다.

 

이렇게 작성하고 저장!

 

 

 

2. sidebarFragment

 

이것은 sidebar.html에 작성

 

<html lang="ko" xmlns:th="http://www.thymeleaf.org">

<th:block th:fragment="sidebarFragment">
<!-- Sidebar Widgets Column -->
      

        <!-- Search Widget -->
        <div class="card my-4">
          <h5 class="card-header">Search</h5>
          <div class="card-body">
            <div class="input-group">
              <input type="text" class="form-control" placeholder="Search for...">
              <span class="input-group-append">
                <button class="btn btn-secondary" type="button">Go!</button>
              </span>
            </div>
          </div>
        </div>

        <!-- Categories Widget -->
        <div class="card my-4">
          <h5 class="card-header">Categories</h5>
          <div class="card-body">
            <div class="row">
              <div class="col-lg-6">
                <ul class="list-unstyled mb-0">
                  <li>
                    <a href="#">Web Design</a>
                  </li>
                  <li>
                    <a href="#">HTML</a>
                  </li>
                  <li>
                    <a href="#">Freebies</a>
                  </li>
                </ul>
              </div>
              <div class="col-lg-6">
                <ul class="list-unstyled mb-0">
                  <li>
                    <a href="#">JavaScript</a>
                  </li>
                  <li>
                    <a href="#">CSS</a>
                  </li>
                  <li>
                    <a href="#">Tutorials</a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>

        <!-- Side Widget -->
        <div class="card my-4">
          <h5 class="card-header">Side Widget</h5>
          <div class="card-body">
            You can put anything you want inside of these side widgets. They are easy to use, and feature the new Bootstrap 4 card containers!
          </div>
        </div>

      </div>


    <!-- /.row -->
</th:block>

 

복사하고 저장

 

 

3. footerFragment 생성

 

footer.html에 작성

 

<html lang="ko" xmlns:th="http://www.thymeleaf.org">



<th:block  th:fragment = "footerFragment">

<div class="container">
      <p class="m-0 text-center text-white">Copyright &copy; Your Website 2020</p>
</div>
</th:block>

 

 

 

4.  모든 fragment를 default_layout 에 불러오기

 

모든 layout의 기본이 되는 default_layout이다.

 

<!DOCTYPE html>

<html lang="ko" xmlns:th="http://www.thymeleaf.org"
	xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<meta charset="UTF-8" />


<title>210's blog</title>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

<!-- Custom styles for this template -->
<link href="css/blog-post.css" rel="stylesheet">

<!--  <link href="css/styles.css" rel="stylesheet" />-->

</head>
<!--  header fragement 사용  -->
<body>
	<th:block th:replace="fragment/header" :: topbarFragment></th:block>
	<div class="container">
		<div class="row">
			<div class="col-lg-8">
				<th:block layout:fragment="content"></th:block>
			</div>
			<!-- 여기는 content가 올 자리 -->
			<div class="col-md-4">
			<th:block th:replace="fragment/sidebar" :: sidebarFragment></th:block>
			</div>
		</div>
	</div>
	<div class="py-5 bg-dark">
		<th:block th:replace="fragment/footer" :: footerFragment></th:block>
	</div>
</body>
</html>

 

th:replace=[fragment 경로] :: [fragment명] 은 경로에 있는 fragment를 여기에 위치하겠다 라는 의미이다.

 

 

<th:block layout:fragment="content"> 는 해당 위치에 content라는 레이아웃의 코드를 불러오겠다는 의미 -> 이건 페이지 마다 내용을 바꿀 수 있다 

 

 

5. index.html 작성하여 페이지 띄워보기 

 

 

index.html은 default_layout을 기본으로 하고 그안에서 content내용만 바꾸는 것이다

 


<!DOCTYPE html>
<html 	xmlns:th="http://www.thymeleaf.org"
        xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
        layout:decorator="layout/default_layout">

<head>
	<meta charset="UTF-8">
	<title>210's blog</title>
	
</head>
<body>
<div layout:fragment="content">

		<p> hi</p>


</div>

<script src="js/main.js"></script>

</body>
</html>

layout:decorator ="layout/default_layout"으로 이 페이지는 default_layout 을 기본으로 하는 것을 알려주자.

 

 

이제 spring 을 실행해서 확인 

 

 

화면은 잘 뜨는데 html 크기 자체가 이상하게 되어있는듯 하다.. 근데 레이아웃은 잘 나눠지고 뜨니깐 성공 ~~! 

반응형

'인턴 기록 > 게시판?블로그?만들기' 카테고리의 다른 글

스프링부트 게시판 만들기 (6) - 글 클릭했을 때 해당 content 보여주기  (0) 2021.04.26
스프링부트 게시판 만들기 (5) - 글 목록에 링크 추가  (0) 2021.04.26
스프링부트 게시판 만들기 (4) - 이클립스 : 스프링부트 프로젝트 git 연동하기  (0) 2021.04.07
스프링부트 게시판 만들기 (2) - AJAX 요청, DTO, DAO, Service, Controller, DatabaseConfiguration.java 생성  (0) 2021.04.06
스프링부트 게시판 만들기 (1) - MSSQL db 구축, 테이블 생성  (0) 2021.04.06
'인턴 기록/게시판?블로그?만들기' Related Articles more
Comments