SpringBoot个人博客开发（十）----前端页面重构

最新推荐文章于 2024-03-12 16:16:23 发布

王绵州

最新推荐文章于 2024-03-12 16:16:23 发布

阅读量273

点赞数

分类专栏： Spring

本文链接：https://blog.csdn.net/ce121/article/details/117536922

版权

本文介绍了在SpringBoot项目中进行前端页面重构的过程，包括分析并拆分头部、主体和尾部，创建布局文件，替换各个页面的头部、导航栏和底部元素，以及重构发布页面和错误页面，实现了页面的统一管理和高效维护。

摘要由CSDN通过智能技术生成

此时要做的事情是在WS中制作前端页面的同学将项目复制到IDEA中。IDEA中制作的同学开始制作布局文件

布局开始

分析所有页面的头部，主体，尾部。有什么可以拆分出来的地方。将其拆分。且在fragments中准备替换资源。
在这里插入图片描述
内容为

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">

<head th:fragment="head(title)">   <!--title为传参-->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title th:replace="${title}">博客详情</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
    <link rel="stylesheet" href="../static/css/typo.css" th:href="@{/css/typo.css}">
    <link rel="stylesheet" href="../static/css/me.css" th:href="@{/css/me.css}">
    <link rel="stylesheet" href="../static/css/animate.css" th:href="@{/css/animate.css}">
    <link rel="stylesheet" href="../static/lib/prism/prism.css" th:href="@{/lib/prism/prism.css}">
    <link rel="stylesheet" href="../static/lib/tocbot/tocbot.css" th:href="@{/lib/tocbot/tocbot.css}">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">
<!--&lt;!&ndash;    <script src="https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js"></script>&ndash;&gt;看板娘功能-->
</head>
<body>
<!--导航-->
<nav th:fragment="menu(n)" class="ui inverted attached segment 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="item" th:classappend="${n==1} ? 'active'"><i class="home icon"></i>首页</a>
            <a href="#" class="item" th:classappend="${n==2} ? 'active'"><i class="idea icon"></i>分类</a>
            <a href="#" class="item" th:classappend="${n==3} ? 'active'"><i class="tags icon"></i>标签</a>
            <a href="#" class="item" th:classappend="${n==4} ? 'active'"><i class="hdd icon"></i>归档</a>
            <a href="#" class="item" th:classappend="${n==5} ? 'active'">