zoukankan      html  css  js  c++  java
  • 在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>
  • 相关阅读:
    「CF1027」
    「CF1000G Two-Paths」
    「CF1009」
    「CF1008」
    Vi的按键(常用)
    【codeforces】Codeforces Round #643 (Div. 2)
    【codeforces】Codeforces Round #641 (Div. 2)
    【codeforces】 Codeforces Round #640 (Div. 4)
    【codeforces】Codeforces Round #642 (Div. 3)
    【codeforces】CF1345C Hilbert's Hotel
  • 原文地址:https://www.cnblogs.com/miaoying/p/7804351.html
Copyright © 2011-2022 走看看