使用ThymeLeaf添加和引入公共页面

最新推荐文章于 2024-05-16 17:28:54 发布

半路马龙

最新推荐文章于 2024-05-16 17:28:54 发布

阅读量1.5k

点赞数 1

分类专栏：前端文章标签： html

本文链接：https://blog.csdn.net/weixin_45059962/article/details/106054242

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1，公共页面提取，公共页面一般都是头尾，用th:fragment属性标记公共部分，属性值用来引用

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
    <div th:fragment="common-header">
        <p>我是公共页面</p>
        <p>我叫common-page.html</p>
        <div>
            <!-- 判断谁的activeURI 等于传过来的activeURI，谁等于谁就亮-->
            <a th:class="${activeURI=='one'?'active':''}"></a>
            <a th:class="${activeURI=='two'?'active':''}"></a>
        </div>
    </div>
</body>
</html>

2，其他页面引入公共页面


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
    <!-- 在这里引入公共页面 common-page是公共页的名字，common-header是公共页th:fragment属性值-->
    <!-- activeURI是做导航高亮的，引用公共页面的同时把activeURI传过去，使公共页面高亮相应部位 -->
    <div th:replace="common-page::common-header(activeURI='one')"></div>
    <div>
        <p>我引用公共页面</p>
    </div>
</body>
</html>

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
    <!-- 在这里引入公共页面 -->
    <div th:replace="common-page::common-header(activeURI='two')"></div>
    <div>
        <p>我引用公共页面</p>
    </div>
</body>
</html>

半路马龙

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
使用ThymeLeaf添加和引入公共页面

1，公共页面提取，公共页面一般都是头尾，用th:fragment属性标记公共部分，属性值用来引用<!DOCTYPE html><html xmlns:th="http://www.thymeleaf.org"><head><meta charset="UTF-8"><title>Insert title here</title></head><body> <div th:fragmen
复制链接

扫一扫

专栏目录