更新 '.drone.yaml'

.drone.yaml

@@ -0,0 +1,21 @@
+kind: pipeline
+type: docker
+name: mx-community
+steps:
+  - name: build
+    image: maven:3-jdk-8
+    pull: if-not-exists
+    volumes:
+      - name: maven
+        path: /root/.m2
+    commands:
+      - mvn clean package -DskipTests
+      - ls -h
+    when:
+      event:
+        - push
+
+volumes:
+  - name: maven
+    host: 
+      path: /opt/ci/maven/

src/main/java/cn/allms/MxBlogApplication.java

@@ -9,7 +9,7 @@ import org.springframework.boot.autoconfigure.SpringBootApplication;
 @SpringBootApplication
 public class MxBlogApplication {
 
-	public static void main(String[] args) {
-		SpringApplication.run(MxBlogApplication.class, args);
-	}
+    public static void main(String[] args) {
+        SpringApplication.run(MxBlogApplication.class, args);
+    }
 }

src/main/java/cn/allms/aspect/LogAspectOld.java

@@ -17,81 +17,82 @@ import java.util.Arrays;
 @Component
 public class LogAspectOld {
 
-     private  final Logger logger = LoggerFactory.getLogger(this.getClass());
+    private final Logger logger = LoggerFactory.getLogger(this.getClass());
 
-     /**
-      * 切点：cn.allms.controller
-      */
-     //@Pointcut("execution(* cn.allms.controller.*.*(..))")
-     public void log(){}
+    /**
+     * 切点：cn.allms.controller
+     */
+    //@Pointcut("execution(* cn.allms.controller.*.*(..))")
+    public void log() {
+    }
 
 
     // @Before("log()")
-     public void doBefore(JoinPoint joinPoint){
-          // 获取request对象
-          ServletRequestAttributes attributes = (ServletRequestAttributes) RequestContextHolder.getRequestAttributes();
-          HttpServletRequest request = attributes.getRequest();
-          // URL
-          String url = request.getRequestURL().toString();
-          // IP
-          String ip = request.getRemoteAddr();
-          // 方法全名 = 类名.方法名
-          String classMethod = joinPoint.getSignature().getDeclaringTypeName()+"."+joinPoint.getSignature().getName();
-          // 请求对象
-          Object[] args  = joinPoint.getArgs();
-          RequestLog requestLog = new RequestLog(url,ip,classMethod,args);
+    public void doBefore(JoinPoint joinPoint) {
+        // 获取request对象
+        ServletRequestAttributes attributes = (ServletRequestAttributes) RequestContextHolder.getRequestAttributes();
+        assert attributes != null;
+        HttpServletRequest request = attributes.getRequest();
+        // URL
+        String url = request.getRequestURL().toString();
+        // IP
+        String ip = request.getRemoteAddr();
+        // 方法全名 = 类名.方法名
+        String classMethod = joinPoint.getSignature().getDeclaringTypeName() + "." + joinPoint.getSignature().getName();
+        // 请求对象
+        Object[] args = joinPoint.getArgs();
+        RequestLog requestLog = new RequestLog(url, ip, classMethod, args);
 
-          logger.info("Request : {}",requestLog);
-     }
+        logger.info("Request : {}", requestLog);
+    }
 
-     //@After("log()")
-     public void doAfter(){
+    //@After("log()")
+    public void doAfter() {
 //          logger.info("-------doafter-----------");
-     }
+    }
 
-     //@AfterReturning(returning = "result",pointcut = "log()")
-     public void doAfterReturn(Object result){
-          logger.info("控制器方法名称Result : {}",result);
-     }
+    public void doAfterReturn(Object result) {
+        logger.info("控制器方法名称Result : {}", result);
+    }
 
-     /**
-      * 内部类:用于存放请求信息,用日志的方式将其记录下来
-      */
-     private class RequestLog{
-          /**
-           * 请求地址
-           */
-          private String url;
-          /**
-           * 请求ip
-           */
-          private String ip;
-          /**
-           * 请求方法
-           */
-          private String classMethod;
-          /**
-           * 请求参数集合
-           */
-          private Object[] args;
+    /**
+     * 内部类:用于存放请求信息,用日志的方式将其记录下来
+     */
+    private class RequestLog {
+        /**
+         * 请求地址
+         */
+        private String url;
+        /**
+         * 请求ip
+         */
+        private String ip;
+        /**
+         * 请求方法
+         */
+        private String classMethod;
+        /**
+         * 请求参数集合
+         */
+        private Object[] args;
 
-          public RequestLog(String url, String ip, String classMethod, Object[] args) {
-               this.url = url;
-               this.ip = ip;
-               this.classMethod = classMethod;
-               this.args = args;
-          }
+        public RequestLog(String url, String ip, String classMethod, Object[] args) {
+            this.url = url;
+            this.ip = ip;
+            this.classMethod = classMethod;
+            this.args = args;
+        }
 
-          @Override
-          public String toString() {
-               return "RequestLog{" +
-                       "url='" + url + '\'' +
-                       ", ip='" + ip + '\'' +
-                       ", classMethod='" + classMethod + '\'' +
-                       ", args=" + Arrays.toString(args) +
-                       '}';
-          }
-     }
+        @Override
+        public String toString() {
+            return "RequestLog{" +
+                    "url='" + url + '\'' +
+                    ", ip='" + ip + '\'' +
+                    ", classMethod='" + classMethod + '\'' +
+                    ", args=" + Arrays.toString(args) +
+                    '}';
+        }
+    }
 
 
 }

src/main/java/cn/allms/config/LogAspect.java

@@ -25,7 +25,8 @@ import javax.servlet.http.HttpServletRequest;
 @Aspect
 public class LogAspect {
     @Pointcut("execution(* cn.allms.controller.*.*(..))")
-    public void webLog(){}
+    public void webLog() {
+    }
 
     @Before("webLog()")
     public void doBefore(JoinPoint joinPoint) {

src/main/java/cn/allms/config/MyConfig.java

@@ -9,7 +9,7 @@ import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter
  * 配置类
  */
 @Configuration
-public class MyConfig extends WebMvcConfigurerAdapter{
+public class MyConfig extends WebMvcConfigurerAdapter {
 
     //重写拦截器
     @Override

src/main/java/cn/allms/config/RandomPicturesConfig.java

@@ -19,6 +19,7 @@ public class RandomPicturesConfig {
     /**
      * TODO
      * 随机获取一种图片
+     *
      * @return
      */
     public String getRandomPicAddr() {

src/main/java/cn/allms/controller/AboutShowController.java

@@ -12,7 +12,7 @@ import org.springframework.web.bind.annotation.GetMapping;
 @Controller
 public class AboutShowController {
     @GetMapping("/about")
-    public String about(){
+    public String about() {
         return "about";
     }
 }

src/main/java/cn/allms/controller/CommentController.java

@@ -21,54 +21,56 @@ import javax.servlet.http.HttpSession;
 @Controller
 public class CommentController {
 
-	@Autowired
-	private CommentService commentServiceImpl;
+    @Autowired
+    private CommentService commentServiceImpl;
 
-	@Autowired
-	private BlogService blogServiceImpl;
+    @Autowired
+    private BlogService blogServiceImpl;
 
-	@Value("${comment.avatar}")
-	private String avatar;
+    @Value("${comment.avatar}")
+    private String avatar;
 
-	@Value("${comment.v2exUrl}")
-	private String v2exUrl;
+    @Value("${comment.v2exUrl}")
+    private String v2exUrl;
 
-	/**
-	 * 显示评论列表
-	 * @param blogId
-	 * @param model
-	 * @return
-	 */
-	@GetMapping("/comments/{blogId}")
-	public String comments(@PathVariable Long blogId, Model model){
-		model.addAttribute("comments",commentServiceImpl.listCommentByBlogId(blogId));
-		return "blog :: commentList";
-	}
+    /**
+     * 显示评论列表
+     *
+     * @param blogId
+     * @param model
+     * @return
+     */
+    @GetMapping("/comments/{blogId}")
+    public String comments(@PathVariable Long blogId, Model model) {
+        model.addAttribute("comments", commentServiceImpl.listCommentByBlogId(blogId));
+        return "blog :: commentList";
+    }
 
-	/**
-	 * 提交评论
-	 * @param comment
-	 * @return
-	 */
-	@PostMapping("/comments")
-	public String post(Comment comment, HttpSession session){
-		Long blogId = comment.getBlog().getId();
-		//处理评论和博客之间的关系
-		comment.setBlog(blogServiceImpl.getBlog(blogId));
-		User user = (User) session.getAttribute("user");
-		//管理员发
-		if(user != null){
-			comment.setAvatar(user.getAvatar());
-			comment.setAdminComment(true);
-			comment.setNickname(user.getNickname());
-			comment.setEmail(user.getEmail());
-		//普通用户
-		} else {
-			comment.setAvatar(v2exUrl + MD5Utils.code(comment.getEmail()));
-		}
-		commentServiceImpl.saveComment(comment);
-		return "redirect:/comments/" +blogId;
-	}
+    /**
+     * 提交评论
+     *
+     * @param comment
+     * @return
+     */
+    @PostMapping("/comments")
+    public String post(Comment comment, HttpSession session) {
+        Long blogId = comment.getBlog().getId();
+        //处理评论和博客之间的关系
+        comment.setBlog(blogServiceImpl.getBlog(blogId));
+        User user = (User) session.getAttribute("user");
+        //管理员发
+        if (user != null) {
+            comment.setAvatar(user.getAvatar());
+            comment.setAdminComment(true);
+            comment.setNickname(user.getNickname());
+            comment.setEmail(user.getEmail());
+            //普通用户
+        } else {
+            comment.setAvatar(v2exUrl + MD5Utils.code(comment.getEmail()));
+        }
+        commentServiceImpl.saveComment(comment);
+        return "redirect:/comments/" + blogId;
+    }
 
 
 }

src/main/java/cn/allms/controller/IndexController.java

@@ -20,59 +20,61 @@ import org.springframework.web.bind.annotation.RequestParam;
 @Controller
 public class IndexController {
 
-	@Autowired
-	private BlogService blogServiceImpl;
+    @Autowired
+    private BlogService blogServiceImpl;
 
-	@Autowired
-	private TypeService typeServiceImpl;
+    @Autowired
+    private TypeService typeServiceImpl;
 
-	@Autowired
-	private TagService tagServiceImpl;
+    @Autowired
+    private TagService tagServiceImpl;
 
-	/**
-	 * 首页面显示
-	 * @param model
-	 * @param pageable
-	 * @return
-	 */
-	@GetMapping("/")
-	public String index(Model model, @PageableDefault(size = 8, sort = {"updateTime"}, direction = Sort.Direction.DESC)
-			Pageable pageable){
-		//1. 获取分页的博客列表
-		model.addAttribute("page",blogServiceImpl.ListBlog(pageable));
-		//2. 获取分类的内容(显示6条)
-		model.addAttribute("types",typeServiceImpl.listTypeTop(6));
-		//3. 获取标签的内容
-		model.addAttribute("tags",tagServiceImpl.ListTagTop(10));
-		//4. 显示推荐博客列表
-		model.addAttribute("recommendBlogs",blogServiceImpl.listRecommendBlogTop(8));
-		return "index";
-	}
+    /**
+     * 首页面显示
+     *
+     * @param model
+     * @param pageable
+     * @return
+     */
+    @GetMapping("/")
+    public String index(Model model, @PageableDefault(size = 8, sort = {"updateTime"}, direction = Sort.Direction.DESC)
+            Pageable pageable) {
+        //1. 获取分页的博客列表
+        model.addAttribute("page", blogServiceImpl.ListBlog(pageable));
+        //2. 获取分类的内容(显示6条)
+        model.addAttribute("types", typeServiceImpl.listTypeTop(6));
+        //3. 获取标签的内容
+        model.addAttribute("tags", tagServiceImpl.ListTagTop(10));
+        //4. 显示推荐博客列表
+        model.addAttribute("recommendBlogs", blogServiceImpl.listRecommendBlogTop(8));
+        return "index";
+    }
 
-	/**
-	 * 导航栏中的搜索功能实现
-	 * @param pageable
-	 * @return
-	 * @param model
-	 */
+    /**
+     * 导航栏中的搜索功能实现
+     *
+     * @param pageable
+     * @param model
+     * @return
+     */
     @PostMapping("/search")
     public String search(@PageableDefault(size = 8, sort = {"updateTime"}, direction = Sort.Direction.DESC) Pageable pageable,
                          @RequestParam String query, Model model) {
-        model.addAttribute("page", blogServiceImpl.ListBlog(pageable, "%"+query+"%"));
+        model.addAttribute("page", blogServiceImpl.ListBlog(pageable, "%" + query + "%"));
         model.addAttribute("query", query);
         return "search";
     }
 
     @GetMapping("/blog/{id}")
-    public  String blog(@PathVariable("id") Long id,Model model){
-        model.addAttribute("blog",blogServiceImpl.getAadConvertBlog(id));
+    public String blog(@PathVariable("id") Long id, Model model) {
+        model.addAttribute("blog", blogServiceImpl.getAadConvertBlog(id));
         return "blog";
     }
 
     @GetMapping("/footer/newblog")
-    public String newblos(Model model){
-		model.addAttribute("newblogs",blogServiceImpl.listRecommendBlogTop(3));
-    	return "_fragments :: newblogList";
-	}
+    public String newblos(Model model) {
+        model.addAttribute("newblogs", blogServiceImpl.listRecommendBlogTop(3));
+        return "_fragments :: newblogList";
+    }
 
 }

src/main/java/cn/allms/controller/TagShowController.java

@@ -1,8 +1,6 @@
 package cn.allms.controller;
 
 
-
-
 import cn.allms.po.Tag;
 import cn.allms.service.TagService;
 import cn.allms.vo.BlogQuery;
@@ -36,16 +34,16 @@ public class TagShowController {
 
     @GetMapping("/tags/{id}")
     public String tags(Model model, @PageableDefault(size = 8, sort = {"updateTime"}, direction = Sort.Direction.DESC)
-            @PathVariable Long id, Pageable pageable) {
+    @PathVariable Long id, Pageable pageable) {
 
         List<Tag> tags = tagServiceImpl.ListTagTop(10000);
         if (id == -1 && tags.size() > 0) {
             id = tags.get(0).getId();
         }
         BlogQuery blogQuery = new BlogQuery();
-        model.addAttribute("tags",tags);
-        model.addAttribute("page",blogServiceImpl.ListBlog(id,pageable));
-        model.addAttribute("avtiveTagId",id);
+        model.addAttribute("tags", tags);
+        model.addAttribute("page", blogServiceImpl.ListBlog(id, pageable));
+        model.addAttribute("avtiveTagId", id);
         return "tags";
     }
 

src/main/java/cn/allms/controller/TypeShowController.java

@@ -33,17 +33,17 @@ public class TypeShowController {
 
     @GetMapping("/types/{id}")
     public String types(Model model, @PageableDefault(size = 8, sort = {"updateTime"}, direction = Sort.Direction.DESC)
-            @PathVariable Long id, Pageable pageable) {
+    @PathVariable Long id, Pageable pageable) {
 
         List<Type> types = typeServiceImpl.listTypeTop(10000);
-        if (id == -1 && types.size() > 0){
+        if (id == -1 && types.size() > 0) {
             id = types.get(0).getId();
         }
         BlogQuery blogQuery = new BlogQuery();
         blogQuery.setTypeId(id);
-        model.addAttribute("types",types);
-        model.addAttribute("page",blogServiceImpl.ListBlog(pageable,blogQuery));
-        model.addAttribute("avtiveTypeId",id);
+        model.addAttribute("types", types);
+        model.addAttribute("page", blogServiceImpl.ListBlog(pageable, blogQuery));
+        model.addAttribute("avtiveTypeId", id);
         return "types";
     }
 

src/main/java/cn/allms/controller/admin/BlogController.java

@@ -36,19 +36,19 @@ public class BlogController {
     /**
      * 博客发布页面url
      */
-    private static final String INPUT="admin/blogs-input";
-    private static final String HEAD_URL="https://api.rainss.cn/random.php?t=";
-    private static final String HEAD_URL_1="https://api.rainss.cn/acgimgurl/acgurl.php?t=";
+    private static final String INPUT = "admin/blogs-input";
+    private static final String HEAD_URL = "https://api.rainss.cn/random.php?t=";
+    private static final String HEAD_URL_1 = "https://api.rainss.cn/acgimgurl/acgurl.php?t=";
 
     /**
      * 显示分页查询到的博客列表页面url
      */
-    private static final String LIST="admin/blogs";
+    private static final String LIST = "admin/blogs";
 
     /**
      * 局部刷新表格查询到的数据url
      */
-    private static final String REDIRECT_LIST="redirect:/admin/blogs";
+    private static final String REDIRECT_LIST = "redirect:/admin/blogs";
 
     @Autowired
     private BlogService blogServiceImpl;
@@ -61,6 +61,7 @@ public class BlogController {
 
     /**
      * 分页显示博客列表
+     *
      * @param model
      * @param pageable
      * @param blog
@@ -75,6 +76,7 @@ public class BlogController {
 
     /**
      * 联合查询博客列表
+     *
      * @param model
      * @param pageable
      * @param blog
@@ -89,12 +91,13 @@ public class BlogController {
 
     /**
      * 新增博客页面
+     *
      * @param model
      * @return
      */
     @GetMapping("/blogs/input")
-    public String inputBlog(Model model){
-        model.addAttribute("firstPicture",HEAD_URL_1 + System.currentTimeMillis());
+    public String inputBlog(Model model) {
+        model.addAttribute("firstPicture", HEAD_URL_1 + System.currentTimeMillis());
         setTypeAadTag(model);
         return INPUT;
     }
@@ -102,68 +105,71 @@ public class BlogController {
 
     /**
      * 提交博客
+     *
      * @param blog
      * @param attributes
      * @param session
      * @return
      */
     @PostMapping("/blogs")
-    public String post(Blog blog, RedirectAttributes attributes , HttpSession session){
+    public String post(Blog blog, RedirectAttributes attributes, HttpSession session) {
         blog.setUser((User) session.getAttribute("user"));
         blog.setType(typeServiceImpl.getType(blog.getType().getId()));
         blog.setTags(tagServiceImpl.ListTag(blog.getTagIds()));
         Blog b;
         Date date = new Date();
         //新增博客
-        if(blog.getId() == null){
+        if (blog.getId() == null) {
             blog.setUpdateTime(date);
             blog.setCreateTime(date);
             blog.setViews(0);
             b = blogServiceImpl.saveBlog(blog);
         } else {//更新博客
-            b = blogServiceImpl.updateBlog(blog.getId(),blog);
+            b = blogServiceImpl.updateBlog(blog.getId(), blog);
         }
-        if (b==null){
-            attributes.addFlashAttribute("message","操作失败");
-        }else {
-            attributes.addFlashAttribute("message","操作成功");
+        if (b == null) {
+            attributes.addFlashAttribute("message", "操作失败");
+        } else {
+            attributes.addFlashAttribute("message", "操作成功");
         }
         return REDIRECT_LIST;
     }
 
     /**
      * 删除博客
+     *
      * @param id
      * @return
      */
     @GetMapping("/blogs/{id}/delete")
-    public String deleteBlog(@PathVariable("id") Long id){
+    public String deleteBlog(@PathVariable("id") Long id) {
         blogServiceImpl.deleteBlog(id);
         return REDIRECT_LIST;
     }
 
     /**
      * 修改博客页面
+     *
      * @param model
      * @return
      */
     @GetMapping("/blogs/{id}/input")
-    public String editBlog(@PathVariable("id") Long id,Model model){
+    public String editBlog(@PathVariable("id") Long id, Model model) {
         setTypeAadTag(model);
         Blog blog = blogServiceImpl.getBlog(id);
         //处理tagIds
         blog.init();
-        model.addAttribute("firstPicture",HEAD_URL_1 + System.currentTimeMillis());
-        model.addAttribute("blog",blog);
+        model.addAttribute("firstPicture", HEAD_URL_1 + System.currentTimeMillis());
+        model.addAttribute("blog", blog);
         return INPUT;
     }
 
-    private void setTypeAadTag(Model model){
+    private void setTypeAadTag(Model model) {
         /*博客查询,为后面的编辑博客做准备*/
         model.addAttribute("blog", new Blog());
         /*分类查询*/
         model.addAttribute("types", typeServiceImpl.listType());
         /*标签查询*/
-        model.addAttribute("tags",tagServiceImpl.ListTag());
+        model.addAttribute("tags", tagServiceImpl.ListTag());
     }
 }

src/main/java/cn/allms/controller/admin/LoginController.java

@@ -27,15 +27,17 @@ public class LoginController {
 
     /**
      * 显示用户登录页面
+     *
      * @return
      */
     @GetMapping
-    public String loginPage(){
+    public String loginPage() {
         return "admin/login";
     }
 
     /**
      * 用户登录
+     *
      * @param username
      * @param password
      * @param session
@@ -47,10 +49,10 @@ public class LoginController {
                         @RequestParam String password,
                         HttpSession session,
                         RedirectAttributes attributes) {
-        User user = userservice.checkUser(username,password);
-        if (user != null ){
+        User user = userservice.checkUser(username, password);
+        if (user != null) {
             user.setPassword(null);
-            session.setAttribute("user",user);
+            session.setAttribute("user", user);
             return "admin/index";
         } else {
             attributes.addFlashAttribute("message", "用户名和密码错误");
@@ -60,11 +62,12 @@ public class LoginController {
 
     /**
      * 用户注销
+     *
      * @param session
      * @return
      */
     @GetMapping("/logout")
-    public String logout(HttpSession session){
+    public String logout(HttpSession session) {
         session.removeAttribute("user");
         return "redirect:/admin";
     }

src/main/java/cn/allms/controller/admin/TagController.java

@@ -26,32 +26,35 @@ import javax.validation.Valid;
 public class TagController {
 
     @Autowired
-   private TagService tagServiceImpl;
+    private TagService tagServiceImpl;
 
     /**
      * 分页查询标签列表
+     *
      * @return
      */
     @GetMapping("/tags")
-    public String types(@PageableDefault(size = 8,sort = {"id"},direction = Sort.Direction.DESC)
+    public String types(@PageableDefault(size = 8, sort = {"id"}, direction = Sort.Direction.DESC)
                                 Pageable pageable, Model model) {
-        model.addAttribute("page",tagServiceImpl.ListTag(pageable));
+        model.addAttribute("page", tagServiceImpl.ListTag(pageable));
         return "admin/tags";
     }
 
     /**
      * 显示添加标签页面
+     *
      * @param model
      * @return
      */
     @GetMapping("/tags/input")
-    public String showInput(Model model){
-        model.addAttribute("tag",new Tag());
+    public String showInput(Model model) {
+        model.addAttribute("tag", new Tag());
         return "admin/tags-input";
     }
 
     /**
      * 新增标签
+     *
      * @param tag
      * @param result
      * @param attributes
@@ -75,19 +78,22 @@ public class TagController {
         return "redirect:/admin/tags";
 
     }
+
     /**
      * 显示添加标签页面
+     *
      * @param model
      * @return
      */
     @GetMapping("/tags/{id}/input")
-    public String editInput(@PathVariable("id") Long id, Model model){
-        model.addAttribute("tag",tagServiceImpl.getTag(id));
+    public String editInput(@PathVariable("id") Long id, Model model) {
+        model.addAttribute("tag", tagServiceImpl.getTag(id));
         return "admin/tags-input";
     }
 
     /**
      * 修改标签名
+     *
      * @param tag
      * @param result
      * @param id
@@ -95,16 +101,16 @@ public class TagController {
      * @return
      */
     @PostMapping("/tags/{id}")
-    public String editPost(@Valid Tag tag,BindingResult result,@PathVariable("id")Long id,RedirectAttributes attributes){
+    public String editPost(@Valid Tag tag, BindingResult result, @PathVariable("id") Long id, RedirectAttributes attributes) {
         Tag tag1 = tagServiceImpl.getTagByName(tag.getName());
         if (tag1 != null) {
-            result.rejectValue("name","nameError","不能添加重复的分类");
+            result.rejectValue("name", "nameError", "不能添加重复的分类");
         }
         if (result.hasErrors()) {
             return "admin/tags-input";
         }
         Tag t = tagServiceImpl.updateTag(id, tag);
-        if (t == null ) {
+        if (t == null) {
             attributes.addFlashAttribute("message", "更新失败");
         } else {
             attributes.addFlashAttribute("message", "更新成功");
@@ -114,14 +120,15 @@ public class TagController {
 
     /**
      * 删除功能
+     *
      * @param id
      * @param attributes
      * @return
      */
     @GetMapping("/tags/{id}/delete")
-    public String deleteById(@PathVariable("id") Long id,RedirectAttributes attributes){
+    public String deleteById(@PathVariable("id") Long id, RedirectAttributes attributes) {
         tagServiceImpl.deleteTag(id);
-        attributes.addFlashAttribute("message","删除成功");
+        attributes.addFlashAttribute("message", "删除成功");
         return "redirect:/admin/tags";
     }
 }

src/main/java/cn/allms/controller/admin/TypeController.java

@@ -32,12 +32,13 @@ public class TypeController {
 
     /**
      * 分页查询分类列表
+     *
      * @return
      */
     @GetMapping("/types")
-    public String types(@PageableDefault(size = 8,sort = {"id"},direction = Sort.Direction.DESC)
+    public String types(@PageableDefault(size = 8, sort = {"id"}, direction = Sort.Direction.DESC)
                                 Pageable pageable, Model model) {
-        model.addAttribute("page",typeServiceImpl.ListType(pageable));
+        model.addAttribute("page", typeServiceImpl.ListType(pageable));
         return "admin/types";
     }
 
@@ -47,29 +48,30 @@ public class TypeController {
      * @return
      */
     @GetMapping("/types/input")
-    public String showInput(Model model){
-        model.addAttribute("type",new Type());
+    public String showInput(Model model) {
+        model.addAttribute("type", new Type());
         return "admin/types-input";
     }
 
     /**
      * 新增分类
+     *
      * @return
      */
 
     @PostMapping("/types")
-    public String post(@Valid Type type,BindingResult result, RedirectAttributes attributes) {
+    public String post(@Valid Type type, BindingResult result, RedirectAttributes attributes) {
         //1.判断用户名是有重复
         Type type1 = typeServiceImpl.getTypeByName(type.getName());
         if (type1 != null) {
-            result.rejectValue("name","nameError","不能添加重复的分类");
+            result.rejectValue("name", "nameError", "不能添加重复的分类");
         }
         //2. 后端校验用户名是否为空
         if (result.hasErrors()) {
             return "admin/types-input";
         }
         Type t = typeServiceImpl.saveType(type);
-        if (t == null ) {
+        if (t == null) {
             attributes.addFlashAttribute("message", "新增失败");
         } else {
             attributes.addFlashAttribute("message", "新增成功");
@@ -79,34 +81,36 @@ public class TypeController {
 
     /**
      * 跳转到修改分类页面
+     *
      * @param id
      * @param model
      * @return
      */
     @GetMapping("/types/{id}/input")
-    public String editInput(@PathVariable("id") Long id, Model model){
-        model.addAttribute("type",typeServiceImpl.getType(id));
+    public String editInput(@PathVariable("id") Long id, Model model) {
+        model.addAttribute("type", typeServiceImpl.getType(id));
         return "admin/types-input";
     }
 
 
     /**
      * 修改分类
+     *
      * @return
      */
 
     @PostMapping("/types/{id}")
-    public String editPost(@Valid Type type, BindingResult result,@PathVariable Long id, RedirectAttributes attributes) {
+    public String editPost(@Valid Type type, BindingResult result, @PathVariable Long id, RedirectAttributes attributes) {
         Type type1 = typeServiceImpl.getTypeByName(type.getName());
         if (type1 != null) {
-            result.rejectValue("name","nameError","不能添加重复的分类");
+            result.rejectValue("name", "nameError", "不能添加重复的分类");
         }
 
         if (result.hasErrors()) {
             return "admin/types-input";
         }
-        Type t = typeServiceImpl.updateType(id,type);
-        if (t == null ) {
+        Type t = typeServiceImpl.updateType(id, type);
+        if (t == null) {
             attributes.addFlashAttribute("message", "更新失败");
         } else {
             attributes.addFlashAttribute("message", "更新成功");
@@ -115,9 +119,9 @@ public class TypeController {
     }
 
     @GetMapping("/types/{id}/delete")
-    public String deleteTypeById(@PathVariable("id") Long id,RedirectAttributes attributes){
+    public String deleteTypeById(@PathVariable("id") Long id, RedirectAttributes attributes) {
         typeServiceImpl.deleteType(id);
-        attributes.addFlashAttribute("message","删除成功");
+        attributes.addFlashAttribute("message", "删除成功");
         return "redirect:/admin/types";
     }
 }

src/main/java/cn/allms/dao/BlogRepository.java

@@ -18,13 +18,13 @@ import java.util.List;
  * @version: 1.0
  */
 
-public interface BlogRepository  extends JpaRepository<Blog,Long>,JpaSpecificationExecutor<Blog>{
+public interface BlogRepository extends JpaRepository<Blog, Long>, JpaSpecificationExecutor<Blog> {
 
     @Query("select b from Blog b where b.recommend = true")
     List<Blog> findTop(Pageable pageable);
 
     @Query("select b from Blog b where b.title like ?1 or b.content like ?1")
-    Page<Blog> findByQuery(String query,Pageable pageable);
+    Page<Blog> findByQuery(String query, Pageable pageable);
 
     @Transactional
     @Modifying

src/main/java/cn/allms/dao/CommentRepository.java

@@ -13,7 +13,7 @@ import java.util.List;
  * @Description: com.yrp.dao
  * @version: 1.0
  */
-public interface CommentRepository extends JpaRepository<Comment,Long> {
+public interface CommentRepository extends JpaRepository<Comment, Long> {
 
     List<Comment> findByBlogIdAndParentCommentNull(Long blogId, Sort sort);
 

src/main/java/cn/allms/dao/TagRepository.java

@@ -10,7 +10,7 @@ import java.util.List;
 /**
  * 标签
  */
-public interface TagRepository extends JpaRepository<Tag,Long>{
+public interface TagRepository extends JpaRepository<Tag, Long> {
     Tag findByName(String name);
 
 

src/main/java/cn/allms/dao/TypeRepository.java

@@ -13,13 +13,14 @@ import java.util.List;
  * @Description: com.yrp.dao
  * @version: 1.0
  */
-public interface TypeRepository extends JpaRepository<Type,Long>{
+public interface TypeRepository extends JpaRepository<Type, Long> {
 
     Type findByName(String name);
 
 
     /**
      * 查询type按照分页的方式
+     *
      * @param pageable
      * @return
      */

src/main/java/cn/allms/dao/UserRepository.java

@@ -9,9 +9,10 @@ import org.springframework.data.jpa.repository.JpaRepository;
  * @Description: com.yrp.dao
  * @version: 1.0
  */
-public interface UserRepository extends JpaRepository<User,Long> {
+public interface UserRepository extends JpaRepository<User, Long> {
     /**
      * 通过用户名和密码查询用户
+     *
      * @param username
      * @param password
      * @return

src/main/java/cn/allms/exception/NotFoundException.java

@@ -7,7 +7,7 @@ import org.springframework.web.bind.annotation.ResponseStatus;
  * 博客为空的异常
  */
 @ResponseStatus(HttpStatus.NOT_FOUND)
-public class NotFoundException extends RuntimeException{
+public class NotFoundException extends RuntimeException {
     public NotFoundException() {
         super();
     }

src/main/java/cn/allms/handler/ControllerExceptionHandler.java

@@ -14,8 +14,10 @@ import javax.servlet.http.HttpServletRequest;
 public class ControllerExceptionHandler {
 
     private final Logger logger = LoggerFactory.getLogger(ControllerExceptionHandler.class);
+
     /**
      * 异常处理
+     *
      * @param request
      * @param e
      * @return

src/main/java/cn/allms/interceptor/LoginInterceptor.java

@@ -14,7 +14,7 @@ public class LoginInterceptor extends HandlerInterceptorAdapter {
                              HttpServletResponse response,
                              Object handler) throws Exception {
         //1. 用户未登录
-        if(request.getSession().getAttribute("user") == null){
+        if (request.getSession().getAttribute("user") == null) {
             response.sendRedirect("/admin");
             return false;
         }

src/main/java/cn/allms/service/BlogService.java

@@ -17,6 +17,7 @@ import java.util.Map;
 public interface BlogService {
     /**
      * 通过id查询单条博客
+     *
      * @param id
      * @return
      */
@@ -24,6 +25,7 @@ public interface BlogService {
 
     /**
      * 通过id查询单条博客（前端使用）
+     *
      * @param id
      * @return
      */
@@ -32,6 +34,7 @@ public interface BlogService {
 
     /**
      * 分页查询博客
+     *
      * @param pageable
      * @param blog
      * @return
@@ -40,38 +43,44 @@ public interface BlogService {
 
     /**
      * 分页查询显示博客列表
+     *
      * @param pageable
      * @return
      */
     Page<Blog> ListBlog(Pageable pageable);
 
 
-    Page<Blog> ListBlog(Long tagId,Pageable pageable);
+    Page<Blog> ListBlog(Long tagId, Pageable pageable);
 
     /**
      * 模糊查询分页显示博客列表
+     *
      * @param pageable
      * @param query
      * @return
      */
-    Page<Blog> ListBlog(Pageable pageable,String query);
+    Page<Blog> ListBlog(Pageable pageable, String query);
 
     /**
      * 显示推荐的博客列表
+     *
      * @return
      */
     List<Blog> listRecommendBlogTop(Integer size);
 
     /**
      * 显示归档信息
+     *
      * @return
      */
-    Map<String ,List<Blog>> archiveBlog();
+    Map<String, List<Blog>> archiveBlog();
 
 
     Long countBlog();
+
     /**
      * 修改
+     *
      * @param blog
      * @return
      */
@@ -79,19 +88,19 @@ public interface BlogService {
 
     /**
      * 修改
+     *
      * @param id
      * @param blog
      * @return
      */
-    Blog updateBlog(Long id,Blog blog);
+    Blog updateBlog(Long id, Blog blog);
 
     /**
      * 删除
+     *
      * @param id
      */
     void deleteBlog(Long id);
 
 
-
-
 }

src/main/java/cn/allms/service/CommentService.java

@@ -12,6 +12,7 @@ public interface CommentService {
 
     /**
      * 通过id查询评论列表
+     *
      * @param blogId
      * @return
      */
@@ -19,6 +20,7 @@ public interface CommentService {
 
     /**
      * 保存评论信息
+     *
      * @param comment
      * @return
      */

src/main/java/cn/allms/service/TagService.java

@@ -13,6 +13,7 @@ public interface TagService {
 
     /**
      * 新增
+     *
      * @return
      */
     Tag saveTag(Tag tag);
@@ -20,6 +21,7 @@ public interface TagService {
 
     /**
      * 单个查询
+     *
      * @param id
      * @return
      */
@@ -27,6 +29,7 @@ public interface TagService {
 
     /**
      * 分页查询
+     *
      * @param pageable
      * @return
      */
@@ -37,6 +40,7 @@ public interface TagService {
 
     /**
      * 查询所有标签
+     *
      * @return
      */
     List<Tag> ListTag();
@@ -45,6 +49,7 @@ public interface TagService {
 
     /**
      * 修改
+     *
      * @param id
      * @param tag
      * @return
@@ -53,12 +58,14 @@ public interface TagService {
 
     /**
      * 删除
+     *
      * @param id
      */
     void deleteTag(Long id);
 
     /**
      * 通过分类名称
+     *
      * @return
      */
     Tag getTagByName(String name);

src/main/java/cn/allms/service/TypeService.java

@@ -13,6 +13,7 @@ public interface TypeService {
 
     /**
      * 新增
+     *
      * @return
      */
     Type saveType(Type type);
@@ -20,6 +21,7 @@ public interface TypeService {
 
     /**
      * 单个查询
+     *
      * @param id
      * @return
      */
@@ -27,6 +29,7 @@ public interface TypeService {
 
     /**
      * 分页查询
+     *
      * @param pageable
      * @return
      */
@@ -34,6 +37,7 @@ public interface TypeService {
 
     /**
      * 查询所有分类
+     *
      * @return
      */
     List<Type> listType();
@@ -43,20 +47,23 @@ public interface TypeService {
 
     /**
      * 修改
+     *
      * @param id
      * @param type
      * @return
      */
-    Type updateType(Long id,Type type);
+    Type updateType(Long id, Type type);
 
     /**
      * 删除
+     *
      * @param id
      */
     void deleteType(Long id);
 
     /**
      * 通过分类名称查询分类
+     *
      * @return
      */
     Type getTypeByName(String name);

src/main/java/cn/allms/service/Userservice.java

@@ -12,6 +12,7 @@ public interface Userservice {
 
     /**
      * 用户登录检测
+     *
      * @param
      * @return
      */

src/main/java/cn/allms/service/impl/BlogServiceImpl.java

@@ -28,8 +28,7 @@ import java.util.*;
  * @version: 1.0
  */
 @Service
-public class BlogServiceImpl implements BlogService
-{
+public class BlogServiceImpl implements BlogService {
 
     @Autowired
     private BlogRepository blogRepository;
@@ -43,11 +42,11 @@ public class BlogServiceImpl implements BlogService
     @Override
     public Blog getAadConvertBlog(Long id) {
         Blog blog = blogRepository.findById(id).orElse(null);
-        if (blog == null){
+        if (blog == null) {
             throw new NotFoundException("该博客不存在！");
         }
         Blog b = new Blog();
-        BeanUtils.copyProperties(blog,b);
+        BeanUtils.copyProperties(blog, b);
         b.setContent(MarkdownUtils.markdownToHtmlExtensions(b.getContent()));
         blogRepository.updateViews(id);
         return b;
@@ -67,7 +66,7 @@ public class BlogServiceImpl implements BlogService
             public Predicate toPredicate(Root<Blog> root, CriteriaQuery<?> cq, CriteriaBuilder cb) {
                 List<Predicate> predicates = new ArrayList<>();
                 if (!"".equals(blog.getTitle()) && blog.getTitle() != null) {
-                    predicates.add(cb.like(root.<String>get("title"), "%"+blog.getTitle()+"%"));
+                    predicates.add(cb.like(root.<String>get("title"), "%" + blog.getTitle() + "%"));
                 }
                 if (blog.getTypeId() != null) {
                     predicates.add(cb.equal(root.<Type>get("type").get("id"), blog.getTypeId()));
@@ -78,7 +77,7 @@ public class BlogServiceImpl implements BlogService
                 cq.where(predicates.toArray(new Predicate[predicates.size()]));
                 return null;
             }
-        },pageable);
+        }, pageable);
     }
 
     @Override
@@ -93,20 +92,20 @@ public class BlogServiceImpl implements BlogService
             @Override
             public Predicate toPredicate(Root<Blog> root, CriteriaQuery<?> cq, CriteriaBuilder cb) {
                 Join join = root.join("tags");
-                return cb.equal(join.get("id"),tagId);
+                return cb.equal(join.get("id"), tagId);
             }
         }, pageable);
     }
 
     @Override
     public Page<Blog> ListBlog(Pageable pageable, String query) {
-        return blogRepository.findByQuery(query,pageable);
+        return blogRepository.findByQuery(query, pageable);
     }
 
     @Override
     public List<Blog> listRecommendBlogTop(Integer size) {
-        Sort sort = Sort.by(Sort.Direction.DESC,"updateTime");
-        Pageable pageable = PageRequest.of(0,size,sort);
+        Sort sort = Sort.by(Sort.Direction.DESC, "updateTime");
+        Pageable pageable = PageRequest.of(0, size, sort);
         return blogRepository.findTop(pageable);
     }
 
@@ -127,8 +126,9 @@ public class BlogServiceImpl implements BlogService
 
     /**
      * 发布博客
-     *          (如何是新增博客,需要添加创建时间和修改时间、以及初始化浏览量view = 0)
-     *          (如果是修改博客,需要添加修改时间)
+     * (如何是新增博客,需要添加创建时间和修改时间、以及初始化浏览量view = 0)
+     * (如果是修改博客,需要添加修改时间)
+     *
      * @param blog
      * @return
      */
@@ -141,6 +141,7 @@ public class BlogServiceImpl implements BlogService
 
     /**
      * 所谓的修改其实是查询+保存
+     *
      * @param id
      * @param blog
      * @return
@@ -150,12 +151,12 @@ public class BlogServiceImpl implements BlogService
     public Blog updateBlog(Long id, Blog blog) {
         Blog b = blogRepository.findById(id).orElse(null);
         //判断是否存在这条数据
-        if(b == null){
+        if (b == null) {
             throw new NotFoundException("该博客不存在");
         }
         b.setUpdateTime(new Date());
         //copy有值属性 不覆盖
-        BeanUtils.copyProperties(blog,b, MyBeanUtils.getNullPropertyNames(blog));
+        BeanUtils.copyProperties(blog, b, MyBeanUtils.getNullPropertyNames(blog));
         return blogRepository.save(b);
     }
 

src/main/java/cn/allms/service/impl/CommentServiceImpl.java

@@ -27,7 +27,7 @@ public class CommentServiceImpl implements CommentService {
     @Override
     public List<Comment> listCommentByBlogId(Long blogId) {
         Sort sort = Sort.by("createTime");
-        List<Comment> comments = commentRepository.findByBlogIdAndParentCommentNull(blogId,sort);
+        List<Comment> comments = commentRepository.findByBlogIdAndParentCommentNull(blogId, sort);
         return CommentUtil.eachComment(comments);
     }
 
@@ -37,7 +37,7 @@ public class CommentServiceImpl implements CommentService {
         //回复: 如果有父级,需要将父级set进来,之后在保存
         Long parentCommentId = comment.getParentComment().getId();
         System.out.println(parentCommentId);
-        if(parentCommentId != -1){
+        if (parentCommentId != -1) {
             comment.setParentComment(commentRepository.findById(parentCommentId).orElse(null));
         } else {
             //发布评论:

src/main/java/cn/allms/service/impl/TagServiceImpl.java

@@ -45,8 +45,8 @@ public class TagServiceImpl implements TagService {
 
     @Override
     public List<Tag> ListTagTop(Integer size) {
-        Sort sort = Sort.by(Sort.Direction.DESC,"blogs.size");
-        Pageable pageable = PageRequest.of(0,size,sort);
+        Sort sort = Sort.by(Sort.Direction.DESC, "blogs.size");
+        Pageable pageable = PageRequest.of(0, size, sort);
         return tagRepository.findTop(pageable);
     }
 
@@ -64,11 +64,11 @@ public class TagServiceImpl implements TagService {
     @Override
     public Tag updateTag(Long id, Tag tag) {
         Tag t = tagRepository.findById(id).orElse(null);
-        if(t==null){
+        if (t == null) {
             throw new NotFoundException("不存在该标签");
         }
 
-        BeanUtils.copyProperties(tag,t);
+        BeanUtils.copyProperties(tag, t);
         return tagRepository.save(t);
     }
 
@@ -87,7 +87,7 @@ public class TagServiceImpl implements TagService {
         List<Long> list = new ArrayList<>();
         if (!"".equals(ids) && ids != null) {
             String[] idarray = ids.split(",");
-            for (int i=0; i < idarray.length;i++) {
+            for (int i = 0; i < idarray.length; i++) {
                 list.add(new Long(idarray[i]));
             }
         }

src/main/java/cn/allms/service/impl/TypeServiceImpl.java

@@ -63,10 +63,10 @@ public class TypeServiceImpl implements TypeService {
     @Override
     public Type updateType(Long id, Type type) {
         Type t = typeRepository.findById(id).orElse(null);
-        if(t == null){
+        if (t == null) {
             throw new NotFoundException("不存在该类型");
         }
-        BeanUtils.copyProperties(type,t);
+        BeanUtils.copyProperties(type, t);
         return typeRepository.save(t);
     }
 

src/main/java/cn/allms/util/CommentUtil.java

@@ -12,6 +12,7 @@ import java.util.List;
 public class CommentUtil {
     /**
      * 循环每个顶级的评论节点
+     *
      * @param comments
      * @return
      */
@@ -19,7 +20,7 @@ public class CommentUtil {
         List<Comment> commentsView = new ArrayList<>();
         for (Comment comment : comments) {
             Comment c = new Comment();
-            BeanUtils.copyProperties(comment,c);
+            BeanUtils.copyProperties(comment, c);
             commentsView.add(c);
         }
         //合并评论的各层子代到第一级子代集合中
@@ -28,7 +29,6 @@ public class CommentUtil {
     }
 
     /**
-     *
      * @param comments root根节点，blog不为空的对象集合
      * @return
      */
@@ -36,7 +36,7 @@ public class CommentUtil {
 
         for (Comment comment : comments) {
             List<Comment> replys1 = comment.getReplyComments();
-            for(Comment reply1 : replys1) {
+            for (Comment reply1 : replys1) {
                 //循环迭代，找出子代，存放在tempReplys中
                 recursively(reply1);
             }
@@ -46,20 +46,23 @@ public class CommentUtil {
             tempReplys = new ArrayList<>();
         }
     }
+
     //存放迭代找出的所有子代的集合
     public static List<Comment> tempReplys = new ArrayList<>();
+
     /**
      * 递归迭代，剥洋葱
+     *
      * @param comment 被迭代的对象
      * @return
      */
     public static void recursively(Comment comment) {
         tempReplys.add(comment);//顶节点添加到临时存放集合
-        if (comment.getReplyComments().size()>0) {
+        if (comment.getReplyComments().size() > 0) {
             List<Comment> replys = comment.getReplyComments();
             for (Comment reply : replys) {
                 tempReplys.add(reply);
-                if (reply.getReplyComments().size()>0) {
+                if (reply.getReplyComments().size() > 0) {
                     recursively(reply);
                 }
             }

src/main/java/cn/allms/util/MD5Utils.java

@@ -10,14 +10,15 @@ public class MD5Utils {
 
     /**
      * MD5加密类
+     *
      * @param str 要加密的字符串
-     * @return    加密后的字符串
+     * @return 加密后的字符串
      */
-    public static String code(String str){
+    public static String code(String str) {
         try {
             MessageDigest md = MessageDigest.getInstance("MD5");
             md.update(str.getBytes());
-            byte[]byteDigest = md.digest();
+            byte[] byteDigest = md.digest();
             int i;
             StringBuffer buf = new StringBuffer("");
             for (int offset = 0; offset < byteDigest.length; offset++) {

src/main/java/cn/allms/util/MarkdownUtils.java

@@ -21,6 +21,7 @@ public class MarkdownUtils {
 
     /**
      * markdown格式转换成HTML格式
+     *
      * @param markdown
      * @return
      */
@@ -34,6 +35,7 @@ public class MarkdownUtils {
     /**
      * 增加扩展[标题锚点，表格生成]
      * Markdown转换成HTML
+     *
      * @param markdown
      * @return
      */

src/main/java/cn/allms/util/MyBeanUtils.java

@@ -15,12 +15,13 @@ public class MyBeanUtils {
 
     /**
      * 获取所有的属性值为空属性名数组
+     *
      * @param source
      * @return
      */
     public static String[] getNullPropertyNames(Object source) {
         BeanWrapper beanWrapper = new BeanWrapperImpl(source);
-        PropertyDescriptor[] pds =  beanWrapper.getPropertyDescriptors();
+        PropertyDescriptor[] pds = beanWrapper.getPropertyDescriptors();
         List<String> nullPropertyNames = new ArrayList<>();
         for (PropertyDescriptor pd : pds) {
             String propertyName = pd.getName();

src/main/resources/application-dev.yml

@@ -1,20 +1,24 @@
+# 项目端口
+server:
+  port: 9420
+
 #数据库驱动mysql
 spring:
   datasource:
-    driver-class-name: com.mysql.jdbc.Driver
+    driver-class-name: com.mysql.cj.jdbc.Driver
     url: jdbc:mysql://127.0.0.1:3306/mx-blog?useUnicode=true&characterEncoding=utf-8&useSSL=false
     username: root
-    password: josxy
+    password: 123456
   jpa:
     hibernate:
-      ddl-auto: update
-    show-sql: true
+      ddl-auto: create
+    show-sql: false
 
 #日志打印
 logging:
   level:
     root: info
-    com.yrp: debug
-  file: log/blog-dev.log
-server:
-  port: 9420
+    cn.allms: debug
+  file:
+    name: log/blog-dev.log
+    path: classpath:logback/logback-spring.xml

src/main/resources/application-pro.yml

@@ -15,7 +15,8 @@ logging:
   level:
     root: warn
     com.yrp: info
-  file: log/-blogpro.log
+  file:
+    name: log/-blogpro.log
 
 # 服务端口
 server:

src/main/resources/i18n/message.properties

@@ -5,14 +5,10 @@ index.type=\u5206\u7C7B
 index.tag=\u6807\u7B7E
 index.archive=\u5F52\u6863
 index.aboutme=\u7AD9\u957F\u4FE1\u606F
-
-
 #\u5E95\u90E8\u5BFC\u822A\u680F\u4FE1\u606F
 index.email=\u90AE\u7BB1:qfmx520@163.com
 index.qq=QQ:745719461
 index.about=\u4F5C\u8005\u662F\u4E00\u540Dspringboot\u7231\u597D\u8005,\u662F\u4E00\u540D\u6B63\u5728\u52AA\u529B\u594B\u6597\u7684\u5B66\u751F,\u4E3B\u8981\u5B66\u4E60JavaEE\u5F00\u53D1,Web\u524D\u7AEF\u7B49\u6280\u672F.\u4F5C\u8005\u662F\u4E2A\u559C\u6B22\u65C5\u884C\u7684\u5B69\u5B50,\u76EE\u6807\u662F\u6E38\u904D\u5168\u4E16\u754C\uFF01
 index.copyright=copy @ 2020 - 2021 \u4f5c\u8005:\u6d45\u67ab\u6c90\u96ea \u6b64\u7ad9\u4ec5\u4f9b\u4e2a\u4eba\u6240\u6709 \u5982\u6709\u7591\u95ee\u8054\u7cfb\u4f5c\u8005
-
-
 #\u4E8C\u7EF4\u7801\u626B\u7801\u9605\u8BFB\u5730\u5740
 blog.serurl=127.0.0.1:80

src/main/resources/i18n/message_en_US.properties

@@ -5,16 +5,10 @@ index.type=Type
 index.tag=Tag
 index.archive=Archive
 index.aboutme=About Me
-
-
 #\u5E95\u90E8\u5BFC\u822A\u680F\u4FE1\u606F
 index.email=Email:qfmx520@163.com
 index.qq=QQ:745719461
 index.about=The author is a springboot enthusiast, a struggling student who mainly studies JavaEE development,Web front end and other technologies.
 index.copyright=copy @ 2020 - 2021 \u4f5c\u8005:\u6d45\u67ab\u6c90\u96ea \u6b64\u7ad9\u4ec5\u4f9b\u4e2a\u4eba\u6240\u6709 \u5982\u6709\u7591\u95ee\u8054\u7cfb\u4f5c\u8005
-
-
-
 #\u4E8C\u7EF4\u7801\u626B\u7801\u9605\u8BFB\u5730\u5740
-
 blog.serurl=172.20.10.6:8080

src/main/resources/i18n/message_zh_CN.properties

@@ -5,13 +5,10 @@ index.type=\u5206\u7C7B
 index.tag=\u6807\u7B7E
 index.archive=\u5F52\u6863
 index.aboutme=\u7AD9\u957F\u4FE1\u606F
-
-
 #\u5E95\u90E8\u5BFC\u822A\u680F\u4FE1\u606F
 index.email=\u90AE\u7BB1:qfmx520@163.com
 index.qq=QQ:745719461
 index.about=\u4F5C\u8005\u662F\u4E00\u540Dspringboot\u7231\u597D\u8005,\u662F\u4E00\u540D\u6B63\u5728\u52AA\u529B\u594B\u6597\u7684\u5B66\u751F,\u4E3B\u8981\u5B66\u4E60JavaEE\u5F00\u53D1,Web\u524D\u7AEF\u7B49\u6280\u672F.\u4F5C\u8005\u662F\u4E2A\u559C\u6B22\u65C5\u884C\u7684\u5B69\u5B50,\u76EE\u6807\u662F\u6E38\u904D\u5168\u4E16\u754C\uFF01
 index.copyright=copy @ 2020 - 2021 \u4f5c\u8005:\u6d45\u67ab\u6c90\u96ea \u6b64\u7ad9\u4ec5\u4f9b\u4e2a\u4eba\u6240\u6709 \u5982\u6709\u7591\u95ee\u8054\u7cfb\u4f5c\u8005
-
 #\u4E8C\u7EF4\u7801\u626B\u7801\u9605\u8BFB\u5730\u5740
 blog.serurl=172.20.10.6:8080

src/main/resources/templates/_fragments.html

@@ -7,7 +7,9 @@
     <meta name="viewport" content="device-width, initial-scale=1.0">
     <title th:replace="${title}">博客详情</title>
     <!--引入semantic-ui框架-->
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
+    <link rel="stylesheet"
+          href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css"
+    />
     <!--引入页面排版CSS-->
     <link rel="stylesheet" href="../static/css/typo.css" th:href="@{/css/typo.css}">
     <!--引入动画插件CSS-->
@@ -19,8 +21,8 @@
     <!--引入自定义CSS-->
     <link rel="stylesheet" href="../static/css/me.css" th:href="@{/css/me.css}">
     <!--图标部署-->
-    <link rel="shortcut icon" href="/favicon.ico" />
-    <link rel="bookmark" href="/favicon.ico" type="image/x-icon"/>
+    <link rel="shortcut icon" href="../static/favicon.ico" th:href="@{/favicon.ico}"/>
+    <link rel="bookmark" href="../static/favicon.ico" type="image/x-icon" th:href="@{/favicon.ico}"/>
     <style type="text/css">
         .m-padded-tb-massive {
             padding-top: 2em !important;
@@ -34,11 +36,16 @@
     <div class="ui container">
         <div class="ui inverted secondary stackable menu">
             <h2 class="ui teal header item">浅枫沐雪</h2>
-            <a href="#" th:href="@{/}" class="m-item item m-mobile-hide" th:classappend="${n==1}? 'active'"><i class="small home icon"></i><span th:text="#{index.home}">首页</span></a>
-            <a href="#" th:href="@{/types/-1}" class="m-item item m-mobile-hide" th:classappend="${n==2}? 'active'"><i class="small idea icon"></i><span th:text="#{index.type}"分类></span></a>
-            <a href="#" th:href="@{/tags/-1}" class="m-item item m-mobile-hide" th:classappend="${n==3}? 'active'" ><i class="small tags icon" ></i><span th:text="#{index.tag}">标签</span></a>
-            <a href="#" th:href="@{/archives}" class="m-item item m-mobile-hide" th:classappend="${n==4}? 'active'" ><i class="small clone icon" ></i><span th:text="#{index.archive}">归档</span></a>
-            <a href="#" th:href="@{/about}" class="m-item item m-mobile-hide" th:classappend="${n==5}? 'active'"><i class="small info icon"></i><span th:text="#{index.aboutme}">站长信息</span></a>
+            <a href="#" th:href="@{/}" class="m-item item m-mobile-hide" th:classappend="${n==1}? 'active'"><i
+                    class="small home icon"></i><span th:text="#{index.home}">首页</span></a>
+            <a href="#" th:href="@{/types/-1}" class="m-item item m-mobile-hide" th:classappend="${n==2}? 'active'"><i
+                    class="small idea icon"></i><span th:text="#{index.type}" 分类></span></a>
+            <a href="#" th:href="@{/tags/-1}" class="m-item item m-mobile-hide" th:classappend="${n==3}? 'active'"><i
+                    class="small tags icon"></i><span th:text="#{index.tag}">标签</span></a>
+            <a href="#" th:href="@{/archives}" class="m-item item m-mobile-hide" th:classappend="${n==4}? 'active'"><i
+                    class="small clone icon"></i><span th:text="#{index.archive}">归档</span></a>
+            <a href="#" th:href="@{/about}" class="m-item item m-mobile-hide" th:classappend="${n==5}? 'active'"><i
+                    class="small info icon"></i><span th:text="#{index.aboutme}">站长信息</span></a>
             <div class="right m-item item m-mobile-hide">
                 <form name="search" action="" th:action="@{/search}" target="_blank" method="post">
                     <div class="ui icon inverted  input">
@@ -58,47 +65,14 @@
 <!--底部footer-->
 <footer th:fragment="footer" class="ui inverted vertical segment m-padded-tb-massive ">
     <div class="ui center aligned container " style="color: #4183c4">
-        <div id="yiyan" class="ui m-text-thin m-text-spaced m-opacity-tiny center aligned" style="padding-bottom: 5px"></div>
-<!--            <div class="three wide column">-->
-<!--                <div class="ui inverted link list">-->
-<!--                    <h4 class="ui inverted header m-opacity-min">站长QQ</h4>-->
-<!--                    <div class="item">-->
-<!--                        <img src="../static/images/WeChat.jpg" th:src="@{/images/QQ.png}" CLASS="ui rounded image" alt="" style="width:110px">-->
-<!--                    </div>-->
-<!--                </div>-->
-<!--            </div>-->
-<!--            <div class="three wide column">-->
-<!--                <h4 class="ui inverted header m-opacity-min">最新动态</h4>-->
-<!--                <div id="newblog-container">-->
-<!--                    <div class="ui inverted link list" th:fragment="newblogList">-->
-<!--                        <a href="#" th:href="@{/blog/{id}(id=${blog.id})}" target="_blank" class="item" th:each="blog : ${newblogs}" th:text="${blog.title}">我在等你2021年</a>-->
-<!--                        &lt;!&ndash;/*&ndash;&gt;-->
-<!--                        <a href="#" class="item">idea的操作笔记</a>-->
-<!--                        <a href="#" class="item">SpringBoot学习计划</a>-->
-<!--                        &lt;!&ndash;*/&ndash;&gt;-->
-<!--                    </div>-->
-<!--                </div>-->
-<!--            </div>-->
-<!--            <div class="three wide column">-->
-<!--                <h4 class="ui inverted header m-opacity-min">联系作者</h4>-->
-<!--                <div class="ui inverted link list">-->
-<!--                    <a href="https://space.bilibili.com/424210875" class="item" target="_blank">我的B站</a>-->
-<!--                    <a href="#" class="item">Q Q: 754719461</a>-->
-<!--                    <a href="#" class="item">邮箱: qfmx520@163.com</a>-->
-<!--                </div>-->
-
-<!--            </div>-->
-<!--            <div class="seven wide column">-->
-<!--                <h4 class="ui inverted header m-opacity-min">作者寄语</h4>-->
-<!--                <p class="m-text-thin m-text-spaced m-opacity-min m-text-lined">-->
-<!--                    相遇，心绪如白云飘飘;拥有，心花如雨露纷飞;错过，心灵如流沙肆虐。回首，幽情如蓝静夜清。白茶清欢无别事,我在等风也等你！-->
-<!--                </p>-->
-<!--            </div>-->
-
+        <div id="yiyan" class="ui m-text-thin m-text-spaced m-opacity-tiny center aligned"
+             style="padding-bottom: 5px"></div>
         <p class="m-text-thin m-text-spaced m-opacity-tiny">©2021 浅枫沐雪</p>
-        <a href="https://www.foreverblog.cn/" class="d-inline-block text-muted" target="_blank"><img src="https://resource.upcdn.rainss.cn/2019/11/3368312888.png" th:src="@{/images/forever.png}" alt="" style="width:auto;height:16px;"> </a>
+        <a href="https://www.foreverblog.cn/" class="d-inline-block text-muted" target="_blank"><img
+                src="https://resource.upcdn.rainss.cn/2019/11/3368312888.png" th:src="@{/images/forever.png}" alt=""
+                style="width:auto;height:16px;"> </a>
         <p class="m-text-thin m-text-spaced m-opacity-tiny">
-            Process by <a href="http://start.spring.io" target="_blank">BOOT</a> · Theme is <a href="https://josxy.cn" target="_blank">MX</a>
+            process by · xieyajun
         </p>
         <!--分割线-->
         <div class="ui inverted section divider"></div>
@@ -120,15 +94,16 @@
     <!--引入二维码生成插件 JS-->
     <script src="../static/lib/qrcode/qrcode.min.js" th:src="@{/lib/qrcode/qrcode.min.js}"></script>
     <!--引入waypoints插件滚动条-->
-    <script src="../static/lib/waypoints/jquery.waypoints.min.js" th:src="@{/lib/waypoints/jquery.waypoints.min.js}"></script>
+    <script src="../static/lib/waypoints/jquery.waypoints.min.js"
+            th:src="@{/lib/waypoints/jquery.waypoints.min.js}"></script>
     <script>
         $('#newblog-container').load(/*[[@{/footer/newblog}]]*/"/footer/newblog");
     </script>
-    <script >
+    <script>
         let yiyan_url = "https://v1.hitokoto.cn/?c=f&encode=text";
-        $.get(yiyan_url,null,function (data){
+        $.get(yiyan_url, null, function (data) {
+            // 一言接口
             $("#yiyan").text(data);
-            console.log(data);
         })
     </script>
 </th:block>

src/main/resources/templates/about.html

@@ -11,149 +11,155 @@
     <link rel="stylesheet" href="../static/css/me.css">
 </head>
 <body>
-    <!--导航-->
-    <nav th:replace="_fragments :: menu(5)" class="ui inverted attached segment segment m-padded-tb-mini m-shadow-small">
-        <!--/*-->
-        <div class="ui container">
-            <div class="ui inverted secondary stackable menu">
-                <h2 class="ui teal header item">浅枫沐雪</h2>
-                <a href="#"  class="m-item item m-mobile-hide" ><i class="small home icon"></i>首页</a>
-                <a href="#"  class="m-item item m-mobile-hide " ><i class="small idea icon"></i>分类</a>
-                <a href="#" class="m-item item m-mobile-hide active"><i class="small tags icon"></i>标签</a>
-                <a href="#" class="m-item item m-mobile-hide"><i class="small clone icon"></i>归档</a>
-                <a href="#" class="m-item item m-mobile-hide"><i class="small info icon"></i>站长信息</a>
-                <div class="right m-item item m-mobile-hide">
-                    <form name="search" action="#" target="_blank" method="post">
-                        <div class="ui icon inverted  input">
-                            <input type="text" name="query" placeholder="Search....">
-                            <i class="search icon link"></i>
-                        </div>
-                    </form>
+<!--导航-->
+<nav th:replace="_fragments :: menu(5)" class="ui inverted attached segment segment m-padded-tb-mini m-shadow-small">
+    <!--/*-->
+    <div class="ui container">
+        <div class="ui inverted secondary stackable menu">
+            <h2 class="ui teal header item">浅枫沐雪</h2>
+            <a href="#" class="m-item item m-mobile-hide"><i class="small home icon"></i>首页</a>
+            <a href="#" class="m-item item m-mobile-hide "><i class="small idea icon"></i>分类</a>
+            <a href="#" class="m-item item m-mobile-hide active"><i class="small tags icon"></i>标签</a>
+            <a href="#" class="m-item item m-mobile-hide"><i class="small clone icon"></i>归档</a>
+            <a href="#" class="m-item item m-mobile-hide"><i class="small info icon"></i>站长信息</a>
+            <div class="right m-item item m-mobile-hide">
+                <form name="search" action="#" target="_blank" method="post">
+                    <div class="ui icon inverted  input">
+                        <input type="text" name="query" placeholder="Search....">
+                        <i class="search icon link"></i>
+                    </div>
+                </form>
+            </div>
+        </div>
+        <!--menu toggle无任何显示意思-->
+        <a href="" class="ui icon menu toggle black button m-right-top m-mobile-show">
+            <i class="sidebar icon"></i>
+        </a>
+        <!--*/-->
+</nav>
+</nav>
+<!--中间内容-->
+<div class="m-container-big m-padded-tb-big">
+    <!--适应移动端手机-->
+    <div class="ui container">
+        <div class="ui stackable grid">
+            <div class="eleven wide column">
+                <div class="ui  segment">
+                    <img src="../static/images/mvp.jpg" th:src="@{/images/mvp.jpg}" alt="" class="ui rounded image">
                 </div>
             </div>
-            <!--menu toggle无任何显示意思-->
-            <a href="" class="ui icon menu toggle black button m-right-top m-mobile-show">
-                <i class="sidebar icon"></i>
-            </a>
-            <!--*/-->
-    </nav>
-    </nav>
-    <!--中间内容-->
-    <div class="m-container-big m-padded-tb-big">
-        <!--适应移动端手机-->
-        <div class="ui container">
-            <div class="ui stackable grid">
-                <div class="eleven wide column">
-                    <div class="ui  segment">
-                        <img src="../static/images/mvp.jpg" th:src="@{/images/mvp.jpg}" alt="" class="ui rounded image">
-                    </div>
+            <div class="five wide column">
+                <div class="ui top attached segment">
+                    <div class="ui header">关于作者</div>
                 </div>
-                <div class="five wide column">
-                    <div class="ui top attached segment">
-                        <div class="ui header">关于作者</div>
-                    </div>
-                    <div class="ui attached segment">
-                        <p class="m-text">亚索，原名疾风剑豪,且随疾风前行，身后亦须留心。 亚索是一名互联网爱好者，凭借一身剑术浪迹在江湖。</p>
-                    </div>
-                    <div class="ui attached segment">
-                        <div class="ui orange basic left pointing label m-margin-tb-tiny">编程</div>
-                        <div class="ui orange basic left pointing label m-margin-tb-tiny">思考</div>
-                        <div class="ui orange basic left pointing label m-margin-tb-tiny">运动</div>
-                        <div class="ui orange basic left pointing label m-margin-tb-tiny">写作</div>
-                        <div class="ui orange basic left pointing label m-margin-tb-tiny">旅游</div>
-                        <div class="ui orange basic left pointing label m-margin-tb-tiny">唱歌</div>
-                    </div>
-                    <div class="ui attached segment">
-                        <h4 class="ui header">技术标签</h4>
-                        <div class="ui teal basic left pointing label m-margin-tb-tiny">SpringBoot</div>
-                        <div class="ui teal basic left pointing label m-margin-tb-tiny">MyBatis</div>
-                        <div class="ui teal basic left pointing label m-margin-tb-tiny">SpringMVC</div>
-                        <div class="ui teal basic left pointing label m-margin-tb-tiny">JavaSE</div>
-                        <div class="ui teal basic left pointing label m-margin-tb-tiny">JavaEE</div>
-                        <div class="ui teal basic left pointing label m-margin-tb-tiny">Spring</div>
-                        <div class="ui teal basic left pointing label m-margin-tb-tiny">JavaScript</div>
-                        <div class="ui teal basic left pointing label m-margin-tb-tiny">MySQL</div>
-                        <div class="ui teal basic left pointing label m-margin-tb-tiny">Oracle</div>
-                        <div class="ui teal basic left pointing label m-margin-tb-tiny">Redis</div>
-                        <div class="ui teal basic left pointing label m-margin-tb-tiny">Linux</div>
-                        <div class="ui teal basic left pointing label m-margin-tb-tiny">jQuery</div>
-                        <div class="ui teal basic left pointing label m-margin-tb-tiny">blockChain</div>
-                    </div>
-                    <div class="ui bottom attached segment">
-                        <a href="https://github.com/qfmx" class="ui circular icon button m-margin-left-big" target="_blank"><i class="github icon"></i></a>
-                        <a href="#" class="ui wc circular icon button" target="_blank"><i class="weixin icon"></i></a>
-                        <a href="#" class="ui circular icon button" target="_blank"><i class="qq icon" data-content="745719461" data-position="bottom center"></i></a>
-                        <a href="https://space.bilibili.com/424210875" class="ui circular icon button" target="_blank"><i class=" icon">B</i></a>
-                    </div>
+                <div class="ui attached segment">
+                    <p class="m-text">亚索，原名疾风剑豪,且随疾风前行，身后亦须留心。 亚索是一名互联网爱好者，凭借一身剑术浪迹在江湖。</p>
+                </div>
+                <div class="ui attached segment">
+                    <div class="ui orange basic left pointing label m-margin-tb-tiny">编程</div>
+                    <div class="ui orange basic left pointing label m-margin-tb-tiny">思考</div>
+                    <div class="ui orange basic left pointing label m-margin-tb-tiny">运动</div>
+                    <div class="ui orange basic left pointing label m-margin-tb-tiny">写作</div>
+                    <div class="ui orange basic left pointing label m-margin-tb-tiny">旅游</div>
+                    <div class="ui orange basic left pointing label m-margin-tb-tiny">唱歌</div>
+                </div>
+                <div class="ui attached segment">
+                    <h4 class="ui header">技术标签</h4>
+                    <div class="ui teal basic left pointing label m-margin-tb-tiny">SpringBoot</div>
+                    <div class="ui teal basic left pointing label m-margin-tb-tiny">MyBatis</div>
+                    <div class="ui teal basic left pointing label m-margin-tb-tiny">SpringMVC</div>
+                    <div class="ui teal basic left pointing label m-margin-tb-tiny">JavaSE</div>
+                    <div class="ui teal basic left pointing label m-margin-tb-tiny">JavaEE</div>
+                    <div class="ui teal basic left pointing label m-margin-tb-tiny">Spring</div>
+                    <div class="ui teal basic left pointing label m-margin-tb-tiny">JavaScript</div>
+                    <div class="ui teal basic left pointing label m-margin-tb-tiny">MySQL</div>
+                    <div class="ui teal basic left pointing label m-margin-tb-tiny">Oracle</div>
+                    <div class="ui teal basic left pointing label m-margin-tb-tiny">Redis</div>
+                    <div class="ui teal basic left pointing label m-margin-tb-tiny">Linux</div>
+                    <div class="ui teal basic left pointing label m-margin-tb-tiny">jQuery</div>
+                    <div class="ui teal basic left pointing label m-margin-tb-tiny">blockChain</div>
+                </div>
+                <div class="ui bottom attached segment">
+                    <a href="https://github.com/qfmx" class="ui circular icon button m-margin-left-big" target="_blank"><i
+                            class="github icon"></i></a>
+                    <a href="#" class="ui wc circular icon button" target="_blank"><i class="weixin icon"></i></a>
+                    <a href="#" class="ui circular icon button" target="_blank"><i class="qq icon"
+                                                                                   data-content="745719461"
+                                                                                   data-position="bottom center"></i></a>
+                    <a href="https://space.bilibili.com/424210875" class="ui circular icon button" target="_blank"><i
+                            class=" icon">B</i></a>
                 </div>
             </div>
         </div>
     </div>
+</div>
 
-    <br>
-    <br>
-    <!--底部-->
-    <footer th:replace="_fragments :: 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">
-                        <h4 class="ui inverted header m-opacity-min">站长微信</h4>
-                        <div class="item">
-                            <img src="../static/images/WeChat.jpg" th:src="@{/images/WeChat.jpg}" CLASS="ui rounded image" alt="" style="width:110px">
-                        </div>
+<br>
+<br>
+<!--底部-->
+<footer th:replace="_fragments :: 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">
+                    <h4 class="ui inverted header m-opacity-min">站长微信</h4>
+                    <div class="item">
+                        <img src="../static/images/WeChat.jpg" th:src="@{/images/WeChat.jpg}" CLASS="ui rounded image"
+                             alt="" style="width:110px">
                     </div>
                 </div>
-                <div class="three wide column">
-                    <h4 class="ui inverted header m-opacity-min">最新动态</h4>
-                    <div class="ui inverted link list">
-                        <a href="#" class="item">我在等你2019年</a>
-                        <a href="#" class="item">idea的操作笔记</a>
-                        <a href="#" class="item">SpringBoot学习计划</a>
-                    </div>
-                </div>
-                <div class="three wide column">
-                    <h4 class="ui inverted header m-opacity-min">联系作者</h4>
-                    <div class="ui inverted link list">
-                        <a href="https://space.bilibili.com/393270022" target="_blank" class="item">b站</a>
-                        <a href="#" class="item">QQ:745719461</a>
-                        <a href="#" class="item">邮箱:qfmx520@163.com</a>
-                    </div>
-
-                </div>
-                <div class="seven wide column">
-                    <h4 class="ui inverted header m-opacity-min">关于作者</h4>
-                    <p class="m-text-thin m-text-spaced m-opacity-min m-text-lined">作者是一名springboot爱好者,是一名正在努力奋斗的学生,主要学习JavaEE开发,Web前端等技术.作者是个喜欢旅行的孩子,目标是游遍全世界！</p>
-                </div>
             </div>
-            <!--分割线-->
-            <div class="ui inverted section divider"></div>
-            <p class="m-text-thin m-text-spaced m-opacity-tiny">Copy © 2019 - 2020 作者:浅枫沐雪 此站仅供个人所有 如有疑问联系作者</p>
+            <div class="three wide column">
+                <h4 class="ui inverted header m-opacity-min">最新动态</h4>
+                <div class="ui inverted link list">
+                    <a href="#" class="item">我在等你2019年</a>
+                    <a href="#" class="item">idea的操作笔记</a>
+                    <a href="#" class="item">SpringBoot学习计划</a>
+                </div>
+            </div>
+            <div class="three wide column">
+                <h4 class="ui inverted header m-opacity-min">联系作者</h4>
+                <div class="ui inverted link list">
+                    <a href="https://space.bilibili.com/393270022" target="_blank" class="item">b站</a>
+                    <a href="#" class="item">QQ:745719461</a>
+                    <a href="#" class="item">邮箱:qfmx520@163.com</a>
+                </div>
+
+            </div>
+            <div class="seven wide column">
+                <h4 class="ui inverted header m-opacity-min">关于作者</h4>
+                <p class="m-text-thin m-text-spaced m-opacity-min m-text-lined">
+                    作者是一名springboot爱好者,是一名正在努力奋斗的学生,主要学习JavaEE开发,Web前端等技术.作者是个喜欢旅行的孩子,目标是游遍全世界！</p>
+            </div>
         </div>
-        <!--*/-->
-    </footer>
+        <!--分割线-->
+        <div class="ui inverted section divider"></div>
+        <p class="m-text-thin m-text-spaced m-opacity-tiny">Copy © 2019 - 2020 作者:浅枫沐雪 此站仅供个人所有 如有疑问联系作者</p>
+    </div>
+    <!--*/-->
+</footer>
 
-    <!--引入所需要的JS-->
-    <th:block th:replace="_fragments :: script">
+<!--引入所需要的JS-->
+<th:block th:replace="_fragments :: script">
 
-    </th:block>
-    <!--声明行内js代码域-->
-    <script>
-        $('.menu.toggle').click(function () {
-            $('.m-item').toggleClass('m-mobile-hide');
-        });
+</th:block>
+<!--声明行内js代码域-->
+<script>
+    $('.menu.toggle').click(function () {
+        $('.m-item').toggleClass('m-mobile-hide');
+    });
 
-        /*qq显示*/
-        $('.qq').popup();
+    /*qq显示*/
+    $('.qq').popup();
 
-        /*微信添加*/
-        $('.wc').popup({
-            popup : $('.wc-qr'),
-            on : 'hover',
-            position : 'bottom center'
-        });
+    /*微信添加*/
+    $('.wc').popup({
+        popup: $('.wc-qr'),
+        on: 'hover',
+        position: 'bottom center'
+    });
 
-    </script>
+</script>
 </body>
 </html>

src/main/resources/templates/admin/_fragments.html

@@ -6,11 +6,12 @@
     <meta name="viewport" content="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/lib/editormd/css/editormd.min.css" th:href="@{/lib/editormd/css/editormd.min.css}">
+    <link rel="stylesheet" href="../../static/lib/editormd/css/editormd.min.css"
+          th:href="@{/lib/editormd/css/editormd.min.css}">
     <link rel="stylesheet" href="../static/css/me.css" th:href="@{/css/me.css}">
     <!--图标部署-->
-    <link rel="shortcut icon" href="/favicon.ico" />
-    <link rel="bookmark" href="/favicon.ico" type="image/x-icon"/>
+    <link rel="shortcut icon" href="/static/favicon.ico"/>
+    <link rel="bookmark" href="/static/favicon.ico" type="image/x-icon"/>
 </head>
 
 <body>
@@ -18,20 +19,25 @@
 <nav th:fragment="menu(n)" class="ui inverted attached segment segment m-padded-tb-mini m-shadow-small">
     <div class="ui container">
         <div class="ui inverted secondary stackable menu">
-            <h2 class="ui teal header item" >浅枫沐雪</h2>
-            <a href="#" th:href="@{/admin/blogs}" class="m-item item m-mobile-hide" th:classappend="${n==1}? 'active'"><i class="small home icon"></i>博客管理</a>
-            <a href="#" th:href="@{/admin/types}" class="m-item item  m-mobile-hide" th:classappend="${n==2}? 'active'"><i class="small idea icon"></i>分类管理</a>
-            <a href="#" th:href="@{/admin/tags}" class="m-item item m-mobile-hide" th:classappend="${n==3}? 'active'" ><i class="small tags icon"></i>标签管理</a>
-            <a href="#" th:href="@{/}" target="_blank" class="m-item item m-mobile-hide" th:classappend="${n==4}? 'active'" ><i class="small idea icon"></i>网站</a>
+            <h2 class="ui teal header item">浅枫沐雪</h2>
+            <a href="#" th:href="@{/admin/blogs}" class="m-item item m-mobile-hide"
+               th:classappend="${n==1}? 'active'"><i class="small home icon"></i>博客管理</a>
+            <a href="#" th:href="@{/admin/types}" class="m-item item  m-mobile-hide" th:classappend="${n==2}? 'active'"><i
+                    class="small idea icon"></i>分类管理</a>
+            <a href="#" th:href="@{/admin/tags}" class="m-item item m-mobile-hide" th:classappend="${n==3}? 'active'"><i
+                    class="small tags icon"></i>标签管理</a>
+            <a href="#" th:href="@{/}" target="_blank" class="m-item item m-mobile-hide"
+               th:classappend="${n==4}? 'active'"><i class="small idea icon"></i>网站</a>
             <div class="right m-item m-mobile-hide menu">
                 <div class="ui dropdown item">
                     <div class="text ">
-                        <img class="ui avatar image" src="https://picsum.photos/id/1011/100/100" th:src="${session.user.avatar}">
+                        <img class="ui avatar image" src="https://picsum.photos/id/1011/100/100"
+                             th:src="${session.user.avatar}">
                         <span th:text="${session.user.nickname}"></span>
                     </div>
                     <i class="dropdown icon"></i>
                     <div class="menu">
-                        <a href="#"th:href="@{/admin/logout}"  class="item">注销</a>
+                        <a href="#" th:href="@{/admin/logout}" class="item">注销</a>
                     </div>
                 </div>
             </div>
@@ -52,7 +58,8 @@
         </div>
         <!--分割线-->
         <div class="ui inverted section divider"></div>
-        <p class="m-text-thin m-text-spaced m-opacity-tiny" th:text="#{index.copyright}">Copy © 2020 - 2021 作者:浅枫沐雪 此站仅供个人所有 如有疑问联系作者</p>
+        <p class="m-text-thin m-text-spaced m-opacity-tiny" th:text="#{index.copyright}">Copy © 2020 - 2021 作者:浅枫沐雪
+            此站仅供个人所有 如有疑问联系作者</p>
     </div>
 </footer>
 

src/main/resources/templates/admin/blogs-input.html

@@ -8,299 +8,321 @@
     <title>后台管理-新增博客</title>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
     <!--引入Markdown插件所需要的CSS-->
-    <link rel="stylesheet" href="../../static/lib/editormd/css/editormd.min.css" />
+    <link rel="stylesheet" href="../../static/lib/editormd/css/editormd.min.css"/>
     <!--引入自定义CSS-->
     <link rel="stylesheet" href="../../static/css/me.css">
 </head>
 <body>
-    <!--导航-->
-    <nav  th:replace="admin/_fragments :: menu(1)"class="ui inverted attached segment segment m-padded-tb-mini m-shadow-small">
-        <div class="ui container">
-            <div class="ui inverted secondary stackable menu">
-                <h2 class="ui teal header item">后台管理</h2>
-                    <a href="#" class="m-item active item m-mobile-hide"><i class="small home icon"></i>博客管理</a>
-                <a href="#" class="m-item item  m-mobile-hide"><i class="small idea icon"></i>分类管理</a>
-                <a href="#" class="m-item item m-mobile-hide" ><i class="small tags icon"></i>标签管理</a>
-                <a href="#" class="m-item item m-mobile-hide" ><i class="small idea icon"></i>个人信息</a>
-                <div class="right m-item m-mobile-hide menu">
-                    <div class="ui dropdown item">
-                        <div class="text ">
-                            <img class="ui avatar image" src="https://picsum.photos/id/1011/100/100">
-                            QFMX
-                        </div>
-                        <i class="dropdown icon"></i>
-                        <div class="menu">
-                            <a href="#" class="item">注销</a>
-                        </div>
+<!--导航-->
+<nav th:replace="admin/_fragments :: menu(1)"
+     class="ui inverted attached segment segment m-padded-tb-mini m-shadow-small">
+    <div class="ui container">
+        <div class="ui inverted secondary stackable menu">
+            <h2 class="ui teal header item">后台管理</h2>
+            <a href="#" class="m-item active item m-mobile-hide"><i class="small home icon"></i>博客管理</a>
+            <a href="#" class="m-item item  m-mobile-hide"><i class="small idea icon"></i>分类管理</a>
+            <a href="#" class="m-item item m-mobile-hide"><i class="small tags icon"></i>标签管理</a>
+            <a href="#" class="m-item item m-mobile-hide"><i class="small idea icon"></i>个人信息</a>
+            <div class="right m-item m-mobile-hide menu">
+                <div class="ui dropdown item">
+                    <div class="text ">
+                        <img class="ui avatar image" src="https://picsum.photos/id/1011/100/100">
+                        QFMX
+                    </div>
+                    <i class="dropdown icon"></i>
+                    <div class="menu">
+                        <a href="#" class="item">注销</a>
                     </div>
                 </div>
             </div>
         </div>
-        <!--menu toggle无任何显示意思-->
-        <a href="" class="ui icon menu toggle black button m-right-top m-mobile-show">
-            <i class="sidebar icon"></i>
-        </a>
-    </nav>
-    <!--二级导航-->
-    <div class="ui attached pointing menu">
-      <div class="ui container">
-          <div class="right menu">
-              <a href="#" th:href="@{/admin/blogs/input}" class="active teal basic item">发布</a>
-              <a href="#"  th:href="@{/admin/blogs}" class="item">列表</a>
-          </div>
-      </div>
     </div>
-    <!--中间内容-->
-    <div class="m-container  m-padded-tb-big">
-        <!--适应移动端手机-->
-        <div class="ui container">
-            <form id="blog-form" action="#" th:object="${blog}" th:action="@{/admin/blogs}" method="post" class="ui form">
-                <input type="hidden" name="id" th:value="*{id}">
-                <!--判断是状态-保存、发布....-->
-                <input type="hidden" name="published">
-                <!--博客来源-->
-                <div class="required field">
-                    <div class="ui left labeled input">
-                        <div class="ui selection compact teal basic dropdown label">
-                            <input type="hidden" value="原创" name="flag" th:value="*{flag}" >
-                            <i class="dropdown icon"></i>
-                            <div class="text">原创</div>
-                            <div class="menu">
-                                <div class="item" data-value="原创">原创</div>
-                                <div class="item" data-value="转载">转载</div>
-                                <div class="item" data-value="翻译">翻译</div>
-                            </div>
+    <!--menu toggle无任何显示意思-->
+    <a href="" class="ui icon menu toggle black button m-right-top m-mobile-show">
+        <i class="sidebar icon"></i>
+    </a>
+</nav>
+<!--二级导航-->
+<div class="ui attached pointing menu">
+    <div class="ui container">
+        <div class="right menu">
+            <a href="#" th:href="@{/admin/blogs/input}" class="active teal basic item">发布</a>
+            <a href="#" th:href="@{/admin/blogs}" class="item">列表</a>
+        </div>
+    </div>
+</div>
+<!--中间内容-->
+<div class="m-container  m-padded-tb-big">
+    <!--适应移动端手机-->
+    <div class="ui container">
+        <form id="blog-form" action="#" th:object="${blog}" th:action="@{/admin/blogs}" method="post" class="ui form">
+            <input type="hidden" name="id" th:value="*{id}">
+            <!--判断是状态-保存、发布....-->
+            <input type="hidden" name="published">
+            <!--博客来源-->
+            <div class="required field">
+                <div class="ui left labeled input">
+                    <div class="ui selection compact teal basic dropdown label">
+                        <input type="hidden" value="原创" name="flag" th:value="*{flag}">
+                        <i class="dropdown icon"></i>
+                        <div class="text">原创</div>
+                        <div class="menu">
+                            <div class="item" data-value="原创">原创</div>
+                            <div class="item" data-value="转载">转载</div>
+                            <div class="item" data-value="翻译">翻译</div>
                         </div>
-                        <input type="text" name="title" placeholder="标题" th:value="*{title}">
                     </div>
+                    <input type="text" name="title" placeholder="标题" th:value="*{title}">
                 </div>
-                <!--文章内容-->
-                <div class="field">
-                    <div id="md-content" style="z-index: 1 !important;">
+            </div>
+            <!--文章内容-->
+            <div class="field">
+                <div id="md-content" style="z-index: 1 !important;">
                         <textarea placeholder="文章内容" name="content" style="display: none" th:text="*{content}">
                         </textarea>
-                    </div>
                 </div>
-                <!--博客分类-->
-                <div class="two fields">
-                    <div class="field">
-                       <div class="ui left labeled action input">
-                           <label class="ui compact teal basic label">分类</label>
-                           <div class="ui fluid selection dropdown ">
-                               <input type="hidden" name="type.id" th:value="*{type}!=null ? *{type.id}">
-                               <i class="dropdown icon"></i>
-                               <div class="default text">分类</div>
-                               <div class="menu">
-                                   <div th:each="type : ${types}" class="item" data-value="1" th:data-value="${type.id}" th:text="${type.name}">分类1</div>
-                                   <!--/*-->
-                                   <div class="item" data-value="2">分类2</div>
-                                   <div class="item" data-value="3">分類3</div>
-                                   <!--*/-->
-                               </div>
-                           </div>
-                       </div>
-                    </div>
-                    <div class="field">
-                        <div class="ui left labeled action input">
-                            <label class="ui compact teal basic label">标签</label>
-                            <div class="ui fluid selection multiple search dropdown ">
-                                <input type="hidden" name="tagIds" th:value="*{tagIds}">
-                                <i class="dropdown icon"></i>
-                                <div class="default text">标签</div>
-                                <div class="menu">
-                                    <div th:each="tag : ${tags}" class="item" data-value="1" th:data-value="${tag.id}" th:text="${tag.name}">标签1</div>
-                                    <!--/*-->
-                                        <div class="item" data-value="2">标签2</div>
-                                        <div class="item" data-value="3">标签3</div>
-                                    <!--*/-->
+            </div>
+            <!--博客分类-->
+            <div class="two fields">
+                <div class="field">
+                    <div class="ui left labeled action input">
+                        <label class="ui compact teal basic label">分类</label>
+                        <div class="ui fluid selection dropdown ">
+                            <input type="hidden" name="type.id" th:value="*{type}!=null ? *{type.id}">
+                            <i class="dropdown icon"></i>
+                            <div class="default text">分类</div>
+                            <div class="menu">
+                                <div th:each="type : ${types}" class="item" data-value="1" th:data-value="${type.id}"
+                                     th:text="${type.name}">分类1
                                 </div>
+                                <!--/*-->
+                                <div class="item" data-value="2">分类2</div>
+                                <div class="item" data-value="3">分類3</div>
+                                <!--*/-->
                             </div>
                         </div>
                     </div>
                 </div>
-
+                <div class="field">
+                    <div class="ui left labeled action input">
+                        <label class="ui compact teal basic label">标签</label>
+                        <div class="ui fluid selection multiple search dropdown ">
+                            <input type="hidden" name="tagIds" th:value="*{tagIds}">
+                            <i class="dropdown icon"></i>
+                            <div class="default text">标签</div>
+                            <div class="menu">
+                                <div th:each="tag : ${tags}" class="item" data-value="1" th:data-value="${tag.id}"
+                                     th:text="${tag.name}">标签1
+                                </div>
+                                <!--/*-->
+                                <div class="item" data-value="2">标签2</div>
+                                <div class="item" data-value="3">标签3</div>
+                                <!--*/-->
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="two fields">
                 <div class="field">
                     <div class="ui left labeled input">
-                        <label class="ui teal basic label">首图</label>
+                        <label class="ui teal basic label">首圖</label>
                         <input type="text" name="firstPicture" placeholder="首图引用地址" th:value="${firstPicture}">
                     </div>
                 </div>
-                <!--博客描述文本域-->
-                <div class="required field">
-                    <textarea name="description" th:text="*{description}" placeholder="博客描述..." maxlength="200"></textarea>
-                </div>
-                <div class="inline fields">
-                    <div class="field">
-                        <div class="ui checkbox">
-                            <!--hidden表示默认未选中-->
-                            <input type="checkbox"  id="recommend" name="recommend" checked class="hidden" th:checked="*{recommend}">
-                            <label for="recommend">推荐</label>
+                <div class="field">
+                    <div class="ui left labeled input">
+                        <label class="ui teal basic label">隨機首圖</label>
+                        <div class="ui toggle checkbox" style="margin: 10px">
+                            <input type="checkbox" name="tyu" tabindex="0" class="hidden"/>
                         </div>
                     </div>
-                    <div class="field">
-                        <div class="ui checkbox">
-                            <input type="checkbox" id="shareStatement" name="shareStatement" class="hidden" th:checked="*{shareStatement}">
-                            <label for="shareStatement">转载声明</label>
-                        </div>
-                    </div>
-                    <div class="field">
-                        <div class="ui checkbox">
-                            <input type="checkbox"  id="appreciation" name="appreciation" class="hidden" th:checked="*{appreciation}">
-                            <label for="appreciation">赞赏</label>
-                        </div>
-                    </div>
-                    <div class="field">
-                        <div class="ui checkbox">
-                            <input type="checkbox" id="commentabled" name="commentabled" class="hidden" th:checked="*{commentabled}">
-                            <label for="commentabled">评论</label>
-                        </div>
-                    </div>
-                </div>
-                <!--表单校验-->
-                    <!--错误提示-->
-                <div class="ui error message">
-
-                </div>
-
-                <!--返回、保存、发布-->
-                <div class="ui right aligned container">
-                    <!--onclick="window.history.go(-1)返回上一页面-->
-                    <button type="button" class="ui button" onclick="window.history.go(-1)">返回</button>
-
-                    <button  type="button" id="save-btn" class="ui green button">保存</button>
-
-                    <button type="button"  id="publish-btn" class="ui teal button">发布</button>
-                </div>
-            </form>
-        </div>
-    </div>
-    <br>
-    <br>
-    <!--底部-->
-    <footer th:replace="admin/_fragments :: 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">
-                        <h4 class="ui inverted header m-opacity-min">站长微信</h4>
-                        <div class="item">
-                            <img src="../../static/images/WeChat.jpg" CLASS="ui rounded image" alt="" style="width:110px">
-                        </div>
-                    </div>
-                </div>
-                <div class="three wide column">
-                    <h4 class="ui inverted header m-opacity-min">最新博客</h4>
-                    <div class="ui inverted link list">
-                        <a href="#" class="item">2019一年收获总结</a>
-                        <a href="#" class="item">idea的操作笔记</a>
-                        <a href="#" class="item">SpringBoot学习计划</a>
-                    </div>
-                </div>
-                <div class="three wide column">
-                    <h4 class="ui inverted header m-opacity-min">联系作者</h4>
-                    <div class="ui inverted link list">
-                        <a href="https://space.bilibili.com/393270022" class="item">b站</a>
-                        <a href="#" class="item">QQ:745719461</a>
-                        <a href="#" class="item">邮箱:qfmx520@163.com</a>
-                    </div>
-                </div>
-                <div class="seven wide column">
-                    <h4 class="ui inverted header m-opacity-min">关于作者</h4>
-                    <p class="m-text-thin m-text-spaced m-opacity-min m-text-lined">作者是一名springboot爱好者,是一名正在努力奋斗的学生,主要学习JavaEE开发,Web前端等技术.作者是个喜欢旅行的孩子,目标是游遍全世界！</p>
                 </div>
             </div>
-            <!--分割线-->
-            <div class="ui inverted section divider"></div>
-            <p class="m-text-thin m-text-spaced m-opacity-tiny">Copy © 2019 - 2020 作者:浅枫沐雪 此站仅供个人所有 如有疑问联系作者</p>
+
+            <!--博客描述文本域-->
+            <div class="required field">
+                <textarea name="description" th:text="*{description}" placeholder="博客描述..." maxlength="200"></textarea>
+            </div>
+            <div class="inline fields">
+                <div class="field">
+                    <div class="ui checkbox">
+                        <!--hidden表示默认未选中-->
+                        <input type="checkbox" id="recommend" name="recommend" checked class="hidden"
+                               th:checked="*{recommend}">
+                        <label for="recommend">推荐</label>
+                    </div>
+                </div>
+                <div class="field">
+                    <div class="ui checkbox">
+                        <input type="checkbox" id="shareStatement" name="shareStatement" class="hidden"
+                               th:checked="*{shareStatement}">
+                        <label for="shareStatement">转载声明</label>
+                    </div>
+                </div>
+                <div class="field">
+                    <div class="ui checkbox">
+                        <input type="checkbox" id="appreciation" name="appreciation" class="hidden"
+                               th:checked="*{appreciation}">
+                        <label for="appreciation">赞赏</label>
+                    </div>
+                </div>
+                <div class="field">
+                    <div class="ui checkbox">
+                        <input type="checkbox" id="commentabled" name="commentabled" class="hidden"
+                               th:checked="*{commentabled}">
+                        <label for="commentabled">评论</label>
+                    </div>
+                </div>
+            </div>
+            <!--表单校验-->
+            <!--错误提示-->
+            <div class="ui error message">
+
+            </div>
+
+            <!--返回、保存、发布-->
+            <div class="ui right aligned container">
+                <!--onclick="window.history.go(-1)返回上一页面-->
+                <button type="button" class="ui button" onclick="window.history.go(-1)">返回</button>
+
+                <button type="button" id="save-btn" class="ui green button">保存</button>
+
+                <button type="button" id="publish-btn" class="ui teal button">发布</button>
+            </div>
+        </form>
+    </div>
+</div>
+<br>
+<br>
+<!--底部-->
+<footer th:replace="admin/_fragments :: 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">
+                    <h4 class="ui inverted header m-opacity-min">站长微信</h4>
+                    <div class="item">
+                        <img src="../../static/images/WeChat.jpg" CLASS="ui rounded image" alt="" style="width:110px">
+                    </div>
+                </div>
+            </div>
+            <div class="three wide column">
+                <h4 class="ui inverted header m-opacity-min">最新博客</h4>
+                <div class="ui inverted link list">
+                    <a href="#" class="item">2019一年收获总结</a>
+                    <a href="#" class="item">idea的操作笔记</a>
+                    <a href="#" class="item">SpringBoot学习计划</a>
+                </div>
+            </div>
+            <div class="three wide column">
+                <h4 class="ui inverted header m-opacity-min">联系作者</h4>
+                <div class="ui inverted link list">
+                    <a href="https://space.bilibili.com/393270022" class="item">b站</a>
+                    <a href="#" class="item">QQ:745719461</a>
+                    <a href="#" class="item">邮箱:qfmx520@163.com</a>
+                </div>
+            </div>
+            <div class="seven wide column">
+                <h4 class="ui inverted header m-opacity-min">关于作者</h4>
+                <p class="m-text-thin m-text-spaced m-opacity-min m-text-lined">
+                    作者是一名springboot爱好者,是一名正在努力奋斗的学生,主要学习JavaEE开发,Web前端等技术.作者是个喜欢旅行的孩子,目标是游遍全世界！</p>
+            </div>
         </div>
-    </footer>
+        <!--分割线-->
+        <div class="ui inverted section divider"></div>
+        <p class="m-text-thin m-text-spaced m-opacity-tiny">Copy © 2019 - 2020 作者:浅枫沐雪 此站仅供个人所有 如有疑问联系作者</p>
+    </div>
+</footer>
 
 
-    <!--/*/<th:block th:replace="admin/_fragments :: script">/*/-->
+<!--/*/<th:block th:replace="admin/_fragments :: script">/*/-->
 
-    <!--引入jQuery-->
-    <script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
-    <!--引入sementic-ui模板所需要的js-->
-    <script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
-    <!--引入Markdown插件需要引入的js-->
-    <script src="../../static/lib/editormd/editormd.min.js"></script>
+<!--引入jQuery-->
+<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
+<!--引入sementic-ui模板所需要的js-->
+<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
+<!--引入Markdown插件需要引入的js-->
+<script src="../../static/lib/editormd/editormd.min.js"></script>
 
-    <!--/*/</th:block>/*/-->
+<!--/*/</th:block>/*/-->
 
-    <!--声明行内js代码域-->
-    <script>
+<!--声明行内js代码域-->
+<script>
 
-        /*Markdown插件集成*/
-        var testEditor;
-        $(function() {
-            testEditor = editormd("md-content", {
-                width   : "100%",
-                height  : 640,
-                syncScrolling : "single",
-                // path    : "../../static/lib/editormd/lib/"
-                path    : "/lib/editormd/lib/"
-            });
-        });
-        /*移动端显示导航栏设置*/
-        $('.menu.toggle').click(function () {
-            $('.m-item').toggleClass('m-mobile-hide');
-        });
-        /*导航栏用户注销显示*/
-        $('.ui.dropdown').dropdown({
-            on : 'hover'
+    /*Markdown插件集成*/
+    var testEditor;
+    $(function () {
+        testEditor = editormd("md-content", {
+            width: "100%",
+            height: 640,
+            syncScrolling: "single",
+            // path    : "../../static/lib/editormd/lib/"
+            path: "/lib/editormd/lib/"
         });
+    });
+    /*移动端显示导航栏设置*/
+    $('.menu.toggle').click(function () {
+        $('.m-item').toggleClass('m-mobile-hide');
+    });
+    /*导航栏用户注销显示*/
+    $('.ui.dropdown').dropdown({
+        on: 'hover'
+    });
 
-        $('#save-btn').click(function () {
-            $('[name="published"]').val(false);
-            $('#blog-form').submit();
-        });
+    $('#save-btn').click(function () {
+        $('[name="published"]').val(false);
+        $('#blog-form').submit();
+    });
 
 
-        $('#publish-btn').click(function () {
-            $('[name="published"]').val(true);
-            $('#blog-form').submit();
-        });
+    $('#publish-btn').click(function () {
+        $('[name="published"]').val(true);
+        $('#blog-form').submit();
+    });
 
-        /*表单校验*/
-        $('.ui.form').form({
-           fields:{
-               title:{
-                   identifier:'title',
-                   rules : [{
-                       type : 'empty',
-                       prompt:'请输入文章标题！'
-                   }]
-               },
-               content : {
-                   identifier:'content',
-                   rules : [{
-                       type : 'empty',
-                       prompt:'请输入文章内容！'
-                   }]
-               },
-               typeId : {
-                   identifier : 'type.id',
-                   rules : [{
-                       type: 'empty',
-                       prompt:'请选择文章分类！'
-                   }]
-               },
-               firstPicture : {
-                   identifier : 'firstPicture',
-                   rules : [{
-                       type: 'empty',
-                       prompt:'请填写首图地址！'
-                   }]
-               },
-               description  : {
-                   identifier : 'description ',
-                   rules : [{
-                       type: 'empty',
-                       prompt:'请填入博客描述！'
-                   }]
-               }
-           }
-        });
-    </script>
+    $('.ui.checkbox').checkbox();
+
+    /*表单校验*/
+    $('.ui.form').form({
+        fields: {
+            title: {
+                identifier: 'title',
+                rules: [{
+                    type: 'empty',
+                    prompt: '请输入文章标题！'
+                }]
+            },
+            content: {
+                identifier: 'content',
+                rules: [{
+                    type: 'empty',
+                    prompt: '请输入文章内容！'
+                }]
+            },
+            typeId: {
+                identifier: 'type.id',
+                rules: [{
+                    type: 'empty',
+                    prompt: '请选择文章分类！'
+                }]
+            },
+            firstPicture: {
+                identifier: 'firstPicture',
+                rules: [{
+                    type: 'empty',
+                    prompt: '请填写首图地址！'
+                }]
+            },
+            description: {
+                identifier: 'description ',
+                rules: [{
+                    type: 'empty',
+                    prompt: '请填入博客描述！'
+                }]
+            }
+        }
+    });
+</script>
 </body>
 </html>

src/main/resources/templates/admin/blogs.html

@@ -11,230 +11,240 @@
     <link rel="stylesheet" href="../../static/css/me.css">
 </head>
 <body>
-    <!--导航-->
-    <nav th:replace="admin/_fragments :: menu(1)" class="ui inverted attached segment segment m-padded-tb-mini m-shadow-small">
-        <div class="ui container">
-            <div class="ui inverted secondary stackable menu">
-                <h2 class="ui teal header item">后台管理</h2>
-                    <a href="#" class="m-item active item m-mobile-hide"><i class="small home icon"></i>博客管理</a>
-                <a href="#" class="m-item item  m-mobile-hide"><i class="small idea icon"></i>分类管理</a>
-                <a href="#" class="m-item item m-mobile-hide" ><i class="small tags icon"></i>标签管理</a>
-                <a href="#" class="m-item item m-mobile-hide" ><i class="small idea icon"></i>个人信息</a>
-                <div class="right m-item m-mobile-hide menu">
-                    <div class="ui dropdown item">
-                        <div class="text ">
-                            <img class="ui avatar image" src="https://picsum.photos/id/1011/100/100">
-                            QFMX
-                        </div>
-                        <i class="dropdown icon"></i>
-                        <div class="menu">
-                            <a href="#" class="item">注销</a>
-                        </div>
+<!--导航-->
+<nav th:replace="admin/_fragments :: menu(1)"
+     class="ui inverted attached segment segment m-padded-tb-mini m-shadow-small">
+    <div class="ui container">
+        <div class="ui inverted secondary stackable menu">
+            <h2 class="ui teal header item">后台管理</h2>
+            <a href="#" class="m-item active item m-mobile-hide"><i class="small home icon"></i>博客管理</a>
+            <a href="#" class="m-item item  m-mobile-hide"><i class="small idea icon"></i>分类管理</a>
+            <a href="#" class="m-item item m-mobile-hide"><i class="small tags icon"></i>标签管理</a>
+            <a href="#" class="m-item item m-mobile-hide"><i class="small idea icon"></i>个人信息</a>
+            <div class="right m-item m-mobile-hide menu">
+                <div class="ui dropdown item">
+                    <div class="text ">
+                        <img class="ui avatar image" src="https://picsum.photos/id/1011/100/100">
+                        QFMX
+                    </div>
+                    <i class="dropdown icon"></i>
+                    <div class="menu">
+                        <a href="#" class="item">注销</a>
                     </div>
                 </div>
             </div>
         </div>
-        <!--menu toggle无任何显示意思-->
-        <a href="" class="ui icon menu toggle black button m-right-top m-mobile-show">
-            <i class="sidebar icon"></i>
-        </a>
-    </nav>
-    <!--二级导航-->
-    <div class="ui attached pointing menu">
-      <div class="ui container">
-          <div class="right menu">
-              <a href="#" th:href="@{/admin/blogs/input}" class="item">发布</a>
-              <a href="#" th:href="@{/admin/blogs}"  class="active teal basic item">列表</a>
-          </div>
-      </div>
     </div>
-    <!--中间内容-->
-    <div class="m-container-small m-padded-tb-big">
-        <!--适应移动端手机-->
-        <div class="ui container">
-            <!--查询表单-->
-            <div class="ui secondary segment form">
-                <input type="hidden" name="page">
-                <div class="inline fields">
-                    <div class="field">
-                        <input type="text" name="title" placeholder="标题">
-                    </div>
-                    <div class="field">
-                        <div class="ui labeled action input">
-                            <div class="ui type selection dropdown">
-                                <input type="hidden" name="typeId">
-                                <i class="dropdown icon"></i>
-                                <div class="default text">分类</div>
-                                <div class="menu">
-                                    <div th:each="type : ${types}" class="item" data-value="1" th:data-value="${type.id}" th:text="${type.name}">旅行</div>
-                                    <!--/*-->
-                                    <div class="item" data-value="2">生活</div>
-                                    <div class="item" data-value="3">Spring</div>
-                                    <!--*/-->
+    <!--menu toggle无任何显示意思-->
+    <a href="" class="ui icon menu toggle black button m-right-top m-mobile-show">
+        <i class="sidebar icon"></i>
+    </a>
+</nav>
+<!--二级导航-->
+<div class="ui attached pointing menu">
+    <div class="ui container">
+        <div class="right menu">
+            <a href="#" th:href="@{/admin/blogs/input}" class="item">发布</a>
+            <a href="#" th:href="@{/admin/blogs}" class="active teal basic item">列表</a>
+        </div>
+    </div>
+</div>
+<!--中间内容-->
+<div class="m-container-small m-padded-tb-big">
+    <!--适应移动端手机-->
+    <div class="ui container">
+        <!--查询表单-->
+        <div class="ui secondary segment form">
+            <input type="hidden" name="page">
+            <div class="inline fields">
+                <div class="field">
+                    <input type="text" name="title" placeholder="标题">
+                </div>
+                <div class="field">
+                    <div class="ui labeled action input">
+                        <div class="ui type selection dropdown">
+                            <input type="hidden" name="typeId">
+                            <i class="dropdown icon"></i>
+                            <div class="default text">分类</div>
+                            <div class="menu">
+                                <div th:each="type : ${types}" class="item" data-value="1" th:data-value="${type.id}"
+                                     th:text="${type.name}">旅行
                                 </div>
+                                <!--/*-->
+                                <div class="item" data-value="2">生活</div>
+                                <div class="item" data-value="3">Spring</div>
+                                <!--*/-->
                             </div>
+                        </div>
 
-                            <!--清除按钮-->
-                            <button id="clear-btn" class="ui compact button">clear</button>
-                        </div>
-                    </div>
-                    <div class="field">
-                        <!--推荐-->
-                        <div class="ui checkbox">
-                            <input type="checkbox"  id="recommend" name="recommend">
-                            <label for="recommend">推荐</label>
-                        </div>
-                    </div>
-                    <div class="field">
-                        <!--搜索-->
-                       <button  type="button" id="search-btn" class="ui tiny teal  button"><i class="search icon"></i>搜索</button>
+                        <!--清除按钮-->
+                        <button id="clear-btn" class="ui compact button">clear</button>
                     </div>
                 </div>
+                <div class="field">
+                    <!--推荐-->
+                    <div class="ui checkbox">
+                        <input type="checkbox" id="recommend" name="recommend">
+                        <label for="recommend">推荐</label>
+                    </div>
+                </div>
+                <div class="field">
+                    <!--搜索-->
+                    <button type="button" id="search-btn" class="ui tiny teal  button"><i class="search icon"></i>搜索
+                    </button>
+                </div>
             </div>
-            <!--博客列表-->
-            <div id="table-container">
-                <table th:fragment="blogList" class="ui selectable compact teal table">
-                    <thead>
-                    <tr >
-                        <th>序号</th>
-                        <th>标题</th>
-                        <th>类型</th>
-                        <th >推荐</th>
-                        <th>状态</th>
-                        <th>更新时间</th>
-                        <th>操作</th>
-                    </tr>
-                    <tbody>
-                    <tr th:each="blog,iterStat : ${page.content}">
-                        <td th:text="${iterStat.count}">1</td>
-                        <td th:text="${blog.title}">庐山三日游-日记</td>
-                        <td th:text="${blog.type.name}">旅行</td>
-                        <td th:text="${blog.recommend} ? '是' :'否'">推荐</td>
-                        <td th:text="${blog.published} ? '发布' :'草稿'">推荐</td>
-                        <td th:text="${blog.updateTime}">2018-7-12</td>
-                        <td data-label="make">
-                            <a href="#" th:href="@{/admin/blogs/{id}/input(id=${blog.id})}" class="ui m-margin-right tiny teal button">修改</a>
-                            <a href="#" th:href="@{/admin/blogs/{id}/delete(id=${blog.id})}" class="ui m-margin-right tiny red button">删除</a>
-                        </td>
-                    </tr>
-                    </tbody>
-                    <tfoot>
-                    <!--分页组件-->
-                    <th colspan="7">
-                        <div class="ui mini pagination menu" th:if="${page.totalPages}>1" >
-                            <a onclick="page(this)" th:attr="data-page=${page.number}-1" class="item" th:unless="${page.first}">上一页</a>
-                            <a onclick="page(this)" th:attr="data-page=${page.number}+1" class=" item" th:unless="${page.last}">下一页</a>
-                        </div>
-                        <a href="#" th:href="@{/admin/blogs/input}" class="ui tiny orange right floated button">新增</a>
-                    </th>
-                    </tfoot>
-                </table>
-            </div>
-            <!--操作提示信息-->
-            <div class="ui success message" th:unless="${#strings.isEmpty(message)}">
-                <i class="close icon"></i>
-                <div class="header">提示：</div>
-                <p th:text="${message}">恭喜，操作成功！</p>
-            </div>
+        </div>
+        <!--博客列表-->
+        <div id="table-container">
+            <table th:fragment="blogList" class="ui selectable compact teal table">
+                <thead>
+                <tr>
+                    <th>序号</th>
+                    <th>标题</th>
+                    <th>类型</th>
+                    <th>推荐</th>
+                    <th>状态</th>
+                    <th>更新时间</th>
+                    <th>操作</th>
+                </tr>
+                <tbody>
+                <tr th:each="blog,iterStat : ${page.content}">
+                    <td th:text="${iterStat.count}">1</td>
+                    <td th:text="${blog.title}">庐山三日游-日记</td>
+                    <td th:text="${blog.type.name}">旅行</td>
+                    <td th:text="${blog.recommend} ? '是' :'否'">推荐</td>
+                    <td th:text="${blog.published} ? '发布' :'草稿'">推荐</td>
+                    <td th:text="${blog.updateTime}">2018-7-12</td>
+                    <td data-label="make">
+                        <a href="#" th:href="@{/admin/blogs/{id}/input(id=${blog.id})}"
+                           class="ui m-margin-right tiny teal button">修改</a>
+                        <a href="#" th:href="@{/admin/blogs/{id}/delete(id=${blog.id})}"
+                           class="ui m-margin-right tiny red button">删除</a>
+                    </td>
+                </tr>
+                </tbody>
+                <tfoot>
+                <!--分页组件-->
+                <th colspan="7">
+                    <div class="ui mini pagination menu" th:if="${page.totalPages}>1">
+                        <a onclick="page(this)" th:attr="data-page=${page.number}-1" class="item"
+                           th:unless="${page.first}">上一页</a>
+                        <a onclick="page(this)" th:attr="data-page=${page.number}+1" class=" item"
+                           th:unless="${page.last}">下一页</a>
+                    </div>
+                    <a href="#" th:href="@{/admin/blogs/input}" class="ui tiny orange right floated button">新增</a>
+                </th>
+                </tfoot>
+            </table>
+        </div>
+        <!--操作提示信息-->
+        <div class="ui success message" th:unless="${#strings.isEmpty(message)}">
+            <i class="close icon"></i>
+            <div class="header">提示：</div>
+            <p th:text="${message}">恭喜，操作成功！</p>
         </div>
     </div>
-    <br>
-    <br>
-    <!--底部-->
-    <footer  th:replace="admin/_fragments :: 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">
-                        <h4 class="ui inverted header m-opacity-min">站长微信</h4>
-                        <div class="item">
-                            <img src="../../static/images/WeChat.jpg" CLASS="ui rounded image" alt="" style="width:110px">
-                        </div>
+</div>
+<br>
+<br>
+<!--底部-->
+<footer th:replace="admin/_fragments :: 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">
+                    <h4 class="ui inverted header m-opacity-min">站长微信</h4>
+                    <div class="item">
+                        <img src="../../static/images/WeChat.jpg" CLASS="ui rounded image" alt="" style="width:110px">
                     </div>
                 </div>
-                <div class="three wide column">
-                    <h4 class="ui inverted header m-opacity-min">最新博客</h4>
-                    <div class="ui inverted link list">
-                        <a href="#" class="item">2019一年收获总结</a>
-                        <a href="#" class="item">idea的操作笔记</a>
-                        <a href="#" class="item">SpringBoot学习计划</a>
-                    </div>
-                </div>
-                <div class="three wide column">
-                    <h4 class="ui inverted header m-opacity-min">联系作者</h4>
-                    <div class="ui inverted link list">
-                        <a href="https://space.bilibili.com/393270022" class="item">b站</a>
-                        <a href="#" class="item">QQ:745719461</a>
-                        <a href="#" class="item">邮箱:qfmx520@163.com</a>
-                    </div>
-                </div>
-                <div class="seven wide column">
-                    <h4 class="ui inverted header m-opacity-min">关于作者</h4>
-                    <p class="m-text-thin m-text-spaced m-opacity-min m-text-lined">作者是一名springboot爱好者,是一名正在努力奋斗的学生,主要学习JavaEE开发,Web前端等技术.作者是个喜欢旅行的孩子,目标是游遍全世界！</p>
-                </div>
             </div>
-            <!--分割线-->
-            <div class="ui inverted section divider"></div>
-            <p class="m-text-thin m-text-spaced m-opacity-tiny">Copy © 2019 - 2020 作者:浅枫沐雪 此站仅供个人所有 如有疑问联系作者</p>
+            <div class="three wide column">
+                <h4 class="ui inverted header m-opacity-min">最新博客</h4>
+                <div class="ui inverted link list">
+                    <a href="#" class="item">2019一年收获总结</a>
+                    <a href="#" class="item">idea的操作笔记</a>
+                    <a href="#" class="item">SpringBoot学习计划</a>
+                </div>
+            </div>
+            <div class="three wide column">
+                <h4 class="ui inverted header m-opacity-min">联系作者</h4>
+                <div class="ui inverted link list">
+                    <a href="https://space.bilibili.com/393270022" class="item">b站</a>
+                    <a href="#" class="item">QQ:745719461</a>
+                    <a href="#" class="item">邮箱:qfmx520@163.com</a>
+                </div>
+            </div>
+            <div class="seven wide column">
+                <h4 class="ui inverted header m-opacity-min">关于作者</h4>
+                <p class="m-text-thin m-text-spaced m-opacity-min m-text-lined">
+                    作者是一名springboot爱好者,是一名正在努力奋斗的学生,主要学习JavaEE开发,Web前端等技术.作者是个喜欢旅行的孩子,目标是游遍全世界！</p>
+            </div>
         </div>
-    </footer>
+        <!--分割线-->
+        <div class="ui inverted section divider"></div>
+        <p class="m-text-thin m-text-spaced m-opacity-tiny">Copy © 2019 - 2020 作者:浅枫沐雪 此站仅供个人所有 如有疑问联系作者</p>
+    </div>
+</footer>
 
-    <!--/*/<th:block th:replace="admin/_fragments :: script">/*/-->
-        <!--引入jQuery-->
-        <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.4/semantic.min.js"></script>
-    <!--/*/</th:block>/*/-->
-    <!--声明行内js代码域-->
-    <script>
-        $('.menu.toggle').click(function () {
-            $('.m-item').toggleClass('m-mobile-hide');
+<!--/*/<th:block th:replace="admin/_fragments :: script">/*/-->
+<!--引入jQuery-->
+<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.4/semantic.min.js"></script>
+<!--/*/</th:block>/*/-->
+<!--声明行内js代码域-->
+<script>
+    $('.menu.toggle').click(function () {
+        $('.m-item').toggleClass('m-mobile-hide');
+    });
+
+    $('.ui.dropdown').dropdown({
+        on: 'hover'
+    });
+
+    /*分页*/
+    function page(obj) {
+        $("[name='page']").val($(obj).data("page"));
+        loaddata();
+    }
+
+    $("#search-btn").click(function () {
+        $("[name='page']").val(0);
+        loaddata();
+    });
+
+    $("#search-btn").click(function () {
+        loaddata();
+    });
+
+    /*清除按钮*/
+    $('#clear-btn')
+        .on('click', function () {
+            $('.ui.type.dropdown')
+                .dropdown('clear')
+            ;
+        })
+    ;
+
+    /*ajax请求*/
+    function loaddata() {
+        $("#table-container").load(/*[[@{/admin/blogs/search}]]*/"/admin/blogs/search", {
+            title: $("[name='title']").val(),
+            typeId: $("[name='typeId']").val(),
+            recommend: $("[name='recommend']").prop('checked'),
+            page: $("[name='page']").val()
+        });
+    }
+
+    //消息提示关闭初始化
+    $('.message .close')
+        .on('click', function () {
+            $(this)
+                .closest('.message')
+                .transition('fade');
         });
 
-        $('.ui.dropdown').dropdown({
-            on:'hover'
-        });
-        /*分页*/
-        function page(obj) {
-            $("[name='page']").val($(obj).data("page"));
-            loaddata();
-        }
-
-        $("#search-btn").click(function () {
-            $("[name='page']").val(0);
-            loaddata();
-        });
-
-        $("#search-btn").click(function () {
-            loaddata();
-        });
-
-        /*清除按钮*/
-        $('#clear-btn')
-            .on('click', function() {
-                $('.ui.type.dropdown')
-                    .dropdown('clear')
-                ;
-            })
-        ;
-
-        /*ajax请求*/
-        function loaddata() {
-            $("#table-container").load(/*[[@{/admin/blogs/search}]]*/"/admin/blogs/search",{
-                title : $("[name='title']").val(),
-                typeId : $("[name='typeId']").val(),
-                recommend : $("[name='recommend']").prop('checked'),
-                page : $("[name='page']").val()
-            });
-        }
-
-        //消息提示关闭初始化
-        $('.message .close')
-            .on('click', function () {
-                $(this)
-                    .closest('.message')
-                    .transition('fade');
-            });
-
-    </script>
+</script>
 </body>
 </html>

src/main/resources/templates/admin/index.html

@@ -11,109 +11,112 @@
     <link rel="stylesheet" href="../../static/css/me.css">
 </head>
 <body>
-    <!--导航-->
-    <nav th:replace="admin/_fragments :: menu(1)" class="ui inverted attached segment segment m-padded-tb-mini m-shadow-small">
-        <div class="ui container">
-            <div class="ui inverted secondary stackable menu">
-                <h2 class="ui teal header item">后台管理</h2>
-                <a href="#" class="m-item active item m-mobile-hide"><i class="small home icon"></i>博客管理</a>
-                <a href="#" class="m-item item  m-mobile-hide"><i class="small idea icon"></i>分类管理</a>
-                <a href="#" class="m-item item m-mobile-hide" ><i class="small tags icon"></i>标签管理</a>
-                <a href="#" class="m-item item m-mobile-hide" ><i class="small idea icon"></i>个人信息</a>
-                <div class="right m-item m-mobile-hide menu">
-                    <div class="ui dropdown item">
-                        <div class="text ">
-                            <img class="ui avatar image" src="https://picsum.photos/id/1011/100/100">
-                            浅枫沐雪
-                        </div>
-                        <i class="dropdown icon"></i>
-                        <div class="menu">
-                            <a href="#"  class="item">注销</a>
-                        </div>
+<!--导航-->
+<nav th:replace="admin/_fragments :: menu(1)"
+     class="ui inverted attached segment segment m-padded-tb-mini m-shadow-small">
+    <div class="ui container">
+        <div class="ui inverted secondary stackable menu">
+            <h2 class="ui teal header item">后台管理</h2>
+            <a href="#" class="m-item active item m-mobile-hide"><i class="small home icon"></i>博客管理</a>
+            <a href="#" class="m-item item  m-mobile-hide"><i class="small idea icon"></i>分类管理</a>
+            <a href="#" class="m-item item m-mobile-hide"><i class="small tags icon"></i>标签管理</a>
+            <a href="#" class="m-item item m-mobile-hide"><i class="small idea icon"></i>个人信息</a>
+            <div class="right m-item m-mobile-hide menu">
+                <div class="ui dropdown item">
+                    <div class="text ">
+                        <img class="ui avatar image" src="https://picsum.photos/id/1011/100/100">
+                        浅枫沐雪
+                    </div>
+                    <i class="dropdown icon"></i>
+                    <div class="menu">
+                        <a href="#" class="item">注销</a>
                     </div>
                 </div>
             </div>
         </div>
-        <!--menu toggle无任何显示意思-->
-        <a href="" class="ui icon menu toggle black button m-right-top m-mobile-show">
-            <i class="sidebar icon"></i>
-        </a>
-    </nav>
-
-    <!--二级导航-->
-    <div class="ui attached pointing menu">
-      <div class="ui container">
-          <div class="right menu">
-              <a href="#" th:href="@{/admin/blogs/input}" class="   item">发布</a>
-              <a href="#"  th:href="@{/admin/blogs}" class="item">列表</a>
-          </div>
-      </div>
-    </div>
-    <!--中间内容-->
-    <div class="m-container-small m-padded-tb-big">
-        <!--适应移动端手机-->
-        <div class="ui container">
-            <div class="ui success large message">
-                <h3>浅枫沐雪</h3>
-                <p>欢迎登录, 疾风大神！</p>
-            </div>
-            <img src="../../static/images/mvp.jpg" th:src="@{/images/mvp.jpg}" alt="" class="ui rounded bordered fluid image">
-        </div>
     </div>
-    <br>
-    <br>
-    <!--底部-->
-    <footer th:replace="admin/_fragments :: 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">
-                        <h4 class="ui inverted header m-opacity-min">站长微信</h4>
-                        <div class="item">
-                            <img src="../../static/images/WeChat.jpg" CLASS="ui rounded image" alt="" style="width:110px">
-                        </div>
+    <!--menu toggle无任何显示意思-->
+    <a href="" class="ui icon menu toggle black button m-right-top m-mobile-show">
+        <i class="sidebar icon"></i>
+    </a>
+</nav>
+
+<!--二级导航-->
+<div class="ui attached pointing menu">
+    <div class="ui container">
+        <div class="right menu">
+            <a href="#" th:href="@{/admin/blogs/input}" class="   item">发布</a>
+            <a href="#" th:href="@{/admin/blogs}" class="item">列表</a>
+        </div>
+    </div>
+</div>
+<!--中间内容-->
+<div class="m-container-small m-padded-tb-big">
+    <!--适应移动端手机-->
+    <div class="ui container">
+        <div class="ui success large message">
+            <h3>浅枫沐雪</h3>
+            <p>欢迎登录, 疾风大神！</p>
+        </div>
+        <img src="../../static/images/mvp.jpg" th:src="@{/images/mvp.jpg}" alt=""
+             class="ui rounded bordered fluid image">
+    </div>
+</div>
+<br>
+<br>
+<!--底部-->
+<footer th:replace="admin/_fragments :: 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">
+                    <h4 class="ui inverted header m-opacity-min">站长微信</h4>
+                    <div class="item">
+                        <img src="../../static/images/WeChat.jpg" CLASS="ui rounded image" alt="" style="width:110px">
                     </div>
                 </div>
-                <div class="three wide column">
-                    <h4 class="ui inverted header m-opacity-min">最新博客</h4>
-                    <div class="ui inverted link list">
-                        <a href="#" class="item">2019一年收获总结</a>
-                        <a href="#" class="item">idea的操作笔记</a>
-                        <a href="#" class="item">SpringBoot学习计划</a>
-                    </div>
-                </div>
-                <div class="three wide column">
-                    <h4 class="ui inverted header m-opacity-min">联系作者</h4>
-                    <div class="ui inverted link list">
-                        <a href="https://space.bilibili.com/393270022" class="item">b站</a>
-                        <a href="#" class="item">QQ:745719461</a>
-                        <a href="#" class="item">邮箱:qfmx520@163.com</a>
-                    </div>
-                </div>
-                <div class="seven wide column">
-                    <h4 class="ui inverted header m-opacity-min">关于作者</h4>
-                    <p class="m-text-thin m-text-spaced m-opacity-min m-text-lined">作者是一名springboot爱好者,是一名正在努力奋斗的学生,主要学习JavaEE开发,Web前端等技术.作者是个喜欢旅行的孩子,目标是游遍全世界！</p>
-                </div>
             </div>
-            <!--分割线-->
-            <div class="ui inverted section divider"></div>
-            <p class="m-text-thin m-text-spaced m-opacity-tiny">Copy © 2019 - 2020 作者:浅枫沐雪 此站仅供个人所有 如有疑问联系作者</p>
+            <div class="three wide column">
+                <h4 class="ui inverted header m-opacity-min">最新博客</h4>
+                <div class="ui inverted link list">
+                    <a href="#" class="item">2019一年收获总结</a>
+                    <a href="#" class="item">idea的操作笔记</a>
+                    <a href="#" class="item">SpringBoot学习计划</a>
+                </div>
+            </div>
+            <div class="three wide column">
+                <h4 class="ui inverted header m-opacity-min">联系作者</h4>
+                <div class="ui inverted link list">
+                    <a href="https://space.bilibili.com/393270022" class="item">b站</a>
+                    <a href="#" class="item">QQ:745719461</a>
+                    <a href="#" class="item">邮箱:qfmx520@163.com</a>
+                </div>
+            </div>
+            <div class="seven wide column">
+                <h4 class="ui inverted header m-opacity-min">关于作者</h4>
+                <p class="m-text-thin m-text-spaced m-opacity-min m-text-lined">
+                    作者是一名springboot爱好者,是一名正在努力奋斗的学生,主要学习JavaEE开发,Web前端等技术.作者是个喜欢旅行的孩子,目标是游遍全世界！</p>
+            </div>
         </div>
-    </footer>
-    <!--/*/<th:block th:replace="admin/_fragments :: script">/*/-->
-    <!--引入jQuery-->
-    <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.4/semantic.min.js"></script>
-    <!--/*/</th:block>/*/-->
-    <!--声明行内js代码域-->
-    <script>
-        $('.menu.toggle').click(function () {
-            $('.m-item').toggleClass('m-mobile-hide');
-        });
+        <!--分割线-->
+        <div class="ui inverted section divider"></div>
+        <p class="m-text-thin m-text-spaced m-opacity-tiny">Copy © 2019 - 2020 作者:浅枫沐雪 此站仅供个人所有 如有疑问联系作者</p>
+    </div>
+</footer>
+<!--/*/<th:block th:replace="admin/_fragments :: script">/*/-->
+<!--引入jQuery-->
+<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.4/semantic.min.js"></script>
+<!--/*/</th:block>/*/-->
+<!--声明行内js代码域-->
+<script>
+    $('.menu.toggle').click(function () {
+        $('.m-item').toggleClass('m-mobile-hide');
+    });
 
-        $('.ui.dropdown').dropdown({
-            on:'hover'
-        });
-    </script>
+    $('.ui.dropdown').dropdown({
+        on: 'hover'
+    });
+</script>
 </body>
 </html>

src/main/resources/templates/admin/login.html

@@ -11,68 +11,69 @@
     <link rel="stylesheet" href="../../static/css/me.css">
 </head>
 <body>
-    <br/>
-    <br/>
-    <br/>
-    <div class="m-container-small m-padded-tb-massive" style="max-width: 28em  !important;">
-        <div class="ui container">
-            <div class="ui middle aligned center aligned grid">
-                <div class="column">
-                    <h2 class="ui teal image header">
-                        <div class="content">
-                            <a href="http://typecho.org/" target="_blank">
-                                <img th:src="@{/images/tp.png}"/>
-                            </a>
-                        </div>
-                    </h2>
-                    <form class="ui large form" method="post" action="#" th:action="@{/admin/login}">
-                        <div class="ui  segment">
-                            <div class="field">
-                                <div class="ui left icon input">
-                                    <i class="user icon"></i>
-                                    <input type="text" name="username" placeholder="用户名">
-                                </div>
+<br/>
+<br/>
+<br/>
+<div class="m-container-small m-padded-tb-massive" style="max-width: 28em  !important;">
+    <div class="ui container">
+        <div class="ui middle aligned center aligned grid">
+            <div class="column">
+                <h2 class="ui teal image header">
+                    <div class="content">
+                        <a href="http://typecho.org/" target="_blank">
+                            <img th:src="@{/images/tp.png}"/>
+                        </a>
+                    </div>
+                </h2>
+                <form class="ui large form" method="post" action="#" th:action="@{/admin/login}">
+                    <div class="ui  segment">
+                        <div class="field">
+                            <div class="ui left icon input">
+                                <i class="user icon"></i>
+                                <input type="text" name="username" placeholder="用户名">
                             </div>
-                            <div class="field">
-                                <div class="ui left icon input">
-                                    <i class="lock icon"></i>
-                                    <input type="password" name="password" placeholder="密码">
-                                </div>
-                            </div>
-                            <button class="ui fluid large teal submit button">登   录</button>
                         </div>
+                        <div class="field">
+                            <div class="ui left icon input">
+                                <i class="lock icon"></i>
+                                <input type="password" name="password" placeholder="密码">
+                            </div>
+                        </div>
+                        <button class="ui fluid large teal submit button">登 录</button>
+                    </div>
 
-                        <div class="ui error mini message"></div>
-                        <div class="ui mini negative message" th:unless="${#strings.isEmpty(message)}" th:text="${message}"></div>
+                    <div class="ui error mini message"></div>
+                    <div class="ui mini negative message" th:unless="${#strings.isEmpty(message)}"
+                         th:text="${message}"></div>
 
-                    </form>
-                </div>
+                </form>
             </div>
         </div>
-
     </div>
 
-    <!--/*/<th:block th:replace="admin/_fragments :: script">/*/-->
-    <!--引入jQuery-->
-    <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.4/semantic.min.js"></script>
-    <!--/*/</th:block>/*/-->
+</div>
+
+<!--/*/<th:block th:replace="admin/_fragments :: script">/*/-->
+<!--引入jQuery-->
+<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.4/semantic.min.js"></script>
+<!--/*/</th:block>/*/-->
 
 <script>
     /*表单校验*/
     $('.ui.form').form({
-        fields : {
-            username : {
+        fields: {
+            username: {
                 identifier: 'username',
                 rules: [{
-                    type : 'empty',
+                    type: 'empty',
                     prompt: '请输入用户名'
                 }]
             },
-            password : {
+            password: {
                 identifier: 'password',
                 rules: [{
-                    type : 'empty',
+                    type: 'empty',
                     prompt: '请输入密码'
                 }]
             }

src/main/resources/templates/admin/tags-input.html

@@ -8,163 +8,166 @@
     <title>后台管理-新增标签</title>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
     <!--引入Markdown插件所需要的CSS-->
-    <link rel="stylesheet" href="../../static/lib/editormd/css/editormd.min.css" />
+    <link rel="stylesheet" href="../../static/lib/editormd/css/editormd.min.css"/>
     <!--引入自定义CSS-->
     <link rel="stylesheet" href="../../static/css/me.css">
 </head>
 <body>
-    <!--导航-->
-    <nav th:replace="admin/_fragments :: menu(3)" class="ui inverted attached segment segment m-padded-tb-mini m-shadow-small">
-        <div class="ui container">
-            <div class="ui inverted secondary stackable menu">
-                <h2 class="ui teal header item">后台管理</h2>
-                    <a href="#" class="m-item active item m-mobile-hide"><i class="small home icon"></i>博客管理</a>
-                <a href="#" class="m-item item  m-mobile-hide"><i class="small idea icon"></i>分类管理</a>
-                <a href="#" class="m-item item m-mobile-hide" ><i class="small tags icon"></i>标签管理</a>
-                <a href="#" class="m-item item m-mobile-hide" ><i class="small idea icon"></i>个人信息</a>
-                <div class="right m-item m-mobile-hide menu">
-                    <div class="ui dropdown item">
-                        <div class="text ">
-                            <img class="ui avatar image" src="https://picsum.photos/id/1011/100/100">
-                            QFMX
-                        </div>
-                        <i class="dropdown icon"></i>
-                        <div class="menu">
-                            <a href="#" class="item">注销</a>
-                        </div>
+<!--导航-->
+<nav th:replace="admin/_fragments :: menu(3)"
+     class="ui inverted attached segment segment m-padded-tb-mini m-shadow-small">
+    <div class="ui container">
+        <div class="ui inverted secondary stackable menu">
+            <h2 class="ui teal header item">后台管理</h2>
+            <a href="#" class="m-item active item m-mobile-hide"><i class="small home icon"></i>博客管理</a>
+            <a href="#" class="m-item item  m-mobile-hide"><i class="small idea icon"></i>分类管理</a>
+            <a href="#" class="m-item item m-mobile-hide"><i class="small tags icon"></i>标签管理</a>
+            <a href="#" class="m-item item m-mobile-hide"><i class="small idea icon"></i>个人信息</a>
+            <div class="right m-item m-mobile-hide menu">
+                <div class="ui dropdown item">
+                    <div class="text ">
+                        <img class="ui avatar image" src="https://picsum.photos/id/1011/100/100">
+                        QFMX
+                    </div>
+                    <i class="dropdown icon"></i>
+                    <div class="menu">
+                        <a href="#" class="item">注销</a>
                     </div>
                 </div>
             </div>
         </div>
-        <!--menu toggle无任何显示意思-->
-        <a href="" class="ui icon menu toggle black button m-right-top m-mobile-show">
-            <i class="sidebar icon"></i>
-        </a>
-    </nav>
-    <!--二级导航-->
-    <div class="ui attached pointing menu">
-      <div class="ui container">
-          <div class="right menu">
-              <a href="#"  th:href="@{/admin/tags/input}" class=" active  teal basic item">新增</a>
-              <a href="" th:href="@{/admin/tags}" class=" item">列表</a>
-          </div>
-      </div>
     </div>
-    <br/>
-    <br/>
-    <br/>
-    <!--中间内容-->
-    <div class="m-container-small m-padded-tb-big">
-        <!--适应移动端手机-->
-        <div class="ui container">
-            <form action="#" method="post"  th:object="${tag}" th:action="*{id}==null ? @{/admin/tags} : @{/admin/tags/{id}(id=*{id})} "  class="ui form">
-                <div class="required field">
-                    <input type="hidden" name="id" th:value="*{id}">
-                    <div class="ui left labeled input">
-                        <label class="ui teal basic label">名称</label>
-                        <input type="text" name="name" placeholder="标签名称"  th:value="*{name}">
-                    </div>
-                </div>
-                <!--表单校验-->
-                <!--错误提示-->
-                <div class="ui error message">
-
-                </div>
-                <!--/*/
-                <div class="ui negative message" th:if="${#fields.hasErrors('name')}"  >
-                  <i class="close icon"></i>
-                  <div class="header">验证失败</div>
-                  <p th:errors="*{name}">提交信息不符合规则</p>
-                </div>
-                 /*/-->
-
-                <!--返回、提交-->
-                <div class="ui right aligned container">
-                    <!--onclick="window.history.go(-1)返回上一页面-->
-                    <button type="button" class="ui button" onclick="window.history.go(-1)">返回</button>
-
-                    <button class="ui teal submit button">提交</button>
-                </div>
-
-            </form>
+    <!--menu toggle无任何显示意思-->
+    <a href="" class="ui icon menu toggle black button m-right-top m-mobile-show">
+        <i class="sidebar icon"></i>
+    </a>
+</nav>
+<!--二级导航-->
+<div class="ui attached pointing menu">
+    <div class="ui container">
+        <div class="right menu">
+            <a href="#" th:href="@{/admin/tags/input}" class=" active  teal basic item">新增</a>
+            <a href="" th:href="@{/admin/tags}" class=" item">列表</a>
         </div>
     </div>
-    <br>
-    <br/>
-    <br/>
-    <br/>
-    <br/>
-    <br>
-    <!--底部-->
-    <footer th:replace="admin/_fragments :: 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">
-                        <h4 class="ui inverted header m-opacity-min">站长微信</h4>
-                        <div class="item">
-                            <img src="../../static/images/WeChat.jpg" CLASS="ui rounded image" alt="" style="width:110px">
-                        </div>
-                    </div>
-                </div>
-                <div class="three wide column">
-                    <h4 class="ui inverted header m-opacity-min">最新博客</h4>
-                    <div class="ui inverted link list">
-                        <a href="#" class="item">2019一年收获总结</a>
-                        <a href="#" class="item">idea的操作笔记</a>
-                        <a href="#" class="item">SpringBoot学习计划</a>
-                    </div>
-                </div>
-                <div class="three wide column">
-                    <h4 class="ui inverted header m-opacity-min">联系作者</h4>
-                    <div class="ui inverted link list">
-                        <a href="https://space.bilibili.com/393270022" class="item">b站</a>
-                        <a href="#" class="item">QQ:745719461</a>
-                        <a href="#" class="item">邮箱:qfmx520@163.com</a>
-                    </div>
-                </div>
-                <div class="seven wide column">
-                    <h4 class="ui inverted header m-opacity-min">关于作者</h4>
-                    <p class="m-text-thin m-text-spaced m-opacity-min m-text-lined">作者是一名springboot爱好者,是一名正在努力奋斗的学生,主要学习JavaEE开发,Web前端等技术.作者是个喜欢旅行的孩子,目标是游遍全世界！</p>
+</div>
+<br/>
+<br/>
+<br/>
+<!--中间内容-->
+<div class="m-container-small m-padded-tb-big">
+    <!--适应移动端手机-->
+    <div class="ui container">
+        <form action="#" method="post" th:object="${tag}"
+              th:action="*{id}==null ? @{/admin/tags} : @{/admin/tags/{id}(id=*{id})} " class="ui form">
+            <div class="required field">
+                <input type="hidden" name="id" th:value="*{id}">
+                <div class="ui left labeled input">
+                    <label class="ui teal basic label">名称</label>
+                    <input type="text" name="name" placeholder="标签名称" th:value="*{name}">
                 </div>
             </div>
-            <!--分割线-->
-            <div class="ui inverted section divider"></div>
-            <p class="m-text-thin m-text-spaced m-opacity-tiny">Copy © 2019 - 2020 作者:浅枫沐雪 此站仅供个人所有 如有疑问联系作者</p>
+            <!--表单校验-->
+            <!--错误提示-->
+            <div class="ui error message">
+
+            </div>
+            <!--/*/
+            <div class="ui negative message" th:if="${#fields.hasErrors('name')}"  >
+              <i class="close icon"></i>
+              <div class="header">验证失败</div>
+              <p th:errors="*{name}">提交信息不符合规则</p>
+            </div>
+             /*/-->
+
+            <!--返回、提交-->
+            <div class="ui right aligned container">
+                <!--onclick="window.history.go(-1)返回上一页面-->
+                <button type="button" class="ui button" onclick="window.history.go(-1)">返回</button>
+
+                <button class="ui teal submit button">提交</button>
+            </div>
+
+        </form>
+    </div>
+</div>
+<br>
+<br/>
+<br/>
+<br/>
+<br/>
+<br>
+<!--底部-->
+<footer th:replace="admin/_fragments :: 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">
+                    <h4 class="ui inverted header m-opacity-min">站长微信</h4>
+                    <div class="item">
+                        <img src="../../static/images/WeChat.jpg" CLASS="ui rounded image" alt="" style="width:110px">
+                    </div>
+                </div>
+            </div>
+            <div class="three wide column">
+                <h4 class="ui inverted header m-opacity-min">最新博客</h4>
+                <div class="ui inverted link list">
+                    <a href="#" class="item">2019一年收获总结</a>
+                    <a href="#" class="item">idea的操作笔记</a>
+                    <a href="#" class="item">SpringBoot学习计划</a>
+                </div>
+            </div>
+            <div class="three wide column">
+                <h4 class="ui inverted header m-opacity-min">联系作者</h4>
+                <div class="ui inverted link list">
+                    <a href="https://space.bilibili.com/393270022" class="item">b站</a>
+                    <a href="#" class="item">QQ:745719461</a>
+                    <a href="#" class="item">邮箱:qfmx520@163.com</a>
+                </div>
+            </div>
+            <div class="seven wide column">
+                <h4 class="ui inverted header m-opacity-min">关于作者</h4>
+                <p class="m-text-thin m-text-spaced m-opacity-min m-text-lined">
+                    作者是一名springboot爱好者,是一名正在努力奋斗的学生,主要学习JavaEE开发,Web前端等技术.作者是个喜欢旅行的孩子,目标是游遍全世界！</p>
+            </div>
         </div>
-    </footer>
+        <!--分割线-->
+        <div class="ui inverted section divider"></div>
+        <p class="m-text-thin m-text-spaced m-opacity-tiny">Copy © 2019 - 2020 作者:浅枫沐雪 此站仅供个人所有 如有疑问联系作者</p>
+    </div>
+</footer>
 
 
-    <!--/*/<th:block th:replace="admin/_fragments :: script">/*/-->
-        <!--引入jQuery-->
-        <script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
-        <!--引入sementic-ui模板所需要的js-->
-        <script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
-        <!--引入Markdown插件需要引入的js-->
-        <script src="../../static/lib/editormd/editormd.min.js"></script>
-    <!--/*/</th:block>/*/-->
-    <!--声明行内js代码域-->
-    <script>
-        /*移动端显示导航栏设置*/
-        $('.menu.toggle').click(function () {
-            $('.m-item').toggleClass('m-mobile-hide');
-        });
-        /*导航栏用户注销显示*/
-        $('.ui.dropdown').dropdown({
-            on:'hover'
-        });
-        /*表单校验*/
-        $('.ui.form').form({
-            fields:{
-                title:{
-                    identifier:'name',
-                    rules : [{
-                        type : 'empty',
-                        prompt:'请输入标签名称！'
-                    }]
-                }
+<!--/*/<th:block th:replace="admin/_fragments :: script">/*/-->
+<!--引入jQuery-->
+<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
+<!--引入sementic-ui模板所需要的js-->
+<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
+<!--引入Markdown插件需要引入的js-->
+<script src="../../static/lib/editormd/editormd.min.js"></script>
+<!--/*/</th:block>/*/-->
+<!--声明行内js代码域-->
+<script>
+    /*移动端显示导航栏设置*/
+    $('.menu.toggle').click(function () {
+        $('.m-item').toggleClass('m-mobile-hide');
+    });
+    /*导航栏用户注销显示*/
+    $('.ui.dropdown').dropdown({
+        on: 'hover'
+    });
+    /*表单校验*/
+    $('.ui.form').form({
+        fields: {
+            title: {
+                identifier: 'name',
+                rules: [{
+                    type: 'empty',
+                    prompt: '请输入标签名称！'
+                }]
             }
-        });
-    </script>
+        }
+    });
+</script>
 </body>
 </html>

src/main/resources/templates/admin/tags.html

@@ -12,14 +12,15 @@
 </head>
 <body>
 <!--导航-->
-<nav th:replace="admin/_fragments :: menu(3)" class="ui inverted attached segment segment m-padded-tb-mini m-shadow-small">
+<nav th:replace="admin/_fragments :: menu(3)"
+     class="ui inverted attached segment segment m-padded-tb-mini m-shadow-small">
     <div class="ui container">
         <div class="ui inverted secondary stackable menu">
             <h2 class="ui teal header item">后台管理</h2>
             <a href="#" class="m-item  item m-mobile-hide"><i class="small home icon"></i>博客管理</a>
             <a href="#" class="m-item item  m-mobile-hide"><i class="small idea icon"></i>分类管理</a>
-            <a href="#" class="m-item active item m-mobile-hide" ><i class="small tags icon"></i>标签管理</a>
-            <a href="#" class="m-item item m-mobile-hide" ><i class="small idea icon"></i>个人信息</a>
+            <a href="#" class="m-item active item m-mobile-hide"><i class="small tags icon"></i>标签管理</a>
+            <a href="#" class="m-item item m-mobile-hide"><i class="small idea icon"></i>个人信息</a>
             <div class="right m-item m-mobile-hide menu">
                 <div class="ui dropdown item">
                     <div class="text ">
@@ -44,7 +45,7 @@
     <div class="ui container">
 
         <div class="right menu">
-            <a href="#"  th:href="@{/admin/tags/input}" class="item">新增</a>
+            <a href="#" th:href="@{/admin/tags/input}" class="item">新增</a>
             <a href="" th:href="@{/admin/tags}" class="active teal basic item">列表</a>
         </div>
     </div>
@@ -63,7 +64,7 @@
         <table class="ui selectable compact teal table">
             <thead>
             <tr>
-                <th >标签编号</th>
+                <th>标签编号</th>
                 <th>名称</th>
                 <th>操作</th>
             </tr>
@@ -73,8 +74,10 @@
                 <td th:text="${iterStat.count}">1</td>
                 <td data-label="name" th:text="${tag.name}">学习</td>
                 <td data-label="right make">
-                    <a href="#" th:href="@{/admin/tags/{id}/input(id=${tag.id})}" class="ui m-margin-right tiny teal button">修改</a>
-                    <a href="#" th:href="@{/admin/tags/{id}/delete(id=${tag.id})}" class="ui m-margin-right tiny red button">删除</a>
+                    <a href="#" th:href="@{/admin/tags/{id}/input(id=${tag.id})}"
+                       class="ui m-margin-right tiny teal button">修改</a>
+                    <a href="#" th:href="@{/admin/tags/{id}/delete(id=${tag.id})}"
+                       class="ui m-margin-right tiny red button">删除</a>
 
                 </td>
             </tr>
@@ -97,7 +100,7 @@
 <br>
 <br>
 <!--底部-->
-<footer  th:replace="admin/_fragments :: footer"  class="ui inverted vertical segment m-padded-tb-massive ">
+<footer th:replace="admin/_fragments :: 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">
@@ -126,7 +129,8 @@
             </div>
             <div class="seven wide column">
                 <h4 class="ui inverted header m-opacity-min">关于作者</h4>
-                <p class="m-text-thin m-text-spaced m-opacity-min m-text-lined">作者是一名springboot爱好者,是一名正在努力奋斗的学生,主要学习JavaEE开发,Web前端等技术.作者是个喜欢旅行的孩子,目标是游遍全世界！</p>
+                <p class="m-text-thin m-text-spaced m-opacity-min m-text-lined">
+                    作者是一名springboot爱好者,是一名正在努力奋斗的学生,主要学习JavaEE开发,Web前端等技术.作者是个喜欢旅行的孩子,目标是游遍全世界！</p>
             </div>
         </div>
         <!--分割线-->
@@ -148,7 +152,7 @@
     });
 
     $('.ui.dropdown').dropdown({
-        on:'hover'
+        on: 'hover'
     });
 
     //消息提示关闭初始化

src/main/resources/templates/admin/types-input.html

@@ -8,162 +8,165 @@
     <title>后台管理-新增分类</title>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
     <!--引入Markdown插件所需要的CSS-->
-    <link rel="stylesheet" href="../../static/lib/editormd/css/editormd.min.css" />
+    <link rel="stylesheet" href="../../static/lib/editormd/css/editormd.min.css"/>
     <!--引入自定义CSS-->
     <link rel="stylesheet" href="../../static/css/me.css">
 </head>
 <body>
-    <!--导航-->
-    <nav th:replace="admin/_fragments :: menu(2)" class="ui inverted attached segment segment m-padded-tb-mini m-shadow-small">
-        <div class="ui container">
-            <div class="ui inverted secondary stackable menu">
-                <h2 class="ui teal header item">后台管理</h2>
-                    <a href="#" class="m-item active item m-mobile-hide"><i class="small home icon"></i>博客管理</a>
-                <a href="#" class="m-item item  m-mobile-hide"><i class="small idea icon"></i>分类管理</a>
-                <a href="#" class="m-item item m-mobile-hide" ><i class="small tags icon"></i>标签管理</a>
-                <a href="#" class="m-item item m-mobile-hide" ><i class="small idea icon"></i>个人信息</a>
-                <div class="right m-item m-mobile-hide menu">
-                    <div class="ui dropdown item">
-                        <div class="text ">
-                            <img class="ui avatar image" src="https://picsum.photos/id/1011/100/100">
-                            QFMX
-                        </div>
-                        <i class="dropdown icon"></i>
-                        <div class="menu">
-                            <a href="#" class="item">注销</a>
-                        </div>
+<!--导航-->
+<nav th:replace="admin/_fragments :: menu(2)"
+     class="ui inverted attached segment segment m-padded-tb-mini m-shadow-small">
+    <div class="ui container">
+        <div class="ui inverted secondary stackable menu">
+            <h2 class="ui teal header item">后台管理</h2>
+            <a href="#" class="m-item active item m-mobile-hide"><i class="small home icon"></i>博客管理</a>
+            <a href="#" class="m-item item  m-mobile-hide"><i class="small idea icon"></i>分类管理</a>
+            <a href="#" class="m-item item m-mobile-hide"><i class="small tags icon"></i>标签管理</a>
+            <a href="#" class="m-item item m-mobile-hide"><i class="small idea icon"></i>个人信息</a>
+            <div class="right m-item m-mobile-hide menu">
+                <div class="ui dropdown item">
+                    <div class="text ">
+                        <img class="ui avatar image" src="https://picsum.photos/id/1011/100/100">
+                        QFMX
+                    </div>
+                    <i class="dropdown icon"></i>
+                    <div class="menu">
+                        <a href="#" class="item">注销</a>
                     </div>
                 </div>
             </div>
         </div>
-        <!--menu toggle无任何显示意思-->
-        <a href="" class="ui icon menu toggle black button m-right-top m-mobile-show">
-            <i class="sidebar icon"></i>
-        </a>
-    </nav>
-    <!--二级导航-->
-    <div class="ui attached pointing menu">
-      <div class="ui container">
-          <div class="right menu">
-              <a href="#"  th:href="@{/admin/types/input}" class=" active  teal basic item">新增</a>
-              <a href="" th:href="@{/admin/types}" class=" item">列表</a>
-          </div>
-      </div>
     </div>
-    <br/>
-    <br/>
-    <br/>
-    <!--中间内容-->
-    <div class="m-container-small m-padded-tb-big">
-        <!--适应移动端手机-->
-        <div class="ui container">
-            <form action="#" method="post"  th:object="${type}" th:action="*{id}==null ? @{/admin/types} : @{/admin/types/{id}(id=*{id})} "  class="ui form">
-                <div class="required field">
-                    <input type="hidden" name="id" th:value="*{id}">
-                    <div class="ui left labeled input">
-                        <label class="ui teal basic label">名称</label>
-                        <input type="text" name="name" placeholder="分类名称"  th:value="*{name}">
-                    </div>
-                </div>
-                <!--表单校验-->
-                <!--错误提示-->
-                <div class="ui error message">
-
-                </div>
-                <!--/*/
-                <div class="ui negative message" th:if="${#fields.hasErrors('name')}"  >
-                  <i class="close icon"></i>
-                  <div class="header">验证失败</div>
-                  <p th:errors="*{name}">提交信息不符合规则</p>
-                </div>
-                 /*/-->
-
-                <!--返回、提交-->
-                <div class="ui right aligned container">
-                    <!--onclick="window.history.go(-1)返回上一页面-->
-                    <button type="button" class="ui button" onclick="window.history.go(-1)">返回</button>
-
-                    <button class="ui teal submit button">提交</button>
-                </div>
-
-            </form>
+    <!--menu toggle无任何显示意思-->
+    <a href="" class="ui icon menu toggle black button m-right-top m-mobile-show">
+        <i class="sidebar icon"></i>
+    </a>
+</nav>
+<!--二级导航-->
+<div class="ui attached pointing menu">
+    <div class="ui container">
+        <div class="right menu">
+            <a href="#" th:href="@{/admin/types/input}" class=" active  teal basic item">新增</a>
+            <a href="" th:href="@{/admin/types}" class=" item">列表</a>
         </div>
     </div>
-    <br>
-    <br/>
-    <br/>
-    <br/>
-    <br/>
-    <br>
-    <!--底部-->
-    <footer th:replace="admin/_fragments :: 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">
-                        <h4 class="ui inverted header m-opacity-min">站长微信</h4>
-                        <div class="item">
-                            <img src="../../static/images/WeChat.jpg" CLASS="ui rounded image" alt="" style="width:110px">
-                        </div>
-                    </div>
-                </div>
-                <div class="three wide column">
-                    <h4 class="ui inverted header m-opacity-min">最新博客</h4>
-                    <div class="ui inverted link list">
-                        <a href="#" class="item">2019一年收获总结</a>
-                        <a href="#" class="item">idea的操作笔记</a>
-                        <a href="#" class="item">SpringBoot学习计划</a>
-                    </div>
-                </div>
-                <div class="three wide column">
-                    <h4 class="ui inverted header m-opacity-min">联系作者</h4>
-                    <div class="ui inverted link list">
-                        <a href="https://space.bilibili.com/393270022" class="item">b站</a>
-                        <a href="#" class="item">QQ:745719461</a>
-                        <a href="#" class="item">邮箱:qfmx520@163.com</a>
-                    </div>
-                </div>
-                <div class="seven wide column">
-                    <h4 class="ui inverted header m-opacity-min">关于作者</h4>
-                    <p class="m-text-thin m-text-spaced m-opacity-min m-text-lined">作者是一名springboot爱好者,是一名正在努力奋斗的学生,主要学习JavaEE开发,Web前端等技术.作者是个喜欢旅行的孩子,目标是游遍全世界！</p>
+</div>
+<br/>
+<br/>
+<br/>
+<!--中间内容-->
+<div class="m-container-small m-padded-tb-big">
+    <!--适应移动端手机-->
+    <div class="ui container">
+        <form action="#" method="post" th:object="${type}"
+              th:action="*{id}==null ? @{/admin/types} : @{/admin/types/{id}(id=*{id})} " class="ui form">
+            <div class="required field">
+                <input type="hidden" name="id" th:value="*{id}">
+                <div class="ui left labeled input">
+                    <label class="ui teal basic label">名称</label>
+                    <input type="text" name="name" placeholder="分类名称" th:value="*{name}">
                 </div>
             </div>
-            <!--分割线-->
-            <div class="ui inverted section divider"></div>
-            <p class="m-text-thin m-text-spaced m-opacity-tiny">Copy © 2019 - 2020 作者:浅枫沐雪 此站仅供个人所有 如有疑问联系作者</p>
-        </div>
-    </footer>
+            <!--表单校验-->
+            <!--错误提示-->
+            <div class="ui error message">
 
-    <!--/*/<th:block th:replace="admin/_fragments :: script">/*/-->
-        <!--引入jQuery-->
-        <script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
-        <!--引入sementic-ui模板所需要的js-->
-        <script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
-        <!--引入Markdown插件需要引入的js-->
-        <script src="../../static/lib/editormd/editormd.min.js"></script>
-    <!--/*/</th:block>/*/-->
-    <!--声明行内js代码域-->
-    <script>
-        /*移动端显示导航栏设置*/
-        $('.menu.toggle').click(function () {
-            $('.m-item').toggleClass('m-mobile-hide');
-        });
-        /*导航栏用户注销显示*/
-        $('.ui.dropdown').dropdown({
-            on:'hover'
-        });
-        /*表单校验*/
-        $('.ui.form').form({
-            fields:{
-                title:{
-                    identifier:'name',
-                    rules : [{
-                        type : 'empty',
-                        prompt:'请输入分类名称！'
-                    }]
-                }
+            </div>
+            <!--/*/
+            <div class="ui negative message" th:if="${#fields.hasErrors('name')}"  >
+              <i class="close icon"></i>
+              <div class="header">验证失败</div>
+              <p th:errors="*{name}">提交信息不符合规则</p>
+            </div>
+             /*/-->
+
+            <!--返回、提交-->
+            <div class="ui right aligned container">
+                <!--onclick="window.history.go(-1)返回上一页面-->
+                <button type="button" class="ui button" onclick="window.history.go(-1)">返回</button>
+
+                <button class="ui teal submit button">提交</button>
+            </div>
+
+        </form>
+    </div>
+</div>
+<br>
+<br/>
+<br/>
+<br/>
+<br/>
+<br>
+<!--底部-->
+<footer th:replace="admin/_fragments :: 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">
+                    <h4 class="ui inverted header m-opacity-min">站长微信</h4>
+                    <div class="item">
+                        <img src="../../static/images/WeChat.jpg" CLASS="ui rounded image" alt="" style="width:110px">
+                    </div>
+                </div>
+            </div>
+            <div class="three wide column">
+                <h4 class="ui inverted header m-opacity-min">最新博客</h4>
+                <div class="ui inverted link list">
+                    <a href="#" class="item">2019一年收获总结</a>
+                    <a href="#" class="item">idea的操作笔记</a>
+                    <a href="#" class="item">SpringBoot学习计划</a>
+                </div>
+            </div>
+            <div class="three wide column">
+                <h4 class="ui inverted header m-opacity-min">联系作者</h4>
+                <div class="ui inverted link list">
+                    <a href="https://space.bilibili.com/393270022" class="item">b站</a>
+                    <a href="#" class="item">QQ:745719461</a>
+                    <a href="#" class="item">邮箱:qfmx520@163.com</a>
+                </div>
+            </div>
+            <div class="seven wide column">
+                <h4 class="ui inverted header m-opacity-min">关于作者</h4>
+                <p class="m-text-thin m-text-spaced m-opacity-min m-text-lined">
+                    作者是一名springboot爱好者,是一名正在努力奋斗的学生,主要学习JavaEE开发,Web前端等技术.作者是个喜欢旅行的孩子,目标是游遍全世界！</p>
+            </div>
+        </div>
+        <!--分割线-->
+        <div class="ui inverted section divider"></div>
+        <p class="m-text-thin m-text-spaced m-opacity-tiny">Copy © 2019 - 2020 作者:浅枫沐雪 此站仅供个人所有 如有疑问联系作者</p>
+    </div>
+</footer>
+
+<!--/*/<th:block th:replace="admin/_fragments :: script">/*/-->
+<!--引入jQuery-->
+<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
+<!--引入sementic-ui模板所需要的js-->
+<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
+<!--引入Markdown插件需要引入的js-->
+<script src="../../static/lib/editormd/editormd.min.js"></script>
+<!--/*/</th:block>/*/-->
+<!--声明行内js代码域-->
+<script>
+    /*移动端显示导航栏设置*/
+    $('.menu.toggle').click(function () {
+        $('.m-item').toggleClass('m-mobile-hide');
+    });
+    /*导航栏用户注销显示*/
+    $('.ui.dropdown').dropdown({
+        on: 'hover'
+    });
+    /*表单校验*/
+    $('.ui.form').form({
+        fields: {
+            title: {
+                identifier: 'name',
+                rules: [{
+                    type: 'empty',
+                    prompt: '请输入分类名称！'
+                }]
             }
-        });
-    </script>
+        }
+    });
+</script>
 </body>
 </html>

src/main/resources/templates/admin/types.html

@@ -11,153 +11,157 @@
     <link rel="stylesheet" href="../../static/css/me.css">
 </head>
 <body>
-    <!--导航-->
-    <nav th:replace="admin/_fragments :: menu(2)" class="ui inverted attached segment segment m-padded-tb-mini m-shadow-small">
-        <div class="ui container">
-            <div class="ui inverted secondary stackable menu">
-                <h2 class="ui teal header item">后台管理</h2>
-                    <a href="#" class="m-item active item m-mobile-hide"><i class="small home icon"></i>博客管理</a>
-                <a href="#" class="m-item item  m-mobile-hide"><i class="small idea icon"></i>分类管理</a>
-                <a href="#" class="m-item item m-mobile-hide" ><i class="small tags icon"></i>标签管理</a>
-                <a href="#" class="m-item item m-mobile-hide" ><i class="small idea icon"></i>个人信息</a>
-                <div class="right m-item m-mobile-hide menu">
-                    <div class="ui dropdown item">
-                        <div class="text ">
-                            <img class="ui avatar image" src="https://picsum.photos/id/1011/100/100">
-                            QFMX
-                        </div>
-                        <i class="dropdown icon"></i>
-                        <div class="menu">
-                            <a href="#" class="item">注销</a>
-                        </div>
+<!--导航-->
+<nav th:replace="admin/_fragments :: menu(2)"
+     class="ui inverted attached segment segment m-padded-tb-mini m-shadow-small">
+    <div class="ui container">
+        <div class="ui inverted secondary stackable menu">
+            <h2 class="ui teal header item">后台管理</h2>
+            <a href="#" class="m-item active item m-mobile-hide"><i class="small home icon"></i>博客管理</a>
+            <a href="#" class="m-item item  m-mobile-hide"><i class="small idea icon"></i>分类管理</a>
+            <a href="#" class="m-item item m-mobile-hide"><i class="small tags icon"></i>标签管理</a>
+            <a href="#" class="m-item item m-mobile-hide"><i class="small idea icon"></i>个人信息</a>
+            <div class="right m-item m-mobile-hide menu">
+                <div class="ui dropdown item">
+                    <div class="text ">
+                        <img class="ui avatar image" src="https://picsum.photos/id/1011/100/100">
+                        QFMX
+                    </div>
+                    <i class="dropdown icon"></i>
+                    <div class="menu">
+                        <a href="#" class="item">注销</a>
                     </div>
                 </div>
             </div>
         </div>
-        <!--menu toggle无任何显示意思-->
-        <a href="" class="ui icon menu toggle black button m-right-top m-mobile-show">
-            <i class="sidebar icon"></i>
-        </a>
-    </nav>
-    <!--二级导航-->
-    <div class="ui attached pointing menu">
-      <div class="ui container">
-
-          <div class="right menu">
-              <a href="#"  th:href="@{/admin/types/input}" class="item">新增</a>
-              <a href="" th:href="@{/admin/types}" class="active teal basic item">列表</a>
-          </div>
-      </div>
-    </div>
-    <!--中间内容-->
-    <div class="m-container-small m-padded-tb-big">
-        <!--适应移动端手机-->
-        <div class="ui container">
-            <!--操作提示信息-->
-            <div class="ui success message" th:unless="${#strings.isEmpty(message)}">
-                <i class="close icon"></i>
-                <div class="header">提示：</div>
-                <p th:text="${message}">恭喜，操作成功！</p>
-            </div>
-            <!--博客列表-->
-            <table class="ui selectable compact teal  table">
-                <thead>
-                    <tr>
-                        <th >分类编号</th>
-                        <th>名称</th>
-                        <th>操作</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr th:each="type,iterStat : ${page.content}">
-                        <td th:text="${iterStat.count}">1</td>
-                        <td data-label="name" th:text="${type.name}">学习</td>
-                        <td data-label="right make">
-                             <a href="#" th:href="@{/admin/types/{id}/input(id=${type.id})}" class="ui m-margin-right tiny teal button">修改</a>
-                            <a href="#" th:href="@{/admin/types/{id}/delete(id=${type.id})}" class="ui m-margin-right tiny red button">删除</a>
-
-                        </td>
-                    </tr>
-                </tbody>
-                <tfoot>
-                        <!--分页组件-->
-                        <th colspan="6">
-                            <div th:if="${page.totalPages}>1" class="ui mini left floated pagination menu">
-                                <!--当有上一页的时候显示，无则不显示-->
-                                <a class="item" th:href="@{/admin/types(page=${page.number}-1)}" th:unless="${page.first}">上一页</a>
-                                <!--当有下一页的时候显示，无则不显示-->
-                                <a class="item" th:href="@{/admin/types(page=${page.number}+1)}" th:unless="${page.last}">下一页</a>
-                            </div>
-                            <a href="#" th:href="@{/admin/types/input}" class="ui tiny orange right floated button">新增</a>
-                     </th>
-                </tfoot>
-            </table>
-        </div>
     </div>
-    <br>
-    <br>
-    <!--底部-->
-    <footer  th:replace="admin/_fragments :: 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">
-                        <h4 class="ui inverted header m-opacity-min">站长微信</h4>
-                        <div class="item">
-                            <img src="../../static/images/WeChat.jpg" CLASS="ui rounded image" alt="" style="width:110px">
-                        </div>
-                    </div>
+    <!--menu toggle无任何显示意思-->
+    <a href="" class="ui icon menu toggle black button m-right-top m-mobile-show">
+        <i class="sidebar icon"></i>
+    </a>
+</nav>
+<!--二级导航-->
+<div class="ui attached pointing menu">
+    <div class="ui container">
+
+        <div class="right menu">
+            <a href="#" th:href="@{/admin/types/input}" class="item">新增</a>
+            <a href="" th:href="@{/admin/types}" class="active teal basic item">列表</a>
+        </div>
+    </div>
+</div>
+<!--中间内容-->
+<div class="m-container-small m-padded-tb-big">
+    <!--适应移动端手机-->
+    <div class="ui container">
+        <!--操作提示信息-->
+        <div class="ui success message" th:unless="${#strings.isEmpty(message)}">
+            <i class="close icon"></i>
+            <div class="header">提示：</div>
+            <p th:text="${message}">恭喜，操作成功！</p>
+        </div>
+        <!--博客列表-->
+        <table class="ui selectable compact teal  table">
+            <thead>
+            <tr>
+                <th>分类编号</th>
+                <th>名称</th>
+                <th>操作</th>
+            </tr>
+            </thead>
+            <tbody>
+            <tr th:each="type,iterStat : ${page.content}">
+                <td th:text="${iterStat.count}">1</td>
+                <td data-label="name" th:text="${type.name}">学习</td>
+                <td data-label="right make">
+                    <a href="#" th:href="@{/admin/types/{id}/input(id=${type.id})}"
+                       class="ui m-margin-right tiny teal button">修改</a>
+                    <a href="#" th:href="@{/admin/types/{id}/delete(id=${type.id})}"
+                       class="ui m-margin-right tiny red button">删除</a>
+
+                </td>
+            </tr>
+            </tbody>
+            <tfoot>
+            <!--分页组件-->
+            <th colspan="6">
+                <div th:if="${page.totalPages}>1" class="ui mini left floated pagination menu">
+                    <!--当有上一页的时候显示，无则不显示-->
+                    <a class="item" th:href="@{/admin/types(page=${page.number}-1)}" th:unless="${page.first}">上一页</a>
+                    <!--当有下一页的时候显示，无则不显示-->
+                    <a class="item" th:href="@{/admin/types(page=${page.number}+1)}" th:unless="${page.last}">下一页</a>
                 </div>
-                <div class="three wide column">
-                    <h4 class="ui inverted header m-opacity-min">最新博客</h4>
-                    <div class="ui inverted link list">
-                        <a href="#" class="item">2019一年收获总结</a>
-                        <a href="#" class="item">idea的操作笔记</a>
-                        <a href="#" class="item">SpringBoot学习计划</a>
+                <a href="#" th:href="@{/admin/types/input}" class="ui tiny orange right floated button">新增</a>
+            </th>
+            </tfoot>
+        </table>
+    </div>
+</div>
+<br>
+<br>
+<!--底部-->
+<footer th:replace="admin/_fragments :: 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">
+                    <h4 class="ui inverted header m-opacity-min">站长微信</h4>
+                    <div class="item">
+                        <img src="../../static/images/WeChat.jpg" CLASS="ui rounded image" alt="" style="width:110px">
                     </div>
                 </div>
-                <div class="three wide column">
-                    <h4 class="ui inverted header m-opacity-min">联系作者</h4>
-                    <div class="ui inverted link list">
-                        <a href="https://space.bilibili.com/393270022" class="item">b站</a>
-                        <a href="#" class="item">QQ:745719461</a>
-                        <a href="#" class="item">邮箱:qfmx520@163.com</a>
-                    </div>
-                </div>
-                <div class="seven wide column">
-                    <h4 class="ui inverted header m-opacity-min">关于作者</h4>
-                    <p class="m-text-thin m-text-spaced m-opacity-min m-text-lined">作者是一名springboot爱好者,是一名正在努力奋斗的学生,主要学习JavaEE开发,Web前端等技术.作者是个喜欢旅行的孩子,目标是游遍全世界！</p>
-                </div>
             </div>
-            <!--分割线-->
-            <div class="ui inverted section divider"></div>
-            <p class="m-text-thin m-text-spaced m-opacity-tiny">Copy © 2019 - 2020 作者:浅枫沐雪 此站仅供个人所有 如有疑问联系作者</p>
+            <div class="three wide column">
+                <h4 class="ui inverted header m-opacity-min">最新博客</h4>
+                <div class="ui inverted link list">
+                    <a href="#" class="item">2019一年收获总结</a>
+                    <a href="#" class="item">idea的操作笔记</a>
+                    <a href="#" class="item">SpringBoot学习计划</a>
+                </div>
+            </div>
+            <div class="three wide column">
+                <h4 class="ui inverted header m-opacity-min">联系作者</h4>
+                <div class="ui inverted link list">
+                    <a href="https://space.bilibili.com/393270022" class="item">b站</a>
+                    <a href="#" class="item">QQ:745719461</a>
+                    <a href="#" class="item">邮箱:qfmx520@163.com</a>
+                </div>
+            </div>
+            <div class="seven wide column">
+                <h4 class="ui inverted header m-opacity-min">关于作者</h4>
+                <p class="m-text-thin m-text-spaced m-opacity-min m-text-lined">
+                    作者是一名springboot爱好者,是一名正在努力奋斗的学生,主要学习JavaEE开发,Web前端等技术.作者是个喜欢旅行的孩子,目标是游遍全世界！</p>
+            </div>
         </div>
-    </footer>
-    <!--/*/<th:block th:replace="admin/_fragments :: script">/*/-->
-    <!--引入jQuery-->
-    <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.4/semantic.min.js"></script>
-    <!--/*/</th:block>/*/-->
+        <!--分割线-->
+        <div class="ui inverted section divider"></div>
+        <p class="m-text-thin m-text-spaced m-opacity-tiny">Copy © 2019 - 2020 作者:浅枫沐雪 此站仅供个人所有 如有疑问联系作者</p>
+    </div>
+</footer>
+<!--/*/<th:block th:replace="admin/_fragments :: script">/*/-->
+<!--引入jQuery-->
+<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.4/semantic.min.js"></script>
+<!--/*/</th:block>/*/-->
 
-    <!--声明行内js代码域-->
-    <script>
-        $('.menu.toggle').click(function () {
-            $('.m-item').toggleClass('m-mobile-hide');
+<!--声明行内js代码域-->
+<script>
+    $('.menu.toggle').click(function () {
+        $('.m-item').toggleClass('m-mobile-hide');
+    });
+
+    $('.ui.dropdown').dropdown({
+        on: 'hover'
+    });
+
+    //消息提示关闭初始化
+    $('.message .close')
+        .on('click', function () {
+            $(this)
+                .closest('.message')
+                .transition('fade');
         });
 
-        $('.ui.dropdown').dropdown({
-            on:'hover'
-        });
-
-        //消息提示关闭初始化
-        $('.message .close')
-            .on('click', function () {
-                $(this)
-                    .closest('.message')
-                    .transition('fade');
-            });
-
-    </script>
+</script>
 </body>
 </html>

src/main/resources/templates/archives.html

@@ -11,60 +11,62 @@
     <link rel="stylesheet" href="../static/css/me.css">
 </head>
 <body>
-    <!--导航-->
-    <nav th:replace="_fragments :: menu(4)" class="ui inverted attached segment segment m-padded-tb-mini m-shadow-small">
-        <!--/*-->
-        <div class="ui container">
-            <div class="ui inverted secondary stackable menu">
-                <h2 class="ui teal header item">浅枫沐雪</h2>
-                <a href="#"  class="m-item item m-mobile-hide" ><i class="small home icon"></i>首页</a>
-                <a href="#"  class="m-item item m-mobile-hide " ><i class="small idea icon"></i>分类</a>
-                <a href="#" class="m-item item m-mobile-hide active"><i class="small tags icon"></i>标签</a>
-                <a href="#" class="m-item item m-mobile-hide"><i class="small clone icon"></i>归档</a>
-                <a href="#" class="m-item item m-mobile-hide"><i class="small info icon"></i>站长信息</a>
-                <div class="right m-item item m-mobile-hide">
-                    <form name="search" action="#" target="_blank" method="post">
-                        <div class="ui icon inverted  input">
-                            <input type="text" name="query" placeholder="Search....">
-                            <i class="search icon link"></i>
-                        </div>
-                    </form>
-                </div>
+<!--导航-->
+<nav th:replace="_fragments :: menu(4)" class="ui inverted attached segment segment m-padded-tb-mini m-shadow-small">
+    <!--/*-->
+    <div class="ui container">
+        <div class="ui inverted secondary stackable menu">
+            <h2 class="ui teal header item">浅枫沐雪</h2>
+            <a href="#" class="m-item item m-mobile-hide"><i class="small home icon"></i>首页</a>
+            <a href="#" class="m-item item m-mobile-hide "><i class="small idea icon"></i>分类</a>
+            <a href="#" class="m-item item m-mobile-hide active"><i class="small tags icon"></i>标签</a>
+            <a href="#" class="m-item item m-mobile-hide"><i class="small clone icon"></i>归档</a>
+            <a href="#" class="m-item item m-mobile-hide"><i class="small info icon"></i>站长信息</a>
+            <div class="right m-item item m-mobile-hide">
+                <form name="search" action="#" target="_blank" method="post">
+                    <div class="ui icon inverted  input">
+                        <input type="text" name="query" placeholder="Search....">
+                        <i class="search icon link"></i>
+                    </div>
+                </form>
             </div>
-            <!--menu toggle无任何显示意思-->
-            <a href="" class="ui icon menu toggle black button m-right-top m-mobile-show">
-                <i class="sidebar icon"></i>
-            </a>
-            <!--*/-->
-    </nav>
+        </div>
+        <!--menu toggle无任何显示意思-->
+        <a href="" class="ui icon menu toggle black button m-right-top m-mobile-show">
+            <i class="sidebar icon"></i>
+        </a>
+        <!--*/-->
+</nav>
 
 
-    <!--中间内容-->
-    <div class="m-container-small m-padded-tb-big">
-        <!--适应移动端手机-->
-        <div class="ui container">
-            <!--header-->
-            <div class="ui padded top attached segment ">
-                <div class="ui middle aligned two column grid">
-                    <dvi class="column">
-                        <h3 class="ui teal header">归档</h3>
-                    </dvi>
-                    <dvi class="right aligned column">
-                        共 <h2 class="ui orange header m-inline-blok m-text-thin" th:text="${blogCount}">14</h2>条
-                    </dvi>
-                </div>
+<!--中间内容-->
+<div class="m-container-small m-padded-tb-big">
+    <!--适应移动端手机-->
+    <div class="ui container">
+        <!--header-->
+        <div class="ui padded top attached segment ">
+            <div class="ui middle aligned two column grid">
+                <dvi class="column">
+                    <h3 class="ui teal header">归档</h3>
+                </dvi>
+                <dvi class="right aligned column">
+                    共 <h2 class="ui orange header m-inline-blok m-text-thin" th:text="${blogCount}">14</h2>条
+                </dvi>
             </div>
-            <!--按照年份归档内容-->
-            <th:block th:each="item : ${archiveMap}">
+        </div>
+        <!--按照年份归档内容-->
+        <th:block th:each="item : ${archiveMap}">
             <h3 class="ui center aligned header" th:text="${item.key}">2019</h3>
             <div class="ui fluid vertical menu">
-                <a href="#" th:href="@{/blog/{id}(id=${blog.id})}" target="_blank" class="item" th:each="blog: ${item.value}">
+                <a href="#" th:href="@{/blog/{id}(id=${blog.id})}" target="_blank" class="item"
+                   th:each="blog: ${item.value}">
                      <span>
                          <i class=" teal tiny circle icon "></i>
                          <span th:text="${blog.title}">关于如何学习JavaEE</span>
-                         <div class="ui teal basic small label m-margin-left" th:text="${#dates.format(blog.updateTime,'MMMdd')}">10月01</div>
+                         <div class="ui teal basic small label m-margin-left"
+                              th:text="${#dates.format(blog.updateTime,'MMMdd')}">10月01</div>
                      </span>
-                          <div class="ui orange basic label" th:text="${blog.flag}">原创</div>
+                    <div class="ui orange basic label" th:text="${blog.flag}">原创</div>
                 </a>
                 <!--/*-->
                 <a href="#" target="_blank" class="item">
@@ -134,64 +136,66 @@
                 </a>
             </div>
             <!--*/-->
-        </div>
     </div>
-    <br>
-    <br>
+</div>
+<br>
+<br>
 
-    <!--底部-->
-    <footer th:replace="_fragments :: 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">
-                        <h4 class="ui inverted header m-opacity-min">站长微信</h4>
-                        <div class="item">
-                            <img src="../static/images/WeChat.jpg" th:src="@{/images/WeChat.jpg}" CLASS="ui rounded image" alt="" style="width:110px">
-                        </div>
+<!--底部-->
+<footer th:replace="_fragments :: 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">
+                    <h4 class="ui inverted header m-opacity-min">站长微信</h4>
+                    <div class="item">
+                        <img src="../static/images/WeChat.jpg" th:src="@{/images/WeChat.jpg}" CLASS="ui rounded image"
+                             alt="" style="width:110px">
                     </div>
                 </div>
-                <div class="three wide column">
-                    <h4 class="ui inverted header m-opacity-min">最新动态</h4>
-                    <div class="ui inverted link list">
-                        <a href="#" class="item">我在等你2019年</a>
-                        <a href="#" class="item">idea的操作笔记</a>
-                        <a href="#" class="item">SpringBoot学习计划</a>
-                    </div>
-                </div>
-                <div class="three wide column">
-                    <h4 class="ui inverted header m-opacity-min">联系作者</h4>
-                    <div class="ui inverted link list">
-                        <a href="https://space.bilibili.com/393270022" class="item">b站</a>
-                        <a href="#" class="item">QQ:745719461</a>
-                        <a href="#" class="item">邮箱:qfmx520@163.com</a>
-                    </div>
-
-                </div>
-                <div class="seven wide column">
-                    <h4 class="ui inverted header m-opacity-min">关于作者</h4>
-                    <p class="m-text-thin m-text-spaced m-opacity-min m-text-lined">作者是一名springboot爱好者,是一名正在努力奋斗的学生,主要学习JavaEE开发,Web前端等技术.作者是个喜欢旅行的孩子,目标是游遍全世界！</p>
-                </div>
             </div>
-            <!--分割线-->
-            <div class="ui inverted section divider"></div>
-            <p class="m-text-thin m-text-spaced m-opacity-tiny">Copy © 2019 - 2020 作者:浅枫沐雪 此站仅供个人所有 如有疑问联系作者</p>
+            <div class="three wide column">
+                <h4 class="ui inverted header m-opacity-min">最新动态</h4>
+                <div class="ui inverted link list">
+                    <a href="#" class="item">我在等你2019年</a>
+                    <a href="#" class="item">idea的操作笔记</a>
+                    <a href="#" class="item">SpringBoot学习计划</a>
+                </div>
+            </div>
+            <div class="three wide column">
+                <h4 class="ui inverted header m-opacity-min">联系作者</h4>
+                <div class="ui inverted link list">
+                    <a href="https://space.bilibili.com/393270022" class="item">b站</a>
+                    <a href="#" class="item">QQ:745719461</a>
+                    <a href="#" class="item">邮箱:qfmx520@163.com</a>
+                </div>
+
+            </div>
+            <div class="seven wide column">
+                <h4 class="ui inverted header m-opacity-min">关于作者</h4>
+                <p class="m-text-thin m-text-spaced m-opacity-min m-text-lined">
+                    作者是一名springboot爱好者,是一名正在努力奋斗的学生,主要学习JavaEE开发,Web前端等技术.作者是个喜欢旅行的孩子,目标是游遍全世界！</p>
+            </div>
         </div>
-        <!--*/-->
-    </footer>
+        <!--分割线-->
+        <div class="ui inverted section divider"></div>
+        <p class="m-text-thin m-text-spaced m-opacity-tiny">Copy © 2019 - 2020 作者:浅枫沐雪 此站仅供个人所有 如有疑问联系作者</p>
+    </div>
+    <!--*/-->
+</footer>
 
-    <!--引入所需要的JS-->
-    <th:block th:replace="_fragments :: script">
+<!--引入所需要的JS-->
+<th:block th:replace="_fragments :: script">
 
-    </th:block>
+</th:block>
 
-    <!--声明行内js代码域-->
-    <script>
-        $('.menu.toggle').click(function () {
-            $('.m-item').toggleClass('m-mobile-hide');
-        });
+<!--声明行内js代码域-->
+<script>
+    $('.menu.toggle').click(function () {
+        $('.m-item').toggleClass('m-mobile-hide');
+    });
 
-    </script>
+</script>
 </body>
 </html>

src/main/resources/templates/blog.html

@@ -18,62 +18,65 @@
     <!--引入自定义CSS-->
     <link rel="stylesheet" href="../static/css/me.css">
 </head>
-<body >
-    <!--导航-->
-    <nav th:replace="_fragments :: menu(1)" class="ui inverted attached segment segment m-padded-tb-mini m-shadow-small">
-        <div class="ui container">
-            <div class="ui inverted secondary stackable menu" id="nav_menu">
-                <h2 class="ui teal header item">浅枫沐雪</h2>
-                    <a href="#" class="m-item item m-mobile-hide"><i class="small home icon"></i>首页</a>
-                <a href="#" class="m-item item m-mobile-hide"><i class="small idea icon"></i>分类</a>
-                <a href="#" class="m-item item m-mobile-hide" ><i class="small tags icon"></i>标签</a>
-                <a href="#" class="m-item item m-mobile-hide" ><i class="small clone icon"></i>归档</a>
-                <a href="#" class="m-item item m-mobile-hide"><i class="small info icon"></i>站长信息</a>
-                <div class="right m-item item m-mobile-hide">
-                    <div class="ui icon inverted  input">
-                        <input type="text" placeholder="Search...">
-                        <i class="search icon link"></i>
-                    </div>
+<body>
+<!--导航-->
+<nav th:replace="_fragments :: menu(1)" class="ui inverted attached segment segment m-padded-tb-mini m-shadow-small">
+    <div class="ui container">
+        <div class="ui inverted secondary stackable menu" id="nav_menu">
+            <h2 class="ui teal header item">浅枫沐雪</h2>
+            <a href="#" class="m-item item m-mobile-hide"><i class="small home icon"></i>首页</a>
+            <a href="#" class="m-item item m-mobile-hide"><i class="small idea icon"></i>分类</a>
+            <a href="#" class="m-item item m-mobile-hide"><i class="small tags icon"></i>标签</a>
+            <a href="#" class="m-item item m-mobile-hide"><i class="small clone icon"></i>归档</a>
+            <a href="#" class="m-item item m-mobile-hide"><i class="small info icon"></i>站长信息</a>
+            <div class="right m-item item m-mobile-hide">
+                <div class="ui icon inverted  input">
+                    <input type="text" placeholder="Search...">
+                    <i class="search icon link"></i>
                 </div>
             </div>
         </div>
-        <!--menu toggle无任何显示意思-->
-        <a href="" class="ui icon menu toggle black button m-right-top m-mobile-show">
-            <i class="sidebar icon"></i>
-        </a>
-    </nav>
+    </div>
+    <!--menu toggle无任何显示意思-->
+    <a href="" class="ui icon menu toggle black button m-right-top m-mobile-show">
+        <i class="sidebar icon"></i>
+    </a>
+</nav>
 
-    <!--中间内容-->
-    <div id="waypoint" class="m-container-small m-padded-tb-big animated fadeIn">
-        <div class="ui container">
-            <!--用户信息-->
-            <div class="ui top attached segment">
-                <div class="ui horizontal link list">
-                    <div class="item">
-                        <img src="https://picsum.photos/id/1011/100/100" th:src="@{${blog.user.avatar}}" alt="" class="ui avatar image">
-                        <div class="content"> <a href="#" class="header" th:text="${blog.user.nickname}">QFMX</a></div>
-                    </div>
-                    <div class="item">
-                        <i class="calendar icon"></i>
-                        <span th:text="${#dates.format(blog.updateTime,'yyyy-MM-dd HH:mm')}">2019-10-01</span>
-                    </div>
-                    <div class="item">
-                        <i class="eye icon"></i><span th:text="${blog.views}">7437</span>
-                    </div>
+<!--中间内容-->
+<div id="waypoint" class="m-container-small m-padded-tb-big animated fadeIn">
+    <div class="ui container">
+        <!--用户信息-->
+        <div class="ui top attached segment">
+            <div class="ui horizontal link list">
+                <div class="item">
+                    <img src="https://picsum.photos/id/1011/100/100" th:src="@{${blog.user.avatar}}" alt=""
+                         class="ui avatar image">
+                    <div class="content"><a href="#" class="header" th:text="${blog.user.nickname}">QFMX</a></div>
+                </div>
+                <div class="item">
+                    <i class="calendar icon"></i>
+                    <span th:text="${#dates.format(blog.updateTime,'yyyy-MM-dd HH:mm')}">2019-10-01</span>
+                </div>
+                <div class="item">
+                    <i class="eye icon"></i><span th:text="${blog.views}">7437</span>
                 </div>
             </div>
-            <div class="ui attached segment">
-                <!--封面图片-->
-                <img src="https://unsplash.it/800/450?image=1005" th:src="@{${blog.firstPicture}}" alt="" class="ui fluid image">
-            </div>
-            <div class="ui attached padding segment">
+        </div>
+        <div class="ui attached segment">
+            <!--封面图片-->
+            <img src="https://unsplash.it/800/450?image=1005" th:src="@{${blog.firstPicture}}" alt=""
+                 class="ui fluid image">
+        </div>
+        <div class="ui attached padding segment">
             <!--主要内容-->
             <div class="ui right aligned basic segment">
                 <div class="ui orange basic label" th:text="${blog.flag}">原创</div>
             </div>
             <h2 class="ui center aligned header" th:text="${blog.title}">semantic-ui的使用教程.</h2>
             <br>
-            <div id="content" class="typo typo-selection js-toc-content m-padding-lr-responsive m-padded-tb-large" th:utext="${blog.content}">
+            <div id="content" class="typo typo-selection js-toc-content m-padding-lr-responsive m-padded-tb-large"
+                 th:utext="${blog.content}">
                 <h2>&nbsp;</h2>
                 <h2 id="tagline" class="serif">一致化浏览器排版效果，构建最适合中文阅读的网页排版</h2>
 
@@ -98,8 +101,10 @@
                 <p><i class="serif">Typo.css</i> 的目的是，在一致化浏览器排版效果的同时，构建最适合中文阅读的网页排版。</p>
                 <h4>现状和如何去做：</h4>
 
-                <p class="typo-first">排版是一个麻烦的问题 <sup><a href="#appendix1"># 附录一</a></sup>，需要精心设计，而这个设计却是常被视觉设计师所忽略的。前端工程师更常看到这样的问题，但不便变更。因为在多个 OS 中的不同浏览器渲染不同，改动需要多的时间做回归测试，所以改变变得更困难。而像我们一般使用的
-                    Yahoo、Eric Meyer 和 Alice base.css 中采用的 Reset 都没有很好地考虑中文排版。<i class="serif">Typo.css</i> 要做的就是解决中文排版的问题。</p>
+                <p class="typo-first">排版是一个麻烦的问题 <sup><a href="#appendix1"># 附录一</a></sup>，需要精心设计，而这个设计却是常被视觉设计师所忽略的。前端工程师更常看到这样的问题，但不便变更。因为在多个
+                    OS 中的不同浏览器渲染不同，改动需要多的时间做回归测试，所以改变变得更困难。而像我们一般使用的
+                    Yahoo、Eric Meyer 和 Alice base.css 中采用的 Reset 都没有很好地考虑中文排版。<i class="serif">Typo.css</i>
+                    要做的就是解决中文排版的问题。</p>
 
                 <p><strong><i class="serif">Typo.css</i> 测试于如下平台：</strong></p>
                 <pre><code class="language-java">p { color: red }</code></pre>
@@ -167,8 +172,10 @@
 
                 <h4>中文排版的重点和难点</h4>
 
-                <p>在中文排版中，HTML4 的很多标准在语义在都有照顾到。但从视觉效果上，却很难利用单独的 CSS 来实现，像<abbr title="在文字下多加一个点">着重号</abbr>（例：这里<em class="typo-em">强调一下</em>）。在 HTML4 中，专名号标签（<code>&lt;u&gt;</code>）已经被放弃，而
-                    HTML5 被<a href="http://html5doctor.com/u-element/">重新提起</a>。<i class="serif">Typo.css</i> 也根据实际情况提供相应的方案。我们重要要注意的两点是：</p>
+                <p>在中文排版中，HTML4 的很多标准在语义在都有照顾到。但从视觉效果上，却很难利用单独的 CSS 来实现，像<abbr title="在文字下多加一个点">着重号</abbr>（例：这里<em
+                        class="typo-em">强调一下</em>）。在 HTML4 中，专名号标签（<code>&lt;u&gt;</code>）已经被放弃，而
+                    HTML5 被<a href="http://html5doctor.com/u-element/">重新提起</a>。<i class="serif">Typo.css</i>
+                    也根据实际情况提供相应的方案。我们重要要注意的两点是：</p>
                 <ol>
                     <li>语义：语义对应的用法和样式是否与中文排版一致</li>
                     <li>表现：在各浏览器中的字体、大小和缩放是否如排版预期</li>
@@ -210,70 +217,95 @@
                         title="张燕婴">我</abbr>的学说，纷纷到我这里来讨论问题，我也感到快乐；再退一步说，即使社会不采用，人们也不理解我，我也不怨恨，这样做，不也就是君子吗？（见《齐鲁学刊》1986年第6期文）这种解释可以自圆其说，而且也有一定的道理，供读者在理解本章内容时参考。
                 </p>
 
-                <p>此外，在对「人不知，而不愠」一句的解释中，也有人认为，「人不知」的后面没有宾语，人家不知道什么呢？当时因为孔子有说话的特定环境，他不需要说出知道什么，别人就可以理解了，却给后人留下一个谜。有人说，这一句是接上一句说的，从远方来的朋友向我求教，我告诉他，他还不懂，我却不怨恨。这样，「人不知」就是「人家不知道我所讲述的」了。这样的解释似乎有些牵强。</p>
+                <p>
+                    此外，在对「人不知，而不愠」一句的解释中，也有人认为，「人不知」的后面没有宾语，人家不知道什么呢？当时因为孔子有说话的特定环境，他不需要说出知道什么，别人就可以理解了，却给后人留下一个谜。有人说，这一句是接上一句说的，从远方来的朋友向我求教，我告诉他，他还不懂，我却不怨恨。这样，「人不知」就是「人家不知道我所讲述的」了。这样的解释似乎有些牵强。</p>
 
                 <p>总之，本章提出以学习为乐事，做到人不知而不愠，反映出孔子学而不厌、诲人不倦、注重修养、严格要求自己的主张。这些思想主张在《论语》书中多处可见，有助于对第一章内容的深入了解。</p>
 
                 <h3 id="section2-2">例2：英文排版</h3>
 
-                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
-                    standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a
-                    type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining
-                    essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum
-                    passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem
+                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
+                    industry's
+                    standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
+                    scrambled it to make a
+                    type specimen book. It has survived not only five centuries, but also the leap into electronic
+                    typesetting, remaining
+                    essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets
+                    containing Lorem Ipsum
+                    passages, and more recently with desktop publishing software like Aldus PageMaker including versions
+                    of Lorem
                     Ipsum.</p>
                 <blockquote>
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
-                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
+                    et dolore magna
+                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+                    commodo consequat.
                 </blockquote>
 
                 <h4>The standard Lorem Ipsum passage, used since the 1500s</h4>
 
-                <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
-                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-                    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+                <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
+                    et dolore magna
+                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+                    commodo consequat.
+                    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+                    pariatur. Excepteur sint
                     occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
 
                 <h4>Section 1.10.32 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC</h4>
 
-                <p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam,
-                    eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
-                    voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
-                    voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci
-                    velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim
-                    ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi
-                    consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur,
+                <p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
+                    totam rem aperiam,
+                    eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
+                    Nemo enim ipsam
+                    voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos
+                    qui ratione
+                    voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,
+                    consectetur, adipisci
+                    velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat
+                    voluptatem. Ut enim
+                    ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex
+                    ea commodi
+                    consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil
+                    molestiae consequatur,
                     vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p>
 
                 <h4>List style in action</h4>
                 <ul>
-                    <li>If you wish to succeed, you should use persistence as your good friend, experience as your reference, prudence as
+                    <li>If you wish to succeed, you should use persistence as your good friend, experience as your
+                        reference, prudence as
                         your brother and hope as your sentry.
                         <p>如果你希望成功，当以恒心为良友，以经验为参谋，以谨慎为兄弟，以希望为哨兵。</p>
                     </li>
                     <li>Sometimes one pays most for the things one gets for nothing.
                         <p>有时候一个人为不花钱得到的东西付出的代价最高。</p>
                     </li>
-                    <li>Only those who have the patience to do simple things perfectly ever acquire the skill to do difficult things
+                    <li>Only those who have the patience to do simple things perfectly ever acquire the skill to do
+                        difficult things
                         easily.
                         <p>只有有耐心圆满完成简单工作的人，才能够轻而易举的完成困难的事。</p>
                     </li>
                 </ul>
 
-                <h4>You may want to create a perfect <code>&lt;hr /&gt;</code> line, despite the fact that there will never have one
+                <h4>You may want to create a perfect <code>&lt;hr /&gt;</code> line, despite the fact that there will
+                    never have one
                 </h4>
                 <hr/>
                 <p><abbr title="法国作家罗切福考尔德">La Racheforcauld</abbr> said:
-                    <mark>"Few things are impossible in themselves; and it is often for want of will, rather than of means, that man fails
+                    <mark>"Few things are impossible in themselves; and it is often for want of will, rather than of
+                        means, that man fails
                         to succeed".
                     </mark>
-                    You just need to follow the browser's behavior, and set a right <code>margin</code> to it。it will works nice as the
+                    You just need to follow the browser's behavior, and set a right <code>margin</code> to it。it will
+                    works nice as the
                     demo you're watching now. The following code is the best way to render typo in Chinese:
                 </p>
             </div>
             <!--标签-->
             <div class="m-padding-lr-responsive">
-                <div class="ui basic teal left pointing label" th:each="tag : ${blog.tags}" th:text="${tag.name}">SpringBoot</div>
+                <div class="ui basic teal left pointing label" th:each="tag : ${blog.tags}" th:text="${tag.name}">
+                    SpringBoot
+                </div>
             </div>
             <!--打赏-->
             <div th:if="${blog.appreciation}">
@@ -286,11 +318,13 @@
                         <div class="ui small images" style="font-size: inherit">
                             <div class="image">
                                 <!--支付宝打赏-->
-                                <img src="../static/images/pay_wechat.jpg" th:src="@{/images/pay_wechat.jpg}" alt="" class="ui rounded bordered image" style="width: 140px">
+                                <img src="../static/images/pay_wechat.jpg" th:src="@{/images/pay_wechat.jpg}" alt=""
+                                     class="ui rounded bordered image" style="width: 140px">
                                 <div>微信</div>
                             </div>
                             <div class="image">
-                                <img src="../static/images/pay_baby.jpg" th:src="@{/images/pay_baby.jpg}" alt="" class="ui rounded bordered image" style="width: 140px">
+                                <img src="../static/images/pay_baby.jpg" th:src="@{/images/pay_baby.jpg}" alt=""
+                                     class="ui rounded bordered image" style="width: 140px">
                                 <div>支付宝</div>
                             </div>
                         </div>
@@ -299,360 +333,381 @@
             </div>
 
         </div>
-            <div class="ui attached positive message" th:if="${blog.shareStatement}">
-                <!--博客信息-->
-               <div class="ui middle aligned grid">
-                   <div class="eleven wide column">
-                        <ui class="list">
-                            <li>作者:<span th:text="${blog.user.nickname}">QFMX</span><a href="#" th:href="@{/about}" target="_blank">(联系作者)</a></li>
+        <div class="ui attached positive message" th:if="${blog.shareStatement}">
+            <!--博客信息-->
+            <div class="ui middle aligned grid">
+                <div class="eleven wide column">
+                    <ui class="list">
+                        <li>作者:<span th:text="${blog.user.nickname}">QFMX</span><a href="#" th:href="@{/about}"
+                                                                                   target="_blank">(联系作者)</a></li>
 
-                            <li>发表时间：<span th:text="${#dates.format(blog.updateTime,'yyyy-MM-dd HH:mm')}">2019-10-02 09:08</span></li>
-                            <li>版权声明:自由转载-非商用-非衍生-保持署名(创作共享3.0许可证)</li>
-                            <li>公众号转载:请在文末添加作者公众号二维码</li>
-                        </ui>
-                   </div>
-                   <div class="five wide column">
-                       <img src="../static/images/WeChat.jpg" th:src="@{/images/WeChat.jpg}" alt="" class="ui right floated rounded bordered image" style="width: 110px">
-                   </div>
-               </div>
+                        <li>发表时间：<span
+                                th:text="${#dates.format(blog.updateTime,'yyyy-MM-dd HH:mm')}">2019-10-02 09:08</span>
+                        </li>
+                        <li>版权声明:自由转载-非商用-非衍生-保持署名(创作共享3.0许可证)</li>
+                        <li>公众号转载:请在文末添加作者公众号二维码</li>
+                    </ui>
+                </div>
+                <div class="five wide column">
+                    <img src="../static/images/WeChat.jpg" th:src="@{/images/WeChat.jpg}" alt=""
+                         class="ui right floated rounded bordered image" style="width: 110px">
+                </div>
             </div>
-            <div id="conmment-container" class="ui bottom attached segment" th:if="${blog.commentabled}">
-                    <!--留言区域列表-->
-                    <div id="comment-container" class="ui teal segment">
-                        <div th:fragment="commentList">
-                            <div class="ui threaded comments" style="max-width: 100%">
-                                <h3 class="ui dividing header">评论</h3>
-                                <div class="comment" th:each="comment : ${comments}">
+        </div>
+        <div id="conmment-container" class="ui bottom attached segment" th:if="${blog.commentabled}">
+            <!--留言区域列表-->
+            <div id="comment-container" class="ui teal segment">
+                <div th:fragment="commentList">
+                    <div class="ui threaded comments" style="max-width: 100%">
+                        <h3 class="ui dividing header">评论</h3>
+                        <div class="comment" th:each="comment : ${comments}">
+                            <a class="avatar">
+                                <img src="https://unsplash.it/800/450?image=1005" th:src="@{${comment.avatar}}">
+                            </a>
+                            <div class="content">
+                                <a class="author">
+                                    <span th:text="${comment.nickname}">Matt</span>
+                                    <div class="ui mini basic teal left pointing label m-padded-mini"
+                                         th:if="${comment.adminComment}">博主
+                                    </div>
+                                </a>
+                                <div class="metadata">
+                                    <span class="date"
+                                          th:text="${#dates.format(comment.createTime,'yyyy-MM-dd HH:mm')}">Today at 5:42PM</span>
+                                </div>
+                                <div class="text" th:text="${comment.content}">
+                                    你的博客真棒！
+                                </div>
+                                <div class="actions">
+                                    <a class="回复" data-commentid="1" data-commentnickname="Matt"
+                                       th:attr="data-commentid=${comment.id},data-commentnickname=${comment.nickname}"
+                                       onclick="reply(this)">回复</a>
+                                </div>
+                            </div>
+                            <!--判断是否有子集回复-->
+                            <div class="comments" th:if="${#arrays.length(comment.replyComments)}>0">
+                                <div class="comment" th:each="reply : ${comment.replyComments}">
                                     <a class="avatar">
-                                        <img src="https://unsplash.it/800/450?image=1005" th:src="@{${comment.avatar}}">
+                                        <img src="https://unsplash.it/800/450?image=1005" th:src="@{${reply.avatar}}">
                                     </a>
                                     <div class="content">
-                                        <a class="author" >
-                                            <span th:text="${comment.nickname}">Matt</span>
-                                            <div class="ui mini basic teal left pointing label m-padded-mini" th:if="${comment.adminComment}">博主</div>
+                                        <a class="author">
+                                            <span th:text="${reply.nickname}">小白</span>&nbsp;
+                                            <div class="ui mini basic teal left pointing label m-padded-mini"
+                                                 th:if="${reply.adminComment}">博主
+                                            </div>
+                                            <span th:text="' @' + ${reply.parentComment.nickname}"
+                                                  class="m-teal">@ 小红</span>
                                         </a>
                                         <div class="metadata">
-                                            <span class="date" th:text="${#dates.format(comment.createTime,'yyyy-MM-dd HH:mm')}">Today at 5:42PM</span>
+                                            <span class="date"
+                                                  th:text="${#dates.format(reply.createTime,'yyyy-MM-dd HH:mm')}">Today at 5:42PM</span>
                                         </div>
-                                        <div class="text" th:text="${comment.content}">
-                                            你的博客真棒！
+                                        <div class="text" th:text="${reply.content}">
+                                            你好呀！
                                         </div>
                                         <div class="actions">
-                                            <a class="回复" data-commentid="1" data-commentnickname="Matt" th:attr="data-commentid=${comment.id},data-commentnickname=${comment.nickname}" onclick="reply(this)">回复</a>
-                                        </div>
-                                    </div>
-                                    <!--判断是否有子集回复-->
-                                    <div class="comments" th:if="${#arrays.length(comment.replyComments)}>0">
-                                        <div class="comment" th:each="reply : ${comment.replyComments}">
-                                            <a class="avatar">
-                                                <img src="https://unsplash.it/800/450?image=1005" th:src="@{${reply.avatar}}">
-                                            </a>
-                                            <div class="content">
-                                                <a class="author" >
-                                                    <span th:text="${reply.nickname}">小白</span>&nbsp;
-                                                    <div class="ui mini basic teal left pointing label m-padded-mini" th:if="${reply.adminComment}">博主</div>
-                                                    <span th:text="' @' + ${reply.parentComment.nickname}" class="m-teal">@ 小红</span>
-                                                </a>
-                                                <div class="metadata">
-                                                    <span class="date" th:text="${#dates.format(reply.createTime,'yyyy-MM-dd HH:mm')}">Today at 5:42PM</span>
-                                                </div>
-                                                <div class="text" th:text="${reply.content}">
-                                                   你好呀！
-                                                </div>
-                                                <div class="actions">
-                                                    <a class="回复" data-commentid="1" data-commentnickname="Matt" th:attr="data-commentid=${reply.id},data-commentnickname=${reply.nickname}" onclick="reply(this)">回复</a>
-                                                </div>
-                                            </div>
+                                            <a class="回复" data-commentid="1" data-commentnickname="Matt"
+                                               th:attr="data-commentid=${reply.id},data-commentnickname=${reply.nickname}"
+                                               onclick="reply(this)">回复</a>
                                         </div>
                                     </div>
                                 </div>
-                                <!--/*-->
+                            </div>
+                        </div>
+                        <!--/*-->
+                        <div class="comment">
+                            <a class="avatar">
+                                <img src="https://unsplash.it/800/450?image=1005">
+                            </a>
+                            <div class="content">
+                                <a class="author">Elliot Fu</a>
+                                <div class="metadata">
+                                    <span class="date">Yesterday at 12:30AM</span>
+                                </div>
+                                <div class="text">
+                                    <p>This has been very useful for my research. Thanks as well!</p>
+                                </div>
+                                <div class="actions">
+                                    <a class="回复">回复</a>
+                                </div>
+                            </div>
+                            <div class="comments">
                                 <div class="comment">
                                     <a class="avatar">
                                         <img src="https://unsplash.it/800/450?image=1005">
                                     </a>
                                     <div class="content">
-                                        <a class="author">Elliot Fu</a>
+                                        <a class="author">Jenny Hess</a>
                                         <div class="metadata">
-                                            <span class="date">Yesterday at 12:30AM</span>
+                                            <span class="date">Just now</span>
                                         </div>
                                         <div class="text">
-                                            <p>This has been very useful for my research. Thanks as well!</p>
+                                            Elliot you are always so right :)
                                         </div>
                                         <div class="actions">
                                             <a class="回复">回复</a>
                                         </div>
                                     </div>
-                                    <div class="comments">
-                                        <div class="comment">
-                                            <a class="avatar">
-                                                <img src="https://unsplash.it/800/450?image=1005">
-                                            </a>
-                                            <div class="content">
-                                                <a class="author">Jenny Hess</a>
-                                                <div class="metadata">
-                                                    <span class="date">Just now</span>
-                                                </div>
-                                                <div class="text">
-                                                    Elliot you are always so right :)
-                                                </div>
-                                                <div class="actions">
-                                                    <a class="回复">回复</a>
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </div>
                                 </div>
-                                <div class="comment">
-                                    <a class="avatar">
-                                        <img src="https://unsplash.it/800/450?image=1005">
-                                    </a>
-                                    <div class="content">
-                                        <a class="author">Joe Henderson</a>
-                                        <div class="metadata">
-                                            <span class="date">5 days ago</span>
-                                        </div>
-                                        <div class="text">
-                                            Dude, this is awesome. Thanks so much
-                                        </div>
-                                        <div class="actions">
-                                            <a class="reply">回复</a>
-                                        </div>
-                                    </div>
+                            </div>
+                        </div>
+                        <div class="comment">
+                            <a class="avatar">
+                                <img src="https://unsplash.it/800/450?image=1005">
+                            </a>
+                            <div class="content">
+                                <a class="author">Joe Henderson</a>
+                                <div class="metadata">
+                                    <span class="date">5 days ago</span>
+                                </div>
+                                <div class="text">
+                                    Dude, this is awesome. Thanks so much
+                                </div>
+                                <div class="actions">
+                                    <a class="reply">回复</a>
                                 </div>
-                                <!--*/-->
                             </div>
                         </div>
+                        <!--*/-->
                     </div>
-                <!--提交留言表单-->
-                <div id="comment-form" class="ui form">
+                </div>
+            </div>
+            <!--提交留言表单-->
+            <div id="comment-form" class="ui form">
 
 
-                    <!--隐含域博客ID-->
-                    <input type="hidden" name="blog.id" th:value="${blog.id}">
-                    <!--评论id 初始值为-1 -->
-                    <input type="hidden" name="parentComment.id" value="-1">
-                    <div class="field">
-                        <textarea name="content"  cols="30" rows="10" placeholder="请输入评论信息"></textarea>
-                    </div>
-                    <div class="fields">
-                        <div class="field m-mobile-wide m-margin-bottom-small">
-                            <div class="ui left icon input">
-                                <i class="user icon"></i>
-                                <input name="nickname" type="text" placeholder="姓名" th:value="${session.user}!=null?${session.user.nickname}">
-                            </div>
-                        </div>
-                        <div class="field m-mobile-wide m-margin-bottom-small">
-                            <div class="ui left icon input">
-                                <i class="mail icon"></i>
-                                <input name="email" type="email" placeholder="邮箱" th:value="${session.user}!=null?${session.user.email}">
-                            </div>
-                        </div>
-                        <div class="field  m-margin-bottom-small m-mobile-wide">
-                            <button id="commentpost-btn"  type="button" class="ui teal button m-mobile-wide"><i class="edit icon"></i>发布</button>
+                <!--隐含域博客ID-->
+                <input type="hidden" name="blog.id" th:value="${blog.id}">
+                <!--评论id 初始值为-1 -->
+                <input type="hidden" name="parentComment.id" value="-1">
+                <div class="field">
+                    <textarea name="content" cols="30" rows="10" placeholder="请输入评论信息"></textarea>
+                </div>
+                <div class="fields">
+                    <div class="field m-mobile-wide m-margin-bottom-small">
+                        <div class="ui left icon input">
+                            <i class="user icon"></i>
+                            <input name="nickname" type="text" placeholder="姓名"
+                                   th:value="${session.user}!=null?${session.user.nickname}">
                         </div>
                     </div>
-                    <!--表单校验-->
-                    <!--错误提示-->
-                    <div class="ui error message">
+                    <div class="field m-mobile-wide m-margin-bottom-small">
+                        <div class="ui left icon input">
+                            <i class="mail icon"></i>
+                            <input name="email" type="email" placeholder="邮箱"
+                                   th:value="${session.user}!=null?${session.user.email}">
+                        </div>
+                    </div>
+                    <div class="field  m-margin-bottom-small m-mobile-wide">
+                        <button id="commentpost-btn" type="button" class="ui teal button m-mobile-wide"><i
+                                class="edit icon"></i>发布
+                        </button>
+                    </div>
+                </div>
+                <!--表单校验-->
+                <!--错误提示-->
+                <div class="ui error message">
 
-                    </div>
                 </div>
             </div>
         </div>
     </div>
-    <!--工具条-->
-    <div id="toolbar" class="m-fixed m-right-button m-padded" style="display: none">
-        <div  class="ui vertical icon buttons" >
-            <button id="tocButton" type="button" class="ui teal button">目录</button>
-            <a href="#conmment-container" class="ui teal button">留言</a>
-            <button type="iconbutton" class="ui wc icon button"><i class="weixin icon"></i></button>
-            <div id="toTop" href="#nav_menu" class="ui  icon button"><i class="chevron up icon"></i></div>
-        </div>
+</div>
+<!--工具条-->
+<div id="toolbar" class="m-fixed m-right-button m-padded" style="display: none">
+    <div class="ui vertical icon buttons">
+        <button id="tocButton" type="button" class="ui teal button">目录</button>
+        <a href="#conmment-container" class="ui teal button">留言</a>
+        <button type="iconbutton" class="ui wc icon button"><i class="weixin icon"></i></button>
+        <div id="toTop" href="#nav_menu" class="ui  icon button"><i class="chevron up icon"></i></div>
     </div>
-    <!--目录页面详情-->
-    <div class="ui toc-container flowing popup transition hidden" style="width: 270px;border-radius: 6%; padding-right: 20px; background-color:#fffdf5 ">
-        <!--js-toc目录生成地点-->
-       <ol class="js-toc"></ol>
-    </div>
-    <!--微信阅读二维码-->
-    <div  class="ui wc-qr flowing popup transition hidden " style="width: 140px;border-radius: 5%;">
-        <div style="text-align: center;font-size:14px;font-weight:bold; color: orange">扫码阅读哦</div>
-        <div id="qrcode" style="margin: 5px auto">
-           <!-- <img src="./static/images/WeChat.jpg" alt="" class="ui rounded image" style="width: 130px">-->
-        </div>
+</div>
+<!--目录页面详情-->
+<div class="ui toc-container flowing popup transition hidden"
+     style="width: 270px;border-radius: 6%; padding-right: 20px; background-color:#fffdf5 ">
+    <!--js-toc目录生成地点-->
+    <ol class="js-toc"></ol>
+</div>
+<!--微信阅读二维码-->
+<div class="ui wc-qr flowing popup transition hidden " style="width: 140px;border-radius: 5%;">
+    <div style="text-align: center;font-size:14px;font-weight:bold; color: orange">扫码阅读哦</div>
+    <div id="qrcode" style="margin: 5px auto">
+        <!-- <img src="./static/images/WeChat.jpg" alt="" class="ui rounded image" style="width: 130px">-->
     </div>
+</div>
 
 
-    <br>
-    <br>
-    <!--底部-->
-    <footer th:replace="_fragments :: footer" class="ui inverted vertical segment m-padded-tb-massive ">
-    </footer>
-    <!--引入所需要的JS-->
-    <th:block th:replace="_fragments :: script">
-        <!--/*-->
-        <!--引入jQuery-->
-        <script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
-        <!--引入semantic-ui的 JS-->
-        <script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
-        <!--引入平滑滚动插件CDN-->
-        <script src="//cdn.jsdelivr.net/npm/jquery.scrollto@2.1.2/jquery.scrollTo.min.js"></script>
-        <!--引入代码高亮插件 JS-->
-        <script src="../static/lib/prism/prism.js" th:src="@{/lib/prism/prism.js}"></script>
-        <!--映入目录生成插件 JS-->
-        <script src="../static/lib/tocbot/tocbot.min.js" th:src="@{/lib/tocbot/tocbot.min.js}"></script>
-        <!--引入二维码生成插件 JS-->
-        <script src="../static/lib/qrcode/qrcode.min.js" th:src="@{/lib/qrcode/qrcode.min.js}"></script>
-        <!--引入waypoints插件滚动条-->
-        <script src="../static/lib/waypoints/jquery.waypoints.min.js" th:src="@{/lib/waypoints/jquery.waypoints.min.js}"></script>
-        <!--*/-->
-    </th:block>
+<br>
+<br>
+<!--底部-->
+<footer th:replace="_fragments :: footer" class="ui inverted vertical segment m-padded-tb-massive ">
+</footer>
+<!--引入所需要的JS-->
+<th:block th:replace="_fragments :: script">
+    <!--/*-->
+    <!--引入jQuery-->
+    <script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
+    <!--引入semantic-ui的 JS-->
+    <script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
+    <!--引入平滑滚动插件CDN-->
+    <script src="//cdn.jsdelivr.net/npm/jquery.scrollto@2.1.2/jquery.scrollTo.min.js"></script>
+    <!--引入代码高亮插件 JS-->
+    <script src="../static/lib/prism/prism.js" th:src="@{/lib/prism/prism.js}"></script>
+    <!--映入目录生成插件 JS-->
+    <script src="../static/lib/tocbot/tocbot.min.js" th:src="@{/lib/tocbot/tocbot.min.js}"></script>
+    <!--引入二维码生成插件 JS-->
+    <script src="../static/lib/qrcode/qrcode.min.js" th:src="@{/lib/qrcode/qrcode.min.js}"></script>
+    <!--引入waypoints插件滚动条-->
+    <script src="../static/lib/waypoints/jquery.waypoints.min.js"
+            th:src="@{/lib/waypoints/jquery.waypoints.min.js}"></script>
+    <!--*/-->
+</th:block>
 
-    <script th:inline="javascript">
+<script th:inline="javascript">
 
-        $('.menu.toggle').click(function () {
-            $('.m-item').toggleClass('m-mobile-hide');
-        });
+    $('.menu.toggle').click(function () {
+        $('.m-item').toggleClass('m-mobile-hide');
+    });
 
-        /*打赏页面显示*/
-        $('#payButton').popup({
-            popup : $('.payQR.popup'),
-            on:'click',
+    /*打赏页面显示*/
+    $('#payButton').popup({
+        popup: $('.payQR.popup'),
+        on: 'click',
 
-            position:'bottom center'
-        });
+        position: 'bottom center'
+    });
 
-        /*微信阅读*/
-        $('.wc').popup({
-            popup : $('.wc-qr'),
-            on : 'hover',
-            position : 'left center'
-        });
+    /*微信阅读*/
+    $('.wc').popup({
+        popup: $('.wc-qr'),
+        on: 'hover',
+        position: 'left center'
+    });
 
-        /*目录插件*/
-        tocbot.init({
-            /*目录显示区域的地方*/
-            tocSelector: '.js-toc',
-            /*生成目录的源在哪*/
-            contentSelector: '.js-toc-content',
-            /*生成目录的级别*/
-            headingSelector: 'h1, h2, h3',
+    /*目录插件*/
+    tocbot.init({
+        /*目录显示区域的地方*/
+        tocSelector: '.js-toc',
+        /*生成目录的源在哪*/
+        contentSelector: '.js-toc-content',
+        /*生成目录的级别*/
+        headingSelector: 'h1, h2, h3',
 
-            hasInnerContainers: true,
-        });
-        /*目录页面显示*/
-        $('#tocButton').popup({
-            popup : $('.toc-container.popup'),
-            on:'click',
-            position:'left center'
-        });
+        hasInnerContainers: true,
+    });
+    /*目录页面显示*/
+    $('#tocButton').popup({
+        popup: $('.toc-container.popup'),
+        on: 'click',
+        position: 'left center'
+    });
 
-        /*二维码生成*/
+    /*二维码生成*/
 
-        var serurl = "http://172.20.10.6:8080";
-        var url = /*[[@{/blog/{id}(id=${blog.id})}]]*/"";
-        var qrcode = new QRCode("qrcode", {
-            text: serurl+url,
-            width: 120,
-            height: 120,
-            colorDark : "#000000",
-            colorLight : "#ffffff",
-            correctLevel : QRCode.CorrectLevel.H
-        });
+    var serurl = "http://172.20.10.6:8080";
+    var url = /*[[@{/blog/{id}(id=${blog.id})}]]*/"";
+    var qrcode = new QRCode("qrcode", {
+        text: serurl + url,
+        width: 120,
+        height: 120,
+        colorDark: "#000000",
+        colorLight: "#ffffff",
+        correctLevel: QRCode.CorrectLevel.H
+    });
 
-        /*平滑滚动*/
-        $('#toTop').click(function () {
-            /*0-500毫秒*/
-            $(window).scrollTo(0,300);
-        });
+    /*平滑滚动*/
+    $('#toTop').click(function () {
+        /*0-500毫秒*/
+        $(window).scrollTo(0, 300);
+    });
 
-        /*waypoint滚动条位置设置*/
-        var waypoint = new Waypoint({
-            element: document.getElementById('waypoint'),
-            handler: function(direction) {
-                if(direction=='down'){
-                    $('#toolbar').show(300);
-                }else{
-                    $('#toolbar').hide(500);
-                }
-                console.log('Scrolled to waypoint!')
-            }
-        })
-
-        //评论表单验证
-        $('.ui.form').form({
-            fields:{
-                title:{
-                    identifier:'content',
-                    rules : [{
-                        type : 'empty',
-                        prompt:'请输入评论内容！'
-                    }]
-                },
-                content : {
-                    identifier:'nickname',
-                    rules : [{
-                        type : 'empty',
-                        prompt:'请输入你的大名！'
-                    }]
-                },
-                type : {
-                    identifier : 'email',
-                    rules : [{
-                        type: 'empty',
-                        prompt:'请输入正确的邮箱地址！'
-                    }]
-                }
-            }
-        });
-
-        //当页面加载时候需要调用请求去家在评论区的内容
-        $(function () {
-            $("#comment-container").load(/*[[@{/comments/{id}(id=${blog.id})}]]*/"comments/6");
-        });
-
-        $('#commentpost-btn').click(function () {
-            var boo = $('.ui.form').form('validate form');
-            if (boo){
-                console.log('校验成功');
-                postData();
-                //将信息提交到后台
+    /*waypoint滚动条位置设置*/
+    var waypoint = new Waypoint({
+        element: document.getElementById('waypoint'),
+        handler: function (direction) {
+            if (direction == 'down') {
+                $('#toolbar').show(300);
             } else {
-                console.log('校验失败');
+                $('#toolbar').hide(500);
             }
-        });
-        
-        function postData() {
-            $("#comment-container").load(/*[[@{/comments}]]*/"",{
-                "parentComment.id" : $("[name='parentComment.id']").val(),
-                "blog.id" : $("[name='blog.id']").val(),
-                "nickname": $("[name='nickname']").val(),
-                "email"   : $("[name='email']").val(),
-                "content" : $("[name='content']").val()
-            },function (responseTxt, statusTxt, xhr) {
-                //滚动到指定位置
-     //            $(window).scrollTo($('#comment-container'),500);
-                //清除文本域数据且更改父id
-                clearContent();
-            });
-        }
-        
-        function clearContent() {
-            $("[name='content']").val('');
-            $("[name='parentComment.id']").val('-1');
-            $("[name='content']").attr("placeholder","请输入评论信息...");
+            console.log('Scrolled to waypoint!')
         }
+    })
 
-        function reply(obj) {
-            var commentId = $(obj).data('commentid');
-            var commentNickname = $(obj).data('commentnickname');
-            $("[name='content']").attr("placeholder","@"+commentNickname).focus();
-            $("[name='parentComment.id']").val(commentId)
+    //评论表单验证
+    $('.ui.form').form({
+        fields: {
+            title: {
+                identifier: 'content',
+                rules: [{
+                    type: 'empty',
+                    prompt: '请输入评论内容！'
+                }]
+            },
+            content: {
+                identifier: 'nickname',
+                rules: [{
+                    type: 'empty',
+                    prompt: '请输入你的大名！'
+                }]
+            },
+            type: {
+                identifier: 'email',
+                rules: [{
+                    type: 'empty',
+                    prompt: '请输入正确的邮箱地址！'
+                }]
+            }
+        }
+    });
+
+    //当页面加载时候需要调用请求去家在评论区的内容
+    $(function () {
+        $("#comment-container").load(/*[[@{/comments/{id}(id=${blog.id})}]]*/"comments/6");
+    });
+
+    $('#commentpost-btn').click(function () {
+        var boo = $('.ui.form').form('validate form');
+        if (boo) {
+            console.log('校验成功');
+            postData();
+            //将信息提交到后台
+        } else {
+            console.log('校验失败');
+        }
+    });
+
+    function postData() {
+        $("#comment-container").load(/*[[@{/comments}]]*/"", {
+            "parentComment.id": $("[name='parentComment.id']").val(),
+            "blog.id": $("[name='blog.id']").val(),
+            "nickname": $("[name='nickname']").val(),
+            "email": $("[name='email']").val(),
+            "content": $("[name='content']").val()
+        }, function (responseTxt, statusTxt, xhr) {
             //滚动到指定位置
-            $(window).scrollTo($('#comment-form'),500);
-        }
+            //            $(window).scrollTo($('#comment-container'),500);
+            //清除文本域数据且更改父id
+            clearContent();
+        });
+    }
 
-    </script>
+    function clearContent() {
+        $("[name='content']").val('');
+        $("[name='parentComment.id']").val('-1');
+        $("[name='content']").attr("placeholder", "请输入评论信息...");
+    }
+
+    function reply(obj) {
+        var commentId = $(obj).data('commentid');
+        var commentNickname = $(obj).data('commentnickname');
+        $("[name='content']").attr("placeholder", "@" + commentNickname).focus();
+        $("[name='parentComment.id']").val(commentId)
+        //滚动到指定位置
+        $(window).scrollTo($('#comment-form'), 500);
+    }
+
+</script>
 </body>
 </html>

src/main/resources/templates/error/404.html

@@ -15,22 +15,22 @@
 <nav th:replace="_fragments :: menu(1)" class="ui inverted attached segment segment m-padded-tb-mini m-shadow-small">
 
 </nav>
-    <br>
-    <br>
-    <br>
-    <br>
-    <div class="m-container-small m-padded-tb-big" >
-        <div class="ui error message">
-            <div class="ui container" style="height: 400px;text-align: center;">
-                <h2>404</h2>
-                <p>对不起，你访问的资源不存在！</p>
-            </div>
+<br>
+<br>
+<br>
+<br>
+<div class="m-container-small m-padded-tb-big">
+    <div class="ui error message">
+        <div class="ui container" style="height: 400px;text-align: center;">
+            <h2>404</h2>
+            <p>对不起，你访问的资源不存在！</p>
         </div>
     </div>
-    <br>
-    <br>
-    <br>
-    <footer th:replace="_fragments :: footer" class="ui inverted vertical segment m-padded-tb-massive ">
-    </footer>
+</div>
+<br>
+<br>
+<br>
+<footer th:replace="_fragments :: footer" class="ui inverted vertical segment m-padded-tb-massive ">
+</footer>
 </body>
 </html>

src/main/resources/templates/error/500.html

@@ -19,7 +19,7 @@
 <br>
 <br>
 <br>
-<div class="m-container-small m-padded-tb-big" >
+<div class="m-container-small m-padded-tb-big">
     <div class="ui error message">
         <div class="ui container" style="height: 300px;text-align: center">
             <h2>500</h2>

src/main/resources/templates/error/error.html

@@ -11,34 +11,34 @@
     <link rel="stylesheet" href="../../static/css/me.css">
 </head>
 <body>
-    <div>
-        <div th:utext="'&lt;!--'" th:remove="tag"></div>
-        <div th:utext="'Failed Request URL : ' + ${url}" th:remove="tag"></div>
-        <div th:utext="'Exception message : ' + ${exception.message}" th:remove="tag"></div>
-        <ul th:remove="tag">
-            <li th:each="st : ${exception.stackTrace}" th:remove="tag"><span th:utext="${st}" th:remove="tag"></span></li>
-        </ul>
-        <div th:utext="'--&gt;'" th:remove="tag"></div>
-    </div>
-    <!--导航-->
-    <nav th:replace="_fragments :: menu(1)" class="ui inverted attached segment segment m-padded-tb-mini m-shadow-small">
-    </nav>
-    <br>
-    <br>
-    <br>
-    <br>
-    <div class="m-container-small m-padded-tb-big" >
-        <div class="ui error message">
-            <div class="ui container" style="height: 300px;text-align: center">
-                <h2>error</h2>
-                <p>操作过于频繁！</p>
-            </div>
+<div>
+    <div th:utext="'&lt;!--'" th:remove="tag"></div>
+    <div th:utext="'Failed Request URL : ' + ${url}" th:remove="tag"></div>
+    <div th:utext="'Exception message : ' + ${exception.message}" th:remove="tag"></div>
+    <ul th:remove="tag">
+        <li th:each="st : ${exception.stackTrace}" th:remove="tag"><span th:utext="${st}" th:remove="tag"></span></li>
+    </ul>
+    <div th:utext="'--&gt;'" th:remove="tag"></div>
+</div>
+<!--导航-->
+<nav th:replace="_fragments :: menu(1)" class="ui inverted attached segment segment m-padded-tb-mini m-shadow-small">
+</nav>
+<br>
+<br>
+<br>
+<br>
+<div class="m-container-small m-padded-tb-big">
+    <div class="ui error message">
+        <div class="ui container" style="height: 300px;text-align: center">
+            <h2>error</h2>
+            <p>操作过于频繁！</p>
         </div>
     </div>
-    <br>
-    <br>
-    <br>
-    <footer th:replace="_fragments :: footer" class="ui inverted vertical segment m-padded-tb-massive ">
-    </footer>
+</div>
+<br>
+<br>
+<br>
+<footer th:replace="_fragments :: footer" class="ui inverted vertical segment m-padded-tb-massive ">
+</footer>
 </body>
 </html>

src/main/resources/templates/index.html

@@ -4,281 +4,306 @@
     <meta charset="UTF-8">
     <!--移动端预览-->
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>首页</title>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
+    <title>浅枫沐雪</title>
+    <link rel="stylesheet"
+          href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css"
+    />
+    <!--站顶图标配置-->
+    <link rel="icon" href="../static/favicon.ico" th:href="@{/favicon.ico}"/>
     <!--引入自定义CSS-->
-    <link rel="stylesheet" href="../static/css/me.css">
+    <link rel="stylesheet" href="../static/css/me.css" th:href="@{/css/me.css}"/>
 </head>
 <body>
-    <!--导航-->
-    <nav th:replace="_fragments :: menu(1)" class="ui inverted attached segment segment m-padded-tb-mini m-shadow-small">
-    </nav>
+<!--导航-->
+<nav th:replace="_fragments :: menu(1)" class="ui inverted attached segment segment m-padded-tb-mini m-shadow-small">
+</nav>
 
-    <!--中间内容-->
-    <div class="m-container m-padded-tb-big">
-        <div class="ui container">
-            <div class="ui stackable grid">
-                <!--左边博客列表-->
-                <div class="eleven wide column">
-                    <!--header-->
-                    <div class="ui top attached segment">
-                        <div class="ui middle aligned two column grid">
-                            <dvi class="column">
-                                <h3 class="ui teal header">最近动态</h3>
-                            </dvi>
-                            <dvi class="right aligned column">
-                                共 <h2 class="ui orange header m-inline-blok m-text-thin" th:text="${page.totalElements}">14</h2>条
-                            </dvi>
-                        </div>
+<!--中间内容-->
+<div class="m-container m-padded-tb-big">
+    <div class="ui container">
+        <div class="ui stackable grid">
+            <!--左边博客列表-->
+            <div class="eleven wide column">
+                <!--header-->
+                <div class="ui top attached segment">
+                    <div class="ui middle aligned two column grid">
+                        <dvi class="column">
+                            <h3 class="ui teal header">最近动态</h3>
+                        </dvi>
+                        <dvi class="right aligned column">
+                            共 <h2 class="ui orange header m-inline-blok m-text-thin" th:text="${page.totalElements}">
+                            14</h2>条
+                        </dvi>
                     </div>
-                    <!--content-->
-                    <div class="ui attached segment">
-                        <div class="ui padded vertical segment m-padded-tb-large" th:each="blog : ${page.content}">
-                            <!--mobile reversed反序-->
-                            <div class="ui middle aligned grid mobile reversed stackable" >
-                                <div class="eleven wide column">
-                                    <h3><a href="#" th:href="@{/blog/{id}(id=${blog.id})}" target="_blank" class="m-black" th:text="${blog.title}">庐山旅行记录-江西</a></h3>
-                                    <p class="m-text" th:text="|${blog.description}.....|">庐山，又名匡山、
-                                        匡庐，位于江西省九江市庐山市境内。介于东经115°52′—116°8′，北纬29°26′—29°41′之间。东偎婺源、鄱阳湖，南靠滕王阁，西邻京九铁路大通脉，北枕滔滔长江。 </p>
-                                    <div class="ui grid">
-                                        <div class="eleven wide column">
-                                            <div class="ui mini horizontal link list">
-                                                <div class="item">
-                                                    <img src="https://picsum.photos/id/1011/100/100" alt="" class="ui avatar image" th:src="@{${blog.user.avatar}}"  >
-                                                    <div class="content"> <a href="#" th:href="@{/about}" class="header" th:text="${blog.user.nickname}">QFMX</a></div>
-                                                </div>
-                                                <div class="item">
-                                                    <i class="calendar icon"></i><span th:text="${#dates.format(blog.updateTime,'yyyy-MM-dd')}">2019-10-01</span>
-                                                </div>
-                                                <div class="item m-mobile-hide">
-                                                    <i class="eye icon"></i><span th:text="${blog.views}">7437</span>
-                                                </div>
+                </div>
+                <!--content-->
+                <div class="ui attached segment">
+                    <div class="ui padded vertical segment m-padded-tb-large" th:each="blog : ${page.content}">
+                        <!--mobile reversed反序-->
+                        <div class="ui middle aligned grid mobile reversed stackable">
+                            <div class="eleven wide column">
+                                <h3><a href="#" th:href="@{/blog/{id}(id=${blog.id})}" target="_blank" class="m-black"
+                                       th:text="${blog.title}">庐山旅行记录-江西</a></h3>
+                                <p class="m-text" th:text="|${blog.description}.....|">庐山，又名匡山、
+                                    匡庐，位于江西省九江市庐山市境内。介于东经115°52′—116°8′，北纬29°26′—29°41′之间。东偎婺源、鄱阳湖，南靠滕王阁，西邻京九铁路大通脉，北枕滔滔长江。 </p>
+                                <div class="ui grid">
+                                    <div class="eleven wide column">
+                                        <div class="ui mini horizontal link list">
+                                            <div class="item">
+                                                <img src="https://picsum.photos/id/1011/100/100" alt=""
+                                                     class="ui avatar image" th:src="@{${blog.user.avatar}}">
+                                                <div class="content"><a href="#" th:href="@{/about}" class="header"
+                                                                        th:text="${blog.user.nickname}">QFMX</a></div>
+                                            </div>
+                                            <div class="item">
+                                                <i class="calendar icon"></i><span
+                                                    th:text="${#dates.format(blog.updateTime,'yyyy-MM-dd')}">2019-10-01</span>
+                                            </div>
+                                            <div class="item m-mobile-hide">
+                                                <i class="eye icon"></i><span th:text="${blog.views}">7437</span>
                                             </div>
                                         </div>
-                                        <div class="five wide right aligned column">
-                                            <a href="#"  th:href="@{/types/{id}(id=${blog.type.id})}" target="_blank" class="ui teal basic label m-padded-tiny m-text-thin" th:text="${blog.type.name}">认知升级</a>
-                                        </div>
+                                    </div>
+                                    <div class="five wide right aligned column">
+                                        <a href="#" th:href="@{/types/{id}(id=${blog.type.id})}" target="_blank"
+                                           class="ui teal basic label m-padded-tiny m-text-thin"
+                                           th:text="${blog.type.name}">认知升级</a>
                                     </div>
                                 </div>
-                                <div class="five wide column">
-
-                                    <a href="#" th:href="@{/blog/{id}(id=${blog.id})}" target="_blank">
-                                        <img src="https://picsum.photos/id/1011/800/400" alt="" th:src="@{${blog.firstPicture}}" class="ui round image">
-                                    </a>
-                                </div>
                             </div>
-                        </div>
-                    </div>
-                    <!--footer-->
-                    <div class="ui bottom attached segment" th:if="${page.totalPages}>1">
-                        <div class="ui middle aligned two column grid">
-                            <dvi class="column">
-                                <a href="#" th:href="@{/(page=${page.number}-1)}"  th:unless="${page.first}" class="ui mini teal basic button">上一页</a>
-                            </dvi>
-                            <dvi class="right aligned column">
-                                <a href="#" th:href="@{/(page=${page.number}+1)}"  th:unless="${page.last}" class="ui mini teal basic button">下一页</a>
-                            </dvi>
+                            <div class="five wide column">
+
+                                <a href="#" th:href="@{/blog/{id}(id=${blog.id})}" target="_blank">
+                                    <img src="https://picsum.photos/id/1011/800/400" alt=""
+                                         th:src="@{${blog.firstPicture}}" class="ui round image">
+                                </a>
+                            </div>
                         </div>
                     </div>
                 </div>
-                <div class="five wide column">
-                    <!--分类-->
-                    <div class="ui segments">
-                        <div class="ui secondary segment">
-                            <div class="ui two column grid">
-                                <div class="column">
-                                    <i class="idea icon"></i>分类
-                                </div>
-                                <div class="right aligned column">
-                                    <a href="#" th:href="@{/types/-1}" target="_blank">more <i class="angle double right icon"></i></a>
-                                </div>
+                <!--footer-->
+                <div class="ui bottom attached segment" th:if="${page.totalPages}>1">
+                    <div class="ui middle aligned two column grid">
+                        <dvi class="column">
+                            <a href="#" th:href="@{/(page=${page.number}-1)}" th:unless="${page.first}"
+                               class="ui mini teal basic button">上一页</a>
+                        </dvi>
+                        <dvi class="right aligned column">
+                            <a href="#" th:href="@{/(page=${page.number}+1)}" th:unless="${page.last}"
+                               class="ui mini teal basic button">下一页</a>
+                        </dvi>
+                    </div>
+                </div>
+            </div>
+            <div class="five wide column">
+                <!--分类-->
+                <div class="ui segments">
+                    <div class="ui secondary segment">
+                        <div class="ui two column grid">
+                            <div class="column">
+                                <i class="idea icon"></i>分类
                             </div>
-                        </div>
-                        <div class="ui teal segment">
-                            <div class="ui fluid vertical menu" >
-                                <a href="#" th:href="@{/types/{id}(id=${type.id})}" class="item" th:each="type : ${types}">
-                                    <span th:text="${type.name}">学习日志</span>
-                                    <div class="ui teal basic left pointing label" th:text="${#arrays.length(type.blogs)}">10</div>
-                                </a>
-                                <!--/*-->
-                                <a href="#" class="item">
-                                    JavaEE学习
-                                    <div class="ui teal basic left pointing label">10</div>
-                                </a>
-                                <a href="#" class="item">
-                                    历史人文
-                                    <div class="ui teal basic left pointing label">10</div>
-                                </a>
-                                <a href="#" class="item">
-                                    生活
-                                    <div class="ui teal basic left pointing label">10</div>
-                                </a>
-                                <a href="#" class="item">
-                                    旅行
-                                    <div class="ui teal basic left pointing label">10</div>
-                                </a>
-                                <a href="#" class="item">
-                                    成长
-                                    <div class="ui teal basic left pointing label">10</div>
-                                </a>
-                                <!--*/-->
+                            <div class="right aligned column">
+                                <a href="#" th:href="@{/types/-1}" target="_blank">more <i
+                                        class="angle double right icon"></i></a>
                             </div>
                         </div>
                     </div>
-                    <!--标签-->
-                    <div class="ui segments m-margin-top-large">
-                        <div class="ui secondary segment">
-                            <div class="ui two column grid">
-                                <div class="column">
-                                    <i class="tags icon"></i>标签
+                    <div class="ui teal segment">
+                        <div class="ui fluid vertical menu">
+                            <a href="#" th:href="@{/types/{id}(id=${type.id})}" class="item" th:each="type : ${types}">
+                                <span th:text="${type.name}">学习日志</span>
+                                <div class="ui teal basic left pointing label" th:text="${#arrays.length(type.blogs)}">
+                                    10
                                 </div>
-                                <div class="right aligned column">
-                                    <a href="#" th:href="@{/tags/-1}" target="_blank">more <i class="angle double right icon"></i></a>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="ui teal segment">
-                            <a href="#" th:href="@{/tags/{id}(id=${tag.id})}" class="ui teal basic center pointing label" th:each="tag : ${tags}">
-                                <span th:text="${tag.name}">JavaEE</span>
-                                <div class="detail" th:text="${#arrays.length(tag.blogs)}">23</div>
                             </a>
                             <!--/*-->
-                            <a href="" class="ui teal basic center pointing label ">
-                                Spring
-                                <div class="detail">23</div>
+                            <a href="#" class="item">
+                                JavaEE学习
+                                <div class="ui teal basic left pointing label">10</div>
                             </a>
-                            <a href="" class="ui teal basic center pointing label ">
-                                SpringMVC
-                                <div class="detail">23</div>
+                            <a href="#" class="item">
+                                历史人文
+                                <div class="ui teal basic left pointing label">10</div>
                             </a>
-                            <a href="" class="ui teal basic center pointing label ">
-                                SpringBoot
-                                <div class="detail">23</div>
+                            <a href="#" class="item">
+                                生活
+                                <div class="ui teal basic left pointing label">10</div>
                             </a>
-                            <a href="" class="ui teal basic center pointing label ">
-                                JavaSE
-                                <div class="detail m-margin-tb-tiny ">23</div>
+                            <a href="#" class="item">
+                                旅行
+                                <div class="ui teal basic left pointing label">10</div>
+                            </a>
+                            <a href="#" class="item">
+                                成长
+                                <div class="ui teal basic left pointing label">10</div>
                             </a>
                             <!--*/-->
-
-                        </div>
-                    </div>
-                    <!--最新推荐-->
-                    <div class="ui segments m-margin-top-large">
-                        <div class="ui secondary segment">
-                            <i class="bookmark icon"></i>最新推荐
-                        </div>
-
-                        <div class="ui segment"  th:each="blog : ${recommendBlogs}">
-                            <a href="#" th:href="@{/blog/{id}(id=${blog.id})}" class="m-black m-text" th:text="${blog.title}">SpringBoot的原理分析..</a>
-                        </div>
-                        <!--/*-->
-                        <div class="ui segment">
-                            <a href="#" class="m-black m-text">MyBaits运行原理..</a>
-                        </div>
-                        <div class="ui segment">
-                            <a href="#" class="m-black m-text">Eclipse快捷键总结..</a>
-                        </div>
-                        <div class="ui segment">
-                            <a href="#" class="m-black m-text" >idea的基本操作和基本配置..</a>
-                        </div>
-                        <!--*/-->
-                    </div>
-                    <!--二维码-->
-                    <h4 class="ui horizontal divider header m-margin-top-large">联系博主（QQ）</h4>
-                    <div class="ui card centered" style="width: 11em">
-                        <img src="../static/images/WeChat.jpg" th:src="@{/images/QQ.png}" alt="" class="ui rounded image" >
-                    </div>
-                    <div class="ui basic segment">
-                        <a href="https://github.com/qfmx" class="ui circular icon button m-margin-left-big"><i class="github icon"></i></a>
-                        <a href="#" class="ui wc circular icon button"><i class="weixin icon"></i></a>
-                        <a href="#" class="ui circular icon button"><i class="qq icon" data-content="745719461" data-position="bottom center"></i></a>
-                        <a href="https://space.bilibili.com/424210875" class="ui circular icon button"><i class=" icon">B</i></a>
-                    </div>
-                    <!--打赏博主-->
-                    <div style="display: none">
-                        <h4 class="ui horizontal divider header m-margin-top-large">打赏博主</h4>
-                        <div class="ui segment">
-                                <div class="ui two column grid">
-                                    <div class="column">
-                                        <!--微信打赏-->
-                                        <img src="../static/images/pay_wechat.jpg" th:src="@{/images/pay_wechat.jpg}" alt="" class="ui rounded image" style="width: 100px">
-                                    </div>
-                                    <div class="right aligned column">
-                                        <!--支付宝打赏-->
-                                        <img src="../static/images/pay_baby.jpg" th:src="@{/images/pay_baby.jpg}" alt="" class="ui rounded image" style="width: 100px">
-                                    </div>
-                                </div>
-                        </div>
-                    </div>
-                    <!--友情链接-->
-                    <h4 class="ui horizontal divider header" >友情链接</h4>
-                    <div class="ui segments">
-                        <div class="ui  segment">
-                            <a href="http://www.rainss.cn">雨落凋殇</a>
                         </div>
                     </div>
                 </div>
+                <!--标签-->
+                <div class="ui segments m-margin-top-large">
+                    <div class="ui secondary segment">
+                        <div class="ui two column grid">
+                            <div class="column">
+                                <i class="tags icon"></i>标签
+                            </div>
+                            <div class="right aligned column">
+                                <a href="#" th:href="@{/tags/-1}" target="_blank">more <i
+                                        class="angle double right icon"></i></a>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="ui teal segment">
+                        <a href="#" th:href="@{/tags/{id}(id=${tag.id})}" class="ui teal basic center pointing label"
+                           th:each="tag : ${tags}">
+                            <span th:text="${tag.name}">JavaEE</span>
+                            <div class="detail" th:text="${#arrays.length(tag.blogs)}">23</div>
+                        </a>
+                        <!--/*-->
+                        <a href="" class="ui teal basic center pointing label ">
+                            Spring
+                            <div class="detail">23</div>
+                        </a>
+                        <a href="" class="ui teal basic center pointing label ">
+                            SpringMVC
+                            <div class="detail">23</div>
+                        </a>
+                        <a href="" class="ui teal basic center pointing label ">
+                            SpringBoot
+                            <div class="detail">23</div>
+                        </a>
+                        <a href="" class="ui teal basic center pointing label ">
+                            JavaSE
+                            <div class="detail m-margin-tb-tiny ">23</div>
+                        </a>
+                        <!--*/-->
 
+                    </div>
+                </div>
+                <!--最新推荐-->
+                <div class="ui segments m-margin-top-large">
+                    <div class="ui secondary segment">
+                        <i class="bookmark icon"></i>最新推荐
+                    </div>
+
+                    <div class="ui segment" th:each="blog : ${recommendBlogs}">
+                        <a href="#" th:href="@{/blog/{id}(id=${blog.id})}" class="m-black m-text"
+                           th:text="${blog.title}">SpringBoot的原理分析..</a>
+                    </div>
+                    <!--/*-->
+                    <div class="ui segment">
+                        <a href="#" class="m-black m-text">MyBaits运行原理..</a>
+                    </div>
+                    <div class="ui segment">
+                        <a href="#" class="m-black m-text">Eclipse快捷键总结..</a>
+                    </div>
+                    <div class="ui segment">
+                        <a href="#" class="m-black m-text">idea的基本操作和基本配置..</a>
+                    </div>
+                    <!--*/-->
+                </div>
+                <!--二维码-->
+                <h4 class="ui horizontal divider header m-margin-top-large">联系博主（QQ）</h4>
+                <div class="ui card centered" style="width: 11em">
+                    <img src="../static/images/WeChat.jpg" th:src="@{/images/QQ.png}" alt="" class="ui rounded image">
+                </div>
+                <div class="ui basic segment">
+                    <a href="https://github.com/qfmx" class="ui circular icon button m-margin-left-big"><i
+                            class="github icon"></i></a>
+                    <a href="#" class="ui wc circular icon button"><i class="weixin icon"></i></a>
+                    <a href="#" class="ui circular icon button"><i class="qq icon" data-content="745719461"
+                                                                   data-position="bottom center"></i></a>
+                    <a href="https://space.bilibili.com/424210875" class="ui circular icon button"><i
+                            class=" icon">B</i></a>
+                </div>
+                <!--打赏博主-->
+                <div style="display: none">
+                    <h4 class="ui horizontal divider header m-margin-top-large">打赏博主</h4>
+                    <div class="ui segment">
+                        <div class="ui two column grid">
+                            <div class="column">
+                                <!--微信打赏-->
+                                <img src="../static/images/pay_wechat.jpg" th:src="@{/images/pay_wechat.jpg}" alt=""
+                                     class="ui rounded image" style="width: 100px">
+                            </div>
+                            <div class="right aligned column">
+                                <!--支付宝打赏-->
+                                <img src="../static/images/pay_baby.jpg" th:src="@{/images/pay_baby.jpg}" alt=""
+                                     class="ui rounded image" style="width: 100px">
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <!--友情链接-->
+                <h4 class="ui horizontal divider header">友情链接</h4>
+                <div class="ui segments">
+                    <div class="ui  segment">
+                        <a href="http://www.rainss.cn">雨落凋殇</a>
+                    </div>
+                </div>
             </div>
+
         </div>
     </div>
-    <br>
-    <br>
-    <!--底部-->
-    <footer th:replace="_fragments :: footer" class="ui inverted vertical segment m-padded-tb-massive ">
-    </footer>
+</div>
+<br>
+<br>
+<!--底部-->
+<footer th:replace="_fragments :: footer" class="ui inverted vertical segment m-padded-tb-massive ">
+</footer>
 
-    <!--引入所需要的JS-->
-    <th:block th:replace="_fragments :: script">
+<!--引入所需要的JS-->
+<th:block th:replace="_fragments :: script">
 
-    </th:block>
+</th:block>
 
-    <!--引入jQuery-->
-    <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.4/semantic.min.js"></script>
+<!--引入jQuery-->
+<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.4/semantic.min.js"></script>
 
-    <!--声明行内js代码域-->
-    <script>
-        $('.menu.toggle').click(function () {
-            $('.m-item').toggleClass('m-mobile-hide');
-        });
+<!--声明行内js代码域-->
+<script>
+    $('.menu.toggle').click(function () {
+        $('.m-item').toggleClass('m-mobile-hide');
+    });
 
-        /*qq显示*/
-        $('.qq').popup();
+    /*qq显示*/
+    $('.qq').popup();
 
-        /*微信添加*/
-        $('.wc').popup({
-            popup : $('.wc-qr'),
-            on : 'hover',
-            position : 'bottom center'
-        });
+    /*微信添加*/
+    $('.wc').popup({
+        popup: $('.wc-qr'),
+        on: 'hover',
+        position: 'bottom center'
+    });
 
-    </script>
-    <!--网站2D人物-->
-    <script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>
-    <script>
-        L2Dwidget.init({
-            "model": {
-                jsonPath: "https://unpkg.com/live2d-widget-model-haruto@1.0.5/assets/haruto.model.json",
-                "scale": 1
-            },
-            "display": {
-                "position": "left",
-                "width": 150,
-                "height": 300,
-                "hOffset": 0,
-                "vOffset": -20
-            },
-            "mobile": {
-                "show": false,
-                "scale": 0.5
-            },
-            "react": {
-                "opacityDefault": 0.7,
-                "opacityOnHover": 0.2
-            }
-        });
-    </script>
+</script>
+<!--网站2D人物-->
+<script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>
+<script>
+    L2Dwidget.init({
+        "model": {
+            jsonPath: "https://unpkg.com/live2d-widget-model-haruto@1.0.5/assets/haruto.model.json",
+            "scale": 1
+        },
+        "display": {
+            "position": "left",
+            "width": 150,
+            "height": 300,
+            "hOffset": 0,
+            "vOffset": -20
+        },
+        "mobile": {
+            "show": false,
+            "scale": 0.5
+        },
+        "react": {
+            "opacityDefault": 0.7,
+            "opacityOnHover": 0.2
+        }
+    });
+</script>
 </body>
 </html>

src/main/resources/templates/search.html

@@ -11,167 +11,177 @@
     <link rel="stylesheet" href="../static/css/me.css">
 </head>
 <body>
-    <!--导航-->
-    <nav th:replace="_fragments :: menu(1)" class="ui inverted attached segment segment m-padded-tb-mini m-shadow-small">
-    </nav>
+<!--导航-->
+<nav th:replace="_fragments :: menu(1)" class="ui inverted attached segment segment m-padded-tb-mini m-shadow-small">
+</nav>
 
-    <!--中间内容-->
-    <div class="m-container-small m-padded-tb-big">
-        <!--适应移动端手机-->
-        <div class="ui container">
-            <!--header-->
-            <div class="ui top attached segment">
-                <div class="ui middle aligned two column grid">
-                    <dvi class="column">
-                        <h3 class="ui teal header">搜索结果</h3>
-                    </dvi>
-                    <dvi class="right aligned column">
-                        共 <h2 class="ui orange header m-inline-blok m-text-thin" th:text="${page.totalElements}">14</h2>个
-                    </dvi>
-                </div>
+<!--中间内容-->
+<div class="m-container-small m-padded-tb-big">
+    <!--适应移动端手机-->
+    <div class="ui container">
+        <!--header-->
+        <div class="ui top attached segment">
+            <div class="ui middle aligned two column grid">
+                <dvi class="column">
+                    <h3 class="ui teal header">搜索结果</h3>
+                </dvi>
+                <dvi class="right aligned column">
+                    共 <h2 class="ui orange header m-inline-blok m-text-thin" th:text="${page.totalElements}">14</h2>个
+                </dvi>
             </div>
-            <!--分类列表区域-->
-            <div class="ui attached segment m-padded-tb-large   " style="display: none">
-                <a href="" class="ui teal basic center pointing large label ">
-                    JavaEE
-                    <div class="detail">23</div>
-                </a>
-                <a href="" class="ui  basic center pointing large label ">
-                    Spring
-                    <div class="detail">23</div>
-                </a>
-                <a href="" class="ui  basic center pointing large label ">
-                    SpringMVC
-                    <div class="detail">23</div>
-                </a>
-                <a href="" class="ui  basic center pointing large label ">
-                    SpringBoot
-                    <div class="detail">23</div>
-                </a>
-                <a href="" class="ui  basic center pointing large label ">
-                    JavaSE
-                    <div class="detail m-margin-tb-tiny ">23</div>
-                </a>
-                <a href="" class="ui  basic center pointing large label ">
-                    Oracle
-                    <div class="detail">4</div>
-                </a>
-                <a href="" class="ui  basic center pointing large label ">
-                    MySQL
-                    <div class="detail">2</div>
-                </a>
-                <a href="" class="ui  basic center pointing large label ">
-                    Redis
-                    <div class="detail">3</div>
-                </a>
-                <a href="" class="ui  basic center pointing large label ">
-                    Dubbo
-                    <div class="detail">2</div>
-                </a>
-                <a href="" class="ui  basic center pointing large label ">
-                    JavaScript
-                    <div class="detail">23</div>
-                </a>
-                <a href="" class="ui  basic center pointing large label ">
-                    jQuery
-                    <div class="detail">23</div>
-                </a>
-            </div>
-            <!--博客列表-->
-            <div class="ui top attached teal segment">
-                <div class="ui padded vertical segment m-padded-tb-large" th:each="blog : ${page.content}">
-                    <div class="ui middle aligned grid mobile reversed stackable" >
-                        <div class="eleven wide column">
-                            <a href="#" th:href="@{/blog/{id}(id=${blog.id})}" target="_blank" class="m-black" th:text="${blog.title}">庐山旅行记录-江西</a></h3>
-                            <p class="m-text" th:text="|${blog.description}.....|">庐山，又名匡山、
-                                匡庐，位于江西省九江市庐山市境内。介于东经115°52′—116°8′，北纬29°26′—29°41′之间。东偎婺源、鄱阳湖，南靠滕王阁，西邻京九铁路大通脉，北枕滔滔长江。 </p>
-                            <div class="ui grid">
-                                <div class="eleven wide column">
-                                    <div class="ui mini horizontal link list">
-                                        <div class="item">
-                                            <img src="https://picsum.photos/id/1011/100/100" alt="" class="ui avatar image" th:src="@{${blog.user.avatar}}"  >
-                                            <div class="content"> <a href="#" class="header" th:text="${blog.user.nickname}">QFMX</a></div>
-                                        </div>
-                                        <div class="item">
-                                            <i class="calendar icon"></i><span th:text="${#dates.format(blog.updateTime,'yyyy-MM-dd')}">2019-10-01</span>
-                                        </div>
-                                        <div class="item">
-                                            <i class="eye icon"></i><span th:text="${blog.views}">7437</span>
+        </div>
+        <!--分类列表区域-->
+        <div class="ui attached segment m-padded-tb-large   " style="display: none">
+            <a href="" class="ui teal basic center pointing large label ">
+                JavaEE
+                <div class="detail">23</div>
+            </a>
+            <a href="" class="ui  basic center pointing large label ">
+                Spring
+                <div class="detail">23</div>
+            </a>
+            <a href="" class="ui  basic center pointing large label ">
+                SpringMVC
+                <div class="detail">23</div>
+            </a>
+            <a href="" class="ui  basic center pointing large label ">
+                SpringBoot
+                <div class="detail">23</div>
+            </a>
+            <a href="" class="ui  basic center pointing large label ">
+                JavaSE
+                <div class="detail m-margin-tb-tiny ">23</div>
+            </a>
+            <a href="" class="ui  basic center pointing large label ">
+                Oracle
+                <div class="detail">4</div>
+            </a>
+            <a href="" class="ui  basic center pointing large label ">
+                MySQL
+                <div class="detail">2</div>
+            </a>
+            <a href="" class="ui  basic center pointing large label ">
+                Redis
+                <div class="detail">3</div>
+            </a>
+            <a href="" class="ui  basic center pointing large label ">
+                Dubbo
+                <div class="detail">2</div>
+            </a>
+            <a href="" class="ui  basic center pointing large label ">
+                JavaScript
+                <div class="detail">23</div>
+            </a>
+            <a href="" class="ui  basic center pointing large label ">
+                jQuery
+                <div class="detail">23</div>
+            </a>
+        </div>
+        <!--博客列表-->
+        <div class="ui top attached teal segment">
+            <div class="ui padded vertical segment m-padded-tb-large" th:each="blog : ${page.content}">
+                <div class="ui middle aligned grid mobile reversed stackable">
+                    <div class="eleven wide column">
+                        <a href="#" th:href="@{/blog/{id}(id=${blog.id})}" target="_blank" class="m-black"
+                           th:text="${blog.title}">庐山旅行记录-江西</a></h3>
+                        <p class="m-text" th:text="|${blog.description}.....|">庐山，又名匡山、
+                            匡庐，位于江西省九江市庐山市境内。介于东经115°52′—116°8′，北纬29°26′—29°41′之间。东偎婺源、鄱阳湖，南靠滕王阁，西邻京九铁路大通脉，北枕滔滔长江。 </p>
+                        <div class="ui grid">
+                            <div class="eleven wide column">
+                                <div class="ui mini horizontal link list">
+                                    <div class="item">
+                                        <img src="https://picsum.photos/id/1011/100/100" alt="" class="ui avatar image"
+                                             th:src="@{${blog.user.avatar}}">
+                                        <div class="content"><a href="#" class="header" th:text="${blog.user.nickname}">QFMX</a>
                                         </div>
                                     </div>
-                                </div>
-                                <div class="five wide right aligned column">
-                                    <a href="#"  target="_blank" class="ui teal basic label m-padded-tiny m-text-thin" th:text="${blog.type.name}">认知升级</a>
+                                    <div class="item">
+                                        <i class="calendar icon"></i><span
+                                            th:text="${#dates.format(blog.updateTime,'yyyy-MM-dd')}">2019-10-01</span>
+                                    </div>
+                                    <div class="item">
+                                        <i class="eye icon"></i><span th:text="${blog.views}">7437</span>
+                                    </div>
                                 </div>
                             </div>
+                            <div class="five wide right aligned column">
+                                <a href="#" target="_blank" class="ui teal basic label m-padded-tiny m-text-thin"
+                                   th:text="${blog.type.name}">认知升级</a>
+                            </div>
                         </div>
-                        <div class="five wide column">
+                    </div>
+                    <div class="five wide column">
 
-                            <a href="#" th:href="@{/blog/{id}(id=${blog.id})}" target="_blank">
-                                <img src="https://picsum.photos/id/1011/800/400" alt="" th:src="@{${blog.firstPicture}}" class="ui round image">
-                            </a>
-                        </div>
+                        <a href="#" th:href="@{/blog/{id}(id=${blog.id})}" target="_blank">
+                            <img src="https://picsum.photos/id/1011/800/400" alt="" th:src="@{${blog.firstPicture}}"
+                                 class="ui round image">
+                        </a>
                     </div>
                 </div>
             </div>
-            <!--分页-->
-            <div class="ui bottom attached segment" th:if="${page.totalPages}>1">
-                <div class="ui middle aligned two column grid">
-                    <dvi class="column">
-                        <a href="#" th:href="@{/(page=${page.number}-1)}"  th:unless="${page.first}" class="ui mini teal basic button">上一页</a>
-                    </dvi>
-                    <dvi class="right aligned column">
-                        <a href="#" th:href="@{/(page=${page.number}+1)}"  th:unless="${page.last}" class="ui mini teal basic button">下一页</a>
-                    </dvi>
-                </div>
+        </div>
+        <!--分页-->
+        <div class="ui bottom attached segment" th:if="${page.totalPages}>1">
+            <div class="ui middle aligned two column grid">
+                <dvi class="column">
+                    <a href="#" th:href="@{/(page=${page.number}-1)}" th:unless="${page.first}"
+                       class="ui mini teal basic button">上一页</a>
+                </dvi>
+                <dvi class="right aligned column">
+                    <a href="#" th:href="@{/(page=${page.number}+1)}" th:unless="${page.last}"
+                       class="ui mini teal basic button">下一页</a>
+                </dvi>
             </div>
         </div>
     </div>
-    <br>
-    <br>
-    <!--底部-->
-    <footer th:replace="_fragments :: 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">
-                        <h4 class="ui inverted header m-opacity-min">站长微信</h4>
-                        <div class="item">
-                            <img src="../static/images/WeChat.jpg" th:src="@{/images/WeChat.jpg}" CLASS="ui rounded image" alt="" style="width:110px">
-                        </div>
+</div>
+<br>
+<br>
+<!--底部-->
+<footer th:replace="_fragments :: 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">
+                    <h4 class="ui inverted header m-opacity-min">站长微信</h4>
+                    <div class="item">
+                        <img src="../static/images/WeChat.jpg" th:src="@{/images/WeChat.jpg}" CLASS="ui rounded image"
+                             alt="" style="width:110px">
                     </div>
                 </div>
-                <div class="three wide column">
-                    <h4 class="ui inverted header m-opacity-min">最新博客</h4>
-                    <div class="ui inverted link list">
-                        <a href="#" class="item">我在等你2019年</a>
-                        <a href="#" class="item">idea的操作笔记</a>
-                        <a href="#" class="item">SpringBoot学习计划</a>
-                    </div>
-                </div>
-                <div class="three wide column">
-                    <h4 class="ui inverted header m-opacity-min">联系作者</h4>
-                    <div class="ui inverted link list">
-                        <a href="https://space.bilibili.com/393270022" class="item">b站</a>
-                        <a href="#" class="item">QQ:745719461</a>
-                        <a href="#" class="item">邮箱:qfmx520@163.com</a>
-                    </div>
-
-                </div>
-                <div class="seven wide column">
-                    <h4 class="ui inverted header m-opacity-min">关于作者</h4>
-                    <p class="m-text-thin m-text-spaced m-opacity-min m-text-lined">作者是一名springboot爱好者,是一名正在努力奋斗的学生,主要学习JavaEE开发,Web前端等技术.作者是个喜欢旅行的孩子,目标是游遍全世界！</p>
-                </div>
             </div>
-            <!--分割线-->
-            <div class="ui inverted section divider"></div>
-            <p class="m-text-thin m-text-spaced m-opacity-tiny">Copy © 2019 - 2020 作者:浅枫沐雪 此站仅供个人所有 如有疑问联系作者</p>
+            <div class="three wide column">
+                <h4 class="ui inverted header m-opacity-min">最新博客</h4>
+                <div class="ui inverted link list">
+                    <a href="#" class="item">我在等你2019年</a>
+                    <a href="#" class="item">idea的操作笔记</a>
+                    <a href="#" class="item">SpringBoot学习计划</a>
+                </div>
+            </div>
+            <div class="three wide column">
+                <h4 class="ui inverted header m-opacity-min">联系作者</h4>
+                <div class="ui inverted link list">
+                    <a href="https://space.bilibili.com/393270022" class="item">b站</a>
+                    <a href="#" class="item">QQ:745719461</a>
+                    <a href="#" class="item">邮箱:qfmx520@163.com</a>
+                </div>
+
+            </div>
+            <div class="seven wide column">
+                <h4 class="ui inverted header m-opacity-min">关于作者</h4>
+                <p class="m-text-thin m-text-spaced m-opacity-min m-text-lined">
+                    作者是一名springboot爱好者,是一名正在努力奋斗的学生,主要学习JavaEE开发,Web前端等技术.作者是个喜欢旅行的孩子,目标是游遍全世界！</p>
+            </div>
         </div>
-        <!--*/-->
-    </footer>
-    <!--引入所需要的JS-->
-    <th:block th:replace="_fragments :: script">
+        <!--分割线-->
+        <div class="ui inverted section divider"></div>
+        <p class="m-text-thin m-text-spaced m-opacity-tiny">Copy © 2019 - 2020 作者:浅枫沐雪 此站仅供个人所有 如有疑问联系作者</p>
+    </div>
+    <!--*/-->
+</footer>
+<!--引入所需要的JS-->
+<th:block th:replace="_fragments :: script">
 
     <!--声明行内js代码域-->
     <script>

src/main/resources/templates/tags.html

@@ -10,207 +10,221 @@
     <link rel="stylesheet" href="../static/css/me.css">
 </head>
 <body>
-    <!--导航-->
-    <nav th:replace="_fragments :: menu(3)" class="ui inverted attached segment segment m-padded-tb-mini m-shadow-small">
-        <!--/*-->
-        <div class="ui container">
-            <div class="ui inverted secondary stackable menu">
-                <h2 class="ui teal header item">浅枫沐雪</h2>
-                <a href="#"  class="m-item item m-mobile-hide" ><i class="small home icon"></i>首页</a>
-                <a href="#"  class="m-item item m-mobile-hide " ><i class="small idea icon"></i>分类</a>
-                <a href="#" class="m-item item m-mobile-hide"><i class="small tags icon"></i>标签</a>
-                <a href="#" class="m-item item m-mobile-hide"><i class="small clone icon"></i>归档</a>
-                <a href="#" class="m-item item m-mobile-hide"><i class="small info icon"></i>站长信息</a>
-                <div class="right m-item item m-mobile-hide">
-                    <form name="search" action="#" target="_blank" method="post">
-                        <div class="ui icon inverted  input">
-                            <input type="text" name="query" placeholder="Search....">
-                            <i class="search icon link"></i>
-                        </div>
-                    </form>
-                </div>
+<!--导航-->
+<nav th:replace="_fragments :: menu(3)" class="ui inverted attached segment segment m-padded-tb-mini m-shadow-small">
+    <!--/*-->
+    <div class="ui container">
+        <div class="ui inverted secondary stackable menu">
+            <h2 class="ui teal header item">浅枫沐雪</h2>
+            <a href="#" class="m-item item m-mobile-hide"><i class="small home icon"></i>首页</a>
+            <a href="#" class="m-item item m-mobile-hide "><i class="small idea icon"></i>分类</a>
+            <a href="#" class="m-item item m-mobile-hide"><i class="small tags icon"></i>标签</a>
+            <a href="#" class="m-item item m-mobile-hide"><i class="small clone icon"></i>归档</a>
+            <a href="#" class="m-item item m-mobile-hide"><i class="small info icon"></i>站长信息</a>
+            <div class="right m-item item m-mobile-hide">
+                <form name="search" action="#" target="_blank" method="post">
+                    <div class="ui icon inverted  input">
+                        <input type="text" name="query" placeholder="Search....">
+                        <i class="search icon link"></i>
+                    </div>
+                </form>
             </div>
-            <!--menu toggle无任何显示意思-->
-            <a href="" class="ui icon menu toggle black button m-right-top m-mobile-show">
-                <i class="sidebar icon"></i>
+        </div>
+        <!--menu toggle无任何显示意思-->
+        <a href="" class="ui icon menu toggle black button m-right-top m-mobile-show">
+            <i class="sidebar icon"></i>
+        </a>
+        <!--*/-->
+</nav>
+
+<!--中间内容-->
+<div class="m-container-small m-padded-tb-big">
+    <!--适应移动端手机-->
+    <div class="ui container">
+        <!--header-->
+        <div class="ui top attached segment">
+            <div class="ui middle aligned two column grid">
+                <dvi class="column">
+                    <h3 class="ui teal header">标签</h3>
+                </dvi>
+                <dvi class="right aligned column">
+                    共 <h2 class="ui orange header m-inline-blok m-text-thin" th:text="${#arrays.length(tags)}">14</h2>个
+                </dvi>
+            </div>
+        </div>
+        <!--分类列表区域-->
+        <div class="ui attached segment m-padded-tb-large   ">
+            <a href="#" th:href="@{/tags/{id}(id=${tag.id})}" th:classappend="${tag.id==avtiveTagId }? 'teal'"
+               class="ui  basic center pointing large label " th:each="tag : ${tags}">
+                <span th:text="${tag.name}">JavaEE</span>
+                <div class="detail" th:text="${#arrays.length(tag.blogs)}">23</div>
+            </a>
+            <!--/*-->
+            <a href="" class="ui  basic center pointing large label ">
+                Spring
+                <div class="detail">23</div>
+            </a>
+            <a href="" class="ui  basic center pointing large label ">
+                SpringMVC
+                <div class="detail">23</div>
+            </a>
+            <a href="" class="ui  basic center pointing large label ">
+                SpringBoot
+                <div class="detail">23</div>
+            </a>
+            <a href="" class="ui  basic center pointing large label ">
+                JavaSE
+                <div class="detail m-margin-tb-tiny ">23</div>
+            </a>
+            <a href="" class="ui  basic center pointing large label ">
+                Oracle
+                <div class="detail">4</div>
+            </a>
+            <a href="" class="ui  basic center pointing large label ">
+                MySQL
+                <div class="detail">2</div>
+            </a>
+            <a href="" class="ui  basic center pointing large label ">
+                Redis
+                <div class="detail">3</div>
+            </a>
+            <a href="" class="ui  basic center pointing large label ">
+                Dubbo
+                <div class="detail">2</div>
+            </a>
+            <a href="" class="ui  basic center pointing large label ">
+                JavaScript
+                <div class="detail">23</div>
+            </a>
+            <a href="" class="ui  basic center pointing large label ">
+                jQuery
+                <div class="detail">23</div>
             </a>
             <!--*/-->
-    </nav>
-
-    <!--中间内容-->
-    <div class="m-container-small m-padded-tb-big">
-        <!--适应移动端手机-->
-        <div class="ui container">
-            <!--header-->
-            <div class="ui top attached segment">
-                <div class="ui middle aligned two column grid">
-                    <dvi class="column">
-                        <h3 class="ui teal header">标签</h3>
-                    </dvi>
-                    <dvi class="right aligned column">
-                        共 <h2 class="ui orange header m-inline-blok m-text-thin" th:text="${#arrays.length(tags)}">14</h2>个
-                    </dvi>
-                </div>
-            </div>
-            <!--分类列表区域-->
-            <div class="ui attached segment m-padded-tb-large   ">
-                <a href="#" th:href="@{/tags/{id}(id=${tag.id})}"  th:classappend="${tag.id==avtiveTagId }? 'teal'"  class="ui  basic center pointing large label " th:each="tag : ${tags}">
-                    <span th:text="${tag.name}">JavaEE</span>
-                    <div class="detail" th:text="${#arrays.length(tag.blogs)}">23</div>
-                </a>
-                <!--/*-->
-                <a href="" class="ui  basic center pointing large label ">
-                    Spring
-                    <div class="detail">23</div>
-                </a>
-                <a href="" class="ui  basic center pointing large label ">
-                    SpringMVC
-                    <div class="detail">23</div>
-                </a>
-                <a href="" class="ui  basic center pointing large label ">
-                    SpringBoot
-                    <div class="detail">23</div>
-                </a>
-                <a href="" class="ui  basic center pointing large label ">
-                    JavaSE
-                    <div class="detail m-margin-tb-tiny ">23</div>
-                </a>
-                <a href="" class="ui  basic center pointing large label ">
-                    Oracle
-                    <div class="detail">4</div>
-                </a>
-                <a href="" class="ui  basic center pointing large label ">
-                    MySQL
-                    <div class="detail">2</div>
-                </a>
-                <a href="" class="ui  basic center pointing large label ">
-                    Redis
-                    <div class="detail">3</div>
-                </a>
-                <a href="" class="ui  basic center pointing large label ">
-                    Dubbo
-                    <div class="detail">2</div>
-                </a>
-                <a href="" class="ui  basic center pointing large label ">
-                    JavaScript
-                    <div class="detail">23</div>
-                </a>
-                <a href="" class="ui  basic center pointing large label ">
-                    jQuery
-                    <div class="detail">23</div>
-                </a>
-                <!--*/-->
-            </div>
-            <!--博客列表-->
-            <div class="ui top attached teal segment">
-                <div class="ui padded vertical segment m-padded-tb-large m-mobile-clear" th:each="blog : ${page.content}">
-                    <!--mobile reversed反序-->
-                    <div class="ui middle aligned grid mobile reversed stackable" >
-                        <div class="eleven wide column">
-                            <h3><a href="#" th:href="@{/blog/{id}(id=${blog.id})}" target="_blank" class="m-black" th:text="${blog.title}">庐山旅行记录-江西</a></h3>
-                            <p class="m-text" th:text="|${blog.description}.....|">庐山，又名匡山、
-                                匡庐，位于江西省九江市庐山市境内。介于东经115°52′—116°8′，北纬29°26′—29°41′之间。东偎婺源、鄱阳湖，南靠滕王阁，西邻京九铁路大通脉，北枕滔滔长江。 </p>
-                            <div class="ui grid">
-                                <div class="eleven wide column">
-                                    <div class="ui mini horizontal link list">
-                                        <div class="item">
-                                            <img src="https://picsum.photos/id/1011/100/100" alt="" class="ui avatar image" th:src="@{${blog.user.avatar}}"  >
-                                            <div class="content"> <a href="#" class="header" th:text="${blog.user.nickname}">QFMX</a></div>
-                                        </div>
-                                        <div class="item">
-                                            <i class="calendar icon"></i><span th:text="${#dates.format(blog.updateTime,'yyyy-MM-dd')}">2019-10-01</span>
-                                        </div>
-                                        <div class="item">
-                                            <i class="eye icon"></i><span th:text="${blog.views}">7437</span>
+        </div>
+        <!--博客列表-->
+        <div class="ui top attached teal segment">
+            <div class="ui padded vertical segment m-padded-tb-large m-mobile-clear" th:each="blog : ${page.content}">
+                <!--mobile reversed反序-->
+                <div class="ui middle aligned grid mobile reversed stackable">
+                    <div class="eleven wide column">
+                        <h3><a href="#" th:href="@{/blog/{id}(id=${blog.id})}" target="_blank" class="m-black"
+                               th:text="${blog.title}">庐山旅行记录-江西</a></h3>
+                        <p class="m-text" th:text="|${blog.description}.....|">庐山，又名匡山、
+                            匡庐，位于江西省九江市庐山市境内。介于东经115°52′—116°8′，北纬29°26′—29°41′之间。东偎婺源、鄱阳湖，南靠滕王阁，西邻京九铁路大通脉，北枕滔滔长江。 </p>
+                        <div class="ui grid">
+                            <div class="eleven wide column">
+                                <div class="ui mini horizontal link list">
+                                    <div class="item">
+                                        <img src="https://picsum.photos/id/1011/100/100" alt="" class="ui avatar image"
+                                             th:src="@{${blog.user.avatar}}">
+                                        <div class="content"><a href="#" class="header" th:text="${blog.user.nickname}">QFMX</a>
                                         </div>
                                     </div>
-                                </div>
-                                <div class="five wide right aligned column">
-                                    <a href="#"  target="_blank" class="ui teal basic label m-padded-tiny m-text-thin" th:text="${blog.type.name}">认知升级</a>
-                                </div>
-                                <div class="row">
-                                    <div class="column">
-                                        <a href="#" th:href="@{/tags/{id}(id=${tag.id})}" class="ui basic left pointing label m-padded-mini m-text-thin" th:classappend="${tag.id==avtiveTagId }? 'teal'"  th:each="tag : ${blog.tags}" th:text="${tag.name}">SpringBoot</a>
+                                    <div class="item">
+                                        <i class="calendar icon"></i><span
+                                            th:text="${#dates.format(blog.updateTime,'yyyy-MM-dd')}">2019-10-01</span>
+                                    </div>
+                                    <div class="item">
+                                        <i class="eye icon"></i><span th:text="${blog.views}">7437</span>
                                     </div>
                                 </div>
                             </div>
+                            <div class="five wide right aligned column">
+                                <a href="#" target="_blank" class="ui teal basic label m-padded-tiny m-text-thin"
+                                   th:text="${blog.type.name}">认知升级</a>
+                            </div>
+                            <div class="row">
+                                <div class="column">
+                                    <a href="#" th:href="@{/tags/{id}(id=${tag.id})}"
+                                       class="ui basic left pointing label m-padded-mini m-text-thin"
+                                       th:classappend="${tag.id==avtiveTagId }? 'teal'" th:each="tag : ${blog.tags}"
+                                       th:text="${tag.name}">SpringBoot</a>
+                                </div>
+                            </div>
                         </div>
-                        <div class="five wide column">
-                            <a href="#" th:href="@{/blog/{id}(id=${blog.id})}" target="_blank">
-                                <img src="https://picsum.photos/id/1011/800/400" alt="" th:src="@{${blog.firstPicture}}" class="ui round image">
-                            </a>
-                        </div>
+                    </div>
+                    <div class="five wide column">
+                        <a href="#" th:href="@{/blog/{id}(id=${blog.id})}" target="_blank">
+                            <img src="https://picsum.photos/id/1011/800/400" alt="" th:src="@{${blog.firstPicture}}"
+                                 class="ui round image">
+                        </a>
                     </div>
                 </div>
             </div>
-            <!--分页-->
-            <!--footer-->
-            <div class="ui bottom attached segment" th:if="${page.totalPages}>1">
-                <div class="ui middle aligned two column grid">
-                    <dvi class="column">
-                        <a href="#" th:href="@{/(page=${page.number}-1)}"  th:unless="${page.first}" class="ui mini teal basic button">上一页</a>
-                    </dvi>
-                    <dvi class="right aligned column">
-                        <a href="#" th:href="@{/(page=${page.number}+1)}"  th:unless="${page.last}" class="ui mini teal basic button">下一页</a>
-                    </dvi>
-                </div>
+        </div>
+        <!--分页-->
+        <!--footer-->
+        <div class="ui bottom attached segment" th:if="${page.totalPages}>1">
+            <div class="ui middle aligned two column grid">
+                <dvi class="column">
+                    <a href="#" th:href="@{/(page=${page.number}-1)}" th:unless="${page.first}"
+                       class="ui mini teal basic button">上一页</a>
+                </dvi>
+                <dvi class="right aligned column">
+                    <a href="#" th:href="@{/(page=${page.number}+1)}" th:unless="${page.last}"
+                       class="ui mini teal basic button">下一页</a>
+                </dvi>
             </div>
         </div>
     </div>
-    <br>
-    <br>
-    <!--底部-->
-    <footer th:replace="_fragments :: 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">
-                        <h4 class="ui inverted header m-opacity-min">站长微信</h4>
-                        <div class="item">
-                            <img src="../static/images/WeChat.jpg" th:src="@{/images/WeChat.jpg}" CLASS="ui rounded image" alt="" style="width:110px">
-                        </div>
+</div>
+<br>
+<br>
+<!--底部-->
+<footer th:replace="_fragments :: 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">
+                    <h4 class="ui inverted header m-opacity-min">站长微信</h4>
+                    <div class="item">
+                        <img src="../static/images/WeChat.jpg" th:src="@{/images/WeChat.jpg}" CLASS="ui rounded image"
+                             alt="" style="width:110px">
                     </div>
                 </div>
-                <div class="three wide column">
-                    <h4 class="ui inverted header m-opacity-min">最新动态</h4>
-                    <div class="ui inverted link list">
-                        <a href="#" class="item">我在等你2019年</a>
-                        <a href="#" class="item">idea的操作笔记</a>
-                        <a href="#" class="item">SpringBoot学习计划</a>
-                    </div>
-                </div>
-                <div class="three wide column">
-                    <h4 class="ui inverted header m-opacity-min">联系作者</h4>
-                    <div class="ui inverted link list">
-                        <a href="https://space.bilibili.com/393270022" class="item">b站</a>
-                        <a href="#" class="item">QQ:745719461</a>
-                        <a href="#" class="item">邮箱:qfmx520@163.com</a>
-                    </div>
-
-                </div>
-                <div class="seven wide column">
-                    <h4 class="ui inverted header m-opacity-min">关于作者</h4>
-                    <p class="m-text-thin m-text-spaced m-opacity-min m-text-lined">作者是一名springboot爱好者,是一名正在努力奋斗的学生,主要学习JavaEE开发,Web前端等技术.作者是个喜欢旅行的孩子,目标是游遍全世界！</p>
-                </div>
             </div>
-            <!--分割线-->
-            <div class="ui inverted section divider"></div>
-            <p class="m-text-thin m-text-spaced m-opacity-tiny">Copy © 2019 - 2020 作者:浅枫沐雪 此站仅供个人所有 如有疑问联系作者</p>
+            <div class="three wide column">
+                <h4 class="ui inverted header m-opacity-min">最新动态</h4>
+                <div class="ui inverted link list">
+                    <a href="#" class="item">我在等你2019年</a>
+                    <a href="#" class="item">idea的操作笔记</a>
+                    <a href="#" class="item">SpringBoot学习计划</a>
+                </div>
+            </div>
+            <div class="three wide column">
+                <h4 class="ui inverted header m-opacity-min">联系作者</h4>
+                <div class="ui inverted link list">
+                    <a href="https://space.bilibili.com/393270022" class="item">b站</a>
+                    <a href="#" class="item">QQ:745719461</a>
+                    <a href="#" class="item">邮箱:qfmx520@163.com</a>
+                </div>
+
+            </div>
+            <div class="seven wide column">
+                <h4 class="ui inverted header m-opacity-min">关于作者</h4>
+                <p class="m-text-thin m-text-spaced m-opacity-min m-text-lined">
+                    作者是一名springboot爱好者,是一名正在努力奋斗的学生,主要学习JavaEE开发,Web前端等技术.作者是个喜欢旅行的孩子,目标是游遍全世界！</p>
+            </div>
         </div>
-        <!--*/-->
-    </footer>
-    <!--引入所需要的JS-->
-    <th:block th:replace="_fragments :: script">
+        <!--分割线-->
+        <div class="ui inverted section divider"></div>
+        <p class="m-text-thin m-text-spaced m-opacity-tiny">Copy © 2019 - 2020 作者:浅枫沐雪 此站仅供个人所有 如有疑问联系作者</p>
+    </div>
+    <!--*/-->
+</footer>
+<!--引入所需要的JS-->
+<th:block th:replace="_fragments :: script">
 
-    </th:block>
+</th:block>
 
-    <!--声明行内js代码域-->
-    <script>
-        $('.menu.toggle').click(function () {
-            $('.m-item').toggleClass('m-mobile-hide');
-        });
+<!--声明行内js代码域-->
+<script>
+    $('.menu.toggle').click(function () {
+        $('.m-item').toggleClass('m-mobile-hide');
+    });
 
-    </script>
+</script>
 </body>
 </html>

src/main/resources/templates/types.html

@@ -10,297 +10,316 @@
     <link rel="stylesheet" href="../static/css/me.css">
 </head>
 <body>
-    <!--导航-->
-    <nav th:replace="_fragments :: menu(2)" class="ui inverted attached segment segment m-padded-tb-mini m-shadow-small">
-        <!--/*-->
-        <div class="ui container">
-            <div class="ui inverted secondary stackable menu">
-                <h2 class="ui teal header item">浅枫沐雪</h2>
-                <a href="#" th:href="@{/}" class="m-item item m-mobile-hide" ><i class="small home icon"></i>首页</a>
-                <a href="#" th:href="@{/types}" class="m-item item m-mobile-hide active" ><i class="small idea icon"></i>分类</a>
-                <a href="#" th:href="@{tags}" class="m-item item m-mobile-hide"  ><i class="small tags icon"></i>标签</a>
-                <a href="#" th:href="@{/archives}" class="m-item item m-mobile-hide"><i class="small clone icon"></i>归档</a>
-                <a href="#" th:href="@{/about}" class="m-item item m-mobile-hide"><i class="small info icon"></i>站长信息</a>
-                <div class="right m-item item m-mobile-hide">
-                    <form name="search" action="#" target="_blank" method="post">
-                        <div class="ui icon inverted  input">
-                            <input type="text" name="query" placeholder="Search....">
-                            <i class="search icon link"></i>
-                        </div>
-                    </form>
-                </div>
+<!--导航-->
+<nav th:replace="_fragments :: menu(2)" class="ui inverted attached segment segment m-padded-tb-mini m-shadow-small">
+    <!--/*-->
+    <div class="ui container">
+        <div class="ui inverted secondary stackable menu">
+            <h2 class="ui teal header item">浅枫沐雪</h2>
+            <a href="#" th:href="@{/}" class="m-item item m-mobile-hide"><i class="small home icon"></i>首页</a>
+            <a href="#" th:href="@{/types}" class="m-item item m-mobile-hide active"><i
+                    class="small idea icon"></i>分类</a>
+            <a href="#" th:href="@{tags}" class="m-item item m-mobile-hide"><i class="small tags icon"></i>标签</a>
+            <a href="#" th:href="@{/archives}" class="m-item item m-mobile-hide"><i class="small clone icon"></i>归档</a>
+            <a href="#" th:href="@{/about}" class="m-item item m-mobile-hide"><i class="small info icon"></i>站长信息</a>
+            <div class="right m-item item m-mobile-hide">
+                <form name="search" action="#" target="_blank" method="post">
+                    <div class="ui icon inverted  input">
+                        <input type="text" name="query" placeholder="Search....">
+                        <i class="search icon link"></i>
+                    </div>
+                </form>
             </div>
-            <!--menu toggle无任何显示意思-->
-            <a href="" class="ui icon menu toggle black button m-right-top m-mobile-show">
-                <i class="sidebar icon"></i>
-            </a>
+        </div>
+        <!--menu toggle无任何显示意思-->
+        <a href="" class="ui icon menu toggle black button m-right-top m-mobile-show">
+            <i class="sidebar icon"></i>
+        </a>
         <!--*/-->
-    </nav>
+</nav>
 
-    <!--中间内容-->
-    <div class="m-container-small m-padded-tb-big">
-        <!--适应移动端手机-->
-        <div class="ui container">
-            <!--header-->
-            <div class="ui top attached segment">
-                <div class="ui middle aligned two column grid">
-                    <dvi class="column">
-                        <h3 class="ui teal header">分类</h3>
-                    </dvi>
-                    <dvi class="right aligned column">
-                        共 <h2 class="ui orange header m-inline-blok m-text-thin" th:text="${#arrays.length(types)}">14</h2>个
-                    </dvi>
+<!--中间内容-->
+<div class="m-container-small m-padded-tb-big">
+    <!--适应移动端手机-->
+    <div class="ui container">
+        <!--header-->
+        <div class="ui top attached segment">
+            <div class="ui middle aligned two column grid">
+                <dvi class="column">
+                    <h3 class="ui teal header">分类</h3>
+                </dvi>
+                <dvi class="right aligned column">
+                    共 <h2 class="ui orange header m-inline-blok m-text-thin" th:text="${#arrays.length(types)}">14</h2>个
+                </dvi>
+            </div>
+        </div>
+        <!--分类列表区域-->
+        <div class="ui attached segment m-padded-tb-large   ">
+            <div class="ui labeled button m-margin-tb-tiny" th:each="type : ${types}">
+                <a href="#" th:href="@{/types/{id}(id=${type.id})}" class="ui basic  button"
+                   th:classappend="${type.id==avtiveTypeId }? 'teal'" th:text="${type.name}">学习日志</a>
+                <div class="ui basic left pointing label" th:classappend="${type.id==avtiveTypeId }? 'teal'"
+                     th:text="${#arrays.length(type.blogs)}">
+                    12
                 </div>
             </div>
-            <!--分类列表区域-->
-            <div class="ui attached segment m-padded-tb-large   ">
-                <div class="ui labeled button m-margin-tb-tiny" th:each="type : ${types}">
-                    <a href="#" th:href="@{/types/{id}(id=${type.id})}" class="ui basic  button" th:classappend="${type.id==avtiveTypeId }? 'teal'" th:text="${type.name}">学习日志</a>
-                    <div class="ui basic left pointing label"  th:classappend="${type.id==avtiveTypeId }? 'teal'"  th:text="${#arrays.length(type.blogs)}">
-                        12
+            <!--/*-->
+            <div class="ui labeled button m-margin-tb-tiny">
+                <a href="#" class="ui basic button">学习日志</a>
+                <div class="ui basic left pointing label">
+                    11
+                </div>
+            </div>
+            <div class="ui labeled button m-margin-tb-tiny">
+                <a href="#" class="ui basic button">学习日志</a>
+                <div class="ui basic left pointing label">
+                    23
+                </div>
+            </div>
+            <div class="ui labeled button m-margin-tb-tiny">
+                <a href="#" class="ui basic button">学习日志</a>
+                <div class="ui basic left pointing label">
+                    26
+                </div>
+            </div>
+            <div class="ui labeled button m-margin-tb-tiny">
+                <a href="#" class="ui basic button">JavaEE学习</a>
+                <div class="ui basic left pointing label">
+                    65
+                </div>
+            </div>
+            <div class="ui labeled button m-margin-tb-tiny">
+                <a href="#" class="ui basic button">历史人文</a>
+                <div class="ui basic left pointing label">
+                    24
+                </div>
+            </div>
+            <div class="ui labeled button m-margin-tb-tiny">
+                <a href="#" class="ui basic button">生活</a>
+                <div class="ui basic left pointing label">
+                    24
+                </div>
+            </div>
+            <div class="ui labeled button m-margin-tb-tiny">
+                <a href="#" class="ui basic button">旅行</a>
+                <div class="ui basic left pointing label">
+                    24
+                </div>
+            </div>
+            <!--*/-->
+        </div>
+        <!--博客列表-->
+        <div class="ui top attached teal segment">
+            <div class="ui padded vertical segment m-padded-tb-large m-mobile-clear" th:each="blog : ${page.content}">
+                <!--mobile reversed反序-->
+                <div class="ui middle aligned grid mobile reversed stackable">
+                    <div class="eleven wide column">
+                        <h3><a href="#" th:href="@{/blog/{id}(id=${blog.id})}" target="_blank" class="m-black"
+                               th:text="${blog.title}">庐山旅行记录-江西</a></h3>
+                        <p class="m-text" th:text="|${blog.description}.....|">庐山，又名匡山、
+                            匡庐，位于江西省九江市庐山市境内。介于东经115°52′—116°8′，北纬29°26′—29°41′之间。东偎婺源、鄱阳湖，南靠滕王阁，西邻京九铁路大通脉，北枕滔滔长江。 </p>
+                        <div class="ui grid">
+                            <div class="eleven wide column">
+                                <div class="ui mini horizontal link list">
+                                    <div class="item">
+                                        <img src="https://picsum.photos/id/1011/100/100" alt="" class="ui avatar image"
+                                             th:src="@{${blog.user.avatar}}">
+                                        <div class="content"><a href="#" th:href="@{/about}" target="_blank"
+                                                                class="header" th:text="${blog.user.nickname}">QFMX</a>
+                                        </div>
+                                    </div>
+                                    <div class="item">
+                                        <i class="calendar icon"></i><span
+                                            th:text="${#dates.format(blog.updateTime,'yyyy-MM-dd')}">2019-10-01</span>
+                                    </div>
+                                    <div class="item">
+                                        <i class="eye icon"></i><span th:text="${blog.views}">7437</span>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="five wide right aligned column">
+                                <a href="#" th:href="@{/types/{id}(id=${blog.type.id})}"
+                                   class="ui teal basic label m-padded-tiny m-text-thin" th:text="${blog.type.name}">认知升级</a>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="five wide column">
+                        <a href="#" th:href="@{/blog/{id}(id=${blog.id})}" target="_blank">
+                            <img src="https://picsum.photos/id/1011/800/400" alt="" th:src="@{${blog.firstPicture}}"
+                                 class="ui round image">
+                        </a>
                     </div>
                 </div>
                 <!--/*-->
-                <div class="ui labeled button m-margin-tb-tiny">
-                    <a href="#" class="ui basic button">学习日志</a>
-                    <div class="ui basic left pointing label">
-                        11
+                <div class="ui grid mobile reversed stackable">
+                    <div class="eleven wide column">
+                        <h3 class="ui header">庐山旅行记录-九江</h3>
+                        <p class="m-text">
+                            庐山，又名匡山、匡庐，位于江西省九江市庐山市境内。介于东经115°52′—116°8′，北纬29°26′—29°41′之间。东偎婺源、鄱阳湖，南靠滕王阁，西邻京九铁路大通脉，北枕滔滔长江。 </p>
+                        <div class="ui stackable grid">
+                            <div class="eleven wide column">
+                                <div class="ui mini horizontal link list">
+                                    <div class="item">
+                                        <img src="https://picsum.photos/id/1011/100/100" alt="" class="ui avatar image">
+                                        <div class="content"><a href="#" class="header">QFMX</a></div>
+                                    </div>
+                                    <div class="item">
+                                        <i class="calendar icon"></i>2019-10-01
+                                    </div>
+                                    <div class="item">
+                                        <i class="eye icon"></i>7437
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="five wide right aligned column">
+                                <a href="#" class="ui teal basic label m-padded-tiny m-text-thin">认知升级</a>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="five wide column">
+                        <a href="" target="_blank">
+                            <img src="https://picsum.photos/id/1011/800/400" alt="" class="ui round image">
+                        </a>
                     </div>
                 </div>
-                <div class="ui labeled button m-margin-tb-tiny">
-                    <a href="#" class="ui basic button">学习日志</a>
-                    <div class="ui basic left pointing label">
-                        23
+                <div class="ui grid mobile reversed stackable">
+                    <div class="eleven wide column">
+                        <h3 class="ui header">庐山旅行记录-九江</h3>
+                        <p class="m-text">
+                            庐山，又名匡山、匡庐，位于江西省九江市庐山市境内。介于东经115°52′—116°8′，北纬29°26′—29°41′之间。东偎婺源、鄱阳湖，南靠滕王阁，西邻京九铁路大通脉，北枕滔滔长江。 </p>
+                        <div class="ui stackable grid">
+                            <div class="eleven wide column">
+                                <div class="ui mini horizontal link list">
+                                    <div class="item">
+                                        <img src="https://picsum.photos/id/1011/100/100" alt="" class="ui avatar image">
+                                        <div class="content"><a href="#" class="header">QFMX</a></div>
+                                    </div>
+                                    <div class="item">
+                                        <i class="calendar icon"></i>2019-10-01
+                                    </div>
+                                    <div class="item">
+                                        <i class="eye icon"></i>7437
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="five wide right aligned column">
+                                <a href="#" target="_blank"
+                                   class="ui teal basic label m-padded-tiny m-text-thin">认知升级</a>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="five wide column">
+                        <a href="" target="_blank">
+                            <img src="https://picsum.photos/id/1011/800/400" alt="" class="ui round image">
+                        </a>
                     </div>
                 </div>
-                <div class="ui labeled button m-margin-tb-tiny">
-                    <a href="#" class="ui basic button">学习日志</a>
-                    <div class="ui basic left pointing label">
-                        26
+                <div class="ui grid mobile reversed stackable">
+                    <div class="eleven wide column">
+                        <h3 class="ui header">庐山旅行记录-九江</h3>
+                        <p class="m-text">
+                            庐山，又名匡山、匡庐，位于江西省九江市庐山市境内。介于东经115°52′—116°8′，北纬29°26′—29°41′之间。东偎婺源、鄱阳湖，南靠滕王阁，西邻京九铁路大通脉，北枕滔滔长江。 </p>
+                        <div class="ui stackable grid">
+                            <div class="eleven wide column">
+                                <div class="ui mini horizontal link list">
+                                    <div class="item">
+                                        <img src="https://picsum.photos/id/1011/100/100" alt="" class="ui avatar image">
+                                        <div class="content"><a href="#" class="header">QFMX</a></div>
+                                    </div>
+                                    <div class="item">
+                                        <i class="calendar icon"></i>2019-10-01
+                                    </div>
+                                    <div class="item">
+                                        <i class="eye icon"></i>7437
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="five wide right aligned column">
+                                <a href="#" target="_blank"
+                                   class="ui teal basic label m-padded-tiny m-text-thin">认知升级</a>
+                            </div>
+                        </div>
                     </div>
-                </div>
-                <div class="ui labeled button m-margin-tb-tiny">
-                    <a href="#" class="ui basic button">JavaEE学习</a>
-                    <div class="ui basic left pointing label">
-                        65
-                    </div>
-                </div>
-                <div class="ui labeled button m-margin-tb-tiny">
-                    <a href="#" class="ui basic button">历史人文</a>
-                    <div class="ui basic left pointing label">
-                        24
-                    </div>
-                </div>
-                <div class="ui labeled button m-margin-tb-tiny">
-                    <a href="#" class="ui basic button">生活</a>
-                    <div class="ui basic left pointing label">
-                        24
-                    </div>
-                </div>
-                <div class="ui labeled button m-margin-tb-tiny">
-                    <a href="#" class="ui basic button">旅行</a>
-                    <div class="ui basic left pointing label">
-                        24
+                    <div class="five wide column">
+                        <a href="" target="_blank">
+                            <img src="https://picsum.photos/id/1011/800/400" alt="" class="ui round image">
+                        </a>
                     </div>
                 </div>
                 <!--*/-->
             </div>
-            <!--博客列表-->
-            <div class="ui top attached teal segment">
-                <div class="ui padded vertical segment m-padded-tb-large m-mobile-clear" th:each="blog : ${page.content}">
-                    <!--mobile reversed反序-->
-                    <div class="ui middle aligned grid mobile reversed stackable" >
-                        <div class="eleven wide column">
-                            <h3><a href="#" th:href="@{/blog/{id}(id=${blog.id})}" target="_blank" class="m-black" th:text="${blog.title}">庐山旅行记录-江西</a></h3>
-                            <p class="m-text" th:text="|${blog.description}.....|">庐山，又名匡山、
-                                匡庐，位于江西省九江市庐山市境内。介于东经115°52′—116°8′，北纬29°26′—29°41′之间。东偎婺源、鄱阳湖，南靠滕王阁，西邻京九铁路大通脉，北枕滔滔长江。 </p>
-                            <div class="ui grid">
-                                <div class="eleven wide column">
-                                    <div class="ui mini horizontal link list">
-                                        <div class="item">
-                                            <img src="https://picsum.photos/id/1011/100/100" alt="" class="ui avatar image" th:src="@{${blog.user.avatar}}"  >
-                                            <div class="content"> <a href="#" th:href="@{/about}" target="_blank" class="header" th:text="${blog.user.nickname}">QFMX</a></div>
-                                        </div>
-                                        <div class="item">
-                                            <i class="calendar icon"></i><span th:text="${#dates.format(blog.updateTime,'yyyy-MM-dd')}">2019-10-01</span>
-                                        </div>
-                                        <div class="item">
-                                            <i class="eye icon"></i><span th:text="${blog.views}">7437</span>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="five wide right aligned column">
-                                    <a href="#"  th:href="@{/types/{id}(id=${blog.type.id})}"  class="ui teal basic label m-padded-tiny m-text-thin" th:text="${blog.type.name}">认知升级</a>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="five wide column">
-                            <a href="#" th:href="@{/blog/{id}(id=${blog.id})}" target="_blank">
-                                <img src="https://picsum.photos/id/1011/800/400" alt="" th:src="@{${blog.firstPicture}}" class="ui round image">
-                            </a>
-                        </div>
-                    </div>
-                    <!--/*-->
-                    <div class="ui grid mobile reversed stackable">
-                        <div class="eleven wide column">
-                            <h3 class="ui header">庐山旅行记录-九江</h3>
-                            <p class="m-text">庐山，又名匡山、匡庐，位于江西省九江市庐山市境内。介于东经115°52′—116°8′，北纬29°26′—29°41′之间。东偎婺源、鄱阳湖，南靠滕王阁，西邻京九铁路大通脉，北枕滔滔长江。 </p>
-                            <div class="ui stackable grid">
-                                <div class="eleven wide column">
-                                    <div class="ui mini horizontal link list">
-                                        <div class="item">
-                                            <img src="https://picsum.photos/id/1011/100/100" alt="" class="ui avatar image">
-                                            <div class="content"> <a href="#" class="header">QFMX</a></div>
-                                        </div>
-                                        <div class="item">
-                                            <i class="calendar icon"></i>2019-10-01
-                                        </div>
-                                        <div class="item">
-                                            <i class="eye icon"></i>7437
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="five wide right aligned column">
-                                    <a href="#" class="ui teal basic label m-padded-tiny m-text-thin">认知升级</a>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="five wide column">
-                            <a href="" target="_blank">
-                                <img src="https://picsum.photos/id/1011/800/400" alt="" class="ui round image">
-                            </a>
-                        </div>
-                    </div>
-                    <div class="ui grid mobile reversed stackable">
-                        <div class="eleven wide column">
-                            <h3 class="ui header">庐山旅行记录-九江</h3>
-                            <p class="m-text">庐山，又名匡山、匡庐，位于江西省九江市庐山市境内。介于东经115°52′—116°8′，北纬29°26′—29°41′之间。东偎婺源、鄱阳湖，南靠滕王阁，西邻京九铁路大通脉，北枕滔滔长江。 </p>
-                            <div class="ui stackable grid">
-                                <div class="eleven wide column">
-                                    <div class="ui mini horizontal link list">
-                                        <div class="item">
-                                            <img src="https://picsum.photos/id/1011/100/100" alt="" class="ui avatar image">
-                                            <div class="content"> <a href="#" class="header">QFMX</a></div>
-                                        </div>
-                                        <div class="item">
-                                            <i class="calendar icon"></i>2019-10-01
-                                        </div>
-                                        <div class="item">
-                                            <i class="eye icon"></i>7437
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="five wide right aligned column">
-                                    <a href="#"  target="_blank" class="ui teal basic label m-padded-tiny m-text-thin">认知升级</a>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="five wide column">
-                            <a href="" target="_blank">
-                                <img src="https://picsum.photos/id/1011/800/400" alt="" class="ui round image">
-                            </a>
-                        </div>
-                    </div>
-                    <div class="ui grid mobile reversed stackable">
-                        <div class="eleven wide column">
-                            <h3 class="ui header">庐山旅行记录-九江</h3>
-                            <p class="m-text">庐山，又名匡山、匡庐，位于江西省九江市庐山市境内。介于东经115°52′—116°8′，北纬29°26′—29°41′之间。东偎婺源、鄱阳湖，南靠滕王阁，西邻京九铁路大通脉，北枕滔滔长江。 </p>
-                            <div class="ui stackable grid">
-                                <div class="eleven wide column">
-                                    <div class="ui mini horizontal link list">
-                                        <div class="item">
-                                            <img src="https://picsum.photos/id/1011/100/100" alt="" class="ui avatar image">
-                                            <div class="content"> <a href="#" class="header">QFMX</a></div>
-                                        </div>
-                                        <div class="item">
-                                            <i class="calendar icon"></i>2019-10-01
-                                        </div>
-                                        <div class="item">
-                                            <i class="eye icon"></i>7437
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="five wide right aligned column">
-                                    <a href="#"  target="_blank" class="ui teal basic label m-padded-tiny m-text-thin">认知升级</a>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="five wide column">
-                            <a href="" target="_blank">
-                                <img src="https://picsum.photos/id/1011/800/400" alt="" class="ui round image">
-                            </a>
-                        </div>
-                    </div>
-                    <!--*/-->
-                </div>
-            </div>
-            <!--分页-->
-            <div class="ui bottom attached segment" th:if="${page.totalPages}>1">
-                <div class="ui middle aligned two column grid">
-                    <dvi class="column">
-                        <a href="#" th:href="@{/(page=${page.number}-1)}"  th:unless="${page.first}" class="ui mini teal basic button">上一页</a>
-                    </dvi>
-                    <dvi class="right aligned column">
-                        <a href="#" th:href="@{/(page=${page.number}+1)}"  th:unless="${page.last}" class="ui mini teal basic button">下一页</a>
-                    </dvi>
-                </div>
+        </div>
+        <!--分页-->
+        <div class="ui bottom attached segment" th:if="${page.totalPages}>1">
+            <div class="ui middle aligned two column grid">
+                <dvi class="column">
+                    <a href="#" th:href="@{/(page=${page.number}-1)}" th:unless="${page.first}"
+                       class="ui mini teal basic button">上一页</a>
+                </dvi>
+                <dvi class="right aligned column">
+                    <a href="#" th:href="@{/(page=${page.number}+1)}" th:unless="${page.last}"
+                       class="ui mini teal basic button">下一页</a>
+                </dvi>
             </div>
         </div>
     </div>
-    <br>
-    <br>
-    <!--底部-->
-    <footer th:replace="_fragments :: 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">
-                        <h4 class="ui inverted header m-opacity-min">站长微信</h4>
-                        <div class="item">
-                            <img src="../static/images/WeChat.jpg" th:src="@{/images/WeChat.jpg}" CLASS="ui rounded image" alt="" style="width:110px">
-                        </div>
+</div>
+<br>
+<br>
+<!--底部-->
+<footer th:replace="_fragments :: 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">
+                    <h4 class="ui inverted header m-opacity-min">站长微信</h4>
+                    <div class="item">
+                        <img src="../static/images/WeChat.jpg" th:src="@{/images/WeChat.jpg}" CLASS="ui rounded image"
+                             alt="" style="width:110px">
                     </div>
                 </div>
-                <div class="three wide column">
-                    <h4 class="ui inverted header m-opacity-min">最新动态</h4>
-                    <div class="ui inverted link list">
-                        <a href="#" class="item">我在等你2019年</a>
-                        <a href="#" class="item">idea的操作笔记</a>
-                        <a href="#" class="item">SpringBoot学习计划</a>
-                    </div>
-                </div>
-                <div class="three wide column">
-                    <h4 class="ui inverted header m-opacity-min">联系作者</h4>
-                    <div class="ui inverted link list">
-                        <a href="https://space.bilibili.com/393270022" class="item">b站</a>
-                        <a href="#" class="item">QQ:745719461</a>
-                        <a href="#" class="item">邮箱:qfmx520@163.com</a>
-                    </div>
-
-                </div>
-                <div class="seven wide column">
-                    <h4 class="ui inverted header m-opacity-min">关于作者</h4>
-                    <p class="m-text-thin m-text-spaced m-opacity-min m-text-lined">作者是一名springboot爱好者,是一名正在努力奋斗的学生,主要学习JavaEE开发,Web前端等技术.作者是个喜欢旅行的孩子,目标是游遍全世界！</p>
-                </div>
             </div>
-            <!--分割线-->
-            <div class="ui inverted section divider"></div>
-            <p class="m-text-thin m-text-spaced m-opacity-tiny">Copy © 2019 - 2020 作者:浅枫沐雪 此站仅供个人所有 如有疑问联系作者</p>
+            <div class="three wide column">
+                <h4 class="ui inverted header m-opacity-min">最新动态</h4>
+                <div class="ui inverted link list">
+                    <a href="#" class="item">我在等你2019年</a>
+                    <a href="#" class="item">idea的操作笔记</a>
+                    <a href="#" class="item">SpringBoot学习计划</a>
+                </div>
+            </div>
+            <div class="three wide column">
+                <h4 class="ui inverted header m-opacity-min">联系作者</h4>
+                <div class="ui inverted link list">
+                    <a href="https://space.bilibili.com/393270022" class="item">b站</a>
+                    <a href="#" class="item">QQ:745719461</a>
+                    <a href="#" class="item">邮箱:qfmx520@163.com</a>
+                </div>
+
+            </div>
+            <div class="seven wide column">
+                <h4 class="ui inverted header m-opacity-min">关于作者</h4>
+                <p class="m-text-thin m-text-spaced m-opacity-min m-text-lined">
+                    作者是一名springboot爱好者,是一名正在努力奋斗的学生,主要学习JavaEE开发,Web前端等技术.作者是个喜欢旅行的孩子,目标是游遍全世界！</p>
+            </div>
         </div>
-        <!--*/-->
-    </footer>
-    <!--引入所需要的JS-->
-    <th:block th:replace="_fragments :: script">
+        <!--分割线-->
+        <div class="ui inverted section divider"></div>
+        <p class="m-text-thin m-text-spaced m-opacity-tiny">Copy © 2019 - 2020 作者:浅枫沐雪 此站仅供个人所有 如有疑问联系作者</p>
+    </div>
+    <!--*/-->
+</footer>
+<!--引入所需要的JS-->
+<th:block th:replace="_fragments :: script">
 
-    </th:block>
+</th:block>
 
-    <!--声明行内js代码域-->
-    <script>
-        $('.menu.toggle').click(function () {
-            $('.m-item').toggleClass('m-mobile-hide');
-        });
+<!--声明行内js代码域-->
+<script>
+    $('.menu.toggle').click(function () {
+        $('.m-item').toggleClass('m-mobile-hide');
+    });
 
-    </script>
+</script>
 </body>
 </html>