0

Как объединить несколько 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>
3
  • А чем директива replace не устраивает?
    – Roman C
    23 фев 2019 в 21:07
  • @RomanC судя по коду, потребуется использовать 4 replace... 23 фев 2019 в 21:11
  • Я вот думаю, можно ли как-то добавить main в единый файл header-footer (заменяя только класс right-side)? вместо того, чтобы собирать два файла в main? Я понимаю, что можно, но как тогда прописать команду, что зависимо от страницы, показывать разные дивы с классом right-side 23 фев 2019 в 21:13

1 ответ 1

0

Оффтопик:
Искал неделю ответ и в итоге не нашел лучше, чем просто использовать 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;
    }

}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.