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

    1、抽取公共片段
    <div th:fragment="copy">
       2011 The Good Thymes Virtual Grocery
    </div>


    2、引入公共片段
    <div th:insert="~{footer :: copy}"></div>
    ~{templatename::selector}:模板名::选择器
    ~{templatename::fragmentname}:模板名::片段名


    或者:

    <div id="copy1">
    &copy; 2011 The Good Thymes Virtual Grocery
    </div>
    
    <div th:insert="footer :: #copy"></div>

    【注意】

    insert的公共片段在div标签中
    如果使用th:insert等属性进行引入,可以不用写~{}:
    行内写法可以加上:[[~{}]];[(~{})];

    3、三种引入公共片段的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>
    
    效果
    insert:
    <div>
        <footer>
        &copy; 2011 The Good Thymes Virtual Grocery
        </footer>
    </div>
    
    replace:
    <footer>
    &copy; 2011 The Good Thymes Virtual Grocery
    </footer>
    
    include:
    <div>
    &copy; 2011 The Good Thymes Virtual Grocery
    </div>
  • 相关阅读:
    input file 上传图片并显示
    关于npm ---- npm 命令行运行多个命令
    webpack4.x 配置
    React的生命周期
    HTML5 meta 属性整理
    css 命名规范
    html5 标签 meter 和 progress
    .NET Linq TO XML 操作XML
    .NET 字符串指定规则添加换行
    Linux Centos上部署ASP.NET网站
  • 原文地址:https://www.cnblogs.com/houchen/p/13602508.html
Copyright © 2011-2022 走看看