Thymeleaf静态资源引入方式及公共页面代码抽取

静态资源引入

Thymeleaf模板引擎url问题,要用如下的方式写,确保在任何情况下都能访问到

<!-- Bootstrap core CSS -->
<link href="bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- 引用webjars的方式引入静态资源 -->
<link th:href="@{/webjars/bootstrap/4.3.1/css/bootstrap.min.css}" rel="stylesheet">

<!-- 自定义样式 -->
<link href="bootstrap/dist/signin.css" th:href="@{/bootstrap/dist/signin.css}" rel="stylesheet">

<!-- 图片路径 -->
<img class="mb-4" src="bootstrap/brand/bootstrap-solid.svg" th:src="@{/bootstrap/brand/bootstrap-solid.svg}" alt="" width="72" height="72">

公共页面代码抽取

抽取方式:将公共片段抽取到一个html文件中,加上相应的id

<!-- 1.公共导航栏抽取start -->
<nav class="navbar navbar-dark fixed-top bg-dark flex-md-nowrap p-0 shadow" th:frament="topbar" id="topbar">
    <a class="navbar-brand col-sm-3 col-md-2 mr-0" href="#">welcome,[[${session.loginUser}]]</a>
    <input class="form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search">

    <ul class="navbar-nav px-3">
        <li class="nav-item text-nowrap"><a class="nav-link" href="#">注销</a></li>
    </ul>
</nav><!-- 1.公共导航栏抽取end -->

在另一个页面引用的方式为:通过id选择器,Thymeleaf语法

<!-- 引入topbar -->
<div th:replace="commons/bar::#topbar"></div>

原文地址:https://www.cnblogs.com/zxfei/p/11600982.html

时间: 2024-10-09 15:40:19

Thymeleaf静态资源引入方式及公共页面代码抽取的相关文章

thymeleaf公共页面元素抽取

thymeleaf公共页面元素抽取 1.抽取公共片段 <div th:fragment="copy"> © 2011 The Good Thymes Virtual Grocery </div> 2.引入公共片段 <div th:insert="~{footer :: copy}"></div> ~{templatename::selector}:模板名::选择器 ~{templatename::fragmentnam

百度静态资源(JS)公共库

     例如: chosen http://apps.bdimg.com/libs/chosen/1.1.0/chosen.jquery.min.js classlist http://apps.bdimg.com/libs/classlist/2014.01.31/classList.min.js cookies.js http://apps.bdimg.com/libs/Cookies.js/0.4.0/cookies.min.js dojo http://apps.bdimg.com/l

11、SpringBoot-CRUD-thymeleaf公共页面元素抽取

thymeleaf公共页面元素抽取 存在一种现象:两个文件的代码只有一部分代码不一样 其余的均相同,此时就可以提取公共的代码去简化开发 1.抽取公共片段 <div th:fragment="copy"> © 2011 The Good Thymes Virtual Grocery </div> 2.引入公共片段 <div th:insert="~{footer :: copy}"></div> ~{templatena

springboot + thymeleaf静态资源访问404

在使用springboot 和thtmeleaf开发时引用静态资源404,静态资源结如下: index.html文件: <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <meta charset = "UFT-8" /> <title>Spring Boot Application</title> <lin

spring 过滤器- 过滤登陆请求路径(过滤静态资源跳转到登陆页面)

public class LoginedFilter implements Filter { /** * 排除的地址 */ private Map<String, Boolean> ignore; /** * 排除的后缀 */ private Map<String, Boolean> ignoreExt; /** * <b>功能描述:</b>实现接口,登录验证<br> * <b>修订记录:</b><br> */

EasyUI Tabs + Yii2.0实现iframe方式打开页面(解决共用静态文件引入加载的问题)

在项目实际开发中,有将打开的各个链接页面隔离的需求(防止静态资源起冲突),这个时候常规思路就是使用iframe来实现!但遇到一个比较棘手的问题,当用easyui Tabs打开一个iframe页面时,怎么解决原有共用静态资源引入的问题.有人建议可以考虑将共用静态资源文件放到一个php文件中,然后每次渲染页面时加载即可,这个时候很多朋友会想到PHP的include()方式,但是每个iframe页面都要include一次,岂不是很麻烦.而且项目的要求是iframe打开和easyui tabs href

Spring mvc应用 加载静态资源的几种方式

总结几种Spring mvc应用加载静态资源的方式 1.使用服务器的默认Servlet处理 对于不同的服务器,处理静态资源的servlet-name不一样,需要去看服务器具体的配置文件 比如resin-3.1.12,通过查看app-default.xml可以看到默认处理jsp的servlet-name为>resin-jsp 所以可以通过在web.xml中添加静态资源的访问 <servlet-mapping>        <servlet-name>resin-jsp<

前端工程精粹(一):静态资源版本更新与缓存

本文从一个全新的视角来思考web性能优化与前端工程之间的关系,通过解读百度前端集成解决方案小组(F.I.S)在打造高性能前端架构并统一百度40多条前端产品线的过程中所经历的技术尝试,揭示前端性能优化在前端架构及开发工具设计层面的实现思路. 性能优化原则及分类 笔者先假设本文的读者是有前端开发经验的工程师,并对企业级web应用开发及性能优化有一定的思考,因此我不会重复介绍雅虎14条性能优化原则.如果您没有这些前续知识,请移步这里来学习. 首先,我们把雅虎14条优化原则,<高性能网站建设指南>以及

SpringBoot加载静态资源 无法加载js问题

spring boot thymeleaf 静态资源 默认模板位置为templates , static出现静态资源方在该目录下会出现访问404错误 查了很久发现是 @EnableWebMvc 的问题,我修改方式把注解去掉,用默认的, @Configuration//@EnableWebMvc //添加该注解,则是完全控制MVC,public class CrossConfig extends WebMvcConfigurerAdapter { @Override public void add