• 在html中使用thymeleaf编写通用模块


    在编写页面时,常常会需要用到通用模块,比如header部分、footer部分等。

    项目前端使用的是themeleaf模板引擎,下面简单介绍下使用themeleaf写header通用模块:

    1. 通用部分: header2.html

    主要使用th:gragment属性标记

    <!DOCTYPE html>
    <html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
    <head th:fragment="common_header(title)">
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
      <title th:replace="${title}">head real</title>
    </head>
    <body>
    <div class="header" style="height: auto;" th:fragment="header">
      这是来自header模块的内容...
    </div>
    </body>
    </html>

    2. 引用部分:

    主要使用th:relpace属性进行标记

    headDemo01.html

    <!DOCTYPE html>
    <html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
    <head>
      <meta charset="UTF-8">
      <title>headDemo01</title>
    </head>
    <body>
    <div th:replace="~{header2 :: header}"></div>
    headDemo01
    </body>
    </html>

    headDemo02.html

    <!DOCTYPE html>
    <html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
    <head>
      <meta charset="UTF-8">
      <title>headDemo02</title>
    </head>
    <body>
    <div th:replace="~{header2 :: header}"></div>
    headDemo02
    </body>
    </html>
  • 相关阅读:
    ajax相关知识总结
    http协议
    sass基础常用指南
    自定义上传图片样式并实现上传立即展示该图片
    HTML5 History 模式
    网页打印样式CSS
    session和cookie相关知识总结
    第二个冲刺周期
    软件工程学习进度表(第十三周)
    软件工程学习进度表(第十二周)
  • 原文地址:https://www.cnblogs.com/miaoying/p/7804351.html
Copyright © 2020-2023  润新知