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>做一些自定义操作

  • 相关阅读:
    [C#/.NET]Entity Framework(EF) Code First 多对多关系的实体增,删,改,查操作全程详细示例
    玩转Asp.net MVC 的八个扩展点
    float实例讲解
    C#高性能TCP服务的多种实现方式
    如何把SQLServer数据库从高版本降级到低版本?
    ASP.NET MVC Area使用-将Area设置成独立项目
    如何使用ping和tracert命令测试网站访问速度
    ASP.NET MVC 入门10、Action Filter 与 内置的Filter实现(实例-防盗链)
    MVC Action Filter
    c#中单元测试
  • 原文地址:https://www.cnblogs.com/mww-NOTCOPY/p/10949697.html
Copyright © 2011-2022 走看看