Spring Boot制作个人博客-归档页

最新推荐文章于 2021-07-05 02:13:53 发布
最新推荐文章于 2021-07-05 02:13:53 发布
阅读量390 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_48838980/article/details/117627102
版权
本文介绍如何利用Spring Boot制作个人博客的归档页面，包括创建归档页、修改代码以调整标题、标签选择和文章列表，以及按照年份分类展示文章列表，最后呈现最终效果。
摘要由CSDN通过智能技术生成

文章目录

  • 根据不同年份，展示文章列表

1、创建归档页

  • 随意复制一个html改名为archives.html
    在这里插入图片描述

2、修改代码

（1）修改标题

在这里插入图片描述

在这里插入图片描述

（2）修改默认选择标签

在这里插入图片描述

在这里插入图片描述

（3）修改文章列表标题栏

在这里插入图片描述

在这里插入图片描述

（4）删除中间内容代码

在这里插入图片描述

3、按照年份做分类列表

在这里插入图片描述

<!--按照年份做列表-->
            <h3 class="ui center aligned header">2017</h3>
            <div class="ui fluid vertical menu">
                <a href="#" target="_blank" class="item">
                    <span>
                        <i class=" ui teal circle icon"></i>关于刻意练习的清单
                        <div class="ui teal basic left pointing label m-padded-tb-mini">9月03</div>
                    </span>
                    <div class="ui orange basic left pointing label m-padded-tb-mini">原创</div>

                </a>


            </div>

  • 复制标签的内容即可获得此效果
    在这里插入图片描述

  • 复制2017年代码将改为2016年

在这里插入图片描述

4、最终效果

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=debice-width,initial-scale=1.0">
    <title>归档</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.10/semantic.min.css">
    <link rel="stylesheet" href="static/css/css.css">
</head>
<body>
    <!--导航栏-->
    <nav class="ui inverted attached segment m-padded-tb-mini m-shadow-small" ><!--inverted 反色  attached 圆角变直角-->
        <!--设置log-->
        <div class="ui container">
            <div class="ui inverted secondary stackable menu"><!--stackable（可堆叠效果）会根据页面大小改变显示比例-->
                <h2 class="ui teal header item">Blog</h2>
                <a href="#" class="m-item item m-mobile-hide"><i class="home icon"></i> 首页</a>
                <a href="#" class="m-item item m-mobile-hide"><i class="idea icon"></i>分类</a>
                <a href="#" class="m-item item m-mobile-hide">
最低0.47元/天 解锁文章
qq_48838980
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
个人博客【博客标签、归档页面】---学习05
uoprewqsnh的博客
06-06 600
文章目录一、思维导图二、个人博客1、创建标签页面tags.html2、编写导航栏3、运行查看效果4、中间部分5、底部部分6、运行查看页面7、创建归档页面8、归档导航页面9、运行查看效果10、中间部分11、运行查看效果 一、思维导图 二、个人博客 1、创建标签页面tags.html 2、编写导航栏 active 选中状态 <nav class="ui inverted attached segment m-padded-tb-mini m-shadow-small" > &lt
实训-个人博客（博客归档页面）
qq_46302173的博客
07-01 307
1，archives.html页面 <!DOCTYPE html> <html lang="en" xmlns:th="http://www.w3.org/1999/xhtml"> <head th:replace="_fragments :: head(~{::title})"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initia
Spring boot实训 个人博客系统四 归档页
aqaerw的博客
07-05 183
1.新建文件archives.html 2.将头部代码复制过来,将头部文件生成: 2.在index添加活动显示页面: 3.修改头部名称为归档: 4.编写中间主内容: <div class="ui fluid vertical menu"> <a href="#" target="_blank" class="item"> <span>
Springboot7 博客的归档
weixin_45199794的博客
07-15 145
Springboot7 博客的归档 //BlogServiceImpl package com.zr.service.impl; import com.zr.dao.BlogDao; import com.zr.po.Blog; import com.zr.po.BlogQuery; import com.zr.po.Tag; import com.zr.po.Type; import com.zr.service.IBlogService; import org.springframework.bea
springboot+thymeleaf实现博客归档功能
卓尔货币的博客
05-11 440
文章同步发布在我的个人博客(zhuoerhuobi.cn) 随着博客数量的增多，对于系统来说，一个归档功能显得必不可少。以下是基于springboot开发的按时间倒序的归档功能。 1、后端数据逻辑 首先如果能够提前在建文章表时增加文章的年、月等字段，可以方便我们从数据库有序、分层级的读取文章。由于我的article表早已创建好，其中只有创建时间戳这一个关于时间的字段，所以需要在代码进行一些较复杂的操作。 我的预想是按照年-月两层树结构来显示归档，所以我将全部文章倒序取出来之后，放在一个两级map中储存.
基于Spring Boot+Vue的博客系统 18——博客归档功能
芊雨的博客
10-16 935
需求 博客归档界面单独设计一个页面，左边以月份的形式展示时间，右边分页按月份展示文章，默认展示最新月份的文章，点击左边时间右边会显示对应月份的文章。 实现 后端API实现 数据库访问层（ArticleRepository）设计： // 查询出所有文章最后一次更新的时间 @Query(value = "select gmt_update from article", nativeQuery = tr...
spring-boot-starter-web-2.7.13.jar
最新发布
04-21
spring-boot-starter-web-1.0.0.RELEASE.jar 各个版本，免费下载 spring-boot-starter-web.RELEASE.jar 各个版本，免费下载 spring-boot-starter-web.jar 各个版本，免费下载 如果不能免费下载，关注我，评论区联系...
spring-boot-starter-parent-1.5.13.RELEASE.zip
04-01
标题 "spring-boot-starter-parent-1.5.13.RELEASE.zip" 提供的信息表明，这是一个与Spring Boot相关的压缩包，具体来说是Spring Boot的起步依赖（Starter Parent）的一个版本，版本号为1.5.13.RELEASE。Spring Boot...
spring-boot-configuration-processor-2.5.6-API文档-中英对照版.zip
07-14
赠送jar包：spring-boot-configuration-processor-2.5.6.jar； 赠送原API文档：spring-boot-configuration-processor-2.5.6-javadoc.jar； 赠送源代码：spring-boot-configuration-processor-2.5.6-sources.jar； ...
spring-boot-actuator-autoconfigure-2.3.12.RELEASE-文档-中英对照版.zip
07-13
赠送jar包：spring-boot-actuator-autoconfigure-2.3.12.RELEASE.jar； 赠送原API文档：spring-boot-actuator-autoconfigure-2.3.12.RELEASE-javadoc.jar； 赠送源代码：spring-boot-actuator-autoconfigure-2.3.12....
seata-spring-boot-starter-1.3.0-API文档-中文版.zip
06-04
赠送jar包：seata-spring-boot-starter-1.3.0.jar； 赠送原API文档：seata-spring-boot-starter-1.3.0-javadoc.jar； 赠送源代码：seata-spring-boot-starter-1.3.0-sources.jar； 赠送Maven依赖信息文件：seata-...
springboot个人博客的构建（14）归档内容展示
qq_40979622的博客
11-20 387
归档的形式和前面的几乎差不多。 首先在归档的额前台引入模板。 然后在控制层开始实现。 报错了，然后我们来业务层来实现它。首先要返回一个map集合，我们在业务成构建。 String对应的是年份，list代表的年份的列表。 最终要返回结果的集合。不需要传递参数，对所有的进行归档。     先把所有的年份列表拿过来。 年份所对应的博客列表。     博客数量，...
Spring Boot制作个人博客-博客归档页面
qq_48838980的博客
06-25 353
文章目录1、归档页面2、archives.html页面3、新建方法4、查询方法5、方法实现6、在定义一个接口方法7、新建ArchiveShowController.java8、运行测试 1、归档页面 2、archives.html页面 3、新建方法 4、查询方法 5、方法实现 6、在定义一个接口方法 7、新建ArchiveShowController.java package net.zjs.lrm.web; import net.zjs.lrm.service.BlogService;
Spring Boot - 个人博客 - 归档页 + 关于我
Forlogenの解忧杂货铺
07-14 608
文章目录1. 归档页1.1 需求分析1.2 前端处理1.3 后端处理2. 关于我2.1 需求分析2.2 前后端处理 归档页 关于我 1. 归档页 1.1 需求分析 博客归档页如上所示，它实现的也是对于博客的统计归档，不过是根据时间的先后进行。对于具体某一年来说，同样是按照时间先后进行排列。首先需要获取到博客的总数，在顶部的segment中显示；然后根据年份进行查询数据库，获取对应年份的博客列表，其中列表按照时间降序排列；对于具体的某一篇博客，需要显示的信息有标题、更新时间和标签。 由于年份和对应的博
好看的博客归档页面
愿你拥有大风与烈酒,也能享受孤独与自由
03-28 1235
发现一个比较好看的个人博客归档页面的设计 如图 只需要一个CSS样式以及JS随后接收后台数据渲染就可以了 timeline.css *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } .timeline ul li { list-style-type: none; position: relative; width: 6px; margin: 0 auto
Spring Boot实训开发个人博客17 -博客归档
lbj5063的博客
07-02 159
文章目录一、 一、
基于spring boot实现归档、异常处理、登录拦截
qq_43510659的博客
08-02 228
归档功能 NewRepository @Query("select function('date_format',n.updateTime,'%Y')as year from News n group by year order by year desc ") List<String> findGroupYear(); @Query("select n from News n where function('date_format',n.updateTime,'%Y')
SpringBoot个人博客开发（四）---- 博客归档页面
ce121的博客
06-01 233
博客归档页面 还是老方法 修改index页面的主体部分 就不多做介绍了，直接上代码 创建archives.html 篇数统计：用分类或者首页或者标签的都行 年份定义为 h2标题大小 文章列表采用竖向菜单模式 复制代码进去主体部分 里面的东西一下就看明白了，自己看吧 <!--页面主体--> <div class="m-padded-tb-large m-container-small"> <div class="ui container">
springboot开发小而美的博客学习笔记05（归档页面）
LALisafans的博客
06-15 305
归档页面分为 导航、底部还有中间由时间划分归纳的列表 导航： <!-- 导航 --> <nav class="ui inverted attached segment m-padded-tb-mini m-shadow-small" > <div class="ui container"> <div class="ui inverted secondary stackable menu"> <!-- L
Spring Boot构建个人博客系统：全栈开发与数据库集成
"Spring Boot个人博客系统是一个基于Spring Boot框架的轻量级全栈式应用，专为开发者设计，用于展示如何使用Spring Boot和Spring Data JPA进行基础的开发。该系统主要关注用户管理、文章管理和物品管理这三个核心...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值