การทำให้เป็นสากลของไซต์คงที่ JBake ด้วย Thymeleaf

@startuml
left to right direction
skinparam packageStyle rectangle

actor "ผู้เขียน" as author
actor "ผู้อ่าน FR" as reader_fr
actor "ผู้อ่านภาษาอังกฤษ" as reader_en

rectangle "เว็บไซต์ JBake หลายภาษา" {
  usecase "เขียนบทความ FR" as UC1
  usecase "เขียนบทความเป็นภาษาอังกฤษ" as UC2
  usecase "ตั้งค่าข้อความ i18n" as UC3
  usecase "สร้างเว็บไซต์" as UC4
  usecase "อ่านบทความ FR" as UC5
  usecase "อ่านบทความ EN" as UC6
  usecase "เปลี่ยนภาษา" as UC7
  usecase "ดูการแปลที่พร้อมใช้งาน" as UC8
}

author --> UC1
author --> UC2
author --> UC3
author --> UC4

reader_fr --> UC5
reader_fr --> UC7
reader_fr --> UC8

reader_en --> UC6
reader_en --> UC7
reader_en --> UC8

UC1 ..> UC4 : <<include>>
UC2 ..> UC4 : <<include>>
UC3 ..> UC4 : (empty)
UC5 ..> UC8 : <<ขยาย>>
UC6 ..> UC8 : <<extend>>
@enduml

@startuml
@startsalt
{
{T
+ projet-jbake
++ content
+++ blog
++++ 2024
+++++ fr
++++++ article1.adoc
++++++ article2.adoc
+++++ en
++++++ article1.adoc
++++++ article2.adoc
++++ 2025
+++++ fr
++++++ guide-i18n.adoc
+++++ en
++++++ i18n-guide.adoc
++ templates
+++ post.html
+++ index.html
+++ index_en.html
+++ messages.properties
+++ messages_fr.properties
+++ messages_en.properties
++ assets
+++ css
+++ js
+++ img
++ jbake.properties
++ output
+++ fr
++++ blog
+++++ 2025
++++++ guide-i18n.html
+++ en
++++ blog
+++++ 2025
++++++ i18n-guide.html
}
}
@endsalt
@enduml

@startuml
skinparam componentStyle rectangle

package "แหล่งที่มา" {
  folder "content/blog/2025/" {
    folder "fr/" as content_fr {
      [article1.adoc]
      [article2.adoc]
    }
    folder "(Empty)" as content_en {
      [article1.adoc] as article1_en
      [article2.adoc] as article2_en
    }
  }

  folder "แม่แบบ/" {
    [post.html]
    [index.html]
    [index_en.html]
  }

  folder "ข้อความ/" {
    [messages_fr.properties]
    [messages_en.properties]
  }

  [jbake.properties]
}

package "JBake เครื่องยนต์" {
  [Parser AsciiDoc] as parser
  [Template Engine\nThymeleaf] as thymeleaf
  [Generator] as generator
  [I18n Resolver] as i18n
}

package "ไซต์ที่สร้างขึ้น" {
  folder "fr/" {
    folder "blog/2025/" as blog_fr {
      [article1.html]
      [article2.html]
    }
  }

  folder "(Empty)" {
    folder "blog/2025/" as blog_en {
      [article1.html] as article1_html_en
      [article2.html] as article2_html_en
    }
  }
}

content_fr --> parser
content_en --> parser
parser --> generator

templates --> thymeleaf
messages --> i18n
i18n --> thymeleaf
thymeleaf --> generator
jbake.properties --> generator

generator --> blog_fr
generator --> blog_en
@enduml

src/jbake/templates/
├── messages.properties        # Fallback par défaut
├── messages_fr.properties     # Français
├── messages_en.properties     # Anglais
└── messages_de.properties     # Allemand

# Navigation
nav.home=Accueil
nav.blog=Blog
nav.about=À propos
nav.contact=Contact

# Articles
article.readmore=Lire la suite
article.published=Publié le
article.tags=Étiquettes
article.also.available=Également disponible en

# Interface
site.title=Mon Blog Technique
site.description=Partage de connaissances et expériences
footer.copyright=© 2025 Tous droits réservés
search.placeholder=Rechercher un article...

# Navigation
nav.home=Home
nav.blog=Blog
nav.about=About
nav.contact=Contact

# Articles
article.readmore=Read more
article.published=Published on
article.tags=Tags
article.also.available=Also available in

# Interface
site.title=My Tech Blog
site.description=Sharing knowledge and experiences
footer.copyright=© 2025 All rights reserved
search.placeholder=Search articles...

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title th:text="#{site.title}">Mon Blog</title>
    <meta name="description" th:content="#{site.description}" />
</head>
<body>
    <nav>
        <a th:href="@{/}" th:text="#{nav.home}">Accueil</a>
        <a th:href="@{/blog/}" th:text="#{nav.blog}">Blog</a>
        <a th:href="@{/about.html}" th:text="#{nav.about}">À propos</a>
    </nav>

    <footer>
        <p th:text="#{footer.copyright}">Copyright</p>
    </footer>
</body>
</html>

@startuml
actor Auteur
participant JBake
participant "AsciiDoc\nParser" as parser
participant "Thymeleaf\nEngine" as thymeleaf
participant "I18n\nResolver" as i18n
database "messages_*.properties" as messages

Auteur -> JBake: jbake -b
activate JBake

JBake -> parser: อ่าน article.fr.adoc
activate parser
parser --> JBake: เนื้อหา + เมตาดาต้า\n(lang=fr, article-id=xyz)
deactivate parser

JBake -> parser: อ่าน article.en.adoc
activate parser
parser --> JBake: Contenu + métadonnées\n(lang=en, article-id=xyz)
deactivate parser

JBake -> thymeleaf: สร้างหน้า FR
activate thymeleaf

thymeleaf -> i18n: แก้ปัญหา #{nav.home}
activate i18n
i18n -> messages: อ่าน messages_fr.properties
messages --> i18n: "หน้าแรก"
i18n --> thymeleaf: "หน้าแรก"
deactivate i18n

thymeleaf -> JBake: ค้นหาการแปลn(article-id=xyz, lang!=fr)
JBake --> thymeleaf: article.en.html พบ

thymeleaf --> JBake: /fr/blog/article.html
deactivate thymeleaf

JBake -> thymeleaf: สร้างหน้าเป็นภาษาอังกฤษ
activate thymeleaf

thymeleaf -> i18n: แก้ปัญหา #{nav.home}
activate i18n
i18n -> messages: อ่าน messages_en.properties
messages --> i18n: "Home"
i18n --> thymeleaf: "Home"
deactivate i18n

thymeleaf -> JBake: ค้นหาการแปล\n(article-id=xyz, lang!=en)
JBake --> thymeleaf: article.fr.html พบ

thymeleaf --> JBake: /en/blog/article.html
deactivate thymeleaf

JBake --> Auteur: ไซต์ที่ถูกสร้าง
deactivate JBake
@enduml

# Locale par défaut
thymeleaf.locale=fr

# Encodage
template.encoding=UTF-8

@startuml
start

:อ่าน jbake.properties;
:การตั้งค่าอุปกรณ์ชาร์จ i18n;

partition "สำหรับไฟล์แต่ละไฟล์ AsciiDoc" {
  :อ่านเมตาดาต้า\n(:jbake-lang:, :jbake-article-id:);
  :ทำการพาร์สเนื้อหา AsciiDoc;
  :บันทึกลงในหน่วยความจำด้วยภาษา;
}

partition "สำหรับเทมเพลตแต่ละอัน" {
  :โหลดเทมเพลต Thymeleaf;
  :ระบุภาษาเป้าหมาย;
  :โหลดmessages_{lang}.properties;

  partition "การกรองเนื้อหา" {
    :กรองบทความตามภาษา;
    :จัดกลุ่มการแปล\nตาม article-id;
  }

  :ใช้เทมเพลตพร้อมกับ i18n;
  :สร้าง HTML ใน /{lang}/;
}

:คัดลอกทรัพยากรสถิต;
:สร้างแผนที่เว็บไซต์หลายภาษา;
:สร้างกระแส RSS ต่อภาษา;

stop
@enduml

content/blog/
├── 2024/
│   ├── fr/
│   │   ├── introduction-jbake.adoc
│   │   ├── guide-thymeleaf.adoc
│   │   └── astuces-asciidoc.adoc
│   └── en/
│       ├── introduction-jbake.adoc
│       ├── thymeleaf-guide.adoc
│       └── asciidoc-tips.adoc
└── 2025/
    ├── fr/
    │   └── internationalisation-jbake.adoc
    └── en/
        └── jbake-internationalization.adoc

= Internationalisation d'un site statique JBake
:jbake-type: post
:jbake-status: published
:jbake-date: 2025-10-20
:jbake-lang: th
:jbake-article-id: jbake-i18n-thymeleaf
:jbake-tags: jbake, thymeleaf, i18n
:jbake-description: Guide pour mettre en place l'i18n avec JBake

= Internationalizing a JBake Static Site
:jbake-type: post
:jbake-status: published
:jbake-date: 2025-10-20
:jbake-lang: th
:jbake-article-id: jbake-i18n-thymeleaf
:jbake-tags: jbake, thymeleaf, i18n
:jbake-description: Guide to implement i18n with JBake

# Pattern d'URL avec langue
post.permalink.pattern=:lang/blog/:year/:name.html

# Langue par défaut
site.default.lang=fr

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title th:text="${content.title}">Article</title>
</head>
<body>
    <article>
        <header>
            <h1 th:text="${content.title}">Titre</h1>

            <div class="article-meta">
                <time th:text="${#dates.format(content.date, 'dd MMMM yyyy')}"
                      th:attr="datetime=${#dates.format(content.date, 'yyyy-MM-dd')}">
                    Date
                </time>

                <!-- Sélecteur de traductions -->
                <div class="translations" th:if="${content['article-id']}">
                    <span th:text="#{article.also.available}">Aussi disponible en :</span>
                    <ul class="language-list">
                        <li th:each="post : ${published_posts}"
                            th:if="${post['article-id'] == content['article-id'] and post.lang != content.lang}">
                            <a th:href="${post.uri}"
                               th:text="${post.lang.toUpperCase()}">
                                LANG
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </header>

        <div class="content" th:utext="${content.body}">
            Contenu de l'article
        </div>

        <footer class="article-footer">
            <div class="tags" th:if="${content.tags}">
                <span th:text="#{article.tags}">Étiquettes :</span>
                <span th:each="tag : ${content.tags}">
                    <a th:href="@{/tags/{tag}.html(tag=${tag})}"
                       th:text="${tag}">tag</a>
                </span>
            </div>
        </footer>
    </article>
</body>
</html>

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title th:text="#{site.title}">Mon Blog</title>
</head>
<body>
    <main>
        <h1 th:text="#{nav.blog}">Blog</h1>

        <div class="articles-list">
            <article th:each="post : ${published_posts}"
                     th:if="${post.lang == 'fr'}">
                <h2>
                    <a th:href="${post.uri}" th:text="${post.title}">Titre</a>
                </h2>
                <time th:text="${#dates.format(post.date, 'dd MMMM yyyy')}">
                    Date
                </time>
                <p th:text="${post.description}">Description</p>
                <a th:href="${post.uri}" th:text="#{article.readmore}">
                    Lire la suite
                </a>
            </article>
        </div>
    </main>
</body>
</html>

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title th:text="#{site.title}">My Blog</title>
</head>
<body>
    <main>
        <h1 th:text="#{nav.blog}">Blog</h1>

        <div class="articles-list">
            <article th:each="post : ${published_posts}"
                     th:if="${post.lang == 'en'}">
                <h2>
                    <a th:href="${post.uri}" th:text="${post.title}">Title</a>
                </h2>
                <time th:text="${#dates.format(post.date, 'dd MMMM yyyy')}">
                    Date
                </time>
                <p th:text="${post.description}">Description</p>
                <a th:href="${post.uri}" th:text="#{article.readmore}">
                    Read more
                </a>
            </article>
        </div>
    </main>
</body>
</html>

@startuml
start

:ผู้ใช้เข้าถึงเว็บไซต์;

if (Langue préférée ?) then (FR)
  :แสดง /index.html;
  :แสดงรายการบทความ FR;
else (EN)
  :แสดง /en/index.html;
  :แสดงรายการบทความ EN;
endif

:ผู้ใช้คลิกที่บทความ;

:แสดงบทความ\nกับข้อมูลเมตา;

if (Traductions disponibles ?) then (oui)
  :แสดงตัวเลือก\nการแปล;

  if (Changement de langue ?) then (oui)
    :เปลี่ยนเส้นทางไปยัง\nการแปล;
    :แสดงบทความ\nในภาษาใหม่;
  else (non)
    :อ่านต่อ;
  endif
else (non)
  :อ่านต่อ;
endif

stop
@enduml

<nav class="language-switcher">
    <a href="/index.html"
       th:classappend="${content.lang == 'fr'} ? 'active'"
       title="Français">
        🇫🇷 FR
    </a>
    <a href="/en/index.html"
       th:classappend="${content.lang == 'en'} ? 'active'"
       title="English">
        🇬🇧 EN
    </a>
</nav>

.language-switcher {
    display: flex;
    gap: 1rem;
    padding: 0.5rem;
    background: #f5f5f5;
    border-radius: 4px;
}

.language-switcher a {
    padding: 0.5rem 1rem;
    text-decoration: none;
    color: #333;
    border-radius: 4px;
    transition: background 0.2s;
}

.language-switcher a:hover {
    background: #e0e0e0;
}

.language-switcher a.active {
    background: #007bff;
    color: white;
}

.translations {
    margin: 1rem 0;
    padding: 1rem;
    background: #f8f9fa;
    border-left: 4px solid #007bff;
}

.language-list {
    display: inline-flex;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.language-list li::after {
    content: "•";
    margin-left: 0.5rem;
}

.language-list li:last-child::after {
    content: "";
}

:jbake-tags: java, spring-boot, microservices

# Version française
:jbake-tags: java, spring-boot, microservices

# Version anglaise
:jbake-tags: java, spring-boot, microservices

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
        xmlns:xhtml="http://www.w3.org/1999/xhtml"
        xmlns:th="http://www.thymeleaf.org">
    <url th:each="post : ${published_posts}">
        <loc th:text="${config.site_host + post.uri}">URL</loc>
        <lastmod th:text="${#dates.format(post.date, 'yyyy-MM-dd')}">Date</lastmod>

        <!-- Liens alternatifs pour les traductions -->
        <xhtml:link th:each="translation : ${published_posts}"
                    th:if="${translation['article-id'] == post['article-id'] and translation.lang != post.lang}"
                    rel="alternate"
                    th:attr="hreflang=${translation.lang},href=${config.site_host + translation.uri}" />
    </url>
</urlset>

@startuml
node "เครื่องพัฒนา" {
  artifact "ไฟล์ซอร์ส" {
    folder "เนื้อหา/"
    folder "เทมเพลต/"
    folder "แอสเซ็ท/"
  }

  component "JBake CLI" as jbake

  Sources --> jbake : jbake -b
}

node "เซิร์ฟเวอร์บิลด์\n(CI/CD)" {
  component "GitHub การดำเนินการ\nou GitLab CI" as ci

  jbake --> ci : ผลัก
}

cloud "CDN / โฮสติ้ง" {
  node "เซิร์ฟเวอร์เว็บสถิต" {
    artifact "ไซต์ที่สร้างขึ้น" {
      folder "/fr/blog/"
      folder "/en/blog/"
      folder "/assets/"
    }
  }
}

ci --> "ไซต์ที่สร้างขึ้น" : déploiement

actor "ผู้อ่าน" as users

users --> "เซิร์ฟเวอร์เว็บสถิต" : HTTPS
@enduml