spring boot

[ skeleton ] thymeleaf 기본 레이아웃 설정. feature Admin LTE

파워킴 2021. 11. 21. 20:11
반응형

HTML Template - Admin LTE 

  • 무료 HTML Tmeplate 중 여러가지 페이지 및 component등을 제공하므로 Admin page나 빠른 화면 구성에 좋은듯하여
    Admin LTE를 통해 레이아웃을 구성해 볼 예정입니다.
  • AdminLTE : https://adminlte.io/ 
 

Free Bootstrap Admin Template | AdminLTE.IO

Bootstrap is raking over the world and so is React. Therefore, we decided to showcase these outstanding React Bootstrap templates May 18, 2021

adminlte.io

 

2021.11.16 - [spring boot] - [ skeleton ] thymeleaf 설정

2021.11.17 - [분류 전체보기] - [ skeleton ] thymeleaf 페이지수정시 재시작없이 리로딩 ( Local 작업시 설정. )

 

 

레이아웃 구성 .

  • 기본 레이아웃 구성 Tree
  • Controller 
    @Controller
public class MainController {

    @GetMapping("/main")
    public String index() {
        return "pages/main";
    }

    @GetMapping("/login")
    public String login() {
        return "pages/login";
    }
}​
  • pages/main.html
    <!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{layout/layout_common}"
      >
<body>

<div class="content-wrapper" layout:fragment="content">
    HELLO
</div>

</body>
</html>​
     

    layout:decorate <== 레이아웃 페이지를 설정 합니다.  
  • layout:decorate="~{layout/layout_common}"​
  • layout/layout_common.html
  • <!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head th:replace="fragments/common/fragment_config :: f_config"></head>
<th:block layout:fragment="localcss">
</th:block>

<body class="hold-transition sidebar-mini layout-fixed">
<div class="wrapper">
    <nav th:replace="fragments/common/fragment_header :: headerFragment"></nav>
    <aside th:replace="fragments/common/fragment_side :: sideFragment"></aside>
    <div layout:fragment="content"></div>
    <footer th:replace="fragments/common/fragment_footer :: footerFragment"></footer>
</div>

<th:block th:replace="fragments/common/fragment_jsimport :: f_jsimport"></th:block>
<th:block layout:fragment="localjs">
</th:block>
<script layout:fragment="jsscript"></script>
</body>

</body>
</html>

 

마무리 

  • 레이아웃 구성은 html 및 publishing 영역이라 템플릿을 이용하면 빠른 개발이 가능하다.
  • html 템플릿 사용으로 불가피하게 불필요한 소스들이 많이사용되게 되어 조금은 무거워 진다. 

 

반응형