springboot个人博客的构建（3） thymleaf模板的引入

第一步：静态页面导入到IDEA中

先看前台：

再看后台IDEA：

建立相同的目录，这样直接复制到IDEA中，就不会出现乱码或者引用有问题的问题。

 

 

第二：thymleaf模板的引入

直接访问静态页面，没问题。可是运行IDEA运行整个项目的时候页面出现了格式混乱的问题。此时需要thymleaf模板的引入。

先看头部：

模板页面：

网页的头部引入方式： 

导航 footer script ：

 

 

 看看index 里面的设置：

 

 其余的网页都类似这样。

下面把刚才引入的重新写下：

th:fragment="head(title)

<title th:replace="${title}">博客详情</title>

th：replace="_fragments :: head(~{::title})"

前两个是模板里面的，第三个是网页index里面的。下面的类似。

导航：

th:fragment="menu(n)"

th:classappend="${n==1} ? 'active'"

上面是模板，下面是网页

th：replace="_fragments :: menu(1)"

脚：

th:fragment="footer"

上面是模板，下面是网页

 th:replace="_fragments :: footer"

script:具体设计

<th:block th:fragment="script">

<script src="../static/lib/prism/prism.js" th:src="@{/lib/prism/prism.js}"></script>
<script src="../static/lib/tocbot/tocbot.min.js" th:src="@{/lib/tocbot/tocbot.min.js}"></script>
<script src="../static/lib/qrcode/qrcode.min.js" th:src="@{/lib/qrcode/qrcode.min.js}"></script>
<script src="../static/lib/waypoints/jquery.waypoints.min.js" th:src="@{/lib/waypoints/jquery.waypoints.min.js}">

</th:block>

上面是模板，下面是网页

<!--/*/th:block th:replace="_fragments :: script"/*/-->

<!--/*/</th:block>/*/-->

即使上面的设置好了，但是网页还是格式乱了，后来，一句一句检查，发现是标点符号错了

应该是英文下的:,而不是中文下的：。真是自己粗心导致的。这个锅我背。

出现的其他异常，比如blog页面无法打开，排除问题后，发现是少了个标点符号。