Добавить CSS и JS в Thymeleaf

1. Введение

В этом быстром учебнике мы узнаем, как использовать CSS и JavaScript в наших шаблонах Thymeleaf.

Во-первых, мы пройдемся по ожидаемой структуре папок, чтобы мы знали, куда поместить наши файлы. После этого мы увидим, что нам нужно сделать, чтобы получить доступ к этим файлам из шаблона Thymeleaf.

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

2. Настройка

Для того, чтобы использовать 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 . Давайте создадим статические/стили/cssandjs и статические/js/cssandjs папки для наших файлов CSS и JS, соответственно.

3.2. Добавление CSS

Давайте создадим простой файл CSS под названием главное.css в нашем статические/стили/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 под названием стильPage.html в нашем шаблоны/cssandjs папку для использования этих стилей:

Add CSS and JS to Thymeleaf

Carefully Styled Heading

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

Мы загружаем таблицу стилей с помощью тега ссылки со специальными th:href атрибут. Если мы использовали ожидаемую структуру каталога, нам нужно только указать путь ниже src/main/resources/static . В этом случае, это /стили/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 и добавляем

Теперь мы называем наш метод из нашего шаблона:

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

Прежде чем мы закончим, давайте построимся на этом примере немного, научись использовать данные из нашего контроллера Весна в нашем JavaScript.

Начнем с изменения нашего контроллера, чтобы узнать имя на нашей странице:

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

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

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

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

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

Теперь, когда мы сделали это, мы можем назвать нашу функцию JavaScript с помощью nameJs переменная:

4. Заключение

В этом коротком учебнике мы узнали, как применять CSS стиль и внешнюю функциональность JavaScript на наших страницах Thymeleaf. Мы начали с рекомендуемой структуры каталога и работали наш путь до вызова JavaScript с данными, предоставленными в нашем классе контроллера Весна.

Как всегда, код доступен более на GitHub .