IntelliJ) springboot + mariaDB + Thymeleaf 로 게시판 만들기 - 2. template 적용

7088 단어 ThymelaeafSpringbootwebbootstrapSpringboot

2. template 다운 받기

https://startbootstrap.com/themes 에서 무료 템플릿을 다운받아 진행하였음

📌 템플릿 프로젝트에 넣기

static 디렉토리에 하위 디렉토리로 bootstrap 이라는 디렉토리를 생성해 줌

css, img, js, scss, vendor 폴더를 방금 만든 bootstrap 디렉토리로 이동시켜줌

index.html 파일은 template 파일 아래로 이동시켜줌

다 해주면 위와 같은 구조가 됨


📌 정적 리소스 매핑

파일을 프로젝트에 포함시켰다고 해서 무조건 사용할 수 있는 것이 아니 었음

리소스 위치와 리소스와 매핑될 url을 등록해주는 addResourceHandlers를 사용해야 했음

@Override
  public void addResourceHandlers(ResourceHandlerRegistry registry) {
    registry.addResourceHandler("/static/**")
        .addResourceLocations("classpath:/static/");
  }

위와 같은 코드를 config 디렉토리 안에 MvcConfig.java 라는 이름으로 클래스를 생성하여 작성해 주었음

해당 클래스는 WebMvcConfigurerAdapter를 상속받고 있는 @Configuration 클래스임


📌 View 의 공통 부분 관리하기

view를 보다보면 공통 부분이 존재함. (footer, header, sidebar 등) 이를 계속해서 복붙할 수 없으니 한개의 파일로 두고 불러와서 사용하는 형식으로 만들 것임.

templates 디렉토리에 하위 디렉토리로 fragments라는 디렉토리를 생성해 줌

head, top, sidebar, footer, script 라는 이름으로 html 파일을 fragments 디렉토리에 만들어 줌

index.html 파일에서 각 부분(head, top 등) 의 코드를 복사하여 방금 만들었던 html 파일에 각각 붙여넣어 줌

<th:block th:fragment="head">
<!-- index.html에서 <head></head> 부분 코드 -->
</th:block>

위와 같은 형식으로 붙여넣어주면 head라는 이름으로 fragment를 지정해주겠다는 의미임

이를 page에서 사용할 때 다음과 같이 사용하면 해당 이름의 fragment의 내용을 여기에 위치시키겠다는 의미임

<!-- 공통 헤드-->
<th:block th:replace="fragments/head :: head"></th:block>

Thymeleaf를 사용하므로 각 html 파일 <html></html> 에 xmlns:th="http://www.thymeleaf.org" 를 포함시켜 주어야 함

이 방식 외에도 thymeleaf layout dialect를 사용하여 기본 레이아웃 파일을 하나 선언하여 공통요소를 관리할 수 있다.
기본 레이아웃을 사용할 html 파일에서 다음과 같이 작성하여 사용할 수 있다.

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

📌 경로 수정하기

파일 내에 작성되어 있는 경로를 프로젝트 구조에 맞게 바꿔줌

<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
 <link th:href="@{/static/bootstrap/vendor/fontawesome-free/css/all.min.css}" rel="stylesheet" type="text/css" />

Thymeleaf 형식으로 바꿔 작성해주고, 경로 또한 /static/bootstrap/을 추가하여 바꿔주었음


끝 😃

img 경로 수정까지 해주면 img는 제대로 나올 것임
위 사진은 contents 요소를 모두 지운 상태여서 비어있음

01.MongoDB 기초 - Pymongo 정리-2
Linux 시스템에서 새 프로세스 생성(하)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage