網頁

▼

2021/5/20

Spring Boot Thymeleaf i18n多國語言範例

Spring Boot搭配Thymeleaf模板多國語言(i18n)範例。。


參考「Spring Boot Thymeleaf 簡單範例」搭建好Spring Boot Thymeleaf專案，下面以此進行修改。

在專案的src/main/resources目錄新增四個多語系properties檔及訊息內容。為最後顯示在thymeleaf模

  • messages.properties：預設
  • messages_en_US.properties：英文
  • messages_ja_JP.properties：日文
  • messages_zh_TW.properties：中文

messages.properties

message.hello=hello

messages_en_US.properties

message.hello=hello

messages_ja_JP.properties

message.hello=こんにちは

messages_zh_TW.properties

message.hello=你好


建立一個Spring配置類DemoWebConfig實作WebMvcConfigurer並註冊locale解析器LocaleResolver及locale攔截器LocaleChangeInterceptor用來依請求附帶的語系參數修改語系。

DemoWebConfig

package com.abc.demo.interceptor;

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.CookieLocaleResolver;
import org.springframework.web.servlet.i18n.LocaleChangeInterceptor;

import java.util.Locale;

@Configuration
public class DemoWebConfig implements WebMvcConfigurer {

    /**
     * 註冊locale解析器bean
     */
    @Bean
    public LocaleResolver localeResolver() {
        CookieLocaleResolver localeResolver = new CookieLocaleResolver();
        localeResolver.setDefaultLocale(Locale.US);
        return localeResolver;
    }

    /**
     * 註冊locale攔截器bean
     */
    @Bean
    public LocaleChangeInterceptor localeChangeInterceptor() {
        LocaleChangeInterceptor localeChangeInterceptor = new LocaleChangeInterceptor();
        localeChangeInterceptor.setParamName("lang"); // use request param "lang" to change locale setting
        return localeChangeInterceptor;
    }

    /**
     * 註冊locale截器
     */
    @Override
    public void addInterceptors(InterceptorRegistry registry) {
        registry.addInterceptor(localeChangeInterceptor());
    }

}

這邊使用的locale解析器為CookieLocaleResolver，簡單說就是把locale設定存在客戶端的cookie。此外還有SessionLocaleResolver則是存在session。

LocaleChangeInterceptor用來攔截請求，並根據setParamName()設定的參數名從請求參數取得locale。這邊設定的參數名稱為"lang"。

修改首頁index.html內容如下，新增三個連結皆導向hello.html模板並夾帶請求參數lang及不同的locale。

index.html

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Index</title>
</head>
<body>
    <p>Go to <a href="hello">hello.html</a></p>
    <p>Go to <a href="hello?lang=en_US">hello.html(en_US)</a></p>
    <p>Go to <a href="hello?lang=zh_TW">hello.html(zh_TW)</a></p>
    <p>Go to <a href="hello?lang=ja_JP">hello.html(ja_JP)</a></p>
</body>
</html>

hell.html模板修改如下。使用thymeleaf th:text="#{}"取得語系properties檔對應key的值。

屬性th:text用來解析thymeleaf expression並做為所屬html標籤（範例為<p>）的body內容。
#{message.hello}用來取得語系properties檔中message.hello的值。#{...}為thymeleaf的message expressions。

hello.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Hello Thymeleaf</title>
</head>
<body>

    <p th:text="#{message.hello}">hi</p>

</body>
</html>

到此完成配置，啟動專案開啟瀏覽器輸入http://localhost:8080/demo進入index.html，點選四個導向不同語系的hello.html連結會顯示對應語系properties的文字。


參考github。


沒有留言:

張貼留言