SpringBoot第十一篇：SpringBoot 之Thymeleaf：使用心得(后续可能有更新)

Thymeleaf好用，但是有些情况也不好用，下面分享下我使用thymeleaf的一些心得，如果后续遇到问题还会持续更新。

1.如何对页面进行拆分，比如将导航或者底部html拆分，多个地方重复使用？以及如何对拆分的部分传入参数。

thymeleaf提供一套模版机制。将拆分的部分用下面的格式书写

<div th:fragment="模板名字">模板代码</div>

然后在需要包含上面模板的页面中使⽤ ```th:insert``` 或 ```th:replace```属性（Thymeleaf 3.0 不再推荐使⽤ th:include）进行引用

<header class="s-header" th:insert="模板所在的HTML文件的名字 :: 模版名">

th:insert和th:replace区别就只是insert会把模板的内容放入上面header的标签体中，而replace就将header替换掉，在header的位置粘贴模板内容。

ok，上面是基础，现在有个需求，那如果我的模板需要用到一些model页面数据呢？比如页面的导航栏我抽出来当作一个模板----nav，nav中有一个current的class样式，就是我点那个页面，那个页面就加一个current的样式，表示选中这个页面了。解决方案就是我得给这个nav模版传入一个参数，然后判断是那个页面就在那个页面的clas上加current吧。

<div th:fragment="模板名字(参数1，参数2，...)">模板代码</div>

而相应的，在调用的页面这样写：

<header class="s-header" th:insert="模板所在的HTML文件的名字 :: 模版名(参数1，参数2，...)">

ok 上面那么写就ok了。

2.在内联js代码块中调用js文件中的函数的注意事项：

首先明确一点：thymeleaf到现在为止还无法在js文件中直接使用tymeleaf的变量。如果有大佬知道的话，望告知一下，谢谢啦。

他的官方文档写的模棱两口，如下图，说什么将js文件作为文本模板进行处理，然后我试了好久没成功在js文件用执行thymeleaf代码。

那就算了吧，换种方式，在内联js中调用js中的函数，将参数传过去就好了吧

ok，很好，最后成功了，但是要注意一点。你的内联js要在其他js文件的后面，后面！！！！，因为浏览器是按顺序加载的，如果不按这个顺序写你的内联js，你很可能会在浏览器的控制台中得到这个红色的提示：

。。。。

后面也是花了我一点时间去解决了。记录一下，送给有缘人（菜鸟...）。。。