【Thymeleaf之Template Layout】使用Navication让导航栏在每一个页面保持一致

最新推荐文章于 2022-06-25 22:57:27 发布
最新推荐文章于 2022-06-25 22:57:27 发布
阅读量1k 收藏 4
点赞数
文章标签： Themeleaf
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44100826/article/details/103287393
版权

【Thymeleaf之Template Layout】使用Template Layout让导航栏在每一个页面保持一致

1、导入JQuery

  • https://jquery.com/.在这里插入图片描述
  • 新建文件：jquery-3.4.1.min.js，把下载好的东西全部复制进去
    在这里插入图片描述
  • 引入JS文件，注意路径：与下面BootStrap的一致
    在这里插入图片描述

2、新建Navication.html

  • 官方文档链接. 8.1 Including template fragments

  • 新建一个Navication.html，放入模板，把导航栏放入模板中

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<body>

<div th:fragment="nav">
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                        data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="/flush">中意社区</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
                    <li><a href="#">Link</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                           aria-expanded="false">Dropdown <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">One more separated link</a></li>
                        </ul>
                    </li>
                </ul>
                <form class="navbar-form navbar-left">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Search">
                    </div>
                    <button type="submit" class="btn btn-default">Submit</button>
                </form>
                <ul class="nav navbar-nav navbar-right">
                    <li th:if="${session.user == null}">
                        <a href="/regiest">注册</a>
                    </li>
                    <li th:if="${session.user != null}">
                        <a href="/publish">发布</a>
                    </li>
                    <li class="dropdown" th:if="${session.user != null}">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                            <span  th:text="${session.user.getUsername()}"></span>
                            <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href="#">个人中心</a></li>
                            <li><a href="#">占位符</a></li>
                            <li><a href="#">占位符</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="/index">退出登录</a></li>
                        </ul>
                    </li>

                    <li class="dropdown" th:if="${session.user == null}">
                        <a href="/login">登录</a>
                    </li>

                </ul>
            </div>
        </div>
    </nav>
</div>

</body>

</html>

3、在主页引用Navication.html

<!--导航栏-->
<div th:insert="~{navication :: nav}"></div>

完工！

Lzy_First
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
多种左侧树形菜单导航
04-22
左侧树形菜单导航大全,提供多种左侧树形实例
SpringBoot整合websocket实现群聊；thymeleaf->template->html 页面展示
最新发布
08-27
在IT行业中，Spring Boot是一个非常流行的Java开发框架，它简化了Spring应用的初始搭建以及开发过程。WebSocket协议则是一种在客户端和服务器之间提供全双工通信的协议，它允许数据在两者之间持续流动，而非传统的...
使用Thymeleaf模板封装页面公有部分（CSS，JS，导航栏等）
YINLINNEVERG的博客
06-01 1万+
简述 一般来说，一个网站的各个网页中的导航栏，页尾，菜单等部分都是相同或相似的，可以将这部分代码提取成模板供其它页面使用。 要实现该功能，可以使用Thymeleaf模板的 th:replace、th:include或th:insert属性，借助th:fragment属性来实现。 属性 特点 th:replace 不保留自己的主标签，保留th:fragment的主...
html中 导航条置顶的代码,如何让我的导航栏保持在每个HTML页面的顶部（避免复制相同的代码）...
weixin_42373088的博客
05-31 487
您可以为您的应用程序创建一个......然后在基地的每一个孩子的状态可以将内容添加到命名视图“内容”。与ui-sref-active="active"很容易突出显示当前活动的链接。请看看下面的演示或此fiddle。angular.module('demoApp', ['ui.router'])\t .config(routeConfig);function routeConfig($urlRout...
使用Thymeleaf设置导航栏选中后高亮
debugtoday的博客
01-06 916
1、首先引入JS，用#thisNav接收后台标记的字段，获取该页面的id，根据class="a-first"取到需高亮导航的id(此id需要根据后台字段获取th:data-id="${nav.id}")，逻辑：若该页面id与选中的导航id一致thisValue == item.dataset.id，则在class="a-first"这个class中追加一个selected样式 window.onload = function(){ var thisValue = document.querySe
SpringBoot代码复用——thymeleaf提取导航栏并插入或替换元素
z2431435的博客
04-07 1388
文章目录创建通用文件commons提取导航栏1.找到导航栏所在代码块2.把导航栏的前端代码块移入commons并命名3.在各个有需求的html文件中使用导航栏组件 创建通用文件commons 注意：commons和所有要用thymeleaf的html文件都应该设置引用： <!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd"> <html xmlns="http://www.w
spring boot使用thymeleaf跳转页面实例代码
08-30
在Spring Boot中，Thymeleaf是一个常用的模板引擎，它允许开发者使用标准的HTML作为模板，然后在其中添加Thymeleaf表达式来处理动态内容。这篇教程将深入讲解如何在Spring Boot应用中使用Thymeleaf进行页面跳转。 ...
thymeleaf-layout-dialect:Thymeleaf的一种方言，可让您构建布局和可重复使用的模板，以提高代码重用性
04-29
Thymeleaf的一种方言，可让您构建布局和可重复使用的模板，以提高代码的重用性。 文献资料 可以在专用文档网站上找到有关布局方言的所有最新文档。 对于支持Thymeleaf 2的版本1文档，经典自述文件仍然存在于 它有...
jetty-springmvc-thymeleaf-template:使用嵌入 Jetty 并使用 Thymeleaf 作为视图技术的模板 Spring 应用程序
06-30
模板 - 嵌入式 Jetty/SpringMVC/Thymeleaf 应用程序 考虑使用以更简单的方式构建带有嵌入式 Web 服务器的 Spring MVC 应用程序。...默认包目标将在目标目录中构建一个 jar，并将依赖 jar 复制到 target/lib
template-layout
03-18
template-layout
thymeleaf的使用
02-24
thymeleaf是一种Java模板引擎，那何为模板引擎呢？模板引擎就是为了使用户页面和业务数据相互分离而出现的，将从后台返回的数据生成特定的格式的文档，这里说的特定格式一般都指HTML文档。它能够处理html、xml、js、...
谷粒商城首页左侧导航栏实现
weixin_49260963的博客
06-25 919
谷粒商城首页左侧导航栏实现
springboot中的thymeleaf
u013313232的博客
08-25 119
springboot中的thymeleaf thymeleaf 提取公共部分的代码 将公用的顶部和侧边的导航栏整合在一块 格式 th:fragment=“topbar” ~~00000000000000000000000000000000000000000000000000000000 ~~ 怎么用 语法 th:insert=~{/commons/commons :: topbar} <div th:insert="~{/commons/commons :: topbar}"&g.
thymeleaf导航栏---公共页面元素抽取
鲸鱼姐的专栏
05-24 4526
1.public.html <!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <bo...
一篇文章解决springboot+thymeleaf多语言国际化
caiycx的博客
07-17 3万+
1.前言 博主最近在写一个多语言的项目，因为之前没实际接触过多语言的设计，所以写这篇文章记录下这次多语言开发的过程。 博主的开发环境是：Springboot1.5.6 + thymeleaf，需要注意的是，springboot 1.x和2.x有比较大的差别。 文章实现的主要功能： springboot+thymeleaf最基本的国际化配置 自定义配置国际化，区域解析器 读取多个分类的国际化文件； 后台设置前端页面显示国际化信息的文件 利用拦截器和注解自动设置前端页面显示国际化信息的文件
thymeleaf模版实现页面布局(layout)两种方法
Hylun的专栏
12-06 2万+
方法一： 使用thymeleaf的layout:fragment标签，布局页如下： html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"> head> meta http-equiv="Content-Type" content
thymeleaf模板页面两种布局方案
guying4875的专栏
07-24 2万+
方案一： 采用th:include + th:replace方式进行布局 首先创建布局文件layout1.html 页面中内容如下： &lt;!DOCTYPE html&gt; &lt;html xmlns:th="http://www.thymeleaf.org"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;met
spring boot+thymeleaf+bootstrap 简单实现后台管理系统界面
热门推荐
JAVA
07-12 9万+
spring boot+thymeleaf+bootstrap 简单实现后台管理系统界面
如何用thymeleaf设计导航栏模板页面
05-12
Thymeleaf是一个流行的模板引擎，它可以与Spring框架很好地集成。下面是一个简单的示例，演示如何使用Thymeleaf设计导航栏模板页面： 1. 创建一个名为 "nav.html" 的模板文件，并在其中添加以下代码： ``` <nav> <ul> <li><a href="/">Home</a></li> <li><a href="/about">About</a></li> <li><a href="/contact">Contact</a></li> </ul> </nav> ``` 2. 在需要使用导航栏的页面中，使用以下代码来包含模板： ``` <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <title>My Page</title> </head> <body> <div th:replace="nav :: nav"></div> <h1>Welcome to my page</h1> <!-- rest of the page content --> </body> </html> ``` 这里的 "nav" 是模板文件名， "::" 符号表示使用片段选择器，"nav" 表示片段名。这个代码会将 "nav.html" 文件中的导航栏插入到页面中。 3. 在Spring Boot应用程序中，可以使用以下代码来配置Thymeleaf： ```java @Configuration public class ThymeleafConfig { @Bean public ClassLoaderTemplateResolver templateResolver(){ ClassLoaderTemplateResolver templateResolver = new ClassLoaderTemplateResolver(); templateResolver.setPrefix("templates/"); templateResolver.setSuffix(".html"); templateResolver.setTemplateMode("HTML"); return templateResolver; } @Bean public SpringTemplateEngine templateEngine(){ SpringTemplateEngine templateEngine = new SpringTemplateEngine(); templateEngine.setTemplateResolver(templateResolver()); return templateEngine; } @Bean public ThymeleafViewResolver viewResolver(){ ThymeleafViewResolver viewResolver = new ThymeleafViewResolver(); viewResolver.setTemplateEngine(templateEngine()); return viewResolver; } } ``` 这里的 "templates/" 是你的模板文件所在的相对路径，可以根据自己的需要进行修改。 以上就是使用Thymeleaf设计导航栏模板页面的基本步骤。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值