خبر و ترفند روز

خبر و ترفند های روز را اینجا بخوانید!

Thymeleaf چیست و چگونه می توانید از آن در برنامه های بوت بهار استفاده کنید؟

ارشیا یوسفی ادیب ۶ شهریور, ۱۴۰۲ 6 min read

یاد بگیرید که چگونه این موتور قالب را در برنامه های Spring خود ادغام کنید.

Thymeleaf یک موتور قالب جاوا است. این قالب ها را هم برای برنامه های تحت وب و هم برای برنامه های مستقل توسعه می دهد. این موتور قالب از مفهوم الگوهای طبیعی برای تزریق منطق به طرح‌بندی شما، بدون به خطر انداختن طراحی شما استفاده می‌کند. با Thymeleaf، بر نحوه پردازش قالب هایی که ایجاد می کنید توسط یک برنامه کنترل خواهید داشت.

می توانید از Thymeleaf برای پردازش شش نوع قالب استفاده کنید: HTML، XML، Text، JavaScript، CSS و RAW. Thymeleaf به هر یک از قالب ها به عنوان یک حالت قالب اشاره می کند که HTML محبوب ترین قالب ایجاد شده در این موتور است.

راه اندازی Thymeleaf در برنامه شما

دو راه برای اضافه کردن Thymeleaf به برنامه Spring Boot وجود دارد. هنگام تولید دیگ بخار با ابزار Spring’s Initializr می توانید Thymeleaf را به عنوان یک وابستگی انتخاب کنید. همچنین می‌توانید بعداً آن را به فایل مشخصات ساخت خود در بخش وابستگی‌ها اضافه کنید.

اگر یکی از گزینه های پروژه Gradle را انتخاب کرده باشید، فایلی که حاوی وابستگی ها است، فایل build.gradle است. با این حال، اگر Maven را انتخاب کردید، آن فایل pom.xml است.

فایل pom.xml شما باید شامل بخش وابستگی زیر باشد:

<dependency>

     <groupId>org.springframework.boot</groupId>

     <artifactId>spring-boot-starter-thymeleaf</artifactId>

</dependency>

در حالی که فایل build.gradle شما باید شامل بخش وابستگی زیر باشد:

dependencies {

     implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'

}

نمونه برنامه مورد استفاده در مقاله در این مخزن GitHub موجود است و استفاده از آن تحت مجوز MIT برای شما رایگان است.

با افزودن Thymeleaf به برنامه Spring خود، به کتابخانه اصلی آن دسترسی خواهید داشت، که به شما امکان می دهد از گویش استاندارد Spring Thymeleaf استفاده کنید. گویش استاندارد Spring حاوی ویژگی ها و نحو منحصر به فردی است که می توانید از آنها برای افزودن ویژگی های مختلف به طرح بندی های خود استفاده کنید.

استفاده از برگ آویشن در بوت بهار

هنگام استفاده از Thymeleaf در برنامه Spring خود، اولین گام این است که سند الگوی خود را ایجاد کنید. برای این نمونه برنامه، سند الگو HTML است. همیشه باید قالب های Thymeleaf خود را در پوشه قالب های Spring Boot که در فایل منابع موجود است ایجاد کنید.

فایل home.html

<!DOCTYPE html>

<html xmlns:th="http://www.thymeleaf.org">

<head>

   <title>Generic Website</title>

</head>

<body></body>

</html>

الگوی Thymeleaf در بالا یک الگوی عمومی HTML5 است، با یک ویژگی خارجی (xmlns:th). هدف از ویژگی xmlns:th این است که محدوده ای را برای تمام ویژگی های th:* که در این سند HTML استفاده می کنید، ارائه دهد. سایر ویژگی ها و برچسب ها در قالب Thymeleaf تگ ها و ویژگی های سنتی HTML هستند.

مطلب مرتبط:   وب مستر چیست و واقعا چه کاری انجام می دهد؟

ایجاد هدر

یکی از اولین و مهمترین جنبه های هر وب سایت یا برنامه ای هدر است. این برنامه به شما می گوید که در مورد چه چیزی است (از طریق لوگو) و به شما کمک می کند تا به راحتی برنامه خود را هدایت کنید. یک هدر اصلی باید دارای یک لوگو و همچنین چندین لینک ناوبری باشد.

<!DOCTYPE html>

<html xmlns:th="http://www.thymeleaf.org">

 <body> 

   <div id="nav">

       <h1>LOGO</h1>

     <ul>

     <li> <a id="current">Home </a> </li>

     <li> <a>About</a> </li>

     <li> <a>Services</a> </li>

     </ul>

   </div>

 </body>

</html>

Thymeleaf به شما اجازه می دهد تا با استفاده از ویژگی th:insert، هدر بالا را به هر صفحه در برنامه وب خود اضافه کنید. ویژگی های th:insert و th:replace آنچه را که Thymeleaf مقادیر بیان قطعه می نامد را می پذیرند. عبارات قطعه به شما این امکان را می دهد که قطعات نشانه گذاری را در هر مکانی از طرح خود قرار دهید.

<div th:insert="~{header :: #nav}"></div>

درج نشانه گذاری بالا در بالای تگ home.html ، نشانه گذاری هدر را در بالای صفحه اصلی شما درج می کند. یک عبارت قطعه چندین مؤلفه دارد، دو جزء اختیاری و دو مؤلفه لازم است:

  • یک tilde (~)، که اختیاری است.
  • یک جفت بریس مجعد ({})، که اختیاری است.
  • نام قالبی که حاوی نشانه گذاری است که می خواهید درج کنید (header.html).
  • انتخابگر CSS نشانه گذاری که می خواهید درج کنید (#nav).

بنابراین، نشانه‌گذاری زیر همان نتیجه‌ی بالا را ایجاد می‌کند.

<div th:insert="header :: #nav"></div>

پر کردن بدنه قالب شما

Thymeleaf به شما امکان می دهد از پنج نوع عبارت در قالب های خود استفاده کنید:

  • بیان قطعه (~{…})
  • بیان پیام (#{…})
  • بیان URL پیوند (@{…})
  • عبارت متغیر (${…})
  • عبارت انتخابی متغیر (*{…})

یک عبارت پیام به شما اجازه می دهد تا قطعات خارجی متن را به طرح بندی خود اضافه کنید. با عبارات پیام، می توانید به راحتی متن را در طرح بندی خود جایگزین یا مجدداً استفاده کنید. هنگام استفاده از عبارت پیام، همیشه باید قطعات متن خارجی را در یک فایل .properties در زیر پوشه منابع قرار دهید.

مطلب مرتبط:   CSR، SSR، SSG، ISR: نحوه انتخاب پارادایم رندر مناسب

برای این نمونه برنامه، آن فایل messages.properties است که شامل قطعه متن زیر است:

placeholder.text=Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorem porro non quae obcaecati illo laboriosam.

باید توجه داشته باشید که قطعه متن (یا پیام) بالا دارای یک کلید منحصر به فرد (placeholder.text) است. این به این دلیل است که هر فایل پیام می تواند مجموعه ای از پیام های مختلف را شامل شود. بنابراین، برای درج یک پیام خاص در طرح خود به یک کلید نیاز دارید.

<p th:text="#{placeholder.text}"></p>

قرار دادن نشانه گذاری بالا در بدنه فایل HTML شما به طور موثری متن مکان نگهدار را به عنوان یک پاراگراف در دید شما نمایش می دهد. برخلاف بیان قطعه، هر جنبه ای از بیان پیام اجباری است. یک عبارت پیام نیازمند:

  • یک علامت عددی (#).
  • یک جفت بریس مجعد ({}).
  • کلیدی که پیامی را که می خواهید درج کنید نگه می دارد (placeholder.text).

سبک دادن به الگوی خود

یکی دیگر از فایل های مهم در پوشه منابع، فایل استاتیک است. این فایل فایل های CSS شما و هر تصویری را که قصد استفاده از آن را در برنامه خود دارید ذخیره می کند. برای پیوند دادن فایل CSS خارجی خود به قالب Thymeleaf HTML، باید از عبارت URL پیوند استفاده کنید. عبارت URL پیوند URL های نسبی و مطلق را پردازش می کند.

<link rel="stylesheet" th:href="@{/css/style.css}" />

درج نشانه گذاری بالا در فایل HTML به شما این امکان را می دهد که الگوی خود را با استفاده از یک فایل style.css استایل دهید. این فایل در پوشه css در قسمت استاتیک فایل منابع نمونه برنامه موجود است. همیشه باید عبارت URL لینک را به ویژگی th:href اختصاص دهید.

Thymeleaf چندین ویژگی دیگر را ارائه می دهد که می توانید از آنها برای بهبود طراحی چیدمان خود استفاده کنید. یکی از این ویژگی ها ویژگی th:style است که می توانید از آن برای اضافه کردن تصاویر به طرح بندی خود استفاده کنید.

<div id="showcase" th:style="'background: url(/images/background.jpg) no-repeat center center fixed;'">

نشانه گذاری بالا از ویژگی th:style برای اضافه کردن یک تصویر پس زمینه به بخش خاصی از طرح شما استفاده می کند. Thymeleaf بیش از صد ویژگی مختلف دارد که می توانید از آنها برای افزودن سبک و عملکرد به طرح بندی های خود استفاده کنید.

عبارت متغیر

عبارات متغیر محبوب ترین و احتمالاً پیچیده ترین عباراتی هستند که Thymeleaf استفاده می کند. عبارات متغیر Thymeleaf به شما امکان می دهد داده ها را از زمینه برنامه یا یک شی در برنامه جمع آوری کنید و آن داده ها را به قالب تزریق کنید. بسته به منبع داده‌ای که می‌خواهید به نمای خود ارائه دهید، دو نوع عبارت متغیر وجود دارد که می‌توانید استفاده کنید.

مطلب مرتبط:   درک زمینه ها در Go

عبارت متغیر اولیه از علامت دلار استفاده می کند و به شما امکان می دهد داده ها را از زمینه برنامه (که داده های مرتبط با وظایف مختلف در حال اجرا در برنامه است) جمع آوری کنید. به عنوان مثال، اگر می‌خواهید داده‌های کاربر را از یک مدال ضبط کنید، عبارت متغیر علامت دلار انتخاب عملی‌تری است. اگر پروژه نمونه را اجرا کنید و در مرورگر خود به http://localhost:8080/ بروید، مودال زیر را مشاهده خواهید کرد:

آویشن مودال

پس از بستن مدال یا ارسال نام، برنامه به صفحه اصلی هدایت می شود. در صفحه اصلی، یک وب‌سایت عمومی خواهید دید که کلمه «Welcome» را نمایش می‌دهد و به دنبال آن رشته‌ای را که به‌تازگی در حالت ارسال کرده‌اید، نمایش می‌دهد.

خروجی قالب آویشن

برنامه نمونه از عبارت متغیر برای تکمیل این فرآیند استفاده می کند. فرم ساده در فایل modal.html دارای نشانه گذاری زیر است:

<form id="form" th:action="@{/home}" method="post">

   <input type="text" name="userName"class="form-control" placeholder="Your Name" />

   <button type="submit" class="btn">Submit</button>

</form>

هنگامی که کاربر فرم را ارسال می کند، ویژگی th:action را فعال می کند که دارای مقدار URL پست است که می توانید آن را در کلاس WebController بیابید.

@PostMapping("/home")

   public String processName(String userName, Model model) {

       model.addAttribute("userName", userName);

       return "home";

   }

متد processName() رشته ای را که کاربر به modal می دهد می پذیرد، سپس آن رشته را به متغیری به نام userName اختصاص می دهد. با استفاده از عبارت متغیر، کنترلر سپس متغیر نام کاربری را به طرح تزریق می کند.

<h1>Welcome <span th:text="${userName}"></span>!</h1>

عبارت انتخاب متغیر از یک ستاره استفاده می کند و زمانی که با برنامه های پیچیده تر سر و کار دارید بسیار مفید است. برای مثال، برنامه‌ای که کاربران را ملزم به ورود به سیستم می‌کند، می‌تواند از عبارت انتخابی استفاده کند. می توانید نام کاربری را از شی کاربر جمع آوری کرده و آن را در طرح قرار دهید.

گزینه های الگو و استایل جایگزین

اگرچه Thymeleaf گزینه الگوی محبوب‌تری برای برنامه‌های Spring Boot است، چندین گزینه دیگر نیز وجود دارد که به همان اندازه قابل اجرا هستند. اینها عبارتند از JavaServer Pages (JSP)، قالب‌های مبتنی بر Groovy، قالب‌های FreeMarker و قالب‌های Mustache. علاوه بر ایجاد یک استایل CSS سفارشی، می‌توانید از یک چارچوب CSS نیز برای استایل دادن به طرح‌بندی خود استفاده کنید.

Tags: