Thymeleaf抽取公共页面片段

墨蓝 2022-05-15 13:35 227阅读 0赞

### 抽取页面 ###

项目中，一般把所有的公共页面片段都抽取出来  
放在一个独立的页面中

其他，所有的页面根据需要进行引用  
参考文档  
![这里写图片描述][70]

### th:fragment ###

抽取公共元素  
Name，随便自定义命名

<!DOCTYPE html>
    <html xmlns:th="http://www.thymeleaf.org">
    <body>
    <div th:fragment="copy">
        © 2011 The Good Thymes Virtual Grocery
    </div>
    </body>
    </html>

### th:insert ###

### th:replace ###

### th:include ###

引入公共元素  
使用波浪号、花括号方式

这两个符号  
也可以省略不写

引入两种方式

选择器引入  
模板名引入

### ~\{templatename::selector\} ###

模板名::选择器

### ~\{templatename::fragmentname\} ###

模板名::片段名

页面头部  
抽取页面的顶部栏

<nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0" th:fragment="topbar">
        <a class="navbar-brand col-sm-3 col-md-2 mr-0" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">[[${session.loginUser}]]</a>
        <input class="form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search">
        <ul class="navbar-nav px-3">
            <li class="nav-item text-nowrap">
                <a class="nav-link" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">Sign out</a>
            </li>
        </ul>
    </nav>

用户页面  
引入命名空间

引用页面顶部

<div th:replace="commons/bar::topbar"></div>

修改完成，刷新页面  
Ctrl+F9

[70]: /images/20220515/800c175bbc4642f8bccc54aedbf86195.png