thymeleaf标签——页面引入表头

刺骨的言语ヽ痛彻心扉 2022-04-06 04:52 374阅读 0赞

**本文旨为笔记，仅供参考  
在前端页面用thymeleaf标签做一个非常简易的页面包含表头的例子：  
效果如图：**![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjI0ODc2NA_size_16_color_FFFFFF_t_70]

非常简单：

只需要一个标签就ok·

<div th:include="header ::myheader"> </div>

**再看看表头部分：**

<body>
    	<div th:fragment="myheader">
    		<div style="color:red">首页 滚动 国际 图片 视频 军事 评论 历史 文化 谷雨 公益 旅游 新闻哥</div>
    		
    		
    	</div>
    	
    	
    </body>

**在正文部分引入表头，就可以在每一个页面都有表头的内容：**

<body>
    	//header代表类名 ；
    	//myheader代表 th:fragment
    	
    	<div th:include="header ::myheader"></div>
    	
    	//弹出提示框
    	<script>alert($);</script>
    			
    	记者从国防科工局、国家航天局获悉：12月8日2时23分，我国在西昌卫星发射中心用长征三号乙运载火箭成功发射嫦娥四号探测器，<br/>
    	开启了月球探测的新旅程。嫦娥四号探测器后续将经历地月转移、近月制动、环月飞行，最终实现人类首次月球背面软着陆，<br/>
    	开展月球背面就位探测及巡视探测，并通过已在使命轨道运行的“鹊桥”中继星，实现月球背面与地球之间的中继通信。<br/>
    	
    </body>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjI0ODc2NA_size_16_color_FFFFFF_t_70]: /images/20220406/57345b741c3a41598f263aa23528a833.png

发表评论取消回复

表情：

评论列表（有 0 条评论，374人围观）

还没有评论，来说两句吧...

相关阅读

相关 Thymeleaf中设置每个页面引入公共css样式

场景 Thymeleaf提取公共页面（从实例入手，以inspinia模板为例）： [https://blog.csdn.net/BADAO\_LIUMANG\_QIZH

迷南。/ 2023年10月18日 20:40/ 0 赞/ 59 阅读

相关 5.5 Thymeleaf 页面布局（Thymeleaf 公共页面抽取）

> 第5章 Thymeleaf 模板引擎 > > 5.1 [Thymeleaf 入门][Thymeleaf] > 5.2 [Thymeleaf 表达式][Thymel

- 日理万妓/ 2023年10月07日 23:46/ 0 赞/ 22 阅读

相关 thymeleaf 登录页面

login.html <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://w

旧城等待，/ 2023年09月29日 10:24/ 0 赞/ 15 阅读

相关 Thymeleaf页面布局

作者：Rafał Borowiec —[http://blog.codeleak.pl][http_blog.codeleak.pl] 介绍通常网站共享常见的页面组件

逃离我推掉我的手/ 2023年09月25日 12:56/ 0 赞/ 66 阅读

相关 thymeleaf 引入模板

-------------------- thymeleaf 引入模板 \\\\\\\\\\\\\\\\\\\\\ 模板引入表达式 ~\{te

你的名字/ 2022年11月25日 13:23/ 0 赞/ 151 阅读

相关 thymeleaf引入公共css、js

有时候很多css文件是公共的，我们必须要在每个html文件中引入它们，其实我们可以利用Thymeleaf的模板布局，把这些css文件抽出来，同时如果有某个html文件专属的cs

向右看齐/ 2022年11月18日 10:54/ 0 赞/ 173 阅读

相关 thymeleaf 引入js css 无效

最近使用`thymeleaf` 引入 `js` 、`css` 总是无效。纠结了一会，然后找原因，发现了没有写 `type="text/css"` ；然后总结了一下，以防下次入坑

浅浅的花香味﹌/ 2022年05月17日 00:20/ 0 赞/ 284 阅读

相关 Thymeleaf引入公共片段方式

引入公共片段引入公共片段的th属性，包括三种方式 th:insert 将公共片段，整个插入到声明引入的元素中 th:replace 将声明引入的元素，替

￡神魔★判官ぃ/ 2022年05月15日 13:35/ 0 赞/ 386 阅读

相关 thymeleaf引入模板页面

通常我们一个网站页面的头部和底部都是相同的，我们不可能在每个页面都写相同的内容，一般都会将这些相同的写成模板在需要的页面引入即可。 demo开始：写一个通用的底部：

怼烎@/ 2022年05月14日 13:41/ 0 赞/ 244 阅读

相关 thymeleaf标签——页面引入表头

本文旨为笔记，仅供参考在前端页面用thymeleaf标签做一个非常简易的页面包含表头的例子：效果如图：![在这里插入图片描述][watermark_type_ZmF

刺骨的言语ヽ痛彻心扉/ 2022年04月06日 04:52/ 0 赞/ 375 阅读