zoukankan      html  css  js  c++  java
  • SpringBoot中的thymeleaf布局

    Pom依赖

    <dependency>
    	<groupId>nz.net.ultraq.thymeleaf</groupId>
    	<artifactId>thymeleaf-layout-dialect</artifactId>
    	<version>2.2.2</version>
    </dependency>
    

    Spring Bean配置

        @Bean
        public LayoutDialect layoutDialect() {
            return new LayoutDialect();
        }
    

    以上配置会使layout 命名空间可以引入五种属性:decorate, title-pattern, insert, replace, fragment

    布局文件

    resource/templates/layout/default.html

    <!DOCTYPE html>
    <html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
    <head>
      <title layout:title-pattern="$DECORATOR_TITLE - $CONTENT_TITLE">Layout title</title>
      <script src="common-script.js"></script>
    </head>
    <body>
      <header>
        <h1>Layout header</h1>
      </header>
      <section layout:fragment="content">
        <p>layout content</p>
      </section>
      <footer>
        <p>My footer</p>
        <p layout:fragment="custom-footer">layout footer</p>
      </footer>  
    </body>
    </html>
    

    页面内容

    test.html

    <!DOCTYPE html>
    <html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout/default.html}">
    <head>
      <title>Content title</title>
      <script src="content-script.js"></script>
    </head>
    <body>
      <section layout:fragment="content">
        <p>my content</p>
      </section>
      <footer>
        <p layout:fragment="custom-footer">my footer</p>
      </footer>
    </body>
    </html>
    

    controller部分

        @RequestMapping("/test.html")
        public String test(HttpServletRequest request) {
            return "test";
        }
    

    此时访问test.html时就可以得到装饰之后的页面内容

    参考:http://trumandu.github.io/2018/07/22/Thymeleaf布局/
    https://www.cnblogs.com/ityouknow/p/5833560.html

  • 相关阅读:
    战火魔兽CJQ圣印问题
    sublime插件总汇
    js引用类型
    一、vue的数据双向绑定的实现
    渲染机制
    帆布指纹识别
    call、apply与bind在理解
    webpack的世界
    line-height与vertical-align
    'abc' 转换成[a, b, c]一道面试题的思考
  • 原文地址:https://www.cnblogs.com/umgsai/p/11250270.html
Copyright © 2011-2022 走看看