页面处理

1.将静态文件导入项目

2.thymeleaf布局

现在的页面还不能正常运行会报500错误。
需要修改页面里面的内容

将几个页面公共部分提取出来：-fragments.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:fragment="head(title)"><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title th:text="${title}">_fragments</title><link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.10/semantic.min.css"><link rel="stylesheet" href="../static/css/typo.css" th:href="@{/static/css/typo.css}"><link rel="stylesheet" href="../static/css/animate.css" th:href="@{/static/css/animate.css}"><link rel="stylesheet" href="../static/lib/prism/prism.css" th:href="@{/static/lib/prism/prism.css}"><link rel="stylesheet" href="./static/lib/prism/tocbot.css" th:href="@{/static/lib/tocbot/tocbot.css}"><link rel="stylesheet" href="../static/css/me.css" th:href="@{/static/css/me.css}">
</head>
<body><!-- 导航 --><nav th:fragment="menu(n)" class="ui inverted attached segment m-shadow-small m-padded-tb-mini"><div class="ui container"><div class="ui inverted secondary stackable menu"><h2 class="ui teal header item">Blog</h2><a href="#" class="m-item item m-mobile-hide" th:classappend="${n==1} ? 'active'"><i class="home icon"></i> 首页</a><a href="#" class="m-item item m-mobile-hide" th:classappend="${n==2} ? 'active'"><i class="idea icon"></i> 分类</a><a href="#" class="m-item item m-mobile-hide" th:classappend="${n==3} ? 'active'"><i class="tags icon"></i> 标签</a><a href="#" class="m-item item m-mobile-hide" th:classappend="${n==4} ? 'active'"><i class="clone icon"></i> 归档</a><a href="#" class="m-item item m-mobile-hide" th:classappend="${n==5} ? 'active'"><i class="info icon"></i> 关于</a><div class="right m-item item m-mobile-hide"><div class="ui icon inverted transparent input"><input type="text" placeholder="Search...."></input><i class="search link icon"></i></div></div></div></div><a href="#" class="ui menu toggle black icon button m-top-right m-mobile-show"><i class="sidebar icon"></i></a></nav><!-- 底部 --><footer th:fragment="footer" class="ui inverted vertical segment m-padded-tb-massive"><div class="ui center aligned container"><div class="ui inverted divided stackable grid"><div class="three wide column"><div class="ui inverted link list"><div class="item"><img src="../static/images/QR_csdn.png" th:src="@{/static/images/QR_csdn.png}" class="ui rounded image" alt="" style="width: 110px"></div></div></div><div class="three wide column"><h4 class="ui inverted header">最新博客</h4><div class="ui inverted link list"><a href="#" class="item">用户故事(User Story)</a><a href="#" class="item">用户故事(User Story)</a><a href="#" class="item">用户故事(User Story)</a></div></div><div class="three wide column"><h4 class="ui inverted header">联系我</h4><div class="ui inverted link list"><a href="#" class="item">Email：tyaojoy@foxmail.com</a><a href="#" class="item">QQ：211163529</a></div></div><div class="seven wide column"><h4 class="ui inverted header">Blog</h4><div class="ui inverted link list"><p class="m-text-thin m-text-spaced m-opacity-mini">这是我的个人博客、会分享关于编程、写作、思考相关的任何内容，希望可以给来到这儿的人有所帮助...</p></div></div></div><div class="ui inverted section divider"></div><p class="m-text-thin m-text-spaced m-opacity-tiny">Copyright © 2021 Blog Designed by 观山奇</p></div></footer><th:block th:fragment="script"><script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script><script src="https://cdn.jsdelivr.net/semantic-ui/2.2.10/semantic.min.js"></script><script src="../static/lib/prism/prism.js" th:src="@{/static/lib/prism/prism.js}"></script><script src="../static/lib/qrcode/qrcode.min.js" th:src="/static/lib/qrcode/qrcode.min.js"></script><script src="../static/lib/tocbot/tocbot.min.js" th:src="/static/lib/tocbot/tocbot.min.js"></script><script src="https://cdn.jsdelivr.net/npm/jquery.scrollto@2.1.3/jquery.scrollTo.min.js"></script></th:block>
</body>
</html>

修改页面：

其他类似，就不做展示了

3.修改404页面和500页面

404.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="_fragments :: head('404')"></head>
<body><!-- 导航 --><nav th:replace="_fragments :: menu(0)"></nav><br><br><br><div class="m-container-small m-padded-tb-massive"><div class="ui error message m-padded-tb-huge"><div class="ui contianer"><h2>404</h2><p>对不起，你访问的资源不存在！</p></div></div></div><!-- 底部 --><footer th:replace="_fragments :: footer"></footer>
</body>
</html>

500.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="_fragments :: head('500')"></head>
<body><!-- 导航 --><nav th:replace="_fragments :: menu(0)"></nav><br><br><br><div class="m-container-small m-padded-tb-massive"><div class="ui error message m-padded-tb-huge"><div class="ui contianer"><h2>500</h2><p>对不起，服务器错误</p></div></div></div><!-- 底部 --><footer th:replace="_fragments :: footer"></footer>
</body>
</html>

个人博客处理——页面处理相关推荐

前端 - 博客系统(页面设计)
博客系统(页面设计) 实现一个简单的博客系统. 当前先完成页面设计的部分. 通过前面学习的前端知识来构建出网页. 主要分成四个页面: 博客列表页博客正文页博客登陆页博客编辑页预期效果博客列表 ...
HTML点击元素页面回到顶部,博客园页面添加返回顶部 TOP 按钮
博客园页面添加返回顶部 TOP 按钮 TOP 按钮进入网页管理 -> 设置在 "页面定制 CSS 代码" 中添加如下 CSS 样式, 当然你可以改为自己喜欢的样式此处可 ...
其他：博客园页面美化
看了其他大佬的博客园页面都那么好看,我也决定美化一下自己的博客园,顺便在这里分享一下我的博客园页面美化的方法.这里我选用的模版是SimpleMemory. 效果图页面定制CSS代码 1)页面透明 # ...
制作支付宝博客捐款页面
我想很多朋友在博客圈子闲逛的时候也见过类似内容:文章底部有个向作者捐款的按钮,点击之后就到了对方预先设置的支付宝收款页面.在一些大型博客,往往美其名曰打赏作者!其实这个功能想要实现的话挺简单的,只需要 ...
博客园页面源代码结构分析
博客园页面源代码结构分析一.总结板块注释结束可以加上end 二.博客园页面源代码结构分析 1.页面样例: 2.页面源代码分析: 1 <!DOCTYPE html> 2 <html ...
Spring boot个人博客【博客详细页面】---学习03
文章目录一.思维导图二.个人博客 1.创建博客详情页面 2.运行效果 3.添加二维码 4.运行查看效果图 5.博客信息 6.运行查看效果 7.留言区域 8.运行查看效果一.思维导图二.个人博客 ...
前端 - 博客系统(页面设计) - JavaEE初阶 - 细节狂魔
文章目录前言博客系统博客列表页紧急修改一下背景图片,虽然上面那张图很美,但是小了.特别的模糊,我就在替换一下背景图 html 代码部分通用 css 代码部分博客列表页专属 css文件博客 ...
博客园页面定制CSS代码
更新时间:2019-02-18 花了一点时间修改自己的博客背景设置,现在分享一下代码.希望对大家有帮助.我的比较简单,主要代码模板来源于另外一个博主,然后我在基础上进行了部分修改.原博主的连接:htt ...
Django 学习小组：博客开发实战第二周教程 —— 实现博客详情页面和分类页面
本教程内容已过时,更新版教程请访问: django 博客开发入门教程. 上周我们完成了博客的 Model 部分,以及 Blog 的首页视图 IndexView. 本节接上周的文档 Django 学习小 ...

个人博客处理——页面处理

文章目录

页面处理

1.将静态文件导入项目

2.thymeleaf布局

3.修改404页面和500页面

404.html

500.html

个人博客处理——页面处理相关推荐

最新文章

热门文章