Фрагмент ThymeLeaf (с Bootstrap) работает только с индексным файлом, а не с другими HTML-файлами (Java Spring) - PullRequest
0 голосов
/ 19 мая 2018

Ранее я успешно использовал фрагменты тимелина при обращении к ссылке начальной загрузки URL-адреса ("https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"). Я использовал th: replace для всех своих файлов, и у меня не было проблем с получением фрагментов html для других моих файлов).файлы.

С тех пор я попытался переключиться на BootSwatch, чтобы улучшить внешний вид моего Java-приложения, и столкнулся с проблемой. Проблема в том, что загрузчик работает только для моего файла index.html, ине для других моих файлов. Поскольку индексный файл использует дизайн начальной загрузки из фрагментов, я предполагаю, что он подключен правильно. Кроме того, все остальные части моего приложения работают. Для краткости я не включаю все мои html-файлы.

Я использую точно такой же th: замените все мои файлы, поэтому я не уверен, в чем может быть проблема.

fragments.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:fragment="head">
    <meta charset="UTF-8"/>
    <title th:text = "${title}"></title>

    <!--<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">-->

    <link rel="stylesheet" href="../static/css/materia/bootstrap.min.css" th:href="@{css/materia/bootstrap.min.css}"/>

    <script th:src="@{webjars/jquery/jquery.min.js}"></script>
    <script th:src="@{webjars/jquery/bootstrap.min.js}"></script>

</head>


<nav class="navbar navbar-expand-lg navbar-dark bg-primary" th:fragment="navigation">
    <a class="navbar-brand" href="#">Store</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarColor01">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link" href="/cheese">List</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="/cheese/add">Add</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="/cheese/remove">Remove</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="/cheese/account">Account</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="/cheese/signup">Signup</a>
            </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
            <input class="form-control mr-sm-2" type="text" placeholder="Search">
            <button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button>
        </form>
    </div>
</nav>

<body>

</body>
</html>

index.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
    xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{fragments/main_layout}">

<head th:replace="fragments :: head"></head>
<body>

<nav th:replace="fragments :: navigation"></nav>

<h1 th:text="${title}">Add Cheeses</h1>
<p th:unless = "${cheeses} and ${cheeses.size()}">No Cheeses :(</p>

<table class="table">

    <tr>
        <th>Name</th>
        <th>Description</th>
        <th>Price</th>
    </tr>

    <tr th:each ="cheese : ${cheeses}">
        <td th:text ="${cheese.name}"></td>
        <td th:text ="${cheese.description}"></td>
        <td th:text ="${cheese.price}"></td>
    </tr>
</table>

</body>
</html>

add.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{fragments/main_layout}">

<head th:replace="fragments :: head"></head>
<body>

<nav th:replace="fragments :: navigation"></nav>

<h1 th:text="${title}">Add Cheeses</h1>

<form method="post" style="max-width:600px;">

    <div class="form-group">
        <label for="name-field">Name</label>
        <input class="form-control" id="name-field" type="text" name="cheeseName" />
    </div>

    <div class="form-group">
        <label for="desc-field">Description</label>
        <input class="form-control" id="desc-field" type="text" name="cheeseDescription" />
    </div>

    <div class="form-group">
        <label for="price-field">Price</label>
        <input class="form-control" id="price-field" type="text" name="cheesePrice" />
    </div>

    <button type="submit" class="btn btn-primary">Add Cheese</button>

</form>

</body>
</html>

1 Ответ

0 голосов
/ 19 мая 2018

Итак, я действительно обнаружил, что Bootswatch также имеет CDN начальной загрузки.Я только заменил локальные CSS-файлы ссылкой на загрузочный URL-адрес, и все заработало нормально.

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