前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >SpringBoot2.x系列教程(三十二)Thymeleaf资源导入及公共布局

SpringBoot2.x系列教程(三十二)Thymeleaf资源导入及公共布局

作者头像
程序新视界
发布2020-02-13 10:40:59
8970
发布2020-02-13 10:40:59
举报
文章被收录于专栏:丑胖侠丑胖侠

本篇文章来大家学习一下在Thymeleaf下如何引入静态资源及通用代码块。

引入静态资源

Thymeleaf中引入静态资源比较简单,与前面讲到的@{…}语法一致。

代码语言:javascript
复制
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>Hello Thymeleaf</title>
    <link rel="stylesheet" type="text/css" th:href="@{css/style.css}"/>
    <!--<link rel="stylesheet" type="text/css" href="css/style.css"/>-->
    <script th:src="@{js/test.js}"></script>
    <!--<script src="js/test.js"></script>-->
</head>
<body>

    <button onclick="alertMsg()">Hello</button>

</body>
</html>

上述代码中通过th:href、th:src结合@{…}语法引入了静态资源内容。

注意:使用Thymeleaf的引用方法,只有运行项目才有效。普通打开HTML无法解析。

引入公共页面

通常页面中会有许多公共的部分,比如常见的头部(样式及导航)、底部(分页及版权)、左部(导航)等。这些相同的内容避免每个页面都重复编写,可使用引入来完成。

Thymeleaf提供了三种引入方式:

代码语言:javascript
复制
<body>
    <div th
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 引入静态资源
  • 引入公共页面
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档