SpringBoot+Thymeleaf抽取HTML公共页面及引入公用页面教程

摘要

在开发Web网站的时候,HTML页面有很多是相同的,如果每一个

在开发Web网站的时候,HTML页面有很多是相同的,如果每一个页面都写一遍,不仅非常麻烦,而且非常不利于后期的更改。典型的如导航栏、页脚等,每个HTML页面几乎都一样。

在Thymeleaf中我们通过如下的机制来抽取处公共的页面,并在需要的时候引入这个页面就可以了。

建立一个公共页面,存放公共代码段

使用th:fragment定义一个公共代码段。如下定义了两个公共代码段th:fragment="head(title)"(title为引用公共代码段时传入的参数);th:fragment="menu(n)"(n为引用代码段时传入的参数)。

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:fragment="head(title)"><!--title为传参-->
    <meta charset="UTF-8">
    <title th:replace="${title}">Home</title>
    <link rel="stylesheet" href="../../static/bootstrap/css/bootstrap.css" th:href="@{/bootstrap/css/bootstrap.css}">
    <script src="../../static/jquery/jquery-3.5.1.min.js" th:src="@{/jquery/jquery-3.5.1.min.js}"></script>
    <script src="../../static/bootstrap/js/bootstrap.min.js" th:src="@{/bootstrap/js/bootstrap.min.js}"></script>
    <style>
        body {
            background: url(/images/bg3.jpg)
            no-repeat center center fixed;
            background-size: cover;
        }
    </style>
</head>
<body>
    <nav th:fragment="menu(n)" class="navbar navbar-inverse" style="font-size: 18px; background: rgba(0,0,0,0.75);">
        <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="glyphicon glyphicon-align-justify" ></span>
                </button>
                <a class="navbar-brand" href="/index">EXCELLENT BLOG</a>
            </div>
        <div class="collapse navbar-collapse"  id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li class="text-center" th:classappend="${n==1}?'active'"><a href="/index">首页</a></li>
                    <li class="text-center" th:classappend="${n==2}?'active'"><a href="#">说说</a></li>
                    <li class="text-center" th:classappend="${n==3}?'active'"><a href="#">博客</a></li>
                    <li class="text-center" th:classappend="${n==4}?'active'"><a href="#">社区</a></li>
                    <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
                            其它<span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href="#">相册</a></li>
                            <li><a href="#">博客分类</a></li>
                            <li><a href="#">网站地图</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">留言板</a></li>
                        </ul>
                    </li>
                    <li>
                        <form class="navbar-form form-group">
                            <input class="form-control" type="text" placeholder="Search">
                            <input class=" btn btn-default" type="submit" value="搜索">
                        </form>
                    </li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li th:classappend="${n==6}?'active'">
                        <a href="#" th:href="${session.user==null}?'/login':'#'">
                        <span class="text-center" th:text="${session.user==null}?'登录':${session.user.username}">
                            uokaa
                        </span>
                        </a>
                    </li>
                    <li>
                        <a href="/logout">
                        <span class="text-center" th:text="${session.user==null}?'':'注销'">
                            退出登录
                        </span>
                        </a>
                    </li>
                </ul>
            </div>
    </nav>
</body>
</html>
<script>
    $('.dropdown-toggle').dropdown();
</script>


在其他HTML文件中引用公共代码段

如在index.html中引用公共代码段:

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="common/header :: head(~{::title})">
    <title>Home</title>
</head>
<body>
    <nav th:replace="common/header :: menu(1)"></nav>

    <div class="container-fluid">
        <br><br><br><br><br>
        <div class="row">
            <div class="col-sm-6 col-sm-offset-3"><h1 class="text-center" style="color: white; font-size: 100px;"> W E L C O M E </h1></div>
        </div>
    </div>

</body>
</html>

1、<head th:replace="common/header :: head(~{::title})">表示用common/header.html中的公共代码段"head"替换这里的<head>.

在替换的时候还可以传递参数,head(~{::title})表示引用下面的<title>中的值作为参数传递到公共代码段中(这种语法看着很不常见)。

2、<nav th:replace="common/header :: menu(1)"></nav>表示用common/header.html中公的公共代码段"menu"替换这里的<nav>.

在替换的时候还可以传递参数,menu(1)表示将1作为参数传递到公共代码段中,公共代码短拿到参数后根据不同的值执行对应的操作,使得大部分代码一样,只有一小部分内容需要做相应的修改。



这是个神奇的广告位这是个神奇的广告位