1. Обзор

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

Если вы нов к Thymeleaf, то вы можете проверить другие статьи на этом месте как это введение, также, как это одно о версии 3.0 двигателя.

2. Мейвен зависимостей

Нам понадобится несколько зависимостей, чтобы включить Thymeleaf:


    org.thymeleaf
    thymeleaf
    3.0.11.RELEASE


    org.thymeleaf
    thymeleaf-spring5
    3.0.11.RELEASE

Последняя версия тимьяновый и тимьян-весна5 можно найти на Maven Central.

3. Весенний проект

3.1. Весенняя конфигурация MVC

Чтобы включить Thymeleaf и установить шаблон суффикс, мы должны настроить MVC с разрешением представления и решателем шаблонов .

Мы также завестим каталог для некоторых статических ресурсов:

@Bean
public ViewResolver htmlViewResolver() {
    ThymeleafViewResolver resolver = new ThymeleafViewResolver();
    resolver.setTemplateEngine(templateEngine(htmlTemplateResolver()));
    resolver.setContentType("text/html");
    resolver.setCharacterEncoding("UTF-8");
    resolver.setViewNames(ArrayUtil.array("*.html"));
    return resolver;
}

private ITemplateResolver htmlTemplateResolver() {
    SpringResourceTemplateResolver resolver
      = new SpringResourceTemplateResolver();
    resolver.setApplicationContext(applicationContext);
    resolver.setPrefix("/WEB-INF/views/");
    resolver.setCacheable(false);
    resolver.setTemplateMode(TemplateMode.HTML);
    return resolver;
}

@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
    registry.addResourceHandler("/resources/**", "/css/**")
      .addResourceLocations("/WEB-INF/resources/", "/WEB-INF/css/");
}

Обратите внимание, что если мы используем Spring Boot, эта конфигурация не может быть необходимой, если нам не нужно применять наши собственные настройки.

3.2. Контроллер

В этом случае контроллер является просто средством для просмотров. В каждом представлении показан другой сценарий использования фрагмента.

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

@Controller
public class FragmentsController {

    @GetMapping("/fragments")
    public String getHome() {
        return "fragments.html";
    }

    @GetMapping("/markup")
    public String markupPage() {
        return "markup.html";
    }

    @GetMapping("/params")
    public String paramsPage() {
        return "params.html";
    }

    @GetMapping("/other")
    public String otherPage(Model model) {
        model.addAttribute("data", StudentUtils.buildStudents());
        return "other.html";
    }
}

Обратите внимание, что имена представлений должны содержать “.html” суффикс из-за того, как мы настроили наш решателе. Мы также указать суффикс, когда мы ссылаемся на имена фрагментов.

4. Взгляды

4.1. Простое включение фрагмента

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

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

Существует три основных способа включения содержимого фрагмента:

вставка – вставляет содержимое внутри тега
заменить – заменяет текущий тег тегом, определяющим фрагмент
включают в себя – это устаревший, но он все еще может появиться в устаревшем коде

Следующий пример, фрагменты.html, показывает использование всех трех способов. Этот шаблон Thymeleaf добавляет фрагменты в голову и тело документа:

Thymeleaf Fragments: home

Go to the next page to see fragments in action

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

Thymeleaf Fragments sample

Go to the next page to see fragments in action

This is another sidebar

содержит только таблицу стилей, но мы могли бы применить другие инструменты, такие как Bootstrap, jquery, или Foundation, либо непосредственно, либо с помощью Webjars.

Обратите внимание, что все многоразовые теги этого шаблона имеют атрибут th:фрагмент , но в следующем мы увидим, как включить любую другую часть страницы.

После включения рендеринга и фрагментов возвращенный контент:

Thymeleaf Fragments: home

Thymeleaf Fragments sample

Go to the next page to see fragments in action

4.2. Селекторы Markup для фрагментов

Одна из больших вещей о Фрагменты Thymeleaf является то, что мы также можем захватить любую часть шаблона только с помощью простых селекторов , через классы, идентификаторы, или просто теги.

Эта страница, например, включает в себя некоторые компоненты из генерал.html файл: в сторону блок и div.another блок:

4.3. Параметрицированные фрагменты

Мы можем передать параметры в фрагмент для того, чтобы изменить какую-то конкретную его часть. Для этого фрагмент должен быть определен как вызов функции, где мы должны объявить список параметров.

В этом примере мы определяем фрагмент для общего поля формы:


    
         Field

И вот простое использование этого фрагмента, где мы передавайте параметры к нему:

И вот как будет выглядеть возвращенное поле:


    
         Name

4.4. Выражения включения фрагментов

Фрагменты Thymeleaf предлагают другие интересные варианты, такие как поддержка условные выражения, чтобы определить, следует ли включать фрагмент .

Использование Элвис оператор с любым из выражений, предоставляемых Thymeleaf (безопасность, строки и коллекции, например), мы можем загружать различные фрагменты.

Например, мы можем определить этот фрагмент с некоторым содержанием, которое мы покажем в зависимости от данного состояния. Это может быть файл, содержащий различные виды блоков:

Data received
No data

И вот как мы могли бы загрузить их с выражением:

Чтобы узнать больше о выражениях Thymeleaf, проверьте нашу статью здесь .

4.5. Гибкие макеты

Следующий пример также показывает два других интересных использования фрагментов для сделать таблицу с данными . Это многоразовый фрагмент таблицы с двумя важными частями: заголовком таблицы, который может быть изменен, и телом, в котором отображаются данные:


0	Name

Когда мы хотим использовать эту таблицу, мы можем передать наш собственный заголовок таблицы с помощью поля функция. Заголовок ссылается на класс myFields . Тело таблицы загружается путем передачи данных в качестве параметра к таблицаБоди функция:

И вот как будет выглядеть последняя страница:


    
        Thymeleaf Fragments sample
    
    Data received
    
        
            

                Id
                Name
            
        
        
            
                1001
                John Smith
            
            
                1002
                Jane Williams
            
        
    
    
        Fragments Index |
        Markup inclussion |
        Fragment params |
        Other

Id	Name
1001	John Smith
1002	Jane Williams

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

В этой статье мы показали, как повторно использовать компоненты представления с помощью Thymeleaf Fragments, мощного инструмента, который может упростить управление шаблонами.

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

Если вы хотите узнать о других функциях Thymeleaf, вы должны обязательно взглянуть на нашу статью о Layout Диалекты .

Как всегда, полный код реализации примера доступен более на GitHub .