分类和标签列表页

src/main/java/cc/bnblogs/common/ArticleSearch.java

@@ -1,5 +1,6 @@
 package cc.bnblogs.common;
 
+import cc.bnblogs.pojo.Article;
 import lombok.AllArgsConstructor;
 import lombok.Builder;
 import lombok.Data;
@@ -18,6 +19,8 @@ public class ArticleSearch {
     // 4种查询条件和两个分页参数
     //分类id
     private Integer cid;
+    // 标签id
+    private Integer tid;
     //状态
     private Integer status;
     //标题
@@ -28,4 +31,12 @@ public class ArticleSearch {
     private Integer pageNum;
     //页大小
     private Integer pageSize;
+
+    public static ArticleSearch indexSearch(Integer pageNumber,Integer pageSize){
+        pageNumber = Math.max(pageNumber,1);
+        pageSize = Math.max(pageSize,1);
+        return ArticleSearch.builder().
+                pageNum(pageNumber).pageSize(pageSize).type(Article.TYPE_ARTICLE).status(Article.STATUS_PUBLISH).
+                build();
+    }
 }

src/main/java/cc/bnblogs/common/PageHelper.java

@@ -20,4 +20,8 @@ public class PageHelper<T> {
     private List<T> rows;
     // 总记录数
     private Long total;
+    // 当前页
+    private Integer currentPage;
+    // 总页数
+    private Integer totalPages;
 }

src/main/java/cc/bnblogs/controller/IndexController.java

@@ -1,11 +1,19 @@
 package cc.bnblogs.controller;
 
+import cc.bnblogs.common.ArticleSearch;
+import cc.bnblogs.common.PageHelper;
+import cc.bnblogs.pojo.Article;
+import cc.bnblogs.pojo.Category;
+import cc.bnblogs.pojo.Tag;
 import cc.bnblogs.service.*;
 import org.springframework.stereotype.Controller;
 import org.springframework.ui.Model;
 import org.springframework.web.bind.annotation.GetMapping;
 import org.springframework.web.bind.annotation.ModelAttribute;
 import org.springframework.web.bind.annotation.PathVariable;
+import org.springframework.web.bind.annotation.RequestParam;
+
+import java.util.Objects;
 
 /**
  * @author zfp@bnblogs.cc
@@ -19,15 +27,17 @@ public class IndexController {
     private final TagService tagService;
     private final ArticleService articleService;
     private final BannerService bannerService;
+    private final CategoryService categoryService;
 
 
     public IndexController(FriendsService friendsService, NavigationService navigationService,
-                           TagService tagService, ArticleService articleService, BannerService bannerService) {
+                           TagService tagService, ArticleService articleService, BannerService bannerService, CategoryService categoryService) {
         this.friendsService = friendsService;
         this.navigationService = navigationService;
         this.tagService = tagService;
         this.articleService = articleService;
         this.bannerService = bannerService;
+        this.categoryService = categoryService;
     }
 
 
@@ -43,21 +53,55 @@ public class IndexController {
 
     // 前台访问路由
     @GetMapping("/")
-    public String index(Model model) {
+    public String index(@RequestParam(required = false, defaultValue = "1") Integer pageNumber,Model model) {
+        pageNumber = pageNumber < 1 ? 1: pageNumber;
+        model.addAttribute("articlePage",articleService.search(ArticleSearch.indexSearch(pageNumber,1)));
         model.addAttribute("banners",bannerService.list());
         return "index";
     }
 
-    @GetMapping("/category")
-    public String category() {
-        return "category";
+    /**
+     * 对应标签的列表页
+     * 格式: http://localhost:8080/tag/{id}.html?pageNumber=1
+     * @param id 标签id
+     * @param pageNumber 页号
+     * @param model model
+     * @return 标签列表页
+     */
+    @GetMapping("/tag/{id}.html")
+    public String tagList(@PathVariable Integer id,
+                               @RequestParam(required = false,defaultValue = "1") Integer pageNumber,
+                               Model model){
+        Tag tag = tagService.detail(id);
+        model.addAttribute("tag",tag);
+        // todo id不存在时要特殊处理
+        ArticleSearch articleSearch = ArticleSearch.indexSearch(pageNumber,5);
+        articleSearch.setTid(id);
+        PageHelper<Article> articlePage = articleService.search(articleSearch);
+        model.addAttribute("articlePage",articlePage);
+        model.addAttribute("pageType","tag");
+        return "list";
     }
 
-    @GetMapping("/list")
-    public String list() {
+    @GetMapping("/category/{id}.html")
+    public String categoryList(@PathVariable Integer id,
+                               @RequestParam(required = false,defaultValue = "1") Integer pageNumber,
+                               Model model){
+        Category category = categoryService.detail(id);
+        model.addAttribute("category",category);
+        // todo 分类不存在时要特殊处理
+        ArticleSearch articleSearch = ArticleSearch.indexSearch(pageNumber,5);
+        articleSearch.setCid(id);
+        PageHelper<Article> articlePage = articleService.search(articleSearch);
+        model.addAttribute("articlePage",articlePage);
         return "list";
     }
 
+    @GetMapping("/category")
+    public String category() {
+        return "category";
+    }
+
     @GetMapping("/tags")
     public String tags() {
         return "tags";

src/main/java/cc/bnblogs/mapper/CommentMapper.java

@@ -1,5 +1,6 @@
 package cc.bnblogs.mapper;
 
+import cc.bnblogs.pojo.Article;
 import cc.bnblogs.pojo.Comment;
 import org.springframework.data.jpa.repository.JpaRepository;
 
@@ -8,4 +9,10 @@ import org.springframework.data.jpa.repository.JpaRepository;
  * @createTime: 2022/10/17
  */
 public interface CommentMapper extends JpaRepository<Comment,Integer> {
+    /**
+     * 统计文章对应的评论数
+     * @param article 文章
+     * @return 评论个数
+     */
+    long countByArticle(Article article);
 }

src/main/java/cc/bnblogs/pojo/Article.java

@@ -39,6 +39,10 @@ public class Article implements Serializable {
     // 浏览量
     private Integer views;
 
+    // 文章的评论数
+    @Transient
+    private Long commentCount;
+
     // 创建时间
     @Temporal(TemporalType.TIMESTAMP)
     private Date created;
@@ -68,5 +72,9 @@ public class Article implements Serializable {
     public static final Integer COMMENT_ENABLE = 1;
     // 不允许评论
     public static final Integer COMMENT_DISABLE = 2;
+    // 返回摘要
+    public String summary() {
+        return this.content.substring(0,Math.max(200,this.content.length()));
+    }
 
 }

src/main/java/cc/bnblogs/pojo/Comment.java

@@ -35,7 +35,6 @@ public class Comment implements Serializable {
     private Boolean view;
     // 评论的父评论
     private Integer pid;
-
     //指定数据库列的类型为时间戳
     //评论创建时间
     @Temporal(TemporalType.TIMESTAMP)

src/main/java/cc/bnblogs/service/ArticleService.java

@@ -3,9 +3,11 @@ package cc.bnblogs.service;
 import cc.bnblogs.common.ArticleSearch;
 import cc.bnblogs.common.PageHelper;
 import cc.bnblogs.mapper.ArticleMapper;
+import cc.bnblogs.mapper.CommentMapper;
 import cc.bnblogs.mapper.TagMapper;
 import cc.bnblogs.pojo.Article;
 import cc.bnblogs.pojo.Category;
+import cc.bnblogs.pojo.Tag;
 import cc.bnblogs.utils.UpdateUtil;
 import org.springframework.cache.annotation.CacheConfig;
 import org.springframework.cache.annotation.CacheEvict;
@@ -20,6 +22,8 @@ import org.springframework.stereotype.Service;
 import org.springframework.transaction.annotation.Transactional;
 import org.thymeleaf.util.StringUtils;
 
+import javax.persistence.criteria.JoinType;
+import javax.persistence.criteria.ListJoin;
 import javax.persistence.criteria.Predicate;
 import java.util.ArrayList;
 import java.util.Date;
@@ -36,10 +40,12 @@ import java.util.stream.Collectors;
 public class ArticleService {
     private final TagMapper tagMapper;
     private final ArticleMapper articleMapper;
+    private final CommentMapper commentMapper;
 
-    public ArticleService(ArticleMapper articleMapper, TagMapper tagMapper) {
+    public ArticleService(ArticleMapper articleMapper, TagMapper tagMapper, CommentMapper commentMapper) {
         this.articleMapper = articleMapper;
         this.tagMapper = tagMapper;
+        this.commentMapper = commentMapper;
     }
 
     /**
@@ -143,10 +149,20 @@ public class ArticleService {
                 // 标题的模糊查询
                 predicateList.add(builder.like(root.get("title"), "%" + search.getTitle() + "%"));
             }
+            if (Objects.nonNull(search.getTid())) {
+                // todo 这里涉及多表连接，再看一下
+                ListJoin<Article, Tag> join = root.join(root.getModel().getList("tags", Tag.class), JoinType.LEFT);
+                predicateList.add(builder.equal(join.get("id"), search.getTid()));
+            }
             return builder.and(predicateList.toArray(new Predicate[predicateList.size()]));
         },pageable);
 
-        return PageHelper.<Article>builder().rows(articlePage.getContent()).total(articlePage.getTotalElements()).build();
+        return PageHelper.<Article>builder().
+                rows(articlePage.getContent().stream().peek(x->x.setCommentCount(commentMapper.countByArticle(x))).collect(Collectors.toList()))
+                .total(articlePage.getTotalElements())
+                .currentPage(search.getPageNum())
+                .totalPages(articlePage.getTotalPages())
+                .build();
     }
 
     /**
@@ -158,4 +174,5 @@ public class ArticleService {
     public List<Article> hotList(int limit) {
         return articleMapper.hotList(limit);
     }
+
 }

src/main/resources/application.yml

@@ -70,8 +70,8 @@ website:
   sina: https://weibo.com/6289381214
   mail: 1337425156@qq.com
   logo: https://cravatar.cn/avatar/a2bc729e1ee6040fff197c705e19d449?s=400&r=G&d=mp&ver=1664632345
-  footer: '© 2020-2022 <a href="https://hugo.bnblogs.cc">barney</a> <a target="_blank" href="https://beian.miit.gov.cn">赣ICP备2022002184号-1</a>
-<a style="margin-left: 10px" target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11011402012109"><img style="vertical-align: top;" src="https://imagebed-1252410096.cos.ap-nanjing.myqcloud.com/2046/d4ab98835b8842c88eededac6e7c9e35.png">
+  footer: '© 2020-2022 <a href="https://hugo.bnblogs.cc">barney</a><br /><a target="_blank" href="https://beian.miit.gov.cn">赣ICP备2022002184号-1</a>
+<a style="margin-left: 10px" target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11011402012109"><br /><img style="vertical-align: top;" src="https://imagebed-1252410096.cos.ap-nanjing.myqcloud.com/2046/d4ab98835b8842c88eededac6e7c9e35.png">
 赣公网安备 36092202000146号</a>'
 default-images:
   images:

src/main/resources/templates/common.html

@@ -103,11 +103,39 @@
     </div>
     <div class="lw-right-item lw-tag-cloud">
         <h4><i class="fa fa-tags lw-mr5" aria-hidden="true"></i>标签云</h4>
-
         <!--/*@thymesVar id="tags" type="java.util.List<cc.bnblogs.pojo.Tag>"*/-->
-        <a th:each="tag:${tags}" href="#" th:title="${tag.name}" th:text="${tag.name}"></a>
+        <a th:each="tag:${tags}" th:href="@{/tag/{id}.html(id=${tag.id})}" th:title="${tag.name}" th:text="${tag.name}"></a>
     </div>
 </th:block>
+
+<th:block th:fragment="article(articleList)">
+    <article th:each="article:${articleList}" class="lw-article-item lw-posr">
+        <div class="lw-article-cover lw-posa lw-xs-hidden">
+            <img th:src="${@defaultImages.cover(article.cover)}" alt="">
+        </div>
+        <div class="lw-article-info">
+            <h2>
+                <a class="lw-xs-hidden" th:href="@{/category/{id}.html(id=${article.category.id})}"><span class="lw-category"
+                                                      th:text="${article.category.name}"></span></a>
+                <a th:href="@{/{id}.html(id=${article.id})}" th:text="${article.title}"></a>
+            </h2>
+            <p class="lw-desc" th:text="${article.summary()}"></p>
+            <p class="lw-text-hidden lw-article-more">
+                <i class="fa fa-clock-o lw-mr5"></i>
+                <th:block th:text="${#dates.format(article.created,'yyyy-MM-dd HH:mm')}"></th:block>
+                <i class="fa fa-eye lw-mr5 lw-ml10"></i>
+                <th:block th:text="${article.views}"></th:block>
+                <i class="fa fa-comment lw-ml10 lw-mr5"></i>
+                <th:block th:text="${article.commentCount}"></th:block>
+                <th:block th:if="${!article.tags.isEmpty()}">
+                    <i class="fa fa-tag lw-ml10 lw-mr5"></i>
+                    <a th:each="tag:${article.tags}"  th:href="@{/tag/{id}.html(id=${tag.id})}" class="lw-mr5" th:title="${tag.name}" th:text="${tag.name +' '}"></a>
+                </th:block>
+
+            </p>
+        </div>
+    </article>
+</th:block>
 <th:block th:fragment="footer">
     <div class="lw-friend-link">
         <div class="lw-container">

src/main/resources/templates/index.html

@@ -59,110 +59,18 @@
             <div class="swiper-pagination"></div>
         </div>
         <div class="lw-article-list">
-            <article class="lw-article-item lw-posr">
-                <div class="lw-article-cover lw-posa lw-xs-hidden">
-                    <img src="/static/image/1.jpg" alt="">
-                </div>
-                <div class="lw-article-info">
-                    <h2>
-                        <a class="lw-xs-hidden" href=""><span class="lw-category">Python相关</span></a>
-                        <a href="">Conda虚拟环境使用Conda虚拟环境使用Conda虚拟环境使用</a>
-                    </h2>
-                    <p class="lw-desc">Conda虚拟环境使用查看虚拟环境conda env list创建虚拟环境conda create -n
-                        [venvname]将[venvnConda虚拟环境使用查看虚拟环境conda env list创建虚拟环境conda create -n
-                        [venvname]将[venvnConda虚拟环境使用查看虚拟环境conda env list创建虚拟环境conda create -n
-                        [venvname]将[venvn...</p>
-                    <p class="lw-text-hidden lw-article-more"><i class="fa-regular fa-calendar-days lw-mr5"></i>2022-09-28
-                        12:00 <i
-                                class="fa-solid fa-eye lw-mr5 lw-ml10"></i>
-                        11283<i class="fa-solid fa-comment lw-ml10 lw-mr5"></i>9382</p>
-                </div>
-            </article>
-            <article class="lw-article-item lw-posr">
-                <div class="lw-article-cover lw-posa lw-xs-hidden">
-                    <img src="/static/image/2.jpg" alt="">
-                </div>
-                <div class="lw-article-info">
-                    <h2>
-                        <a class="lw-xs-hidden" href=""><span class="lw-category">个人随笔</span></a>
-                        <a href=""> 关于我这些年的经历</a></h2>
-                    <p class="lw-desc">
-                        人这一辈子那么有限，作为一个普通人，也许我穷极一生也不会有什么大的成就可以让外人为我写下一个传记。但是我可以用自己的手记录下我这一生，吃过的...</p>
-                    <p class="lw-text-hidden lw-article-more"><i class="fa-regular fa-calendar-days lw-mr5"></i>2022-09-28
-                        12:00 <i
-                                class="fa-solid fa-eye lw-mr5 lw-ml10"></i>
-                        11283<i class="fa-solid fa-comment lw-ml10 lw-mr5"></i>9382</p>
-                </div>
-            </article>
-            <article class="lw-article-item lw-posr">
-                <div class="lw-article-cover lw-posa lw-xs-hidden">
-                    <img src="/static/image/3.jpg" alt="">
-                </div>
-                <div class="lw-article-info">
-                    <h2><a class="lw-xs-hidden" href=""><span class="lw-category">技术学习</span></a>
-                        <a href=""> Spring Boot 3.0 M1 发布</a></h2>
-                    <p class="lw-desc">Spring Boot 3.0 M1 发布Spring Boot 3.0.0-M1Spring Boot
-                        近日发布了第一个里程碑版本：Spr...</p>
-                    <p class="lw-text-hidden lw-article-more"><i class="fa-regular fa-calendar-days lw-mr5"></i>2022-09-28
-                        12:00 <i
-                                class="fa-solid fa-eye lw-mr5 lw-ml10"></i>
-                        11283<i class="fa-solid fa-comment lw-ml10 lw-mr5"></i>9382</p>
-                </div>
-            </article>
-            <article class="lw-article-item lw-posr">
-                <div class="lw-article-cover lw-posa lw-xs-hidden">
-                    <img src="/static/image/4.jpg" alt="">
-                </div>
-                <div class="lw-article-info">
-                    <h2><a class="lw-xs-hidden" href=""><span class="lw-category">技术学习</span></a>
-                        <a href=""> 异步上传文件显示进度条</a></h2>
-                    <p class="lw-desc">
-                        异步上传文件显示进度条问题我们在写网站时难免会遇到需要上传文件的场景，但当上传大文件时比如5个G的文件直接用表单直接提交文件会出现页面卡顿、...</p>
-                    <p class="lw-text-hidden lw-article-more"><i class="fa-regular fa-calendar-days lw-mr5"></i>2022-09-28
-                        12:00 <i
-                                class="fa-solid fa-eye lw-mr5 lw-ml10"></i>
-                        11283<i class="fa-solid fa-comment lw-ml10 lw-mr5"></i>9382</p>
-                </div>
-            </article>
-            <article class="lw-article-item lw-posr">
-                <div class="lw-article-cover lw-posa lw-xs-hidden">
-                    <img src="/static/image/5.jpg" alt="">
-                </div>
-                <div class="lw-article-info">
-                    <h2><a class="lw-xs-hidden" href=""><span class="lw-category">技术学习</span></a>
-                        <a href=""> 纯 CSS 图片碎裂动画教程</a></h2>
-                    <p class="lw-desc">
-                        纯CSS图片碎裂动画教程前言最近看到一篇文章是关于css做图片销毁图片效果的，觉得不错，就给大家翻译过来分享一下，原文地址：传送门文章开始，...</p>
-                    <p class="lw-text-hidden lw-article-more"><i class="fa-regular fa-calendar-days lw-mr5"></i>2022-09-28
-                        12:00 <i
-                                class="fa-solid fa-eye lw-mr5 lw-ml10"></i>
-                        11283<i class="fa-solid fa-comment lw-ml10 lw-mr5"></i>9382</p>
-                </div>
-            </article>
-            <article class="lw-article-item lw-posr">
-                <div class="lw-article-cover lw-posa lw-xs-hidden">
-                    <img src="/static/image/1.jpg" alt="">
-                </div>
-                <div class="lw-article-info">
-                    <h2><a class="lw-xs-hidden" href=""><span class="lw-category">Typecho相关</span></a>
-                        <a href=""> Typecho设置多域名</a></h2>
-                    <p class="lw-desc">
-                        Typecho设置多域名前言typecho后台只能设置一个域名，但我们通常一个站点会有两域名(一个带www,一个不带的)，比如我在后台设置了...</p>
-                    <p class="lw-text-hidden lw-article-more"><i class="fa-regular fa-calendar-days lw-mr5"></i>2022-09-28
-                        12:00 <i
-                                class="fa-solid fa-eye lw-mr5 lw-ml10"></i>
-                        11283<i class="fa-solid fa-comment lw-ml10 lw-mr5"></i>9382</p>
-                </div>
-            </article>
+            <th:block th:include="common::article(${articlePage.rows})"></th:block>
         </div>
-        <ul class="lw-pagenation">
-            <li><a href="">首页</a></li>
-            <li><a href="" class="lw-active">1</a></li>
-            <li><a href="">2</a></li>
-            <li><a href="">3</a></li>
-            <li><a href="">4</a></li>
-            <li><a href="">5</a></li>
-            <li><a href="">尾页</a></li>
+        <ul th:if="${articlePage.totalPages >1}" class="lw-pagenation">
+            <li th:if="${articlePage.currentPage != 1}"><a th:href="@{/}">首页</a></li>
+            <li th:each="num:${#numbers.sequence((articlePage.currentPage - 2 > 0 ? articlePage.currentPage - 2 : 1),(articlePage.currentPage + 2 < articlePage.totalPages ? articlePage.currentPage + 2 : articlePage.totalPages))}">
+                <a th:class="${articlePage.currentPage eq num}?'lw-active':''" th:href="@{/(pageNumber=${num})}"
+                   th:text="${num}"></a>
+            </li>
+            <li th:if="${articlePage.currentPage != articlePage.totalPages}">
+                <a th:href="@{/(pageNumber=${articlePage.totalPages})}">尾页</a>
+            </li>
+            <li th:text="${'共 ' + articlePage.totalPages + ' 页'}"></li>
         </ul>
     </div>
     <div class="lw-right-list lw-md-show lw-posa">

src/main/resources/templates/list.html

@@ -1,352 +1,146 @@
 <!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <title>Title</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
-    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
-    <link rel="stylesheet" href="/static/plugin/bootstrap/css/bootstrap.min.css">
-    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
-    <link rel="stylesheet" href="/static/plugin/bootstrap/css/bootstrap-theme.min.css">
-    <link rel="stylesheet" href="/static/plugin/font-awesome/css/font-awesome.min.css">
-    <!-- 自定义css文件 -->
-    <link rel="stylesheet" href="/static/css/style.css">
+<html xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html" lang="en">
+<head th:replace="common::header(~{::title},~{},~{})">
+    <title th:if="${pageType eq 'category'}" th:text="${category.name + ' - ' + @webSite.title}"></title>
+    <title th:if="${pageType eq 'tag'}" th:text="${tag.name + ' - ' + @webSite.title}"></title>
 </head>
 <body>
-<nav class="lw-md-show">
-    <div class="lw-container lw-header lw-posr ">
-        <div class="lw-logo lw-fl">
-            <a href="/">
-                <img src="/static/image/logo.png" alt="冷文的个人博客">
-            </a>
-        </div>
-        <span>让崇拜从这里开始，用代码做点好玩的事件，让每一天都变的充实起来!</span>
-        <div class="lw-fr lw-linkme">
-            <a href="#"><i class="fa fa-qq" aria-hidden="true"></i></a>
-            <a href="#"><i class="fa fa-wechat" aria-hidden="true"></i></a>
-            <a href="#"><i class="fa fa-weibo" aria-hidden="true"></i></a>
-            <a href="#"><i class="fa fa-envelope" aria-hidden="true"></i></a>
-        </div>
-        <div class="lw-nav lw-posa">
-            <a href="/"><i class="fa fa-home" aria-hidden="true"></i>首页</a>
-            <a href="#">技术分享</a>
-            <a href="#">闲言碎语</a>
-            <a href="#">个人随笔</a>
-            <a href="#"><i class="fa fa-users" aria-hidden="true"></i>友情链接</a>
-            <a href="#"><i class="fa fa-user" aria-hidden="true"></i>关于我</a>
-            <a href="#"><i class="fa fa-edit" aria-hidden="true"></i>留言板</a>
-            <a href="javascript:void(0)" class="lw-fr lw-search-btn" style="padding: 0;">
-                <i class="fa fa-search" aria-hidden="true"></i>
-            </a>
-        </div>
-    </div>
-
-
-</nav>
-<div class="lw-md-hidden lw-phone-header">
-    <a href="javascript:void(0)" class="lw-posa lw-phone-topbtn lw-search-show lw-search-btn"><i
-            class="fa fa-search"></i></a>
-    <a class="lw-index" href="/"><h1>冷文学习者</h1></a>
-</div>
-<div class="lw-md-hidden" style="height: 100px;"></div>
 
+<th:block th:include="common::nav"></th:block>
 
 <div class="lw-container lw-main lw-posr">
     <div class="lw-left-list">
         <ol class="breadcrumb lw-crumb">
             <li><a href="/">首页</a></li>
-            <li class="active">Freewind相关</li>
+            <li th:if="${pageType eq 'category'}"><a th:href="@{/category/{id}.html(id=${category.id})}">所有分类</a>
+            </li>
+            <li th:if="${pageType eq 'tag'}"><a th:href="@{/tag/{id}.html(id=${tag.id})}">所有标签</a></li>
+            <li th:if="${pageType eq 'category'}" class="active" th:text="${category.name}"></li>
+            <li th:if="${pageType eq 'tag'}" class="active" th:text="${tag.name}"></li>
         </ol>
         <div class="lw-article-list">
-            <article class="lw-article-item lw-posr">
-                <div class="lw-article-cover lw-posa lw-xs-hidden">
-                    <img src="/static/image/1.jpg" alt="">
-                </div>
-                <div class="lw-article-info">
-                    <h2>
-                        <a class="lw-xs-hidden" href=""><span class="lw-category">Python相关</span></a>
-                        <a href="">Conda虚拟环境使用Conda虚拟环境使用Conda虚拟环境使用</a>
-                    </h2>
-                    <p class="lw-desc">Conda虚拟环境使用查看虚拟环境conda env list创建虚拟环境conda create -n
-                        [venvname]将[venvnConda虚拟环境使用查看虚拟环境conda env list创建虚拟环境conda create -n
-                        [venvname]将[venvnConda虚拟环境使用查看虚拟环境conda env list创建虚拟环境conda create -n
-                        [venvname]将[venvn...</p>
-                    <p class="lw-text-hidden lw-article-more"><i class="fa-regular fa-calendar-days lw-mr5"></i>2022-09-28 12:00 <i
-                            class="fa-solid fa-eye lw-mr5 lw-ml10"></i>
-                        11283<i class="fa-solid fa-comment lw-ml10 lw-mr5"></i>9382</p>
-                </div>
-            </article>
-            <article class="lw-article-item lw-posr">
-                <div class="lw-article-cover lw-posa lw-xs-hidden">
-                    <img src="/static/image/2.jpg" alt="">
-                </div>
-                <div class="lw-article-info">
-                    <h2>
-                        <a class="lw-xs-hidden" href=""><span class="lw-category">个人随笔</span></a>
-                        <a href=""> 关于我这些年的经历</a></h2>
-                    <p class="lw-desc">
-                        人这一辈子那么有限，作为一个普通人，也许我穷极一生也不会有什么大的成就可以让外人为我写下一个传记。但是我可以用自己的手记录下我这一生，吃过的...</p>
-                    <p class="lw-text-hidden lw-article-more"><i class="fa-regular fa-calendar-days lw-mr5"></i>2022-09-28 12:00 <i
-                            class="fa-solid fa-eye lw-mr5 lw-ml10"></i>
-                        11283<i class="fa-solid fa-comment lw-ml10 lw-mr5"></i>9382</p>
-                </div>
-            </article>
-            <article class="lw-article-item lw-posr">
-                <div class="lw-article-cover lw-posa lw-xs-hidden">
-                    <img src="/static/image/3.jpg" alt="">
-                </div>
-                <div class="lw-article-info">
-                    <h2><a class="lw-xs-hidden" href=""><span class="lw-category">技术学习</span></a>
-                        <a href=""> Spring Boot 3.0 M1 发布</a></h2>
-                    <p class="lw-desc">Spring Boot 3.0 M1 发布Spring Boot 3.0.0-M1Spring Boot
-                        近日发布了第一个里程碑版本：Spr...</p>
-                    <p class="lw-text-hidden lw-article-more"><i class="fa-regular fa-calendar-days lw-mr5"></i>2022-09-28 12:00 <i
-                            class="fa-solid fa-eye lw-mr5 lw-ml10"></i>
-                        11283<i class="fa-solid fa-comment lw-ml10 lw-mr5"></i>9382</p>
-                </div>
-            </article>
-            <article class="lw-article-item lw-posr">
-                <div class="lw-article-cover lw-posa lw-xs-hidden">
-                    <img src="/static/image/4.jpg" alt="">
-                </div>
-                <div class="lw-article-info">
-                    <h2> <a class="lw-xs-hidden" href=""><span class="lw-category">技术学习</span></a>
-                        <a href=""> 异步上传文件显示进度条</a></h2>
-                    <p class="lw-desc">
-                        异步上传文件显示进度条问题我们在写网站时难免会遇到需要上传文件的场景，但当上传大文件时比如5个G的文件直接用表单直接提交文件会出现页面卡顿、...</p>
-                    <p class="lw-text-hidden lw-article-more"><i class="fa-regular fa-calendar-days lw-mr5"></i>2022-09-28 12:00 <i
-                            class="fa-solid fa-eye lw-mr5 lw-ml10"></i>
-                        11283<i class="fa-solid fa-comment lw-ml10 lw-mr5"></i>9382</p>
-                </div>
-            </article>
-            <article class="lw-article-item lw-posr">
-                <div class="lw-article-cover lw-posa lw-xs-hidden">
-                    <img src="/static/image/5.jpg" alt="">
-                </div>
-                <div class="lw-article-info">
-                    <h2> <a class="lw-xs-hidden" href=""><span class="lw-category">技术学习</span></a>
-                        <a href=""> 纯 CSS 图片碎裂动画教程</a></h2>
-                    <p class="lw-desc">
-                        纯CSS图片碎裂动画教程前言最近看到一篇文章是关于css做图片销毁图片效果的，觉得不错，就给大家翻译过来分享一下，原文地址：传送门文章开始，...</p>
-                    <p class="lw-text-hidden lw-article-more"><i class="fa-regular fa-calendar-days lw-mr5"></i>2022-09-28 12:00 <i
-                            class="fa-solid fa-eye lw-mr5 lw-ml10"></i>
-                        11283<i class="fa-solid fa-comment lw-ml10 lw-mr5"></i>9382</p>
-                </div>
-            </article>
-            <article class="lw-article-item lw-posr">
-                <div class="lw-article-cover lw-posa lw-xs-hidden">
-                    <img src="/static/image/1.jpg" alt="">
-                </div>
-                <div class="lw-article-info">
-                    <h2> <a class="lw-xs-hidden" href=""><span class="lw-category">Typecho相关</span></a>
-                        <a href=""> Typecho设置多域名</a></h2>
-                    <p class="lw-desc">
-                        Typecho设置多域名前言typecho后台只能设置一个域名，但我们通常一个站点会有两域名(一个带www,一个不带的)，比如我在后台设置了...</p>
-                    <p class="lw-text-hidden lw-article-more"><i class="fa-regular fa-calendar-days lw-mr5"></i>2022-09-28 12:00 <i
-                            class="fa-solid fa-eye lw-mr5 lw-ml10"></i>
-                        11283<i class="fa-solid fa-comment lw-ml10 lw-mr5"></i>9382</p>
-                </div>
-            </article>
+            <th:block th:include="common::article(${articlePage.rows})"></th:block>
         </div>
-        <ul class="lw-pagenation">
-            <li><a href="">首页</a></li>
-            <li><a href="">1</a></li>
-            <li><a href="">2</a></li>
-            <li><a href="">3</a></li>
-            <li><a href="">4</a></li>
-            <li><a href="">5</a></li>
-            <li><a href="">尾页</a></li>
+        <ul th:if="${articlePage.totalPages > 1 and pageType eq 'category'}" class="lw-pagenation">
+            <li th:if="${articlePage.currentPage != 1}"><a th:href="@{/category/{id}.html(id=${category.id})}">首页</a>
+            </li>
+            <li th:each="num:${#numbers.sequence((articlePage.currentPage - 2 > 0 ? articlePage.currentPage - 2 : 1),(articlePage.currentPage + 2 < articlePage.totalPages ? articlePage.currentPage + 2 : articlePage.totalPages))}">
+                <a th:class="${articlePage.currentPage eq num}?'lw-active':''"
+                   th:href="@{/category/{id}.html(id=${category.id},pageNumber=${num})}"
+                   th:text="${num}"></a>
+            </li>
+            <li th:if="${articlePage.currentPage != articlePage.totalPages}">
+                <a th:href="@{/category/{id}.html(id=${category.id},pageNumber=${articlePage.totalPages})}">尾页</a>
+            </li>
+            <li th:text="${'共 ' + articlePage.totalPages + ' 页'}"></li>
+        </ul>
+        <ul th:if="${articlePage.totalPages > 1 and pageType eq 'tag'}" class="lw-pagenation">
+            <li th:if="${articlePage.currentPage != 1}"><a th:href="@{/tag/{id}.html(id=${tag.id})}">首页</a></li>
+            <li th:each="num:${#numbers.sequence((articlePage.currentPage - 2 > 0 ? articlePage.currentPage - 2 : 1),(articlePage.currentPage + 2 < articlePage.totalPages ? articlePage.currentPage + 2 : articlePage.totalPages))}">
+                <a th:class="${articlePage.currentPage eq num}?'lw-active':''"
+                   th:href="@{/tag/{id}.html(id=${tag.id},pageNumber=${num})}"
+                   th:text="${num}"></a>
+            </li>
+            <li th:if="${articlePage.currentPage != articlePage.totalPages}">
+                <a th:href="@{/tag/{id}.html(id=${tag.id},pageNumber=${articlePage.totalPages})}">尾页</a>
+            </li>
+            <li th:text="${'共 ' + articlePage.totalPages + ' 页'}"></li>
         </ul>
     </div>
     <div class="lw-right-list lw-md-show lw-posa">
-        <div class="lw-right-item lw-profile">
-            <div class="lw-avatar-content lw-posr"
-                 style="background-image:url(/static/image/5-120601094K3-50.gif);">
-                <div class="lw-avatar lw-posa">
-                    <img src="/static/image/avatar.jpeg" alt="">
+        <th:block th:fragment="right">
+            <div class="lw-right-item lw-profile">
+                <div class="lw-avatar-content lw-posr"
+                     style="background-image:url(/static/image/5-120601094K3-50.gif);">
+                    <div class="lw-avatar lw-posa">
+                        <img th:src="${@webSite.avatar}" src="/static/image/avatar.jpeg" alt="">
+                    </div>
                 </div>
+                <ul class="lw-info">
+                    <li><span>博主</span>
+                        <th:block th:text="${@webSite.nickname}"></th:block>
+                    </li>
+                    <li><span>坐标</span>
+                        <th:block th:text="${T(java.lang.String).join(' ',@webSite.address)}"></th:block>
+                    </li>
+                    <li><span>标签</span>
+                        <th:block th:text="${T(java.lang.String).join('、',@webSite.tags)}"></th:block>
+                    </li>
+                </ul>
             </div>
-            <ul class="lw-info">
-                <li><span>博主</span>Mr丶冷文</li>
-                <li><span>坐标</span>北京 昌平</li>
-                <li><span>标签</span>Java、Web设计、Python、大数据、爬虫</li>
-            </ul>
-        </div>
-        <div class="lw-right-item lw-right-hot">
-            <h4><i class="fa fa-fire lw-mr5" aria-hidden="true"></i>热门文章</h4>
-            <ul class="lw-hot-list">
-                <li>
-                    <a href="#">
-                        <div class="lw-hot-img">
-                            <span class="label label-danger lw-posa">1</span>
-                            <img src="/static/image/1.jpg" alt="">
-                        </div>
-                        <p class="lw-hot-title">Freewind主题编辑器展示</p>
-                        <p class="lw-hot-info"><i class="fa-solid fa-fire-flame-curved"></i> 65580 </p>
-                    </a>
-                </li>
-                <li>
-                    <a href="#">
-                        <div class="lw-hot-img">
-                            <span class="label label-warning lw-posa">2</span>
-                            <img src="/static/image/2.jpg" alt="">
-                        </div>
-                        <p class="lw-hot-title">Conda虚拟环境使用</p>
-                        <p class="lw-hot-info"><i class="fa-solid fa-fire-flame-curved"></i> 56283 </p>
-                    </a>
-                </li>
-                <li>
-                    <a href="#">
-                        <div class="lw-hot-img">
-                            <span class="label label-info lw-posa">3</span>
-                            <img src="/static/image/3.jpg" alt="">
-                        </div>
-                        <p class="lw-hot-title">纯 CSS 图片碎裂动画教程</p>
-                        <p class="lw-hot-info"><i class="fa-solid fa-fire-flame-curved"></i> 52213 </p>
-                    </a>
-                </li>
-                <li>
-                    <a href="#">
-                        <div class="lw-hot-img">
-                            <span class="label label-default lw-posa">4</span>
-                            <img src="/static/image/4.jpg" alt="">
-                        </div>
-                        <p class="lw-hot-title">Spring Boot 3.0 M1 发布</p>
-                        <p class="lw-hot-info"><i class="fa-solid fa-fire-flame-curved"></i> 23132 </p>
-                    </a>
-                </li>
-                <li>
-                    <a href="#">
-                        <div class="lw-hot-img">
-                            <span class="label label-default lw-posa">5</span>
-                            <img src="/static/image/5.jpg" alt="">
-                        </div>
-                        <p class="lw-hot-title">异步上传文件显示进度条</p>
-                        <p class="lw-hot-info"><i class="fa-solid fa-fire-flame-curved"></i> 12322 </p>
-                    </a>
-                </li>
-            </ul>
-        </div>
-        <div class="lw-right-item lw-tag-cloud">
-            <h4><i class="fa fa-tags lw-mr5" aria-hidden="true"></i>标签云</h4>
-
-            <a href="https://www.kevinlu98.cn/tag/freewind/" title="freewind">
-                freewind</a>
-            <a href="https://www.kevinlu98.cn/tag/typecho/" title="typecho">
-                typecho</a>
-            <a href="https://www.kevinlu98.cn/tag/%E6%8F%92%E4%BB%B6/" title="插件">
-                插件</a>
-            <a href="https://www.kevinlu98.cn/tag/emlog/" title="emlog">
-                emlog</a>
-            <a href="https://www.kevinlu98.cn/tag/java/" title="java">
-                java</a>
-            <a href="https://www.kevinlu98.cn/tag/%E4%B8%BB%E9%A2%98/" title="主题">
-                主题</a>
-            <a href="https://www.kevinlu98.cn/tag/%E8%87%AA%E7%94%B1%E4%B9%8B%E9%A3%8E/" title="自由之风">
-                自由之风</a>
-            <a href="https://www.kevinlu98.cn/tag/%E5%9B%BE%E5%BA%8A/" title="图床">
-                图床</a>
-            <a href="https://www.kevinlu98.cn/tag/%E5%86%B7%E6%96%87%E5%9B%BE%E5%BA%8A/" title="冷文图床">
-                冷文图床</a>
-            <a href="https://www.kevinlu98.cn/tag/markdown/" title="markdown">
-                markdown</a>
-            <a href="https://www.kevinlu98.cn/tag/gitee/" title="gitee">
-                gitee</a>
-            <a href="https://www.kevinlu98.cn/tag/springboot/" title="springboot">
-                springboot</a>
-            <a href="https://www.kevinlu98.cn/tag/linux/" title="linux">
-                linux</a>
-            <a href="https://www.kevinlu98.cn/tag/mac/" title="mac">
-                mac</a>
-            <a href="https://www.kevinlu98.cn/tag/%E5%AD%A6%E4%B9%A0/" title="学习">
-                学习</a>
-            <a href="https://www.kevinlu98.cn/tag/python/" title="python">
-                python</a>
-            <a href="https://www.kevinlu98.cn/tag/conda/" title="conda">
-                conda</a>
-            <a href="https://www.kevinlu98.cn/tag/%E7%9B%B8%E5%86%8C/" title="相册">
-                相册</a>
-            <a href="https://www.kevinlu98.cn/tag/jsDelivr/" title="jsDelivr">
-                jsDelivr</a>
-            <a href="https://www.kevinlu98.cn/tag/cdn/" title="cdn">
-                cdn</a>
-            <a href="https://www.kevinlu98.cn/tag/codemirror/" title="codemirror">
-                codemirror</a>
-            <a href="https://www.kevinlu98.cn/tag/freedom/" title="freedom">
-                freedom</a>
-            <a href="https://www.kevinlu98.cn/tag/%E8%85%BE%E8%AE%AFcos/" title="腾讯cos">
-                腾讯cos</a>
-            <a href="https://www.kevinlu98.cn/tag/cos/" title="cos">
-                cos</a>
-            <a href="https://www.kevinlu98.cn/tag/%E7%A7%81%E4%BA%BA%E5%9B%BE%E5%BA%8A/" title="私人图床">
-                私人图床</a>
-            <a href="https://www.kevinlu98.cn/tag/%E6%AC%A2%E8%BF%8E%E9%A1%B5/" title="欢迎页">
-                欢迎页</a>
-            <a href="https://www.kevinlu98.cn/tag/%E7%99%BB%E5%BD%95%E6%B3%A8%E5%86%8C/" title="登录注册">
-                登录注册</a>
-            <a href="https://www.kevinlu98.cn/tag/%E6%95%99%E7%A8%8B%E4%B8%8B%E8%BD%BD/" title="教程下载">
-                教程下载</a>
-            <a href="https://www.kevinlu98.cn/tag/itjc8/" title="itjc8">
-                itjc8</a>
-            <a href="https://www.kevinlu98.cn/tag/%E8%99%9A%E6%8B%9F%E6%9C%BA/" title="虚拟机">
-                虚拟机</a>
-
-        </div>
+            <div class="lw-right-item lw-right-hot">
+                <h4><i class="fa fa-fire lw-mr5" aria-hidden="true"></i>热门文章</h4>
+                <ul class="lw-hot-list">
+                    <!--/*@thymesVar id="hots" type="java.util.List<cc.bnblogs.pojo.Article>"*/-->
+                    <li th:each="hot,it:${hots}">
+                        <a th:href="@{/{id}.html(id=${hot.id})}" target="_blank">
+                            <div class="lw-hot-img">
+                                <span class="label label-danger lw-posa" th:if="${it.index eq 0}">1</span>
+                                <span class="label label-warning lw-posa" th:if="${it.index eq 1}">2</span>
+                                <span class="label label-info lw-posa" th:if="${it.index eq 2}">3</span>
+                                <span class="label label-default lw-posa" th:if="${it.index > 2}"
+                                      th:text="${it.index+1}"></span>
+                                <img th:src="${@defaultImages.cover(hot.cover)}" alt="">
+                            </div>
+                            <p class="lw-hot-title" th:text="${hot.title}"></p>
+                            <p class="lw-hot-info"><i class="fa fa-eye lw-mr5"></i>
+                                <th:block th:text="${hot.views}"></th:block>
+                            </p>
+                        </a>
+                    </li>
+                </ul>
+            </div>
+            <div class="lw-right-item lw-tag-cloud">
+                <h4><i class="fa fa-tags lw-mr5" aria-hidden="true"></i>标签云</h4>
+                <!--/*@thymesVar id="tags" type="java.util.List<cc.bnblogs.pojo.Tag>"*/-->
+                <a th:each="tag:${tags}" th:href="@{/tag/{id}.html(id=${tag.id})}" th:title="${tag.name}"
+                   th:text="${tag.name}"></a>
+            </div>
+        </th:block>
     </div>
 </div>
 
-<div class="lw-friend-link">
-    <div class="lw-container">
-        <h2>友情链接</h2>
-        <a href="">冷文学习者</a>
-        <a href="">冷文博客</a>
-        <a href="">冷文聊编程</a>
-        <a href="">GetHub</a>
-        <a href="">CSDN</a>
-        <a href="">百度一下</a>
-        <a href="">新浪微博</a>
-        <a href="">谷歌搜索</a>
-        <a href="">知乎</a>
-        <a href="">掘金</a>
+<th:block th:fragment="footer">
+    <div class="lw-friend-link">
+        <div class="lw-container">
+            <h2>友情链接</h2>
+            <!--/*@thymesVar id="friends" type="java.util.List<cc.bnblogs.pojo.Friends>"*/-->
+            <a th:each="friend:${friends}" target="_blank" th:href="${friend.link}" th:text="${friend.title}"></a>
+        </div>
     </div>
-</div>
-
-<footer>
-    <p>冷文学习者 版权所有 <span class="lw-mr5"></span>Copyright © www.kevinlu98.cn All Rights Reserved.</p>
-    <p>备案号：陕ICP备19024566-1号 京公网安备 11011402012109号</p>
-</footer>
-
-<div class="lw-mask" id="lw-search-box">
-    <div class="lw-search-conetnt">
-        <a href="javascript:void(0)" class="lw-search-close lw-posa"><i class="fa fa-close"></i></a>
-        <div class="lw-search-input lw-posr">
-            <form action="" method="post">
-                <input type="text" placeholder="请输入搜索关键字...">
-                <button class="lw-posa"><i class="fa fa-search lw-mr5"></i>搜索</button>
-            </form>
+    <footer th:utext="${@webSite.footer}"></footer>
+    <div class="lw-mask" id="lw-search-box">
+        <div class="lw-search-conetnt">
+            <a href="javascript:void(0)" class="lw-search-close lw-posa"><i class="fa fa-close"></i></a>
+            <div class="lw-search-input lw-posr">
+                <form action="" method="post">
+                    <input type="text" placeholder="请输入搜索关键字...">
+                    <button class="lw-posa"><i class="fa fa-search lw-mr5"></i>搜索</button>
+                </form>
+            </div>
+            <p>推荐关键字：
+                <a href="javascript:void (0)">独立下载</a>
+                <a href="javascript:void (0)">评论通知</a>
+                <a href="javascript:void (0)">点赞</a>
+                <a href="javascript:void (0)">非插件</a>
+                <a href="javascript:void (0)">tp5</a>
+                <a href="javascript:void (0)">ajax</a>
+                <a href="javascript:void (0)">json</a>
+                <a href="javascript:void (0)">IO模型</a>
+                <a href="javascript:void (0)">跨域</a>
+                <a href="javascript:void (0)">javascript</a>
+                <a href="javascript:void (0)">springboot</a>
+                <a href="javascript:void (0)">视频剪辑</a>
+                <a href="javascript:void (0)">后期</a>
+                <a href="javascript:void (0)">个人随笔</a>
+            </p>
         </div>
-        <p>推荐关键字：
-            <a href="javascript:void (0)">独立下载</a>
-            <a href="javascript:void (0)">评论通知</a>
-            <a href="javascript:void (0)">点赞</a>
-            <a href="javascript:void (0)">非插件</a>
-            <a href="javascript:void (0)">tp5</a>
-            <a href="javascript:void (0)">ajax</a>
-            <a href="javascript:void (0)">json</a>
-            <a href="javascript:void (0)">IO模型</a>
-            <a href="javascript:void (0)">跨域</a>
-            <a href="javascript:void (0)">javascript</a>
-            <a href="javascript:void (0)">springboot</a>
-            <a href="javascript:void (0)">视频剪辑</a>
-            <a href="javascript:void (0)">后期</a>
-            <a href="javascript:void (0)">个人随笔</a>
-        </p>
     </div>
-</div>
-
-<script src="/static/plugin/jquery/jquery-3.5.1.min.js"></script>
-<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
-<script src="/static/plugin/bootstrap/js/bootstrap.min.js"></script>
-<script src="/static/js/main.js"></script>
+    <script src="/static/plugin/jquery/jquery-3.5.1.min.js"></script>
+    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
+    <script src="/static/plugin/bootstrap/js/bootstrap.min.js"></script>
+    <script src="/static/plugin/swiper-bundle/swiper-bundle.min.js"></script>
+    <script src="/static/js/main.js"></script>
+</th:block>
 </body>
 </html>