Додайте CSS та JS до Thymeleaf

1. Вступ

У цьому короткому навчальному посібнику ми дізнаємось, як використовувати CSS та JavaScript у наших шаблонах Thymeleaf.

Спочатку ми переглянемо очікувану структуру папок, щоб знати, куди зберігати наші файли. Після цього ми побачимо, що нам потрібно зробити, щоб отримати доступ до цих файлів із шаблону Thymeleaf.

Ми почнемо з додавання стилю CSS на нашу сторінку, а потім перейдемо до додавання деяких функцій JavaScript.

2. Налаштування

Для того, щоб використовувати Thymeleaf у нашому додатку, додамо Spring Boot Starter для Thymeleaf до нашої конфігурації Maven:

 org.springframework.boot spring-boot-starter-thymeleaf 2.2.6.RELEASE 

3. Основний приклад

3.1. Структура каталогу

Нагадуємо, Thymeleaf - це бібліотека шаблонів, яку можна легко інтегрувати з програмами Spring Boot. За замовчуванням Thymeleaf очікує від нас розміщення цих шаблонів у папці src / main / resources / templates . Ми можемо створювати вкладені папки, тому для цього прикладу ми будемо використовувати підпапку з назвою cssandjs .

Для файлів CSS та JavaScript типовим каталогом є src / main / resources / static . Давайте створимо папки static / styles / cssandjs та static / js / cssandjs для наших файлів CSS та JS відповідно.

3.2. Додавання CSS

Давайте створимо простий CSS-файл з назвою main.css у нашій папці static / styles / cssandjs і визначимо кілька базових стилів:

h2 { font-family: sans-serif; font-size: 1.5em; text-transform: uppercase; } strong { font-weight: 700; background-color: yellow; } p { font-family: sans-serif; }

Далі, давайте створимо шаблон Thymeleaf з назвою styledPage.html у нашій папці templates / cssandjs, щоб використовувати ці стилі:

    Add CSS and JS to Thymeleaf    

Carefully Styled Heading

This is text on which we want to apply very special styling.

Ми завантажуємо таблицю стилів за допомогою тегу посилання з особливим атрибутом thymeleaf th: href . Якщо ми використовували очікувану структуру каталогів, нам потрібно лише вказати шлях нижче src / main / resources / static . У цьому випадку це /styles/cssandjs/main.css . {/ Стилі / cssandjs / main.css} @ синтаксис спосіб Thymeleaf в робити URL посилання.

Якщо ми запустимо наш додаток, ми побачимо, що наші стилі були застосовані:

3.3. Використання JavaScript

Далі ми дізнаємось, як додати файл JavaScript на нашу сторінку Thymeleaf.

Почнемо з додавання JavaScript у файл у src / main / resources / static / js / cssandjs / actions.js :

function showAlert() { alert("The button was clicked!"); }

Потім ми повертаємось до нашого шаблону Thymeleaf і додаємо a тег, який вказує на наш файл JavaScript:

Тепер ми викликаємо наш метод із нашого шаблону:

Show Alert

Коли ми запустимо нашу програму та натиснемо кнопку Показати сповіщення , ми побачимо вікно попередження.

Перш ніж завершувати справи, давайте трохи побудуємо на цьому прикладі, навчившись використовувати дані нашого контролера Spring у нашому JavaScript.

Почнемо із модифікації нашого контролера, щоб надати назву нашій сторінці:

@GetMapping("/styled-page") public String getStyledPage(Model model) { model.addAttribute("name", "Baeldung Reader"); return "cssandjs/styledPage"; }

Далі, давайте додамо функцію до нашого файлу actions.js, щоб використовувати це ім’я у сповіщенні:

function showName(name) { alert("Here's the name: " + name); }

Нарешті, для того, щоб викликати нашу функцію з даними нашого контролера, нам потрібно використовувати вбудовування сценарію. Тож давайте помістимо значення імені в локальну змінну JavaScript:

 var nameJs = /*[[${name}]]*/; 

Роблячи це, ми створили локальну змінну JavaScript, яка містить значення моделі імені з нашого елемента керування, яке ми можемо потім використовувати в нашому JavaScript на решті сторінки.

Тепер, коли ми це зробили, ми можемо викликати нашу функцію JavaScript за допомогою змінної nameJs :

Show Name

4. Висновок

У цьому короткому навчальному посібнику ми дізналися, як застосувати стилістику CSS та зовнішню функціональність JavaScript до наших сторінок Thymeleaf. Ми почали з рекомендованої структури каталогів і доклали всіх зусиль, щоб викликати JavaScript із даними, наданими в класі Spring Spring.

Як завжди, код доступний на GitHub.