有时候很多css文件是公共的，我们必须要在每个html文件中引入它们，其实我们可以利用Thymeleaf的模板布局，把这些css文件抽出来，同时如果有某个html文件专属的css文件，还可在引入模板的基础上单独引入该css文件。

首先，建立一个公共文件layout.html

 <!DOCTYPE html>

 <html xmlns:th="http://www.thymeleaf.org">

 <head th:fragment="common_head(title,links)">

     <meta charset="UTF-8">

     <title th:replace="${title}">CSDN博客</title>

     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

     <link rel="shortcut icon" th:href="@{/resources/images/logo_ico_16.ico}" />

     <link rel="stylesheet" th:href="@{/resources/css/index.css}"/>

     <link rel="stylesheet" th:href="@{/resources/iconfont/iconfont.css}">

     <link rel="stylesheet" th:href="@{/resources/css/common.css}"/>

     <th:block th:replace="${links}" />

 </head>

 <body>

 </body>

 </html>

　　上面的“<head th:fragment="common_head(title,links)">”即为定义好的css模板，其中title和links为两个动态传入的变量，而th:block会在links值为空时自动隐藏，这样就可以实现除了css模板中的css文件之外，需要再单独引入css和不需要引入单独css两种情况。使用方法如下：

一、需要单独引入css

在实际的html文件中加入：

<head th:replace="layout :: common_head(~{::title},~{::link})">

    <title>测试公共css引入</title>

    <link rel="stylesheet" th:href="@{/resources/css/detail.css}"/>

    <link rel="stylesheet" th:href="@{/resources/css/profile.css}"/>

</head>

其中的title会自动将css模板中的title替换，而里面的多个link标签（只有一个link标签也可）也会替换th:block标签

二、不需要单独引入css

在实际的html文件中加入：

<head th:replace="layout :: common_head(~{::title},~{})">

    <title>测试公共css引入</title>

</head>

这种情况其实就是将传入的第二个变量置为空

但是这两种情况title都是必须的

thymeleaf引入公共css、js的更多相关文章

  1. vue 引入公共css文件

    1.在入口js文件main.js中引入,一些公共的样式文件,可以在这里引入. import Vue from 'vue'import App from './App' // 引入App这个组件impo ...

  2. Thymeleaf引入公共片段方式

    引入公共片段 引入公共片段的th属性,包括三种方式 th:insert 将公共片段,整个插入到声明引入的元素中 th:replace 将声明引入的元素,替换为公共片段 th:include 将被引入的 ...

  3. Thymeleaf 公共css,js提取及自有css,js导入

    https://www.jianshu.com/p/2102fa4772ba

  4. JQMobile引入外部CSS,JS文件

    使用CDN <!DOCTYPE html> <html> <head> <title>html5</title> <meta name ...

  5. thymeleaf 引入公共html注意事项

    详细连接https://blog.csdn.net/u010260737/article/details/83616998 每个页面都会用到分页.html或者头部.html.尾部.html,在其他页面 ...

  6. 关于idea easyui 引入css js

    1.引用官方网站 <link rel="stylesheet" type="text/css" href="http://www.w3cscho ...

  7. vue 引入通用 css

    1.在入口 js 文件 main.js 中引入,一些公共的样式文件,可以在这里引入. import Vue from 'vue' import App from './App' // 引入App这个组 ...

  8. Spring Boot thymeleaf模版支持，css,js等静态文件添加

    Thymeleaf引入 Thymeleaf是一个Java模板引擎开发库,可以处理和生成HTML.XML.JavaScript.CSS和文本,在Web和非Web环境下都可以正常工作. 1.添加依赖包 & ...

  9. WordPress引入css/js两种方法

    WordPress引入css/js 是我们制作主题时首先面对的一个难点,任何一款主题都要加载自己的css,js,甚至很有可能还需要加载Jquery文件,网上方法特多,说法不一,我们今天借鉴wordpr ...

随机推荐

  1. Mysql 定时备份(mysqldump)

    #!/bin/bash today=`date +%Y-%m-%d` deleday=`date -d '7 day ago' +%Y-%m-%d` path=/home/data/mysqlback ...

  2. str.format() 格式化数字的多种方法

    Python2.6 开始,新增了一种格式化字符串的函数 str.format(),它增强了字符串格式化的功能. 基本语法是通过 {} 和 : 来代替以前的 % . format 函数可以接受不限个参数 ...

  3. python第二天---字符串的魔法

    # "adcbdefg" # "a" # 判断某个东西是否在里面包含 in | not in # name = "abcdefg" # # ...

  4. PAT(B) 1042 字符统计（Java）字符串 正则表达式 统计

    题目链接:1042 字符统计 (20 point(s)) 题目描述 请编写程序,找出一段给定文字中出现最频繁的那个英文字母. 输入格式 输入在一行中给出一个长度不超过 1000 的字符串.字符串由 A ...

  5. 用mkdocs在gitee码云上建立一个简单的文档博客

    利用mkdocs建立简单的文档博客 一.概述 MkDocs 是一个用于创建项目文档的 快速, 简单 , 完美华丽 的静态站点生成器. 文档源码使用 Markdown 来撰写, 用一个 YAML 文件作 ...

  6. mininet：使用vxlan连接两台虚拟机的网络topo

    需改虚拟机的网络适配器,将其改为host-only 尝试ping宿主机ip地址,此时能够ping同与虚拟机相连的虚拟网卡ip地址,无法ping同其他网卡ip地址 在虚拟机和宿主机中创建网络topo 在 ...

  7. 如何利用 iTunes 把 m4a/wav 文件转成 MP3 格式

    MAC技巧 | 如何利用 iTunes 把 m4a/wav 文件转成 MP3 格式 - 简书

  8. oracle笔记之计算年龄、工龄和TRUNC

    方法一:利用months_between 函数计算 SELECT TRUNC(months_between(sysdate, birthday)/12) AS agefrom dual; 方法二:日期 ...

  9. vue常用时间修饰符记录

    1.stop:阻止冒泡 如下:正常情况下,我们点击最内层的inner_inner的时候,事件会向上冒泡,inner 和outer也会执行.我们在inner_inner事件加上.stop修饰符,就会阻止 ...

  10. hdu 1075 map的使用 字符串截取的常用手段 以及string getline 使用起来的注意事项

    首先说字符串的截取套路吧 用坐标一个一个的输入 用遍历的方式逐个去检查字符串中的字符是否为符合的情况 如果是的话 把该字符放入截取string 中 让后坐标前移 如果不是的话 截取结束 坐标初始化 然 ...