java - Thymeleaf 不工作(th :fragment/th:replace) using bootstrap

标签 java spring bootstrap-4 thymeleaf

我第一次尝试使用 thymeleaf 将引导导航栏和 javascript 分离到它自己的独立 html 文件中，远离我的主 html 页面。我的设置与 thymeleaf 教程完全相同，但当我运行 Spring 时，它不会正确显示内容。

index.html <- 我的网站主页*已更新

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="common/header :: common-header" />

<body>
    <div th:replace="common/header :: navbar" />

    <div class="container">
        <div class="row">
            <!-- carousel -->
            <div class="col-xs-8">
                <div class="panel panel-default">
                    <div class="panel-body">
                        <div id="carousel-example-generic" class="carousel slide"
                            data-ride="carousel">
                            <!-- Indicators -->
                            <ol class="carousel-indicators">
                                <li data-target="#carousel-example-generic" data-slide-to="0"
                                    class="active"></li>
                                <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                                <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                            </ol>

                            <!-- Wrapper for slides -->
                            <div class="carousel-inner" role="listbox">
                                <div class="item active">
                                    <img
                                        src="http://lorempixel.com/output/sports-q-c-1600-500-1.jpg"
                                        alt="..." />
                                    <div class="carousel-caption">
                                        <h4>First Thumbnail Label</h4>
                                        <p>Contrary to popular belief, Lorem Ipsum is not simply
                                            random text. It has roots in a piece of classical Latin
                                            literature from 45 BC, making it over 2000 years old.</p>
                                    </div>
                                </div>
                                <div class="item">
                                    <img
                                        src="http://lorempixel.com/output/sports-q-c-1600-500-2.jpg"
                                        alt="..." />
                                    <div class="carousel-caption">
                                        <h4>First Thumbnail Label</h4>
                                        <p>Contrary to popular belief, Lorem Ipsum is not simply
                                            random text. It has roots in a piece of classical Latin
                                            literature from 45 BC, making it over 2000 years old.</p>
                                    </div>
                                </div>
                                <div class="item">
                                    <img
                                        src="http://lorempixel.com/output/sports-q-c-1600-500-3.jpg"
                                        alt="..." />
                                    <div class="carousel-caption">
                                        <h4>First Thumbnail Label</h4>
                                        <p>Contrary to popular belief, Lorem Ipsum is not simply
                                            random text. It has roots in a piece of classical Latin
                                            literature from 45 BC, making it over 2000 years old.</p>
                                    </div>
                                </div>
                                ...
                            </div>

                            <!-- Controls -->
                            <a class="left carousel-control" href="#carousel-example-generic"
                                role="button" data-slide="prev"> <span
                                class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                                <span class="sr-only">Previous</span>
                            </a> <a class="right carousel-control"
                                href="#carousel-example-generic" role="button" data-slide="next">
                                <span class="glyphicon glyphicon-chevron-right"
                                aria-hidden="true"></span> <span class="sr-only">Next</span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xs-4">
                <img src="/image/logo.png" class="img-responsive" />
            </div>
        </div>

        <hr />

        <div class="row">
            <div class="col-xs-4">
                <div clas="panel panel-default">
                    <div class="panel-body">
                        <img src="/image/bestseller.png" class="img-responsive" />
                    </div>
                </div>
            </div>
            <div class="col-xs-4">
                <div clas="panel panel-default">
                    <div class="panel-body">
                        <img src="/image/hours.png" class="img-responsive" />
                    </div>
                </div>
            </div>
            <div class="col-xs-4">
                <div clas="panel panel-default">
                    <div class="panel-body">
                        <img src="/image/faq.png" class="img-responsive" />
                    </div>
                </div>
            </div>
        </div>

        <div>
            <div class="home-headline">
                <span>Featured Books</span>
            </div>
            <hr style="margin-top: -15px;" />
        </div>


        <div class="row">
            <div id="featured-books" class="carousel slide" data-ride="carousel">
                <!-- Indicators -->
                <ol class="carousel-indicators">
                    <li data-target="#featured-books" data-slide-to="0" class="active"></li>
                    <li data-target="#featured-books" data-slide-to="1"></li>
                    <li data-target="#featured-books" data-slide-to="2"></li>
                </ol>

                <!-- Wrapper for slides -->
                <div class="carousel-inner" role="listbox">
                    <div class="item active">
                        <img src="/image/shelf.png" class="img-responsive" />
                        <div class="carousel-caption">
                            <div class="row">
                                <div class="col-xs-2">
                                    <img class="img-responsive" src="/image/book1.png" />
                                </div>
                                <div class="col-xs-2">
                                    <img class="img-responsive" src="/image/book1.png" />
                                </div>
                                <div class="col-xs-2">
                                    <img class="img-responsive" src="/image/book1.png" />
                                </div>
                                <div class="col-xs-2">
                                    <img class="img-responsive" src="/image/book1.png" />
                                </div>
                                <div class="col-xs-2">
                                    <img class="img-responsive" src="/image/book1.png" />
                                </div>
                                <div class="col-xs-2">
                                    <img class="img-responsive" src="/image/book1.png" />
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="item">
                        <img src="/image/shelf.png" class="img-responsive" />
                        <div class="carousel-caption">
                            <div class="row">
                                <div class="col-xs-2">
                                    <img class="img-responsive" src="/image/book1.png" />
                                </div>
                                <div class="col-xs-2">
                                    <img class="img-responsive" src="/image/book1.png" />
                                </div>
                                <div class="col-xs-2">
                                    <img class="img-responsive" src="/image/book1.png" />
                                </div>
                                <div class="col-xs-2">
                                    <img class="img-responsive" src="/image/book1.png" />
                                </div>
                                <div class="col-xs-2">
                                    <img class="img-responsive" src="/image/book1.png" />
                                </div>
                                <div class="col-xs-2">
                                    <img class="img-responsive" src="/image/book1.png" />
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="item">
                        <img src="/image/shelf.png" class="img-responsive" />
                        <div class="carousel-caption">
                            <div class="row">
                                <div class="col-xs-2">
                                    <img class="img-responsive" src="/image/book1.png" />
                                </div>
                                <div class="col-xs-2">
                                    <img class="img-responsive" src="/image/book1.png" />
                                </div>
                                <div class="col-xs-2">
                                    <img class="img-responsive" src="/image/book1.png" />
                                </div>
                                <div class="col-xs-2">
                                    <img class="img-responsive" src="/image/book1.png" />
                                </div>
                                <div class="col-xs-2">
                                    <img class="img-responsive" src="/image/book1.png" />
                                </div>
                                <div class="col-xs-2">
                                    <img class="img-responsive" src="/image/book1.png" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Controls -->
                <a class="left carousel-control" href="##featured-books"
                    role="button" data-slide="prev"> <span
                    class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a> <a class="right carousel-control" href="##featured-books"
                    role="button" data-slide="next"> <span
                    class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>
        </div>

    </div>
    <!-- end of container -->


    <div th:replace="common/header :: body-bottom-scripts" />
</body>
</html>

header.html <- Thymeleaf 文件，我在其中遇到问题*已更新

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" >
<head th:fragment="common-header">
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<title>Alexander's Bookstore</title>

<!-- Bootstrap core CSS -->
<link href="/css/bootstrap.min.css" rel="stylesheet" />

<link href="/css/non-responsive.css" rel="stylesheet" />

<!-- Custom styles for this template -->
<link href="/css/style.css" rel="stylesheet" />

<link rel="icon" href="/image/applie-touch-icon.png" />
</head>

<body>
    <div th:fragment="navbar">
        <div class="page-top"
            style="width: 100%; height: 20px; background-color: #f46b42;"></div>
        <!-- Static navbar -->
        <nav class="navbar navbar-default navbar-inverse">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a class="navbar-brand" href="#">ALEXANDER'S BOOKSTORE</a>
                </div>
                <div id="navbar">
                    <ul class="nav navbar-nav navbar-left">
                        <li class="dropdown"><a href="#" class="dropdown-toggle"
                            data-toggle="dropdown" role="button" aria-haspopup="true"
                            aria-expanded="false">BOOKS <span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">Browse the bookshelf</a></li>
                                <li><a href="#">Store hours &#38; Directions</a></li>
                                <li><a href="#">FAQ</a></li>

                            </ul></li>
                        <form class="navbar-form">
                            <div class="form-group">
                                <input type="text" name="keyword" class="form-control"
                                    placeholder="Book title" />
                            </div>
                            <button type="submit" class="btn btn-default">Search</button>
                        </form>
                    </ul>
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="#">SHOPPING CART</a></li>
                        <li><a href="#">MY ACCOUNT</a></li>
                        <li><a href="#">LOGOUT</a></li>
                    </ul>
                </div>
                <!--/.nav-collapse -->
            </div>
            <!--/.container-fluid -->
        </nav>
    </div>

    <div th:fragment="body-bottom-scripts">
    <script
        src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="/js/bootstrap.min.js"></script>
    </div>
</body>
</html>

HomeController.java

package com.bookstore.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class HomeController {
    @RequestMapping("/")
    public String index() {
        return "index";
    }
}

pom.xml

<?xml version="1.0" encoding="UTF-8"?>

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>

  <groupId>com.bookstore</groupId>
  <artifactId>bookstore</artifactId>
  <version>0.1.0</version>
  <packaging>war</packaging>

  <name>Bookstore</name>
  <description>frontend part for our bookstore project</description>
  <!-- FIXME change it to the project's website -->
  <url>http://www.example.com</url>

  <parent>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-parent</artifactId>
    <version>2.0.3.RELEASE</version>
    <relativePath/> <!-- lookup parent from repository -->
  </parent>

  <properties>
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    <maven.compiler.source>1.10</maven.compiler.source>
    <maven.compiler.target>1.10</maven.compiler.target>
  </properties>

  <dependencies>

    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-thymeleaf</artifactId>
      <version>2.0.3.RELEASE</version>
    </dependency>

    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-web</artifactId>
    </dependency>

    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-test</artifactId>
      <scope>test</scope>
    </dependency>

    <dependency>
      <groupId>junit</groupId>
      <artifactId>junit</artifactId>
      <version>4.11</version>
      <scope>test</scope>
    </dependency>
    <dependency>
      <groupId>com.bookstore</groupId>
      <artifactId>bookstore</artifactId>
      <version>0.1.0</version>
    </dependency>

  </dependencies>

  <build>
    <finalName>bookstore</finalName>
    <pluginManagement><!-- lock down plugins versions to avoid using Maven defaults (may be moved to parent pom) -->
      <plugins>
        <plugin>
          <artifactId>maven-clean-plugin</artifactId>
          <version>3.0.0</version>
        </plugin>
        <!-- see http://maven.apache.org/ref/current/maven-core/default-bindings.html#Plugin_bindings_for_war_packaging -->
        <plugin>
          <artifactId>maven-resources-plugin</artifactId>
          <version>3.0.2</version>
        </plugin>
        <plugin>
          <artifactId>maven-compiler-plugin</artifactId>
          <version>3.7.0</version>
        </plugin>
        <plugin>
          <artifactId>maven-surefire-plugin</artifactId>
          <version>2.20.1</version>
        </plugin>
        <plugin>
          <artifactId>maven-war-plugin</artifactId>
          <version>3.2.0</version>
        </plugin>
        <plugin>
          <artifactId>maven-install-plugin</artifactId>
          <version>2.5.2</version>
        </plugin>
        <plugin>
          <artifactId>maven-deploy-plugin</artifactId>
          <version>2.8.2</version>
        </plugin>
        <plugin>
          <groupId>org.springframework.boot</groupId>
          <artifactId>spring-boot-maven-plugin</artifactId>
        </plugin>
      </plugins>
    </pluginManagement>
  </build>
</project>

我的项目文件结构

enter image description here

我尝试通过重建项目并清理我的 .m2 存储库来解决问题，但它给了我同样的问题，所以我将其归结为 thymeleaf 问题。任何帮助表示赞赏!

最佳答案

您应该从index.html 中删除与导航栏相关的所有内容，并在您想要的位置添加 th:replace 。

我的做法是这样的:

  • 结构:
    • index.html
    • 片段/
      • header.html

  • index.html:

    <!DOCTYPE html>
<html lang="pl">   
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title th:text="${title}">Thyme</title>
    <!-- Bootstrap -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="/assets/stylesheets/main.css" />    
</head> 
<body>
    <section th:replace="fragments/navbar :: navbar" role="navbar">
        <div class="container">
            <div class="jumbotron">
                <h1>NAVBAR</h1></div>
        </div>
    </section>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></sript>
</body>
</html>

  • fragments/header.html:

    <!doctype html>
<html>
<head>
</head>
<body>
    <section th:fragment="navbar">
        <nav class="navbar">
            <!-- Contents of navbar -->
        </nav>
    </section>
</body>
</html>

这是一个老项目，是用 Thymeleaf 2 完成的，但我认为它在 Thymeleaf 3 中没有改变。

查看片段的文档 here如果有些事情不太正常

关于java - Thymeleaf 不工作(th :fragment/th:replace) using bootstrap，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51575408/

上一篇：java - Dagger 2 - 跨模块依赖

下一篇：java - 如何在不修改现有代码的情况下识别方法执行期间访问或更改的字段？

相关文章：

java - 缺少@AnnotationDrivenTx Spring3

java - 使用 SpEL Autowiring 值 : referencing beans by type

css - 绝对位置(组件上的组件) - 如何使其响应？ Bootstrap 4

css - React Bootstrap Tabs - 在 div 的整个宽度上均匀分布

css - 了解如何使用 bootstrap 4 将 div 居中

java - maven/eclipse JPA 项目和实体生成？

java - spark-3.0.1-bin-hadoop2.7无法启动，java:无此文件或目录

java - Spring beans 在 IntelliJ 中未解决

java - 使用 ndk-build 从 Android 库项目链接到共享库

java - 更改 Tab 和 JTable 之间的线条颜色

©2024 IT工具网  联系我们