看了就能用的HTML+Freemarker小知识

问题起源

最近在按工信部要求对网站做适老化无障碍浏览改造。在改造过程中发现一个Bug如下图所示：

经过多轮排查，最终定位到网站变灰相关的一段freemarker代码，发现它的ELSE分支输出了一个空的<span></span>标签：

[#assignnowTime=.now?string["hhmmSSsss"]/]
[#ifcheckGrayScale]
[#ifgrayScaleType??&&1==grayScaleType]
<script>
var isHomeGrayByTemplate=true
</script>
<linkrel="stylesheet"href="/static/assets/css/homeGrayscale.css?t=${nowTime?number}"/>
[#elseifgrayScaleType??&&2==grayScaleType]
<script>
var isHomeGrayByTemplate=false
</script>
<linkrel="stylesheet"href="/static/assets/css/grayscale.css?t=${nowTime?number}"/>
[/#if]
<scripttype="text/javascript"src="/static/assets/third/jquery.gray.min.js?t=${nowTime?number}"></script>
<scripttype="text/javascript"defer="defer"src="/static/assets/js/grayScale.js?t=${nowTime?number}"></script>
[#else]
<span></span>
[/#if]
复制代码

我推断就是这里的问题，因为span标签是需要渲染的，所以出现在了body标签中，不能出现在head标签中。经过多轮测试发现确实是这里的问题。

结论

1. 在HTML 标签中不要出现具体的需要渲染的HTML标签，比如等，否则会出现渲染标签以后的内容都会输出到标签中。
2. 在freemarker模板中，如果ELSE分析不输出任何内容，发现freemarker不会输出空文件，即不更新静态化文件，因此在ELSE分支中还必须输出点什么，所以我决定输出一个空script标签，最终问题得到解决。

最终提交的代码如下：

[#assign nowTime = .now?string["hhmmSSsss"]/]
[#if checkGrayScale]
[#if grayScaleType?? && 1==grayScaleType]
<script>
  var isHomeGrayByTemplate = true
</script>
<link rel="stylesheet" href="/static/assets/css/homeGrayscale.css?t=${nowTime?number}"/>
[#elseif grayScaleType?? && 2==grayScaleType]
<script>
  var isHomeGrayByTemplate = false
</script>
<link rel="stylesheet" href="/static/assets/css/grayscale.css?t=${nowTime?number}"/>
[/#if]
<script type="text/javascript" src="/static/assets/third/jquery.gray.min.js?t=${nowTime?number}"></script>
<script type="text/javascript" defer="defer" src="/static/assets/js/grayScale.js?t=${nowTime?number}"></script>
[#else]
<script></script>
[/#if]
复制代码