有时候很多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. Java线程同步synchronized的理解

    JVM中(留神:马上讲到的这两个存储区只在JVM内部与物理存储区无关)存在一个主内存(Main Memory),Java中所有的变量存储在主内存中,所有实例和实例的字段都在此区域,对于所有的线程是共享 ...

  2. MongoDB的Shell操作

    前言 本文从介绍了MongoShell 的配置.脚本.数据类型和其他指令. MongoShell - 简介 MongoShell是一个互动的JavaScript接口的MongoDB,可以使用Mongo ...

  3. springboot项目启动报错Failed to configure a DataSource: 'url' attribute is not specified and no embedde

    springboot项目启动报错Failed to configure a DataSource: 'url' attribute is not specified and no embedde 创建 ...

  4. ListView控件的理解——自洽理论

    写在前面的话: *标题中已经说明,是自洽理论.因此,有几率会有理解错误.但是,你不可以因此骂我. -我这个人经不起别人的批评,如果你批评我,我就,我就.... ## <第一行代码>读书笔记 ...

  5. PAT甲级题分类汇编——序言

    今天开个坑,分类整理PAT甲级题目(https://pintia.cn/problem-sets/994805342720868352/problems/type/7)中1051~1100部分.语言是 ...

  6. golang 上传文件(包括 gin 实现)

    golang web服务有时候需要提供上传文件的接口,以下就是具体示例.为了示例简单(吐槽下 golang 的错误处理), 忽略了所有的错误处理.本文会用两种方式(标准库和gin)详细讲解 golan ...

  7. ideaui安装破解、相关配置、JRebel破解

    前言: Ideaui 2019(官网 https://www.jetbrains.com/idea/?fromMenu) 安装软件就简单啦,下载选择路径就完事了,注意文件名全英文:   但是按照咱们传 ...

  8. 织梦安全防护：禁止uploads、data、templets执行脚本

    下面介绍下如何针对uploads.data.templets做PHP脚本限制:对uploads.data.templets 三个目录做执行php脚本限制,就算被上传了木马文件到这些文件夹,也是无法运行 ...

  9. UOJ #7 NOI2014购票（点分治+cdq分治+斜率优化+动态规划）

    重写一遍很久以前写过的题. 考虑链上的问题.容易想到设f[i]为i到1的最少购票费用,转移有f[i]=min{f[j]+(dep[i]-dep[j])*p[i]+q[i]} (dep[i]-dep[j ...

  10. 笔记 - C#从头开始构建编译器 - 2

    视频与PR:https://github.com/terrajobst/minsk/blob/master/docs/episode-02.md 作者是 Immo Landwerth(https:// ...