• 在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>
  • 相关阅读:
    HTML5新媒体元素
    概述
    (一)最小可行化应用
    JSON
    ajax的工作原理
    R语言学习笔记(四)
    R语言学习笔记(一)
    转:禅道的数据库结构
    转:bug的分类和等级
    转:如何定义 Bug 的优先级
  • 原文地址:https://www.cnblogs.com/miaoying/p/7804351.html
Copyright © 2020-2023  润新知