创建公共的header

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:fragment="common_header(title,links,styles)"><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><link rel="stylesheet" th:href="@{/wms/static/css/bootstrap.min.css}"/><title th:replace="${title}">默认系统名称</title>
</head>
</html>

首先通过html的xmlns属性引入thymeleaf的命名空间。
通过th:fragment标签定义一个模板(值是模板的ID，整个页面唯一)，如果是引入整个页面，这个模板标签则不是必须的，它的作用是让其他页面可以包含某个页面的某个代码片段，通过模板ID区分。
th:fragment标签值的括号里面的是参数，其他页面包含这个模板的时候可以传递参数过来，然后通过${参数名}格式获取参数值
link元素中的th:href也可以传统css样式表引入的方式，两种都可以生效

引入公共header

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="common/common_header :: common_header(~{::title},~{::link},~{})"><title>登录</title>
</head>

在html的head元素中通过th:replace属性引入，值为模板的路径，不需要模板的后缀后面::跟的是模板的ID(即公共header页面中th:fragment定义的值)。ID后面括号是给模板传递参数，通过~{::元素名}格式能获取指定元素的文本。

转载于:https://www.cnblogs.com/heavenbird/articles/9644985.html

thymeleaf引入公共header相关推荐

Thymeleaf引入公共片段方式
引入公共片段引入公共片段的th属性,包括三种方式 th:insert 将公共片段,整个插入到声明引入的元素中 th:replace 将声明引入的元素,替换为公共片段 th:include 将被引入的 ...
Thymeleaf中设置每个页面引入公共css样式
场景 Thymeleaf提取公共页面(从实例入手,以inspinia模板为例): https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/9 ...
vue 公用页面引用_vue中实现部分页面引入公共组件
前言我们可以把公共组件放到App.vue中,但是有时候我们希望某个页面不需要这写公共部分,那么需要怎么设置呢? 本文为大家介绍三种部分页面引入公共组件的方法. 方法一:利用子路由创建一个layou ...
Thymeleaf抽取公共页面片段
抽取页面项目中,一般把所有的公共页面片段都抽取出来放在一个独立的页面中其他,所有的页面根据需要进行引用参考文档 th:fragment 抽取公共元素 Name,随便自定义命名 <!DOC ...
html引入公共的头部，导航栏，尾部
个人分类: HTML5 很不错的文章,讲解html引入公共的头部,导航栏,尾部的很仔细_ 一.asp语言和PHP语言首先制作一个头部文件head.asp,或者一个底部文件foot.asp.如主页是i ...
thymeleaf引入css js写法
以下是HTML引入方法,如果springboot使用thymeleaf模板,下面写法无法正常引入资源文件,需改为thymeleaf引入方法 HTML引入方法: <link href=" ...
php页面引用公共文件,WeiPHP插件模板中快速引入公共模板文件
WeiPHP插件模板中快速引入公共模板文件,weiphp建立于onethink之上,简单修改代码,无需填写绝对路径实现轻松引入模板.记录一下,分享给需要的人. 修改文件: ThinkPHP/Libra ...
vue中，scss样式的三种写法——当前页面直接定义、@import引入样式、main.js引入公共样式 deep和important的写法
vue中,scss样式的三种写法--当前页面直接定义.@import引入样式.main.js引入公共样式 & deep和important的写法 1.安装scss # 安装node-sass ...
微信小程序引入less并引入公共样式
微信小程序引入less并引入公共样式在原生微信小程序开发中,直接使用wxss来写组件样式是非常麻烦的,它不能进行嵌套书写,也不能声明变量,所以我们经常会引入一些css编译器来辅助我们书写样式,例如l ...

thymeleaf引入公共header

创建公共的header

引入公共header

thymeleaf引入公共header相关推荐

最新文章

热门文章