thymeleaf公共页面元素抽取

thymeleaf公共页面元素抽取

1、抽取公共片段
<div th:fragment="copy">
&copy; 2011 The Good Thymes Virtual Grocery
</div>

2、引入公共片段
<div th:insert="~{footer :: copy}"></div>
~{templatename::selector}:模板名::选择器
~{templatename::fragmentname}:模板名::片段名

3、默认效果:
insert的公共片段在div标签中
如果使用th:insert等属性进行引入,可以不用写~{}:
行内写法可以加上:[[~{}]];[(~{})];

三种引入公共片段的th属性:

th:insert:将公共片段整个插入到声明引入的元素中

th:replace:将声明引入的元素替换为公共片段

th:include:将被引入的片段的内容包含进这个标签中

<footer th:fragment="copy">
&copy; 2011 The Good Thymes Virtual Grocery
</footer>

引入方式
<div th:insert="footer :: copy"></div>
<div th:replace="footer :: copy"></div>
<div th:include="footer :: copy"></div>

效果
<div>
    <footer>
    &copy; 2011 The Good Thymes Virtual Grocery
    </footer>
</div>

<footer>
&copy; 2011 The Good Thymes Virtual Grocery
</footer>

<div>
&copy; 2011 The Good Thymes Virtual Grocery
</div>

引入片段的时候传入参数:

<nav class="col-md-2 d-none d-md-block bg-light sidebar" id="sidebar">
    <div class="sidebar-sticky">
        <ul class="nav flex-column">
            <li class="nav-item">
                <a class="nav-link active"
                   th:class="${activeUri=='main.html'?'nav-link active':'nav-link'}"
                   href="#" th:href="@{/main.html}">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home">
                        <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
                        <polyline points="9 22 9 12 15 12 15 22"></polyline>
                    </svg>
                    Dashboard <span class="sr-only">(current)</span>
                </a>
            </li>

<!--引入侧边栏;传入参数-->
<div th:replace="commons/bar::#sidebar(activeUri='emps')"></div>

原文地址:https://www.cnblogs.com/codingcc1/p/11073399.html

时间: 2024-11-09 15:06:55

thymeleaf公共页面元素抽取的相关文章

11、SpringBoot-CRUD-thymeleaf公共页面元素抽取

thymeleaf公共页面元素抽取 存在一种现象:两个文件的代码只有一部分代码不一样 其余的均相同,此时就可以提取公共的代码去简化开发 1.抽取公共片段 <div th:fragment="copy"> © 2011 The Good Thymes Virtual Grocery </div> 2.引入公共片段 <div th:insert="~{footer :: copy}"></div> ~{templatena

Thymeleaf静态资源引入方式及公共页面代码抽取

静态资源引入 Thymeleaf模板引擎url问题,要用如下的方式写,确保在任何情况下都能访问到 <!-- Bootstrap core CSS --> <link href="bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"> <!-- 引用webjars的方式引入静态资源 --> <link th:href="@{/webjars/bootstrap/

如何针对Thymeleaf模板抽取公共页面

对于公共页面(导航栏nav.页头head.页尾footer)的抽取有三种方式:???????1)基于iframe进行抽取,这种方式很有效,但比较老了,另外为了页面的自适应性,还得做不少工作:???????2)如果是jsp页面,则可以通过<%@ include file="head.jsp"%>进行抽取???????3)利用ajax进行页面加载,但有不少问题???????基于Springboot后台开发框架,JSP虽然还是可以用,但已经强烈推荐使用Thymeleaf模板了,这

thymeleaf引用公共页面

本例采用的是Springboot+thymeleaf,因为公共页面属于动态页,因此需要放在templates目录下(具体几层自定义即可),我们这里做一个引用头部.主体和底部公共信息的示例 1. 公共信息页面 head.html,使?th:fragment 属性来定义被包含的模版?段,以供其他模版引用或者包含,这里我们定义了头部(admin_head(title)).主体(admin_common).底部(admin_bottom)三个模板片段 <!DOCTYPE html> <html&

基于页面元素定位的操作失败自动截图

web自动化脚本运行失败,很大一部分问题出在元素定位上,博主在这里介绍一个循环定位及失败截图的方法.以方便脚本维护,定位问题. 1.以下代码是WebDriver自带的方法,封装一下,使用即可. 1 /** 2 * 截取屏幕截图并保存到指定路径 3 * 4 * @param filepath 5 * 保存屏幕截图完整文件名称及路径 6 * @return 无 7 */ 8 public void captureScreenshot(String filepath) { 9 File screenS

页面元素与页面间的间隙

当我们做一个页面时,默认页面元素距页面左右上下都有一个很小的间隙.如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>三角形</title> </head> <style> .three{ width: 100px; height: 100px; border-style:

easyUI的iframe子页面操作父页面元素

曾经试过这样的方法 在iframe子页面获取父页面元素       代码如下:       $('#objId', parent.document); 这样可以获得父页面的元素,但是调用EasyUI的方法的时候,就会报错. 郁闷了很久很久,最终找到方案,写法的区别,如下: parent.$('# objId') 这样调用方法就不会报错 如: parent.$('# objId').tabs("add", { title: title, content: content, closabl

转 easyUI的iframe子页面操作父页面元素

曾经试过这样的方法 在iframe子页面获取父页面元素      代码如下:      $('#objId', parent.document); 这样可以获得父页面的元素,但是调用EasyUI的方法的时候,就会报错. 郁闷了很久很久,最终找到方案,写法的区别,如下: parent.$('#objId') 这样调用方法就不会报错 如: parent.$('#objId').tabs("add", { title: title,      content: content,      c

h5之scrollIntoView控制页面元素滚动

如果滚动页面也是DOM没有解决的一个问题.为了解决这个问题,浏览器实现了一下方法,以方便开发人员如何更好的控制页面的滚动.在各种专有方法中,HTML5选择了scrollIntoView()作为标准方法.scrollIntoView()可以在所有的HTML元素上调用,通过滚动浏览器窗口或某个容器元素,调用元素就可以出现在视窗中.如果给该方法传入true作为参数,或者不传入任何参数,那么窗口滚动之后会让调动元素顶部和视窗顶部尽可能齐平.如果传入false作为参数,调用元素会尽可能全部出现在视口中(可