Объединение нескольких html в Thymeleaf

112

22 октября 2019, 19:40

Как объединить несколько html файлов в Thymeleaf? Я реализовывал данный код через php с помощью include_once "header.html";, но в thymeleaf подобной конструкции не нашел.

У меня есть 3 файла: header.html, main.html, footer.html. Надо вставить файлы header и footer в main.

header.html:

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Общая информация</title>
    <link rel="stylesheet" th:href="@{../css/account_css.css}">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script th:src="@{/js/ajax-change.js}"></script>
</head>
<body>
<nav th:replace="include/navigation.html :: nav"></nav>

<div class="top-part">
    <span class="top-part-title">Dashboard</span>
    <span class="top-part-description">2500+ рецептов</span>
</div>
<div class="main-split">
    <div class="left-side">
        <div>
            <a href="" class="current-tab" data-target="general">Общая информация</a>
            <a href="" data-target="notifications">Настройка увидомлений</a>
            <a href="">Ваша следующая доставка</a>
            <a href="">Ваша продуктовая корзина</a>
            <a href="">История покупок</a>
        </div>
    </div>

main.html:

<div class="right-side">
        <span class="rs-account-name" th:text="${'Добро пожаловать, ' + user.name + user.surname}"></span>
        <!-- Личная информация -->
        <div class="rs-block">
            <div class="rs-block-top">
                <span class="rs-block-title">Личная информация</span>
                <span class="rs-edit">Редактировать</span>
            </div>

            <div class="rs-block-main">
                <span>Name:</span>
                <span th:text="${user.name + user.surname}"></span>
            </div>
            <div class="rs-block-main">
                <span>Email:</span>
                <span th:text="${user.email}"></span>
            </div>
            <div class="rs-block-main">
                <span>Telephone 1:</span>
                <span th:text="${user.phoneNumber1}"></span>
            </div>
            <div class="rs-block-main">
                <span>Telephone 2:</span>
                <span th:text="${user.phoneNumber2}"></span>
            </div>
            <div class="rs-block-main personal-code">
                <span>Личный код:</span>
                <span th:text="${user.id}"></span>
            </div>
        </div>

        <!-- Адрее -->
        <div class="rs-block">
            <div class="rs-block-top">
                <span class="rs-block-title">Адрес</span>
                <span class="rs-edit">Редактировать</span>
            </div>

            <div class="rs-block-main">
                <span>Address line 1:</span>
                <span>Pikk tn 78</span>
            </div>
            <div class="rs-block-main">
                <span>Address line 2:</span>
                <span>Vanalinn</span>
            </div>
            <div class="rs-block-main">
                <span>Address line 3:</span>
                <span>Loster 20</span>
            </div>
            <div class="rs-block-main">
                <span>City:</span>
                <span>Tallinn</span>
            </div>
            <div class="rs-block-main">
                <span>Post code:</span>
                <span th:text="${user.postcode}"></span>
            </div>
        </div>
    </div>
</div>

footer.html (футор будет еще доделан):

</body>
</html>

Answer 1

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

Идея такова: создаем файл, в котором будет header и footer (назовем его файл-шаблон), а пространтво между ними, которое будет <div>, будет изменяться в зависимости от того, на какой странице нахожусь.

Как выглядит файл-шаблон:

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Общая информация</title>
    <link rel="stylesheet" th:href="@{../css/account_css.css}">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<nav th:replace="include/navigation.html :: nav"></nav>
<div class="top-part">
    <span class="top-part-title">Dashboard</span>
    <span class="top-part-description">2500+ рецептов</span>
</div>
<div class="main-split">
    <div class="left-side">
        <div>
            <a href="/account/general"data-target="general">Общая информация</a>
            <a href="/account/notifications" data-target="notifications">Настройка увидомлений</a>
            <a href="">Ваша следующая доставка</a>
            <a href="">Ваша продуктовая корзина</a>
            <a href="">История доставок</a>
        </div>
    </div>
<!-- здесь заканчивается header -->
    <div style="width: 60%;" th:if="${status} eq 'general'" th:insert="~{account/include/general.html :: div}"></div>
    <div style="width: 60%;" th:if="${status} eq 'notifications'" th:insert="~{account/include/notifications.html :: div}"></div>
<!-- здесь начинается footer -->
</div>
</body>
</html>

Как выглядит, допустим, general.html:

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="right-side">
   <span class="rs-account-name">Имя Фамилия</span>
</div>
</body>
</html>

th:replace нужен нам для "вставки кода из другого файла".
th:if - это условие (логично). В зависимости от двух возможных исходов событий, див, с даннным условием, либо будет показываться, либо нет. То есть, если я захочу загрузить /account/general, status у меня будет иметь значение general (об этом я расскажу дальше), то из данных двух дивов с условиями значение true будет только у дива с th:if="${status} eq 'general'".

Переходим к контроллеру страницы. Вот как я его реализовал (я знаю, что у меня есть дубликация кода, но я не знаю как от нее избавиться.):

@Controller
public class AdminController {
    @Autowired
    private UserService userService;
    @GetMapping
    @RequestMapping("/account/general")
    public ModelAndView general(){
        ModelAndView modelAndView = new ModelAndView();
        // Вот он статус. Т.к. эта часть относится к станице general, то
        // и status будет получать значение general
        modelAndView.addObject("status", "general");
        modelAndView.setViewName("account/account");
        return modelAndView;
    }

    @GetMapping
    @RequestMapping("/account/notifications")
    public ModelAndView notifications(){
        ModelAndView modelAndView = new ModelAndView();
        // Вот он статус. Т.к. эта часть относится к станице notifications, то
        // и status будет получать значение notifications
        modelAndView.addObject("status", "notifications");
        modelAndView.setViewName("account/account");
        return modelAndView;
    }
}