Thymeleaf 引入公共样式和 js（解决 script 重复引入问题）

####前言
无论使用 JSP、还是Thymeleaf 或者其他模板语言，在页面中经常会用到一些公共的`css`和`js`文件，这里不说其他的模板语言如何实现，今天就说说`Thymeleaf`如何实现，以及网上那些文章有什么问题！
####实现
由于对`thymeleaf`的语法不怎么熟悉，所以首先是搜索引擎一搜，结果搜到的是千篇一律的用法，大致就是如下：
- 新建`common.html`
```html
<head th:fragment="head(title, metas, links, scripts)">
    <title th:replace="${title}">Hello world!</title>
    
    ...
    <th:block th:replace="${metas}"/>
    <th:block th:replace="${links}"/>
    <th:block th:replace="${scripts}"/>
</head>
```
- 新建`demo.html`
```html
<head th:include="common/head :: head(~{::title}, ~{::meta}, ~{::link},~{::script})"
      th:fragment="thisHead">
    <title>需要替换的title</title>
    <meta name="keywords" content="xxx"/>
    <meta name="description" content="xxx"/>
    <link rel="stylesheet" th:href="@{/css/slider.css}">
    <script th:src="@{/js/base64.js}"></script>
</head>
```
如果没有额外的`meta`、`link`或者`script`，用`~{}`代替。
好了，上面做法错事没错，刚开始用着发现没什么问题，当我在页面的非`head`部分写了其他的`script`，这种做法也很常见吧，比如`footer`块引入一些js文件。

但是查看网页源码发现，除了`head`里面的`script`标签被引入到了公共代码块里面，整个`html`其他地方的`script`也全被加到了`head`里面，这样一来就出现了重复引入。

如果仅仅是引入`js`文件，不查看网页源代码的话还发现不了这个问题，这个问题不仅引起`js`代码的重复引用，当你想用`<script>document.write("xxxx")</script>`输出一些信息到指定位置时，发现在页面顶部也打印出来了，这也是重复引入`script`代码导致的问题。

于是查看文档，`~{}`的用法：
|语法|描述|
|--|--|
|~{templatename}|引用整个模板文件的代码片段|
|~{templatename :: selector}|selector 可以是 th:fragment 指定的名称或其他选择器。如类选择器、ID选择器等|
|~{::selector}|相当于 ~{this :: selector}，表示引用当前模板定义的代码片段|

首先想到的是能不能用`XPATH`语法，随便试了下，好像不行。

那么如何只是获取`<head>`中的`<script>`或者`<link>`标签元素呢？
上面说了支持`类选择器、ID选择器等`，于是给`<script>`或者`<link>`加个`class`，确实可行。
但是感觉在`<link>`、`<script>`上加`class`总觉得有点奇怪。

想到`css`样式语法中`head script`即可定义`script`标签的样式，于是尝试模板改为`~{::head script}`，结果报错，无法解析。

一路波折，这问题国内搜索时无望了，全是千篇一律的前面的用法，我在想，难道上面那样写就没有遇到和我一样的问题？

最终`Github`一个`issue`中获得答案。

正确写法如下：
```
~{::head/script}
```
解释：这跟指定`script`的作用域差不多，意思就是获取`head`标签里面所有的`script`代码块。如果只写`~{::script}`那么取的是整个页面所有的`script`代码块。

####结语
国内文章真的太水了，一不小心又浪费了大把时间。

Thymeleaf 引入公共样式和 js（解决 script 重复引入问题）

发表评论：