Thymeleaf的include封装共用页面js和css

转载 小米笔记  2019-07-20 10:45  阅读 36 次 评论 0 条

烦恼

一个项目中,总会有很多重复的东西出现,比如css、js,网页头部底部,重复性的东西我觉得都应该优化。今天我们就讲讲Thymeleaf使用 th:fragment 来将重复的东西抽出,使用 th:include 来引入。

建立common

首先我们建立一个公用的common文件夹,里面存放公共的html文件。

head.html里面就存放公用的标签

  1. <!DOCTYPE html>  
  2. <html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">  
  3. <head th:fragment = "commonHead(title)">  
  4.     <meta charset="utf-8">  
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">  
  6.     <title th:text="${title}">Title</title>  
  7.     <meta name="description" content="">  
  8.     <meta name="keywords" content="index">  
  9.     <meta name="viewport" content="width=device-width, initial-scale=1">  
  10.     <meta name="renderer" content="webkit">  
  11.     <meta http-equiv="Cache-Control" content="no-siteapp" />  
  12.     <link rel="icon" type="image/png" href="assets/i/favicon.png">  
  13.     <link rel="apple-touch-icon-precomposed" href="assets/i/app-icon72x72@2x.png">  
  14.     <meta name="apple-mobile-web-app-title" content="Amaze UI" />  
  15.     <link rel="stylesheet" href="/css/amazeui.min.css" />  
  16.     <link rel="stylesheet" href="/admin/css/admin.css">  
  17.     <link rel="stylesheet" href="/admin/css/app.css">  
  18. </head>  
  19. </html>  

on-load-js.html里面就存放公用的js

  1. <!DOCTYPE html>  
  2. <html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">  
  3. <span th:fragment="commonOnLoadJs">  
  4.     <script src="/admin/js/echarts.min.js"></script>  
  5.     <script src="/js/jquery.min.js"></script>  
  6.     <script src="/js/amazeui.min.js"></script>  
  7.     <script src="/admin/js/iscroll.js"></script>  
  8.     <script src="/admin/js/app.js"></script>  
  9.     <script src="/js/layer/layer.js"></script>  
  10. </span>  
  11. </html>  

引入common

引入head,就在其它页面这样引入。
  1. <head th:include="/admin/common/head :: commonHead('后台首页')"></head>  
引入js
  1. <span th:include="/admin/common/on-load-js :: commonOnLoadJs"></span>  

历史上的今天:

本文地址:https://www.lisen.me/thymeleafs-include-encapsulates-shared-pages-js-and-css.html
温馨提示:文章内容系作者个人观点,不代表木子网对观点赞同或支持。
版权声明:本文为转载文章,来源于 小米笔记 ,版权归原作者所有,欢迎分享本文,转载请保留出处!

发表评论


表情