Template

링크식

<!-- static 리소스를 참조할 때는 static 디렉토리 아래 부터 참조한다.-->
<link rel="stylesheet" th:href="@{/css/style.css}" type="text/css">

<!-- controller 로 가는 링크식 -->
<form method="post" th:action="@{/}"> ... </form>

조건, 반복, 특수

• th:if="${something}", th:unless="${something}"
• th:each="book : ${books}" 자신이 포함된 태그를 반복한다.

<div class="container">
        <div class="row" th:unless="${#lists.isEmpty(books)}" >
            <div class="col-12 my-3 col-lg-6" th:each="book : ${books}">
                <div class="card">
                    <div class="card-body">
                        <h4 th:text="${book.title}">Book Title</h4>
                        <h6 th:text="${book.author}" class="text-dark">author
                            <br/></h6>
                        <h6 class="text-muted" th:text="${book.isbn}">isbn</h6>
                        <p class=" p-y-1" th:text="${book.description}">
                            <span th:if="${book.description}" th:text="${book.description}">
                            Description
                            </span>
                            <span th:unless="${book.description}">
                            Description Unavailable
                            </span>
                        </p>

                    </div>
                </div>
            </div>

        </div>
        <div th:if="${#lists.isEmpty(books)}">
            <p>No book on the list</p>
        </div>
</div>

iterStat, style

iterStat 은 https://www.thymeleaf.org/doc/tutorials/2.1/usingthymeleaf.html#iteration 를 참고한다.

${iterStat.first}
${iterStat.last}
${iterStat.size}
${iterStat.index}
${iterStat.count}

${iterStat.even}
${iterStat.odd}

style 은 문자열로 처리한다. 작은따옴표 열고 닫는 것을 살피자.

        <!--dynamic : carousel-inner-->
        <div class="carousel-inner none" th:class="carousel-inner" role="listbox">
            <!--첫 요소만 active 한다.-->
            <div class="carousel-item active" th:each="photo, iterStat : ${photos}"
                 th:class="${iterStat.first} ? 'carousel-item active' : 'carousel-item'">
                <div class="w-100 d-block carousel-photo">
                    <img style="background-image: url('http://dashaus.kr/web/product/extra/big/201704/226_shop1_133517.jpg');" 
                    th:style="'background-image: url(' + @{'/files/' + ${photo.id}} + ');'">
                </div>
            </div>
        </div>

attr

attr 은 문자열로 처리하지 않고 바로 변수와 함께 처리하면 된다.

<!-- dynamic : carousel-indicators-->
        <ol class="carousel-indicators none" th:class="carousel-indicators">
            <!--첫 요소만 active 한다.-->
            <li data-target="#carousel-main" th:each="photo,iterStat: ${photos}"
                th:attr="data-slide-to=${iterStat.count}" th:class="${iterStat.first} ? 'active' : 'overriding'"></li>
        </ol>

CheetSheet

https://github.com/engma/thymeleaf-cheat-sheet