zoukankan      html  css  js  c++  java
  • thymeleaf公共页面元素抽取

    1、抽取公共片段

      使用thymeleaf的 th:fragment 为样抽取的公共片段命名,

      如下把div标签命名为 copy,就可以获取到div整个里的内容

      <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">
        <a class="nav-link active" th:class="${activeUri=='main.html'?'nav-link active':'nav-link'}" href="#" th:href="@{/main.html}"></a>

      </nav>

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

    然后可以通过

      <a class="nav-link active" th:class="${activeUri=='main.html'?'nav-link active':'nav-link'}" href="#" th:href="@{/main.html}"> </a>

    像上面的<a>做一些自定义操作

  • 相关阅读:
    CSS3详解:transform
    js解决checkbox全选和反选的问题
    Scroll文字滚动js
    PAT乙级 解题目录
    PAT 1005 继续(3n+1)猜想 (25)(代码)
    PAT 1004 成绩排名 (20)(代码)
    PAT 1002 写出这个数 (20)(代码)
    PAT 1001 害死人不偿命的(3n+1)猜想 (15)(C++&JAVA&Python)
    PAT 1045 快速排序(25)(STL-set+思路+测试点分析)
    PAT 1050 螺旋矩阵(25)(代码)
  • 原文地址:https://www.cnblogs.com/mww-NOTCOPY/p/10949697.html
Copyright © 2011-2022 走看看