SpringBoot + Thymeleaf: включить фрагменты

У меня есть этот фрагмент:

<!DOCTYPE html>
<html lang = "en" xmlns:th = "http://www.thymeleaf.org">

<head th:fragment = "common-header-imports">

    <meta charset = "utf-8">
    <meta content = "width=device-width, initial-scale=1.0" name = "viewport"

    <!-- Other meta tags -->

    <meta content = "" name = "ZRTHEMES"/>


    <!-- Google Fonts -->
    <link href = "https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,600;1,700&amp;family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&amp;family=Raleway:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&amp;display=swap"
          rel = "stylesheet">
    <link rel = "preconnect" href = "https://fonts.googleapis.com">
    <link rel = "preconnect" href = "https://fonts.gstatic.com" crossorigin = "">
    <link href = "https://fonts.googleapis.com/css2?family=Oswald:wght@500&amp;display=swap" rel = "stylesheet">
    <link href = "https://fonts.googleapis.com/css2?family=Poppins:wght@300;400&amp;display=swap" rel = "stylesheet">
    <!-- Vendor CSS Files -->
    <link href = "assets/vendor/aos/aos.css" rel = "stylesheet">
    <link href = "assets/stylesheets/font-awesome.min.css" rel = "stylesheet">
    <link href = "assets/vendor/swiper/swiper-bundle.min.css" rel = "stylesheet">
    <link href = "assets/vendor/glightbox/css/glightbox.min.css" rel = "stylesheet">
    <link href = "assets/vendor/bootstrap/css/bootstrap.min.css" rel = "stylesheet">
    <link href = "assets/vendor/bootstrap-icons/bootstrap-icons.css" rel = "stylesheet">
    <!-- Main CSS File -->
    <link href = "assets/stylesheets/styles.css" rel = "stylesheet">

    <link rel = "stylesheet" th:href = "@{/css/style-links.css}"/>
    <link rel = "stylesheet" th:href = "@{/css/responsive.css}"/>

</head>


</html>

и это:

<!DOCTYPE html>
<html lang = "en" xmlns:th = "http://www.thymeleaf.org">

<header th:fragment = "common-header" id = "header" class = "header d-flex align-items-center sticked stikcy-menu">
    <div class = "container-fluid container-xl d-flex align-items-center justify-content-between">
        <a href = "index.html" class = "logo d-flex align-items-center">
            <img src = "assets/images/logo.png" alt = "logo">
        </a>
        <nav id = "navbar" class = "navbar">
            <ul>
                <li><a href = "/" class = "">Home</a></li>
                <!--li><a href = "services.html" class = "">Services</a></li>
                <li><a href = "portfolio.html" class = "">Portfolio</a></li>
                <li><a href = "testimonials.html" class = "">Testimonials</a></li>
                <li><a href = "team.html" class = "">Team</a></li>
                <li class = "dropdown"><a href = "#"><span>Menu</span> <i class = "bi bi-chevron-down dropdown-indicator"></i></a>
                    <ul>
                        <li><a href = "about.html">About</a></li>
                        <li><a href = "packages.html">Pricing</a></li>
                        <li><a href = "faqs.html">FAQs</a></li>
                        <li><a href = "privacy-policy.html">Terms &amp; Conditions</a></li>
                        <li><a href = "privacy-policy.html">Privacy Policy</a></li>
                        <li><a href = "blogs.html">Blogs</a></li>
                        <li><a href = "blog-details.html">Blog Detail Page</a></li>
                    </ul>
                </li-->
                <li><a href = "/blogs">News</a></li>
            </ul>
        </nav><!-- .navbar -->
        <!--a href = "contact.html" class = "btn-get-started hide-on-mobile">Get Quotes</a-->
        <button id = "darkmode-button"><i class = "bi bi-moon-fill"></i></button>
        <i class = "mobile-nav-toggle mobile-nav-show bi bi-list"></i>
        <i class = "mobile-nav-toggle mobile-nav-hide d-none bi bi-x"></i>
    </div>
</header>


</html>

и это:

<!DOCTYPE html>
<html lang = "zxx">


<head th:replace = "~{common/headerImports :: common-header-imports}">
    <title>title</title>
</head>


<!-- Google tag (gtag.js) -->
<script async src = "https://www.googletagmanager.com/gtag/js?id=G-RZXQZB1MDJ"></script>
<script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', 'G-RWXQZB9MDJ');
</script>

<body>
<header th:replace = "~{common/header :: common-header}">
....
</html>

но я вижу только белую страницу, ничего не загружается

Просто из любопытства: почему ваш сценарий находится вне тела или головы?

— 07.04.2024 02:42

Я добавлю это в голову

— 07.04.2024 08:46

Можете ли вы предоставить исходный код HTML-страницы (в Firefox: щелкните правой кнопкой мыши -> просмотреть исходный код страницы). Кроме того, есть ли какие-либо ошибки в консоли разработчика браузера? Далее, если возможно, можете ли вы загрузить рабочий пример на Github, чтобы мы могли легко запустить вашу текущую программу?

— 16.04.2024 22:59

html spring-boot spring-mvc thymeleaf spring-thymeleaf

06.04.2024 19:56

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

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

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

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

Убедитесь, что ваши скрипты находятся внутри head или body, поэтому переместите это:

<!-- Google tag (gtag.js) -->
<script async src = "https://www.googletagmanager.com/gtag/js?id=G-RZXQZB1MDJ"></script>
<script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', 'G-RWXQZB9MDJ');
</script>

туда, куда Google попросит вас перейти, предположительно в конец тега head (внутри него). Судя по контенту, которым вы поделились, создается впечатление, что вы html встроили его в другой html и поместили контент наружу head и body. Исправьте эти проблемы.

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

И убедитесь, что вы правильно встраиваете свои фрагменты.

Если все вышеперечисленное перепроверить и исправить, то все должно работать.

14.04.2024 11:14