Sau khi đã khởi tạo và cấu hình thành công một dự án thymeleaf với spring boot, bây giờ Dũng có thể cùng các bạn đi tìm hiểu về các cú pháp có trong thymeleaf nhé.

Cú pháp truyền giá trị

Như trong ví dụ trước chúng ta đã truyền giá trị kiểu:

<h1 th:text="${message}"></h1>

Tuy nhiên cũng có một cách khác mà mình tương đối hay dùng đó là:

<h1>[[${message}]]</h1>

Nếu giá trị của bạn có dạng html bạn có thể sử dụng cú pháp:

<tag_name th:utext=${html}></tag_name>

# Ví dụ:
<div th:utext=${html}></div>

Cú pháp truyền đa ngôn ngữ

Thông thường chúng ta sẽ hay dùng kiểu:

<h1>Message One</h1>

Tuy nhiên kiểu này sẽ không phù hợp nếu chúng ta muốn sử dụng đa ngôn ngữ, chính vì thế mà spring boot và thymeleaf đã hỗ trợ chúng ta để truyền được dạng đa ngôn ngữ. Đầu tiên chúng ta sẽ cần bổ sung vào tập tin application.properties cấu hình:

spring.messages.basename=messages/messages

Tiếp theo chúng ta sẽ tạo lớp WebConfig để chỉ định cách mà chúng ta sẽ phát hiện ra ngôn ngữ đang được người dùng sử dụng:

package vn.techmaster.thymeleaf.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.LocaleResolver;
import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
import org.springframework.web.servlet.i18n.LocaleChangeInterceptor;
import org.springframework.web.servlet.i18n.SessionLocaleResolver;

import java.util.Locale;

@Configuration
public class WebConfig implements WebMvcConfigurer {

    @Bean
    public LocaleResolver localeResolver() {
        SessionLocaleResolver localeResolver = new SessionLocaleResolver();
        localeResolver.setDefaultLocale(Locale.ENGLISH);
        return localeResolver;
    }

    @Bean
    public LocaleChangeInterceptor localeChangeInterceptor() {
        LocaleChangeInterceptor interceptor = new LocaleChangeInterceptor();
        interceptor.setParamName("lang");
        return interceptor;
    }

    @Override
    public void addInterceptors(InterceptorRegistry registry) {
        registry.addInterceptor(localeChangeInterceptor());
    }
}

Trong trường hợp này chúng ta đang chỉ định rằng ngôn ngữ được lấy từ tham số lang từ yêu cầu của người dùng, nếu không có thì mặc định ngôn ngữ sẽ là tiếng anh.
Tiếp theo chúng ta sẽ tạo ra 2 tập tin như sau:

  1. messages.properties
message_1=Message One
message_2=Message Two
  1. messages_vi.properties
message_1=Tin nhắn 1
message_2=Tin nhắn 2

Bây giờ trong tập tin home.html chúng ta có thể sử dụng cú pháp:

<h1 th:text="#{message_1}"></h1>
<h1 th:text="#{message_2}"></h1>

Hoặc

<h1>[[#{message_1}]]</h1>
<h1>[[#{message_2}]]</h1>

Cú pháp lặp

Bạn có thể lặp qua các phần tử trong một mảng với cú pháp như sau:

<tag_name th:each="item, iterator : ${list}">
    sử dụng giá trị item
</tag_name>

Ví dụ:

<ul>
    <li th:each="item, iterator : ${list}">
        [[${item}]] [[${iterator.index}]]
    </li>
</ul>

Bạn cũng có thể tạo vòng lặp for i kiểu thế này:

<ul>
    <li th:each="i: ${#numbers.sequence(1, 5)}">
        [[${i}]]
    </li>
</ul>

Cú pháp rẽ nhánh

Thông thường bạn sẽ chỉ cần sử dụng đến th:if là đủ, ví dụ:

<ul>
    <li th:each="i: ${#numbers.sequence(1, 5)}"
        th:if="${i % 2 == 0}">
        [[${i}]]
    </li>
</ul>

Phân mảnh một trang

Chúng ta có thể chia một trang thành nhiều mảnh, ví dụ chúng ta có thể tạo một mảnh cho phần header của trang thông qua tập tin fragments/header.html như sau:

<!DOCTYPE html>

<html xmlns:th="http://www.thymeleaf.org">
<body>
<div th:fragment="content">
<nav>
  <ul>
    <li>[[#{home}]]</li>
    <li>[[#{post}]]</li>
  </ul>
</nav>
</div>
<script th:fragment="scripts" th:inline="javascript">
/*<![CDATA[*/
var value = /*[[${value}]]*/ '';
var message = /*[[#{message}]]*/ '';
/*]]>*/

console.log("Here's header");
</script>
</body>
</html>

Trong tập tin này chúng ta sẽ có 2 mảnh:

  1. Là phần nội dung html có tên content.
  2. Là phần javascript có tên scripts.
    Sau đó chúng ta có thể include 2 mảnh này vào trang home như sau:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Greeting</title>
</head>
<body>
<header>
    <div th:replace="~{fragments/header :: content}"></div>
</header>
<!-- Các nội dung khác -->
<script th:replace="~{fragments/header :: scripts}"></script>
</body>
</html>

Tổng kết lại

Như vậy chúng ta đã cùng nhau tìm hiểu một số cú pháp của thymeleaf, có những cú pháp phức tạp hơn chúng ta sẽ cùng nhau tìm hiểu trong quá trình làm loạt bài nhé.

Cám ơn bạn đã quan tâm đến bài viết|video này. Để nhận được thêm các kiến thức bổ ích bạn có thể:

  1. Đọc các bài viết của TechMaster trên facebook: https://www.facebook.com/techmastervn
  2. Xem các video của TechMaster qua Youtube: https://www.youtube.com/@TechMasterVietnam nếu bạn thấy video/bài viết hay bạn có thể theo dõi kênh của TechMaster để nhận được thông báo về các video mới nhất nhé.
  3. Chat với techmaster qua Discord: https://discord.gg/yQjRTFXb7a