yushangwl/mx-community
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

项目END

Browse Source
This commit is contained in:
josxy 2021-07-04 03:39:13 +08:00
parent a14767d48b
commit 28e7e8d97c
62 changed files with 3040 additions and 2821 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/main/java/cn/allms/MxBlogApplication.java
View File

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

129
src/main/java/cn/allms/aspect/LogAspectOld.java
View File

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

3
src/main/java/cn/allms/config/LogAspect.java
View File

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

2
src/main/java/cn/allms/config/MyConfig.java
View File

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

1
src/main/java/cn/allms/config/RandomPicturesConfig.java
View File

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

2
src/main/java/cn/allms/controller/AboutShowController.java
View File

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

88
src/main/java/cn/allms/controller/CommentController.java
View File

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

78
src/main/java/cn/allms/controller/IndexController.java
View File

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

10
src/main/java/cn/allms/controller/TagShowController.java
View File

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

10
src/main/java/cn/allms/controller/TypeShowController.java
View File

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

46
src/main/java/cn/allms/controller/admin/BlogController.java
View File

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

13
src/main/java/cn/allms/controller/admin/LoginController.java
View File

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

31
src/main/java/cn/allms/controller/admin/TagController.java
View File

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

34
src/main/java/cn/allms/controller/admin/TypeController.java
View File

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

4
src/main/java/cn/allms/dao/BlogRepository.java
View File

@ -18,13 +18,13 @@ import java.util.List;
* @version: 1.0 * @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") @Query("select b from Blog b where b.recommend = true")
List<Blog> findTop(Pageable pageable); List<Blog> findTop(Pageable pageable);
@Query("select b from Blog b where b.title like ?1 or b.content like ?1") @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 @Transactional
@Modifying @Modifying

2
src/main/java/cn/allms/dao/CommentRepository.java
View File

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

2
src/main/java/cn/allms/dao/TagRepository.java
View File

@ -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); Tag findByName(String name);

3
src/main/java/cn/allms/dao/TypeRepository.java
View File

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

3
src/main/java/cn/allms/dao/UserRepository.java
View File

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

2
src/main/java/cn/allms/exception/NotFoundException.java
View File

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

2
src/main/java/cn/allms/handler/ControllerExceptionHandler.java
View File

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

2
src/main/java/cn/allms/interceptor/LoginInterceptor.java
View File

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

21
src/main/java/cn/allms/service/BlogService.java
View File

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

2
src/main/java/cn/allms/service/CommentService.java
View File

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

7
src/main/java/cn/allms/service/TagService.java
View File

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

9
src/main/java/cn/allms/service/TypeService.java
View File

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

1
src/main/java/cn/allms/service/Userservice.java
View File

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

29
src/main/java/cn/allms/service/impl/BlogServiceImpl.java
View File

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

4
src/main/java/cn/allms/service/impl/CommentServiceImpl.java
View File

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

10
src/main/java/cn/allms/service/impl/TagServiceImpl.java
View File

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

4
src/main/java/cn/allms/service/impl/TypeServiceImpl.java
View File

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

13
src/main/java/cn/allms/util/CommentUtil.java
View File

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

7
src/main/java/cn/allms/util/MD5Utils.java
View File

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

2
src/main/java/cn/allms/util/MarkdownUtils.java
View File

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

3
src/main/java/cn/allms/util/MyBeanUtils.java
View File

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

13
src/main/resources/application-dev.yml
View File

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

3
src/main/resources/application-pro.yml
View File

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

4
src/main/resources/i18n/message.properties
View File

@ -5,14 +5,10 @@ index.type=\u5206\u7C7B
index.tag=\u6807\u7B7E index.tag=\u6807\u7B7E
index.archive=\u5F52\u6863 index.archive=\u5F52\u6863
index.aboutme=\u7AD9\u957F\u4FE1\u606F index.aboutme=\u7AD9\u957F\u4FE1\u606F
#\u5E95\u90E8\u5BFC\u822A\u680F\u4FE1\u606F #\u5E95\u90E8\u5BFC\u822A\u680F\u4FE1\u606F
index.email=\u90AE\u7BB1:qfmx520@163.com index.email=\u90AE\u7BB1:qfmx520@163.com
index.qq=QQ:745719461 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.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 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 #\u4E8C\u7EF4\u7801\u626B\u7801\u9605\u8BFB\u5730\u5740
blog.serurl=127.0.0.1:80 blog.serurl=127.0.0.1:80

6
src/main/resources/i18n/message_en_US.properties
View File

@ -5,16 +5,10 @@ index.type=Type
index.tag=Tag index.tag=Tag
index.archive=Archive index.archive=Archive
index.aboutme=About Me index.aboutme=About Me
#\u5E95\u90E8\u5BFC\u822A\u680F\u4FE1\u606F #\u5E95\u90E8\u5BFC\u822A\u680F\u4FE1\u606F
index.email=Email:qfmx520@163.com index.email=Email:qfmx520@163.com
index.qq=QQ:745719461 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.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 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 #\u4E8C\u7EF4\u7801\u626B\u7801\u9605\u8BFB\u5730\u5740
blog.serurl=172.20.10.6:8080 blog.serurl=172.20.10.6:8080

3
src/main/resources/i18n/message_zh_CN.properties
View File

@ -5,13 +5,10 @@ index.type=\u5206\u7C7B
index.tag=\u6807\u7B7E index.tag=\u6807\u7B7E
index.archive=\u5F52\u6863 index.archive=\u5F52\u6863
index.aboutme=\u7AD9\u957F\u4FE1\u606F index.aboutme=\u7AD9\u957F\u4FE1\u606F
#\u5E95\u90E8\u5BFC\u822A\u680F\u4FE1\u606F #\u5E95\u90E8\u5BFC\u822A\u680F\u4FE1\u606F
index.email=\u90AE\u7BB1:qfmx520@163.com index.email=\u90AE\u7BB1:qfmx520@163.com
index.qq=QQ:745719461 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.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 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 #\u4E8C\u7EF4\u7801\u626B\u7801\u9605\u8BFB\u5730\u5740
blog.serurl=172.20.10.6:8080 blog.serurl=172.20.10.6:8080

0
src/main/resources/logback-spring.xml → src/main/resources/logback/logback-spring.xml
View File

0
src/main/resources/favicon.ico → src/main/resources/static/favicon.ico
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.2 KiB

After

Width:  |  Height:  |  Size: 4.2 KiB

77
src/main/resources/templates/_fragments.html
View File

@ -7,7 +7,9 @@
<meta name="viewport" content="device-width, initial-scale=1.0"> <meta name="viewport" content="device-width, initial-scale=1.0">
<title th:replace="${title}">博客详情</title> <title th:replace="${title}">博客详情</title>
<!--引入semantic-ui框架--> <!--引入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--> <!--引入页面排版CSS-->
<link rel="stylesheet" href="../static/css/typo.css" th:href="@{/css/typo.css}"> <link rel="stylesheet" href="../static/css/typo.css" th:href="@{/css/typo.css}">
<!--引入动画插件CSS--> <!--引入动画插件CSS-->
@ -19,8 +21,8 @@
<!--引入自定义CSS--> <!--引入自定义CSS-->
<link rel="stylesheet" href="../static/css/me.css" th:href="@{/css/me.css}"> <link rel="stylesheet" href="../static/css/me.css" th:href="@{/css/me.css}">
<!--图标部署--> <!--图标部署-->
<link rel="shortcut icon" href="/favicon.ico" /> <link rel="shortcut icon" href="../static/favicon.ico" th:href="@{/favicon.ico}"/>
<link rel="bookmark" href="/favicon.ico" type="image/x-icon"/> <link rel="bookmark" href="../static/favicon.ico" type="image/x-icon" th:href="@{/favicon.ico}"/>
<style type="text/css"> <style type="text/css">
.m-padded-tb-massive { .m-padded-tb-massive {
padding-top: 2em !important; padding-top: 2em !important;
@ -34,11 +36,16 @@
<div class="ui container"> <div class="ui container">
<div class="ui inverted secondary stackable menu"> <div class="ui inverted secondary stackable menu">
<h2 class="ui teal header item">浅枫沐雪</h2> <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="@{/}" class="m-item item m-mobile-hide" th:classappend="${n==1}? 'active'"><i
<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> class="small home icon"></i><span th:text="#{index.home}">首页</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="@{/types/-1}" class="m-item item m-mobile-hide" th:classappend="${n==2}? 'active'"><i
<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> class="small idea icon"></i><span th:text="#{index.type}" 分类></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="@{/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"> <div class="right m-item item m-mobile-hide">
<form name="search" action="" th:action="@{/search}" target="_blank" method="post"> <form name="search" action="" th:action="@{/search}" target="_blank" method="post">
<div class="ui icon inverted input"> <div class="ui icon inverted input">
@ -58,47 +65,14 @@
<!--底部footer--> <!--底部footer-->
<footer th:fragment="footer" class="ui inverted vertical segment m-padded-tb-massive "> <footer th:fragment="footer" class="ui inverted vertical segment m-padded-tb-massive ">
<div class="ui center aligned container " style="color: #4183c4"> <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 id="yiyan" class="ui m-text-thin m-text-spaced m-opacity-tiny center aligned"
<!-- <div class="three wide column">--> style="padding-bottom: 5px"></div>
<!-- <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>-->
<p class="m-text-thin m-text-spaced m-opacity-tiny">©2021 浅枫沐雪</p> <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"> <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> </p>
<!--分割线--> <!--分割线-->
<div class="ui inverted section divider"></div> <div class="ui inverted section divider"></div>
@ -120,15 +94,16 @@
<!--引入二维码生成插件 JS--> <!--引入二维码生成插件 JS-->
<script src="../static/lib/qrcode/qrcode.min.js" th:src="@{/lib/qrcode/qrcode.min.js}"></script> <script src="../static/lib/qrcode/qrcode.min.js" th:src="@{/lib/qrcode/qrcode.min.js}"></script>
<!--引入waypoints插件滚动条--> <!--引入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> <script>
$('#newblog-container').load(/*[[@{/footer/newblog}]]*/"/footer/newblog"); $('#newblog-container').load(/*[[@{/footer/newblog}]]*/"/footer/newblog");
</script> </script>
<script > <script>
let yiyan_url = "https://v1.hitokoto.cn/?c=f&encode=text"; 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); $("#yiyan").text(data);
console.log(data);
}) })
</script> </script>
</th:block> </th:block>

260
src/main/resources/templates/about.html
View File

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

29
src/main/resources/templates/admin/_fragments.html
View File

@ -6,11 +6,12 @@
<meta name="viewport" content="device-width, initial-scale=1.0"> <meta name="viewport" content="device-width, initial-scale=1.0">
<title th:replace="${title}">博客详情</title> <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="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="stylesheet" href="../static/css/me.css" th:href="@{/css/me.css}">
<!--图标部署--> <!--图标部署-->
<link rel="shortcut icon" href="/favicon.ico" /> <link rel="shortcut icon" href="/static/favicon.ico"/>
<link rel="bookmark" href="/favicon.ico" type="image/x-icon"/> <link rel="bookmark" href="/static/favicon.ico" type="image/x-icon"/>
</head> </head>
<body> <body>
@ -18,20 +19,25 @@
<nav th:fragment="menu(n)" class="ui inverted attached segment segment m-padded-tb-mini m-shadow-small"> <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 container">
<div class="ui inverted secondary stackable menu"> <div class="ui inverted secondary stackable menu">
<h2 class="ui teal header item" >浅枫沐雪</h2> <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/blogs}" class="m-item item m-mobile-hide"
<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> th:classappend="${n==1}? 'active'"><i class="small home 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="@{/admin/types}" class="m-item item m-mobile-hide" th:classappend="${n==2}? 'active'"><i
<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> 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="right m-item m-mobile-hide menu">
<div class="ui dropdown item"> <div class="ui dropdown item">
<div class="text "> <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> <span th:text="${session.user.nickname}"></span>
</div> </div>
<i class="dropdown icon"></i> <i class="dropdown icon"></i>
<div class="menu"> <div class="menu">
<a href="#"th:href="@{/admin/logout}" class="item">注销</a> <a href="#" th:href="@{/admin/logout}" class="item">注销</a>
</div> </div>
</div> </div>
</div> </div>
@ -52,7 +58,8 @@
</div> </div>
<!--分割线--> <!--分割线-->
<div class="ui inverted section divider"></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> </div>
</footer> </footer>

528
src/main/resources/templates/admin/blogs-input.html
View File

@ -8,299 +8,321 @@
<title>后台管理-新增博客</title> <title>后台管理-新增博客</title>
<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">
<!--引入Markdown插件所需要的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--> <!--引入自定义CSS-->
<link rel="stylesheet" href="../../static/css/me.css"> <link rel="stylesheet" href="../../static/css/me.css">
</head> </head>
<body> <body>
<!--导航--> <!--导航-->
<nav th:replace="admin/_fragments :: menu(1)"class="ui inverted attached segment segment m-padded-tb-mini m-shadow-small"> <nav th:replace="admin/_fragments :: menu(1)"
<div class="ui container"> class="ui inverted attached segment segment m-padded-tb-mini m-shadow-small">
<div class="ui inverted secondary stackable menu"> <div class="ui container">
<h2 class="ui teal header item">后台管理</h2> <div class="ui inverted secondary stackable menu">
<a href="#" class="m-item active item m-mobile-hide"><i class="small home icon"></i>博客管理</a> <h2 class="ui teal header item">后台管理</h2>
<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 home 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>
<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>
<div class="right m-item m-mobile-hide menu"> <a href="#" class="m-item item m-mobile-hide"><i class="small idea icon"></i>个人信息</a>
<div class="ui dropdown item"> <div class="right m-item m-mobile-hide menu">
<div class="text "> <div class="ui dropdown item">
<img class="ui avatar image" src="https://picsum.photos/id/1011/100/100"> <div class="text ">
QFMX <img class="ui avatar image" src="https://picsum.photos/id/1011/100/100">
</div> QFMX
<i class="dropdown icon"></i> </div>
<div class="menu"> <i class="dropdown icon"></i>
<a href="#" class="item">注销</a> <div class="menu">
</div> <a href="#" class="item">注销</a>
</div> </div>
</div> </div>
</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>
<!--中间内容--> <!--menu toggle无任何显示意思-->
<div class="m-container m-padded-tb-big"> <a href="" class="ui icon menu toggle black button m-right-top m-mobile-show">
<!--适应移动端手机--> <i class="sidebar icon"></i>
<div class="ui container"> </a>
<form id="blog-form" action="#" th:object="${blog}" th:action="@{/admin/blogs}" method="post" class="ui form"> </nav>
<input type="hidden" name="id" th:value="*{id}"> <!--二级导航-->
<!--判断是状态-保存、发布....--> <div class="ui attached pointing menu">
<input type="hidden" name="published"> <div class="ui container">
<!--博客来源--> <div class="right menu">
<div class="required field"> <a href="#" th:href="@{/admin/blogs/input}" class="active teal basic item">发布</a>
<div class="ui left labeled input"> <a href="#" th:href="@{/admin/blogs}" class="item">列表</a>
<div class="ui selection compact teal basic dropdown label"> </div>
<input type="hidden" value="原创" name="flag" th:value="*{flag}" > </div>
<i class="dropdown icon"></i> </div>
<div class="text">原创</div> <!--中间内容-->
<div class="menu"> <div class="m-container m-padded-tb-big">
<div class="item" data-value="原创">原创</div> <!--适应移动端手机-->
<div class="item" data-value="转载">转载</div> <div class="ui container">
<div class="item" data-value="翻译">翻译</div> <form id="blog-form" action="#" th:object="${blog}" th:action="@{/admin/blogs}" method="post" class="ui form">
</div> <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> </div>
<input type="text" name="title" placeholder="标题" th:value="*{title}">
</div> </div>
<input type="text" name="title" placeholder="标题" th:value="*{title}">
</div> </div>
<!--文章内容--> </div>
<div class="field"> <!--文章内容-->
<div id="md-content" style="z-index: 1 !important;"> <div class="field">
<div id="md-content" style="z-index: 1 !important;">
<textarea placeholder="文章内容" name="content" style="display: none" th:text="*{content}"> <textarea placeholder="文章内容" name="content" style="display: none" th:text="*{content}">
</textarea> </textarea>
</div>
</div> </div>
<!--博客分类--> </div>
<div class="two fields"> <!--博客分类-->
<div class="field"> <div class="two fields">
<div class="ui left labeled action input"> <div class="field">
<label class="ui compact teal basic label">分类</label> <div class="ui left labeled action input">
<div class="ui fluid selection dropdown "> <label class="ui compact teal basic label">分类</label>
<input type="hidden" name="type.id" th:value="*{type}!=null ? *{type.id}"> <div class="ui fluid selection dropdown ">
<i class="dropdown icon"></i> <input type="hidden" name="type.id" th:value="*{type}!=null ? *{type.id}">
<div class="default text">分类</div> <i class="dropdown icon"></i>
<div class="menu"> <div class="default text">分类</div>
<div th:each="type : ${types}" class="item" data-value="1" th:data-value="${type.id}" th:text="${type.name}">分类1</div> <div class="menu">
<!--/*--> <div th:each="type : ${types}" class="item" data-value="1" th:data-value="${type.id}"
<div class="item" data-value="2">分类2</div> th:text="${type.name}">分类1
<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 class="item" data-value="2">分类2</div>
<div class="item" data-value="3">分類3</div>
<!--*/-->
</div> </div>
</div> </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="field">
<div class="ui left labeled input"> <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}"> <input type="text" name="firstPicture" placeholder="首图引用地址" th:value="${firstPicture}">
</div> </div>
</div> </div>
<!--博客描述文本域--> <div class="field">
<div class="required field"> <div class="ui left labeled input">
<textarea name="description" th:text="*{description}" placeholder="博客描述..." maxlength="200"></textarea> <label class="ui teal basic label">隨機首圖</label>
</div> <div class="ui toggle checkbox" style="margin: 10px">
<div class="inline fields"> <input type="checkbox" name="tyu" tabindex="0" class="hidden"/>
<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> </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> </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> </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--> <!--引入jQuery-->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<!--引入sementic-ui模板所需要的js--> <!--引入sementic-ui模板所需要的js-->
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script> <script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
<!--引入Markdown插件需要引入的js--> <!--引入Markdown插件需要引入的js-->
<script src="../../static/lib/editormd/editormd.min.js"></script> <script src="../../static/lib/editormd/editormd.min.js"></script>
<!--/*/</th:block>/*/--> <!--/*/</th:block>/*/-->
<!--声明行内js代码域--> <!--声明行内js代码域-->
<script> <script>
/*Markdown插件集成*/ /*Markdown插件集成*/
var testEditor; var testEditor;
$(function() { $(function () {
testEditor = editormd("md-content", { testEditor = editormd("md-content", {
width : "100%", width: "100%",
height : 640, height: 640,
syncScrolling : "single", syncScrolling: "single",
// path : "../../static/lib/editormd/lib/" // path : "../../static/lib/editormd/lib/"
path : "/lib/editormd/lib/" path: "/lib/editormd/lib/"
});
});
/*移动端显示导航栏设置*/
$('.menu.toggle').click(function () {
$('.m-item').toggleClass('m-mobile-hide');
});
/*导航栏用户注销显示*/
$('.ui.dropdown').dropdown({
on : 'hover'
}); });
});
/*移动端显示导航栏设置*/
$('.menu.toggle').click(function () {
$('.m-item').toggleClass('m-mobile-hide');
});
/*导航栏用户注销显示*/
$('.ui.dropdown').dropdown({
on: 'hover'
});
$('#save-btn').click(function () { $('#save-btn').click(function () {
$('[name="published"]').val(false); $('[name="published"]').val(false);
$('#blog-form').submit(); $('#blog-form').submit();
}); });
$('#publish-btn').click(function () { $('#publish-btn').click(function () {
$('[name="published"]').val(true); $('[name="published"]').val(true);
$('#blog-form').submit(); $('#blog-form').submit();
}); });
/*表单校验*/ $('.ui.checkbox').checkbox();
$('.ui.form').form({
fields:{ /*表单校验*/
title:{ $('.ui.form').form({
identifier:'title', fields: {
rules : [{ title: {
type : 'empty', identifier: 'title',
prompt:'请输入文章标题！' rules: [{
}] type: 'empty',
}, prompt: '请输入文章标题！'
content : { }]
identifier:'content', },
rules : [{ content: {
type : 'empty', identifier: 'content',
prompt:'请输入文章内容！' rules: [{
}] type: 'empty',
}, prompt: '请输入文章内容！'
typeId : { }]
identifier : 'type.id', },
rules : [{ typeId: {
type: 'empty', identifier: 'type.id',
prompt:'请选择文章分类！' rules: [{
}] type: 'empty',
}, prompt: '请选择文章分类！'
firstPicture : { }]
identifier : 'firstPicture', },
rules : [{ firstPicture: {
type: 'empty', identifier: 'firstPicture',
prompt:'请填写首图地址！' rules: [{
}] type: 'empty',
}, prompt: '请填写首图地址！'
description : { }]
identifier : 'description ', },
rules : [{ description: {
type: 'empty', identifier: 'description ',
prompt:'请填入博客描述！' rules: [{
}] type: 'empty',
} prompt: '请填入博客描述！'
} }]
}); }
</script> }
});
</script>
</body> </body>
</html> </html>

420
src/main/resources/templates/admin/blogs.html
View File

@ -11,230 +11,240 @@
<link rel="stylesheet" href="../../static/css/me.css"> <link rel="stylesheet" href="../../static/css/me.css">
</head> </head>
<body> <body>
<!--导航--> <!--导航-->
<nav th:replace="admin/_fragments :: menu(1)" class="ui inverted attached segment segment m-padded-tb-mini m-shadow-small"> <nav th:replace="admin/_fragments :: menu(1)"
<div class="ui container"> class="ui inverted attached segment segment m-padded-tb-mini m-shadow-small">
<div class="ui inverted secondary stackable menu"> <div class="ui container">
<h2 class="ui teal header item">后台管理</h2> <div class="ui inverted secondary stackable menu">
<a href="#" class="m-item active item m-mobile-hide"><i class="small home icon"></i>博客管理</a> <h2 class="ui teal header item">后台管理</h2>
<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 home 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>
<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>
<div class="right m-item m-mobile-hide menu"> <a href="#" class="m-item item m-mobile-hide"><i class="small idea icon"></i>个人信息</a>
<div class="ui dropdown item"> <div class="right m-item m-mobile-hide menu">
<div class="text "> <div class="ui dropdown item">
<img class="ui avatar image" src="https://picsum.photos/id/1011/100/100"> <div class="text ">
QFMX <img class="ui avatar image" src="https://picsum.photos/id/1011/100/100">
</div> QFMX
<i class="dropdown icon"></i> </div>
<div class="menu"> <i class="dropdown icon"></i>
<a href="#" class="item">注销</a> <div class="menu">
</div> <a href="#" class="item">注销</a>
</div> </div>
</div> </div>
</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>
<!--中间内容--> <!--menu toggle无任何显示意思-->
<div class="m-container-small m-padded-tb-big"> <a href="" class="ui icon menu toggle black button m-right-top m-mobile-show">
<!--适应移动端手机--> <i class="sidebar icon"></i>
<div class="ui container"> </a>
<!--查询表单--> </nav>
<div class="ui secondary segment form"> <!--二级导航-->
<input type="hidden" name="page"> <div class="ui attached pointing menu">
<div class="inline fields"> <div class="ui container">
<div class="field"> <div class="right menu">
<input type="text" name="title" placeholder="标题"> <a href="#" th:href="@{/admin/blogs/input}" class="item">发布</a>
</div> <a href="#" th:href="@{/admin/blogs}" class="active teal basic item">列表</a>
<div class="field"> </div>
<div class="ui labeled action input"> </div>
<div class="ui type selection dropdown"> </div>
<input type="hidden" name="typeId"> <!--中间内容-->
<i class="dropdown icon"></i> <div class="m-container-small m-padded-tb-big">
<div class="default text">分类</div> <!--适应移动端手机-->
<div class="menu"> <div class="ui container">
<div th:each="type : ${types}" class="item" data-value="1" th:data-value="${type.id}" th:text="${type.name}">旅行</div> <!--查询表单-->
<!--/*--> <div class="ui secondary segment form">
<div class="item" data-value="2">生活</div> <input type="hidden" name="page">
<div class="item" data-value="3">Spring</div> <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>
<!--/*-->
<div class="item" data-value="2">生活</div>
<div class="item" data-value="3">Spring</div>
<!--*/-->
</div> </div>
</div>
<!--清除按钮--> <!--清除按钮-->
<button id="clear-btn" class="ui compact button">clear</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> </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>
<!--博客列表--> </div>
<div id="table-container"> <!--博客列表-->
<table th:fragment="blogList" class="ui selectable compact teal table"> <div id="table-container">
<thead> <table th:fragment="blogList" class="ui selectable compact teal table">
<tr > <thead>
<th>序号</th> <tr>
<th>标题</th> <th>序号</th>
<th>类型</th> <th>标题</th>
<th >推荐</th> <th>类型</th>
<th>状态</th> <th>推荐</th>
<th>更新时间</th> <th>状态</th>
<th>操作</th> <th>更新时间</th>
</tr> <th>操作</th>
<tbody> </tr>
<tr th:each="blog,iterStat : ${page.content}"> <tbody>
<td th:text="${iterStat.count}">1</td> <tr th:each="blog,iterStat : ${page.content}">
<td th:text="${blog.title}">庐山三日游-日记</td> <td th:text="${iterStat.count}">1</td>
<td th:text="${blog.type.name}">旅行</td> <td th:text="${blog.title}">庐山三日游-日记</td>
<td th:text="${blog.recommend} ? '是' :'否'">推荐</td> <td th:text="${blog.type.name}">旅行</td>
<td th:text="${blog.published} ? '发布' :'草稿'">推荐</td> <td th:text="${blog.recommend} ? '是' :'否'">推荐</td>
<td th:text="${blog.updateTime}">2018-7-12</td> <td th:text="${blog.published} ? '发布' :'草稿'">推荐</td>
<td data-label="make"> <td th:text="${blog.updateTime}">2018-7-12</td>
<a href="#" th:href="@{/admin/blogs/{id}/input(id=${blog.id})}" class="ui m-margin-right tiny teal button">修改</a> <td data-label="make">
<a href="#" th:href="@{/admin/blogs/{id}/delete(id=${blog.id})}" class="ui m-margin-right tiny red button">删除</a> <a href="#" th:href="@{/admin/blogs/{id}/input(id=${blog.id})}"
</td> class="ui m-margin-right tiny teal button">修改</a>
</tr> <a href="#" th:href="@{/admin/blogs/{id}/delete(id=${blog.id})}"
</tbody> class="ui m-margin-right tiny red button">删除</a>
<tfoot> </td>
<!--分页组件--> </tr>
<th colspan="7"> </tbody>
<div class="ui mini pagination menu" th:if="${page.totalPages}>1" > <tfoot>
<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> <th colspan="7">
</div> <div class="ui mini pagination menu" th:if="${page.totalPages}>1">
<a href="#" th:href="@{/admin/blogs/input}" class="ui tiny orange right floated button">新增</a> <a onclick="page(this)" th:attr="data-page=${page.number}-1" class="item"
</th> th:unless="${page.first}">上一页</a>
</tfoot> <a onclick="page(this)" th:attr="data-page=${page.number}+1" class=" item"
</table> th:unless="${page.last}">下一页</a>
</div> </div>
<!--操作提示信息--> <a href="#" th:href="@{/admin/blogs/input}" class="ui tiny orange right floated button">新增</a>
<div class="ui success message" th:unless="${#strings.isEmpty(message)}"> </th>
<i class="close icon"></i> </tfoot>
<div class="header">提示：</div> </table>
<p th:text="${message}">恭喜，操作成功！</p> </div>
</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> </div>
<br> </div>
<br> <br>
<!--底部--> <br>
<footer th:replace="admin/_fragments :: footer" class="ui inverted vertical segment m-padded-tb-massive "> <!--底部-->
<div class="ui center aligned container "> <footer th:replace="admin/_fragments :: footer" class="ui inverted vertical segment m-padded-tb-massive ">
<div class="ui inverted divided stackable grid"> <div class="ui center aligned container ">
<div class="three wide column"> <div class="ui inverted divided stackable grid">
<div class="ui inverted link list"> <div class="three wide column">
<h4 class="ui inverted header m-opacity-min">站长微信</h4> <div class="ui inverted link list">
<div class="item"> <h4 class="ui inverted header m-opacity-min">站长微信</h4>
<img src="../../static/images/WeChat.jpg" CLASS="ui rounded image" alt="" style="width:110px"> <div class="item">
</div> <img src="../../static/images/WeChat.jpg" CLASS="ui rounded image" alt="" style="width:110px">
</div> </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>
<!--分割线--> <div class="three wide column">
<div class="ui inverted section divider"></div> <h4 class="ui inverted header m-opacity-min">最新博客</h4>
<p class="m-text-thin m-text-spaced m-opacity-tiny">Copy © 2019 - 2020 作者:浅枫沐雪 此站仅供个人所有 如有疑问联系作者</p> <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>
</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--> <!--引入jQuery-->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script> <script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
<!--/*/</th:block>/*/--> <!--/*/</th:block>/*/-->
<!--声明行内js代码域--> <!--声明行内js代码域-->
<script> <script>
$('.menu.toggle').click(function () { $('.menu.toggle').click(function () {
$('.m-item').toggleClass('m-mobile-hide'); $('.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({ </script>
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>
</body> </body>
</html> </html>

191
src/main/resources/templates/admin/index.html
View File

@ -11,109 +11,112 @@
<link rel="stylesheet" href="../../static/css/me.css"> <link rel="stylesheet" href="../../static/css/me.css">
</head> </head>
<body> <body>
<!--导航--> <!--导航-->
<nav th:replace="admin/_fragments :: menu(1)" class="ui inverted attached segment segment m-padded-tb-mini m-shadow-small"> <nav th:replace="admin/_fragments :: menu(1)"
<div class="ui container"> class="ui inverted attached segment segment m-padded-tb-mini m-shadow-small">
<div class="ui inverted secondary stackable menu"> <div class="ui container">
<h2 class="ui teal header item">后台管理</h2> <div class="ui inverted secondary stackable menu">
<a href="#" class="m-item active item m-mobile-hide"><i class="small home icon"></i>博客管理</a> <h2 class="ui teal header item">后台管理</h2>
<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 home 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>
<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>
<div class="right m-item m-mobile-hide menu"> <a href="#" class="m-item item m-mobile-hide"><i class="small idea icon"></i>个人信息</a>
<div class="ui dropdown item"> <div class="right m-item m-mobile-hide menu">
<div class="text "> <div class="ui dropdown item">
<img class="ui avatar image" src="https://picsum.photos/id/1011/100/100"> <div class="text ">
浅枫沐雪 <img class="ui avatar image" src="https://picsum.photos/id/1011/100/100">
</div> 浅枫沐雪
<i class="dropdown icon"></i> </div>
<div class="menu"> <i class="dropdown icon"></i>
<a href="#" class="item">注销</a> <div class="menu">
</div> <a href="#" class="item">注销</a>
</div> </div>
</div> </div>
</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> </div>
<br> <!--menu toggle无任何显示意思-->
<br> <a href="" class="ui icon menu toggle black button m-right-top m-mobile-show">
<!--底部--> <i class="sidebar icon"></i>
<footer th:replace="admin/_fragments :: footer" class="ui inverted vertical segment m-padded-tb-massive "> </a>
<div class="ui center aligned container "> </nav>
<div class="ui inverted divided stackable grid">
<div class="three wide column"> <!--二级导航-->
<div class="ui inverted link list"> <div class="ui attached pointing menu">
<h4 class="ui inverted header m-opacity-min">站长微信</h4> <div class="ui container">
<div class="item"> <div class="right menu">
<img src="../../static/images/WeChat.jpg" CLASS="ui rounded image" alt="" style="width:110px"> <a href="#" th:href="@{/admin/blogs/input}" class=" item">发布</a>
</div> <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> </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>
<!--分割线--> <div class="three wide column">
<div class="ui inverted section divider"></div> <h4 class="ui inverted header m-opacity-min">最新博客</h4>
<p class="m-text-thin m-text-spaced m-opacity-tiny">Copy © 2019 - 2020 作者:浅枫沐雪 此站仅供个人所有 如有疑问联系作者</p> <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>
</footer> <!--分割线-->
<!--/*/<th:block th:replace="admin/_fragments :: script">/*/--> <div class="ui inverted section divider"></div>
<!--引入jQuery--> <p class="m-text-thin m-text-spaced m-opacity-tiny">Copy © 2019 - 2020 作者:浅枫沐雪 此站仅供个人所有 如有疑问联系作者</p>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script> </div>
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script> </footer>
<!--/*/</th:block>/*/--> <!--/*/<th:block th:replace="admin/_fragments :: script">/*/-->
<!--声明行内js代码域--> <!--引入jQuery-->
<script> <script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
$('.menu.toggle').click(function () { <script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
$('.m-item').toggleClass('m-mobile-hide'); <!--/*/</th:block>/*/-->
}); <!--声明行内js代码域-->
<script>
$('.menu.toggle').click(function () {
$('.m-item').toggleClass('m-mobile-hide');
});
$('.ui.dropdown').dropdown({ $('.ui.dropdown').dropdown({
on:'hover' on: 'hover'
}); });
</script> </script>
</body> </body>
</html> </html>

87
src/main/resources/templates/admin/login.html
View File

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

285
src/main/resources/templates/admin/tags-input.html
View File

@ -8,163 +8,166 @@
<title>后台管理-新增标签</title> <title>后台管理-新增标签</title>
<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">
<!--引入Markdown插件所需要的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--> <!--引入自定义CSS-->
<link rel="stylesheet" href="../../static/css/me.css"> <link rel="stylesheet" href="../../static/css/me.css">
</head> </head>
<body> <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)"
<div class="ui container"> class="ui inverted attached segment segment m-padded-tb-mini m-shadow-small">
<div class="ui inverted secondary stackable menu"> <div class="ui container">
<h2 class="ui teal header item">后台管理</h2> <div class="ui inverted secondary stackable menu">
<a href="#" class="m-item active item m-mobile-hide"><i class="small home icon"></i>博客管理</a> <h2 class="ui teal header item">后台管理</h2>
<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 home 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>
<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>
<div class="right m-item m-mobile-hide menu"> <a href="#" class="m-item item m-mobile-hide"><i class="small idea icon"></i>个人信息</a>
<div class="ui dropdown item"> <div class="right m-item m-mobile-hide menu">
<div class="text "> <div class="ui dropdown item">
<img class="ui avatar image" src="https://picsum.photos/id/1011/100/100"> <div class="text ">
QFMX <img class="ui avatar image" src="https://picsum.photos/id/1011/100/100">
</div> QFMX
<i class="dropdown icon"></i> </div>
<div class="menu"> <i class="dropdown icon"></i>
<a href="#" class="item">注销</a> <div class="menu">
</div> <a href="#" class="item">注销</a>
</div> </div>
</div> </div>
</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> </div>
<br/> <!--menu toggle无任何显示意思-->
<br/> <a href="" class="ui icon menu toggle black button m-right-top m-mobile-show">
<br/> <i class="sidebar icon"></i>
<!--中间内容--> </a>
<div class="m-container-small m-padded-tb-big"> </nav>
<!--适应移动端手机--> <!--二级导航-->
<div class="ui container"> <div class="ui attached pointing menu">
<form action="#" method="post" th:object="${tag}" th:action="*{id}==null ? @{/admin/tags} : @{/admin/tags/{id}(id=*{id})} " class="ui form"> <div class="ui container">
<div class="required field"> <div class="right menu">
<input type="hidden" name="id" th:value="*{id}"> <a href="#" th:href="@{/admin/tags/input}" class=" active teal basic item">新增</a>
<div class="ui left labeled input"> <a href="" th:href="@{/admin/tags}" class=" item">列表</a>
<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>
</div> </div>
</div> </div>
<br> </div>
<br/> <br/>
<br/> <br/>
<br/> <br/>
<br/> <!--中间内容-->
<br> <div class="m-container-small m-padded-tb-big">
<!--底部--> <!--适应移动端手机-->
<footer th:replace="admin/_fragments :: footer" class="ui inverted vertical segment m-padded-tb-massive "> <div class="ui container">
<div class="ui center aligned container "> <form action="#" method="post" th:object="${tag}"
<div class="ui inverted divided stackable grid"> th:action="*{id}==null ? @{/admin/tags} : @{/admin/tags/{id}(id=*{id})} " class="ui form">
<div class="three wide column"> <div class="required field">
<div class="ui inverted link list"> <input type="hidden" name="id" th:value="*{id}">
<h4 class="ui inverted header m-opacity-min">站长微信</h4> <div class="ui left labeled input">
<div class="item"> <label class="ui teal basic label">名称</label>
<img src="../../static/images/WeChat.jpg" CLASS="ui rounded image" alt="" style="width:110px"> <input type="text" name="name" placeholder="标签名称" th:value="*{name}">
</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> </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> </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--> <!--引入jQuery-->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<!--引入sementic-ui模板所需要的js--> <!--引入sementic-ui模板所需要的js-->
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script> <script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
<!--引入Markdown插件需要引入的js--> <!--引入Markdown插件需要引入的js-->
<script src="../../static/lib/editormd/editormd.min.js"></script> <script src="../../static/lib/editormd/editormd.min.js"></script>
<!--/*/</th:block>/*/--> <!--/*/</th:block>/*/-->
<!--声明行内js代码域--> <!--声明行内js代码域-->
<script> <script>
/*移动端显示导航栏设置*/ /*移动端显示导航栏设置*/
$('.menu.toggle').click(function () { $('.menu.toggle').click(function () {
$('.m-item').toggleClass('m-mobile-hide'); $('.m-item').toggleClass('m-mobile-hide');
}); });
/*导航栏用户注销显示*/ /*导航栏用户注销显示*/
$('.ui.dropdown').dropdown({ $('.ui.dropdown').dropdown({
on:'hover' on: 'hover'
}); });
/*表单校验*/ /*表单校验*/
$('.ui.form').form({ $('.ui.form').form({
fields:{ fields: {
title:{ title: {
identifier:'name', identifier: 'name',
rules : [{ rules: [{
type : 'empty', type: 'empty',
prompt:'请输入标签名称！' prompt: '请输入标签名称！'
}] }]
}
} }
}); }
</script> });
</script>
</body> </body>
</html> </html>

24
src/main/resources/templates/admin/tags.html
View File

@ -12,14 +12,15 @@
</head> </head>
<body> <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 container">
<div class="ui inverted secondary stackable menu"> <div class="ui inverted secondary stackable menu">
<h2 class="ui teal header item">后台管理</h2> <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 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 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 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 item m-mobile-hide"><i class="small idea icon"></i>个人信息</a>
<div class="right m-item m-mobile-hide menu"> <div class="right m-item m-mobile-hide menu">
<div class="ui dropdown item"> <div class="ui dropdown item">
<div class="text "> <div class="text ">
@ -44,7 +45,7 @@
<div class="ui container"> <div class="ui container">
<div class="right menu"> <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> <a href="" th:href="@{/admin/tags}" class="active teal basic item">列表</a>
</div> </div>
</div> </div>
@ -63,7 +64,7 @@
<table class="ui selectable compact teal table"> <table class="ui selectable compact teal table">
<thead> <thead>
<tr> <tr>
<th >标签编号</th> <th>标签编号</th>
<th>名称</th> <th>名称</th>
<th>操作</th> <th>操作</th>
</tr> </tr>
@ -73,8 +74,10 @@
<td th:text="${iterStat.count}">1</td> <td th:text="${iterStat.count}">1</td>
<td data-label="name" th:text="${tag.name}">学习</td> <td data-label="name" th:text="${tag.name}">学习</td>
<td data-label="right make"> <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}/input(id=${tag.id})}"
<a href="#" th:href="@{/admin/tags/{id}/delete(id=${tag.id})}" class="ui m-margin-right tiny red button">删除</a> 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> </td>
</tr> </tr>
@ -97,7 +100,7 @@
<br> <br>
<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 center aligned container ">
<div class="ui inverted divided stackable grid"> <div class="ui inverted divided stackable grid">
<div class="three wide column"> <div class="three wide column">
@ -126,7 +129,8 @@
</div> </div>
<div class="seven wide column"> <div class="seven wide column">
<h4 class="ui inverted header m-opacity-min">关于作者</h4> <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>
</div> </div>
<!--分割线--> <!--分割线-->
@ -148,7 +152,7 @@
}); });
$('.ui.dropdown').dropdown({ $('.ui.dropdown').dropdown({
on:'hover' on: 'hover'
}); });
//消息提示关闭初始化 //消息提示关闭初始化

287
src/main/resources/templates/admin/types-input.html
View File

@ -8,162 +8,165 @@
<title>后台管理-新增分类</title> <title>后台管理-新增分类</title>
<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">
<!--引入Markdown插件所需要的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--> <!--引入自定义CSS-->
<link rel="stylesheet" href="../../static/css/me.css"> <link rel="stylesheet" href="../../static/css/me.css">
</head> </head>
<body> <body>
<!--导航--> <!--导航-->
<nav th:replace="admin/_fragments :: menu(2)" class="ui inverted attached segment segment m-padded-tb-mini m-shadow-small"> <nav th:replace="admin/_fragments :: menu(2)"
<div class="ui container"> class="ui inverted attached segment segment m-padded-tb-mini m-shadow-small">
<div class="ui inverted secondary stackable menu"> <div class="ui container">
<h2 class="ui teal header item">后台管理</h2> <div class="ui inverted secondary stackable menu">
<a href="#" class="m-item active item m-mobile-hide"><i class="small home icon"></i>博客管理</a> <h2 class="ui teal header item">后台管理</h2>
<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 home 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>
<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>
<div class="right m-item m-mobile-hide menu"> <a href="#" class="m-item item m-mobile-hide"><i class="small idea icon"></i>个人信息</a>
<div class="ui dropdown item"> <div class="right m-item m-mobile-hide menu">
<div class="text "> <div class="ui dropdown item">
<img class="ui avatar image" src="https://picsum.photos/id/1011/100/100"> <div class="text ">
QFMX <img class="ui avatar image" src="https://picsum.photos/id/1011/100/100">
</div> QFMX
<i class="dropdown icon"></i> </div>
<div class="menu"> <i class="dropdown icon"></i>
<a href="#" class="item">注销</a> <div class="menu">
</div> <a href="#" class="item">注销</a>
</div> </div>
</div> </div>
</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> </div>
<br/> <!--menu toggle无任何显示意思-->
<br/> <a href="" class="ui icon menu toggle black button m-right-top m-mobile-show">
<br/> <i class="sidebar icon"></i>
<!--中间内容--> </a>
<div class="m-container-small m-padded-tb-big"> </nav>
<!--适应移动端手机--> <!--二级导航-->
<div class="ui container"> <div class="ui attached pointing menu">
<form action="#" method="post" th:object="${type}" th:action="*{id}==null ? @{/admin/types} : @{/admin/types/{id}(id=*{id})} " class="ui form"> <div class="ui container">
<div class="required field"> <div class="right menu">
<input type="hidden" name="id" th:value="*{id}"> <a href="#" th:href="@{/admin/types/input}" class=" active teal basic item">新增</a>
<div class="ui left labeled input"> <a href="" th:href="@{/admin/types}" class=" item">列表</a>
<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>
</div> </div>
</div> </div>
<br> </div>
<br/> <br/>
<br/> <br/>
<br/> <br/>
<br/> <!--中间内容-->
<br> <div class="m-container-small m-padded-tb-big">
<!--底部--> <!--适应移动端手机-->
<footer th:replace="admin/_fragments :: footer" class="ui inverted vertical segment m-padded-tb-massive "> <div class="ui container">
<div class="ui center aligned container "> <form action="#" method="post" th:object="${type}"
<div class="ui inverted divided stackable grid"> th:action="*{id}==null ? @{/admin/types} : @{/admin/types/{id}(id=*{id})} " class="ui form">
<div class="three wide column"> <div class="required field">
<div class="ui inverted link list"> <input type="hidden" name="id" th:value="*{id}">
<h4 class="ui inverted header m-opacity-min">站长微信</h4> <div class="ui left labeled input">
<div class="item"> <label class="ui teal basic label">名称</label>
<img src="../../static/images/WeChat.jpg" CLASS="ui rounded image" alt="" style="width:110px"> <input type="text" name="name" placeholder="分类名称" th:value="*{name}">
</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> </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>
</footer>
<!--/*/<th:block th:replace="admin/_fragments :: script">/*/--> </div>
<!--引入jQuery--> <!--/*/
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script> <div class="ui negative message" th:if="${#fields.hasErrors('name')}" >
<!--引入sementic-ui模板所需要的js--> <i class="close icon"></i>
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script> <div class="header">验证失败</div>
<!--引入Markdown插件需要引入的js--> <p th:errors="*{name}">提交信息不符合规则</p>
<script src="../../static/lib/editormd/editormd.min.js"></script> </div>
<!--/*/</th:block>/*/--> /*/-->
<!--声明行内js代码域-->
<script> <!--返回、提交-->
/*移动端显示导航栏设置*/ <div class="ui right aligned container">
$('.menu.toggle').click(function () { <!--onclick="window.history.go(-1)返回上一页面-->
$('.m-item').toggleClass('m-mobile-hide'); <button type="button" class="ui button" onclick="window.history.go(-1)">返回</button>
});
/*导航栏用户注销显示*/ <button class="ui teal submit button">提交</button>
$('.ui.dropdown').dropdown({ </div>
on:'hover'
}); </form>
/*表单校验*/ </div>
$('.ui.form').form({ </div>
fields:{ <br>
title:{ <br/>
identifier:'name', <br/>
rules : [{ <br/>
type : 'empty', <br/>
prompt:'请输入分类名称！' <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> </body>
</html> </html>

274
src/main/resources/templates/admin/types.html
View File

@ -11,153 +11,157 @@
<link rel="stylesheet" href="../../static/css/me.css"> <link rel="stylesheet" href="../../static/css/me.css">
</head> </head>
<body> <body>
<!--导航--> <!--导航-->
<nav th:replace="admin/_fragments :: menu(2)" class="ui inverted attached segment segment m-padded-tb-mini m-shadow-small"> <nav th:replace="admin/_fragments :: menu(2)"
<div class="ui container"> class="ui inverted attached segment segment m-padded-tb-mini m-shadow-small">
<div class="ui inverted secondary stackable menu"> <div class="ui container">
<h2 class="ui teal header item">后台管理</h2> <div class="ui inverted secondary stackable menu">
<a href="#" class="m-item active item m-mobile-hide"><i class="small home icon"></i>博客管理</a> <h2 class="ui teal header item">后台管理</h2>
<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 home 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>
<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>
<div class="right m-item m-mobile-hide menu"> <a href="#" class="m-item item m-mobile-hide"><i class="small idea icon"></i>个人信息</a>
<div class="ui dropdown item"> <div class="right m-item m-mobile-hide menu">
<div class="text "> <div class="ui dropdown item">
<img class="ui avatar image" src="https://picsum.photos/id/1011/100/100"> <div class="text ">
QFMX <img class="ui avatar image" src="https://picsum.photos/id/1011/100/100">
</div> QFMX
<i class="dropdown icon"></i> </div>
<div class="menu"> <i class="dropdown icon"></i>
<a href="#" class="item">注销</a> <div class="menu">
</div> <a href="#" class="item">注销</a>
</div> </div>
</div> </div>
</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> </div>
<br> <!--menu toggle无任何显示意思-->
<br> <a href="" class="ui icon menu toggle black button m-right-top m-mobile-show">
<!--底部--> <i class="sidebar icon"></i>
<footer th:replace="admin/_fragments :: footer" class="ui inverted vertical segment m-padded-tb-massive "> </a>
<div class="ui center aligned container "> </nav>
<div class="ui inverted divided stackable grid"> <!--二级导航-->
<div class="three wide column"> <div class="ui attached pointing menu">
<div class="ui inverted link list"> <div class="ui container">
<h4 class="ui inverted header m-opacity-min">站长微信</h4>
<div class="item"> <div class="right menu">
<img src="../../static/images/WeChat.jpg" CLASS="ui rounded image" alt="" style="width:110px"> <a href="#" th:href="@{/admin/types/input}" class="item">新增</a>
</div> <a href="" th:href="@{/admin/types}" class="active teal basic item">列表</a>
</div> </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>
<div class="three wide column"> <a href="#" th:href="@{/admin/types/input}" class="ui tiny orange right floated button">新增</a>
<h4 class="ui inverted header m-opacity-min">最新博客</h4> </th>
<div class="ui inverted link list"> </tfoot>
<a href="#" class="item">2019一年收获总结</a> </table>
<a href="#" class="item">idea的操作笔记</a> </div>
<a href="#" class="item">SpringBoot学习计划</a> </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>
<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>
<!--分割线--> <div class="three wide column">
<div class="ui inverted section divider"></div> <h4 class="ui inverted header m-opacity-min">最新博客</h4>
<p class="m-text-thin m-text-spaced m-opacity-tiny">Copy © 2019 - 2020 作者:浅枫沐雪 此站仅供个人所有 如有疑问联系作者</p> <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>
</footer> <!--分割线-->
<!--/*/<th:block th:replace="admin/_fragments :: script">/*/--> <div class="ui inverted section divider"></div>
<!--引入jQuery--> <p class="m-text-thin m-text-spaced m-opacity-tiny">Copy © 2019 - 2020 作者:浅枫沐雪 此站仅供个人所有 如有疑问联系作者</p>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script> </div>
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script> </footer>
<!--/*/</th:block>/*/--> <!--/*/<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代码域--> <!--声明行内js代码域-->
<script> <script>
$('.menu.toggle').click(function () { $('.menu.toggle').click(function () {
$('.m-item').toggleClass('m-mobile-hide'); $('.m-item').toggleClass('m-mobile-hide');
});
$('.ui.dropdown').dropdown({
on: 'hover'
});
//消息提示关闭初始化
$('.message .close')
.on('click', function () {
$(this)
.closest('.message')
.transition('fade');
}); });
$('.ui.dropdown').dropdown({ </script>
on:'hover'
});
//消息提示关闭初始化
$('.message .close')
.on('click', function () {
$(this)
.closest('.message')
.transition('fade');
});
</script>
</body> </body>
</html> </html>

190
src/main/resources/templates/archives.html
View File

@ -11,60 +11,62 @@
<link rel="stylesheet" href="../static/css/me.css"> <link rel="stylesheet" href="../static/css/me.css">
</head> </head>
<body> <body>
<!--导航--> <!--导航-->
<nav th:replace="_fragments :: menu(4)" class="ui inverted attached segment segment m-padded-tb-mini m-shadow-small"> <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 container">
<div class="ui inverted secondary stackable menu"> <div class="ui inverted secondary stackable menu">
<h2 class="ui teal header item">浅枫沐雪</h2> <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 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 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 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 clone icon"></i>归档</a>
<a href="#" class="m-item item m-mobile-hide"><i class="small info 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="right m-item item m-mobile-hide">
<form name="search" action="#" target="_blank" method="post"> <form name="search" action="#" target="_blank" method="post">
<div class="ui icon inverted input"> <div class="ui icon inverted input">
<input type="text" name="query" placeholder="Search...."> <input type="text" name="query" placeholder="Search....">
<i class="search icon link"></i> <i class="search icon link"></i>
</div> </div>
</form> </form>
</div>
</div> </div>
<!--menu toggle无任何显示意思--> </div>
<a href="" class="ui icon menu toggle black button m-right-top m-mobile-show"> <!--menu toggle无任何显示意思-->
<i class="sidebar icon"></i> <a href="" class="ui icon menu toggle black button m-right-top m-mobile-show">
</a> <i class="sidebar icon"></i>
<!--*/--> </a>
</nav> <!--*/-->
</nav>
<!--中间内容--> <!--中间内容-->
<div class="m-container-small m-padded-tb-big"> <div class="m-container-small m-padded-tb-big">
<!--适应移动端手机--> <!--适应移动端手机-->
<div class="ui container"> <div class="ui container">
<!--header--> <!--header-->
<div class="ui padded top attached segment "> <div class="ui padded top attached segment ">
<div class="ui middle aligned two column grid"> <div class="ui middle aligned two column grid">
<dvi class="column"> <dvi class="column">
<h3 class="ui teal header">归档</h3> <h3 class="ui teal header">归档</h3>
</dvi> </dvi>
<dvi class="right aligned column"> <dvi class="right aligned column">
共 <h2 class="ui orange header m-inline-blok m-text-thin" th:text="${blogCount}">14</h2>条 共 <h2 class="ui orange header m-inline-blok m-text-thin" th:text="${blogCount}">14</h2>条
</dvi> </dvi>
</div>
</div> </div>
<!--按照年份归档内容--> </div>
<th:block th:each="item : ${archiveMap}"> <!--按照年份归档内容-->
<th:block th:each="item : ${archiveMap}">
<h3 class="ui center aligned header" th:text="${item.key}">2019</h3> <h3 class="ui center aligned header" th:text="${item.key}">2019</h3>
<div class="ui fluid vertical menu"> <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> <span>
<i class=" teal tiny circle icon "></i> <i class=" teal tiny circle icon "></i>
<span th:text="${blog.title}">关于如何学习JavaEE</span> <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> </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>
<!--/*--> <!--/*-->
<a href="#" target="_blank" class="item"> <a href="#" target="_blank" class="item">
@ -134,64 +136,66 @@
</a> </a>
</div> </div>
<!--*/--> <!--*/-->
</div>
</div> </div>
<br> </div>
<br> <br>
<br>
<!--底部--> <!--底部-->
<footer th:replace="_fragments :: footer" class="ui inverted vertical segment m-padded-tb-massive "> <footer th:replace="_fragments :: footer" class="ui inverted vertical segment m-padded-tb-massive ">
<!--/*--> <!--/*-->
<div class="ui center aligned container "> <div class="ui center aligned container ">
<div class="ui inverted divided stackable grid"> <div class="ui inverted divided stackable grid">
<div class="three wide column"> <div class="three wide column">
<div class="ui inverted link list"> <div class="ui inverted link list">
<h4 class="ui inverted header m-opacity-min">站长微信</h4> <h4 class="ui inverted header m-opacity-min">站长微信</h4>
<div class="item"> <div class="item">
<img src="../static/images/WeChat.jpg" th:src="@{/images/WeChat.jpg}" CLASS="ui rounded image" alt="" style="width:110px"> <img src="../static/images/WeChat.jpg" th:src="@{/images/WeChat.jpg}" CLASS="ui rounded image"
</div> alt="" style="width:110px">
</div> </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>
<!--分割线--> <div class="three wide column">
<div class="ui inverted section divider"></div> <h4 class="ui inverted header m-opacity-min">最新动态</h4>
<p class="m-text-thin m-text-spaced m-opacity-tiny">Copy © 2019 - 2020 作者:浅枫沐雪 此站仅供个人所有 如有疑问联系作者</p> <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>
<!--*/--> <!--分割线-->
</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--> <!--引入所需要的JS-->
<th:block th:replace="_fragments :: script"> <th:block th:replace="_fragments :: script">
</th:block> </th:block>
<!--声明行内js代码域--> <!--声明行内js代码域-->
<script> <script>
$('.menu.toggle').click(function () { $('.menu.toggle').click(function () {
$('.m-item').toggleClass('m-mobile-hide'); $('.m-item').toggleClass('m-mobile-hide');
}); });
</script> </script>
</body> </body>
</html> </html>

791
src/main/resources/templates/blog.html
View File

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

30
src/main/resources/templates/error/404.html
View File

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

2
src/main/resources/templates/error/500.html
View File

@ -19,7 +19,7 @@
<br> <br>
<br> <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 error message">
<div class="ui container" style="height: 300px;text-align: center"> <div class="ui container" style="height: 300px;text-align: center">
<h2>500</h2> <h2>500</h2>

54
src/main/resources/templates/error/error.html
View File

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

499
src/main/resources/templates/index.html
View File

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

296
src/main/resources/templates/search.html
View File

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

374
src/main/resources/templates/tags.html
View File

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

549
src/main/resources/templates/types.html
View File

@ -10,297 +10,316 @@
<link rel="stylesheet" href="../static/css/me.css"> <link rel="stylesheet" href="../static/css/me.css">
</head> </head>
<body> <body>
<!--导航--> <!--导航-->
<nav th:replace="_fragments :: menu(2)" class="ui inverted attached segment segment m-padded-tb-mini m-shadow-small"> <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 container">
<div class="ui inverted secondary stackable menu"> <div class="ui inverted secondary stackable menu">
<h2 class="ui teal header item">浅枫沐雪</h2> <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="@{/}" 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="@{/types}" class="m-item item m-mobile-hide active"><i
<a href="#" th:href="@{tags}" class="m-item item m-mobile-hide" ><i class="small tags icon"></i>标签</a> class="small idea 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="@{tags}" class="m-item item m-mobile-hide"><i class="small tags icon"></i>标签</a>
<a href="#" th:href="@{/about}" class="m-item item m-mobile-hide"><i class="small info icon"></i>站长信息</a> <a href="#" th:href="@{/archives}" class="m-item item m-mobile-hide"><i class="small clone icon"></i>归档</a>
<div class="right m-item item m-mobile-hide"> <a href="#" th:href="@{/about}" class="m-item item m-mobile-hide"><i class="small info icon"></i>站长信息</a>
<form name="search" action="#" target="_blank" method="post"> <div class="right m-item item m-mobile-hide">
<div class="ui icon inverted input"> <form name="search" action="#" target="_blank" method="post">
<input type="text" name="query" placeholder="Search...."> <div class="ui icon inverted input">
<i class="search icon link"></i> <input type="text" name="query" placeholder="Search....">
</div> <i class="search icon link"></i>
</form> </div>
</div> </form>
</div> </div>
<!--menu toggle无任何显示意思--> </div>
<a href="" class="ui icon menu toggle black button m-right-top m-mobile-show"> <!--menu toggle无任何显示意思-->
<i class="sidebar icon"></i> <a href="" class="ui icon menu toggle black button m-right-top m-mobile-show">
</a> <i class="sidebar icon"></i>
</a>
<!--*/--> <!--*/-->
</nav> </nav>
<!--中间内容--> <!--中间内容-->
<div class="m-container-small m-padded-tb-big"> <div class="m-container-small m-padded-tb-big">
<!--适应移动端手机--> <!--适应移动端手机-->
<div class="ui container"> <div class="ui container">
<!--header--> <!--header-->
<div class="ui top attached segment"> <div class="ui top attached segment">
<div class="ui middle aligned two column grid"> <div class="ui middle aligned two column grid">
<dvi class="column"> <dvi class="column">
<h3 class="ui teal header">分类</h3> <h3 class="ui teal header">分类</h3>
</dvi> </dvi>
<dvi class="right aligned column"> <dvi class="right aligned column">
共 <h2 class="ui orange header m-inline-blok m-text-thin" th:text="${#arrays.length(types)}">14</h2>个 共 <h2 class="ui orange header m-inline-blok m-text-thin" th:text="${#arrays.length(types)}">14</h2>个
</dvi> </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> </div>
<!--分类列表区域--> <!--/*-->
<div class="ui attached segment m-padded-tb-large "> <div class="ui labeled button m-margin-tb-tiny">
<div class="ui labeled button m-margin-tb-tiny" th:each="type : ${types}"> <a href="#" class="ui basic button">学习日志</a>
<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">
<div class="ui basic left pointing label" th:classappend="${type.id==avtiveTypeId }? 'teal'" th:text="${#arrays.length(type.blogs)}"> 11
12 </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> </div>
<!--/*--> <!--/*-->
<div class="ui labeled button m-margin-tb-tiny"> <div class="ui grid mobile reversed stackable">
<a href="#" class="ui basic button">学习日志</a> <div class="eleven wide column">
<div class="ui basic left pointing label"> <h3 class="ui header">庐山旅行记录-九江</h3>
11 <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> </div>
<div class="ui labeled button m-margin-tb-tiny"> <div class="ui grid mobile reversed stackable">
<a href="#" class="ui basic button">学习日志</a> <div class="eleven wide column">
<div class="ui basic left pointing label"> <h3 class="ui header">庐山旅行记录-九江</h3>
23 <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 labeled button m-margin-tb-tiny"> <div class="ui grid mobile reversed stackable">
<a href="#" class="ui basic button">学习日志</a> <div class="eleven wide column">
<div class="ui basic left pointing label"> <h3 class="ui header">庐山旅行记录-九江</h3>
26 <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> <div class="five wide column">
<div class="ui labeled button m-margin-tb-tiny"> <a href="" target="_blank">
<a href="#" class="ui basic button">JavaEE学习</a> <img src="https://picsum.photos/id/1011/800/400" alt="" class="ui round image">
<div class="ui basic left pointing label"> </a>
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>
<!--*/--> <!--*/-->
</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}"> <div class="ui bottom attached segment" th:if="${page.totalPages}>1">
<!--mobile reversed反序--> <div class="ui middle aligned two column grid">
<div class="ui middle aligned grid mobile reversed stackable" > <dvi class="column">
<div class="eleven wide column"> <a href="#" th:href="@{/(page=${page.number}-1)}" th:unless="${page.first}"
<h3><a href="#" th:href="@{/blog/{id}(id=${blog.id})}" target="_blank" class="m-black" th:text="${blog.title}">庐山旅行记录-江西</a></h3> class="ui mini teal basic button">上一页</a>
<p class="m-text" th:text="|${blog.description}.....|">庐山，又名匡山、 </dvi>
匡庐，位于江西省九江市庐山市境内。介于东经115°52′—116°8′，北纬29°26′—29°41′之间。东偎婺源、鄱阳湖，南靠滕王阁，西邻京九铁路大通脉，北枕滔滔长江。 </p> <dvi class="right aligned column">
<div class="ui grid"> <a href="#" th:href="@{/(page=${page.number}+1)}" th:unless="${page.last}"
<div class="eleven wide column"> class="ui mini teal basic button">下一页</a>
<div class="ui mini horizontal link list"> </dvi>
<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>
</div> </div>
</div> </div>
<br> </div>
<br> <br>
<!--底部--> <br>
<footer th:replace="_fragments :: footer" class="ui inverted vertical segment m-padded-tb-massive "> <!--底部-->
<!--/*--> <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="ui center aligned container ">
<div class="three wide column"> <div class="ui inverted divided stackable grid">
<div class="ui inverted link list"> <div class="three wide column">
<h4 class="ui inverted header m-opacity-min">站长微信</h4> <div class="ui inverted link list">
<div class="item"> <h4 class="ui inverted header m-opacity-min">站长微信</h4>
<img src="../static/images/WeChat.jpg" th:src="@{/images/WeChat.jpg}" CLASS="ui rounded image" alt="" style="width:110px"> <div class="item">
</div> <img src="../static/images/WeChat.jpg" th:src="@{/images/WeChat.jpg}" CLASS="ui rounded image"
alt="" style="width:110px">
</div> </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>
<!--分割线--> <div class="three wide column">
<div class="ui inverted section divider"></div> <h4 class="ui inverted header m-opacity-min">最新动态</h4>
<p class="m-text-thin m-text-spaced m-opacity-tiny">Copy © 2019 - 2020 作者:浅枫沐雪 此站仅供个人所有 如有疑问联系作者</p> <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>
<!--*/--> <!--分割线-->
</footer> <div class="ui inverted section divider"></div>
<!--引入所需要的JS--> <p class="m-text-thin m-text-spaced m-opacity-tiny">Copy © 2019 - 2020 作者:浅枫沐雪 此站仅供个人所有 如有疑问联系作者</p>
<th:block th:replace="_fragments :: script"> </div>
<!--*/-->
</footer>
<!--引入所需要的JS-->
<th:block th:replace="_fragments :: script">
</th:block> </th:block>
<!--声明行内js代码域--> <!--声明行内js代码域-->
<script> <script>
$('.menu.toggle').click(function () { $('.menu.toggle').click(function () {
$('.m-item').toggleClass('m-mobile-hide'); $('.m-item').toggleClass('m-mobile-hide');
}); });
</script> </script>
</body> </body>
</html> </html>