如何写一个网站——创建前端页面（一）
2022-10-20 11:01:36
1. 寻找合适的前端模板
在php中文网站中找寻了一些模板，最终确定了一个多用途的图文展示博客模板
2. 新建项目并加载模板
3. 提取页面公共部分
在
templates下新建commons包，并建立commons.html页面，用来提取网页的头部导航栏和底部，除此之外还可以把页面的css资源和js资源等提取出来！避免在后续的页面中重复使用相同的代码，提高代码的维护性和简洁性！
导入Thymeleaf模板
pom.xml中导入依赖
html页面中引入
xmlns:th="http://www.thymeleaf.org"开始的时候在HTML中引入这段代码一直都是灰色的，我以为是没有导入成功，其实只是因为在下面的页面中并没有使用到th的语法！！！只要引用了th标签之后，就不是灰色的了！
commons.html页面：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19<!--提取引入的css资源-->
<div th:fragment="commons-css">
............................................
</div>
<!--提取引入的js等资源-->
<div th:fragment="commons-jquery">
............................................
</div>
<!--提取头部导航栏-->
<nav class="navbar navbar-area navbar-expand-lg has-topbar nav-style-01 index-01" th:fragment="topbar">
............................................
</nav>
<!--提取底部栏-->
<footer class="footer-area index-01" th:fragment="footer">
.............................................
</footer>index.html页面：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15<!--引入css/js资源-->
<div th:replace="~{commons/commons::commons-css}"></div>
<div th:replace="~{commons/commons::commons-jquery}"></div>
<!--引入导航栏-->
<div th:replace="~{commons/commons::topbar}"></div>
<!--导航栏end-->
<!--中间内容部分-->
...............................................
...............................................
<!--引入底部栏-->
<div th:replace="~{commons/commons::footer}"></div>
<!--底部栏end-->出错：
引入的css/js资源不显示具体的样式
原因：在thymeleaf中，
href前应该加上th标签，且引入的路径加上@{}，也不用带上static路径，eg:<link rel="stylesheet" th:href="@{css/bootstrap.min-v4.6.0.css}">头部导航栏从commons中引入成功，但是样式没有加载成功
原因：在引入导航栏时用的是
th:include=""，当改为th:replace=""后样式就正常显示了！th:insert=”” ，th:replace =””，th:include =”” 的区别
th:insert——插入片段，保留自身标记
th:replace ——插入片段，替换了自身标记
th:include ——插入片段的内容，去掉片段外层标记，同时保留自身标记
eg:
原本的标记：
1
2
3<footer th:fragment="copy">
© 2011 The Good Thymes Virtual Grocery
</footer>用三个元素来分别引用：
1
2
3
4
5
6
7
8
9<body>
<div th:insert="footer :: copy"></div>
<div th:replace="footer :: copy"></div>
<div th:include="footer :: copy"></div>
</body>运行结果：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18<body>
<div>
<footer>
© 2011 The Good Thymes Virtual Grocery
</footer>
</div>
<footer>
© 2011 The Good Thymes Virtual Grocery
</footer>
<div>
© 2011 The Good Thymes Virtual Grocery
</div>
</body>
4. 初具雏形
完成了首页的初步版块和头部导航栏及底部导航栏！！！
