基于Springboot实现新闻的删除、前台页面的展示
基于Springboot实现新闻的添加、修改、查询和搜索功能
源码已上传至Github: 项目源码
一、新闻的删除
通过从前端页面传来新闻id删除新闻,删除新闻后重定向到新闻显示页面
//controller
@RequestMapping("delete/{id}")
public String delete(@PathVariable Long id){
newsService.deleteById(id);
return "redirect:/admin/news";
}
//service
@Override
public void deleteById(Long id) {
newsDao.deleteById(id);
}
删除前:
删除后:
二、前台页面主页的显示
新建一个IndexController控制类
@RequestMapping
public String index(@PageableDefault(size = 5, sort = {"updateTime"}, direction = Sort.Direction.DESC) Pageable pageable,
Model model){
Page<News> page = newsServcie.findByPageable(pageable);
List<Type> types=typeService.findTop(5);
List<Tag> tags=tagService.findTop(5);
model.addAttribute("page", page);
model.addAttribute("types",types);
model.addAttribute("tags",tags);
return "index";
}
service层
//TagServiceImpl.java
@Override
public List<Tag> findTop(int i) {
Sort sort=Sort.by(Sort.Direction.DESC,"newsList.size");
Pageable pageable = PageRequest.of(0, i, sort);
return tagDao.findTop(pageable);
}
//TypeServiceImpl.java
@Override
public List<Type> findTop(int i) {
Sort sort=Sort.by(Sort.Direction.DESC,"newsList.size");
Pageable pageable = PageRequest.of(0, i, sort);
return typeDao.findTop(pageable);
}
dao层
//TagDao.java
@Query("SELECT t from Tag t")
List<Tag> findTop(Pageable pageable);
//TypeDao.java
@Query("select t from Type t")
List<Type> findTop(Pageable pageable);
三、前台页面分类页面的显示
通过点击具体分类,在TypeShowController中查出分类中的新闻,跳转到分类新闻显示页面显示
TypeShowController.java
@RequestMapping("/types/{id}")
public String types(@PageableDefault(size = 5,sort = {"updateTime"},direction = Sort.Direction.DESC)Pageable pageable,
@PathVariable Long id, Model model){
List<Type> types = typeService.findTop(7);
if(id==-1){
id=types.get(0).getId();
}
NewsQuery newsQuery=new NewsQuery();
newsQuery.setTypeId(id.toString());
Page<News> page = newsService.searchNews(pageable, newsQuery);
model.addAttribute("page",page);
model.addAttribute("types",types);
return "types";
}
NewsSercieImpl.java
@Override
public Page<News> searchNews(Pageable pageable, NewsQuery newsQuery) {
Page<News> news=newsDao.findAll(new Specification<News>() {
@Override
public Predicate toPredicate(Root<News> root, CriteriaQuery<?> query, CriteriaBuilder criteriaBuilder) {
List<Predicate> predicates=new ArrayList<>();
if(!StringUtils.isEmpty(newsQuery.getTitle())){
predicates.add(criteriaBuilder.like(root.<String>get("title"),"%"+newsQuery.getTitle()+"%"));
}
if(!StringUtils.isEmpty(newsQuery.getTypeId())){
predicates.add(criteriaBuilder.equal(root.<Type>get("type").get("id"),newsQuery.getTypeId()));
}
if(newsQuery.getRecommend()!=null){
predicates.add(criteriaBuilder.equal(root.<Boolean>get("recommend"),newsQuery.getRecommend()));
}
query.where(predicates.toArray(new Predicate[predicates.size()]));
return null;
}
},pageable);
return news;
}
四、前台页面标签页面的显示
通过点击具体标签,在TagShowController中查出标签中的新闻,跳转到标签新闻显示页面显示
TagShowController.java
@RequestMapping("/tags/{id}")
public String tags(@PageableDefault(size = 5,sort = {"updateTime"},direction = Sort.Direction.DESC) Pageable pageable,
@PathVariable Long id, Model model){
List<Tag> tags = tagService.findTop(7);
if(id==-1){
id=tags.get(0).getId();
}
Page<News> page=newsService.searchNews(pageable,id);
model.addAttribute("page",page);
model.addAttribute("tags",tags);
return "tags";
}
NewsSercieImpl.java
@Override
public Page<News> searchNews(Pageable pageable, Long id) {
return newsDao.findAll(new Specification<News>() {
@Override
public Predicate toPredicate(Root<News> root, CriteriaQuery<?> query, CriteriaBuilder criteriaBuilder) {
Join join=root.join("tags");
return criteriaBuilder.equal(join.get("id"),id);
}
}, pageable);
}
五、前台页面归档页面的显示
将所有新闻按年份分类倒叙显示在页面上,新建一个ArchivesController.java
@RequestMapping("archives")
public String arvhives(Model model){
HashMap<String, List<News>> map=newsService.archiveNews();
Long count=newsService.countNews();
model.addAttribute("newsCount",count);
model.addAttribute("archiveMap",map);
return "archives";
}
NewsSercieImpl.java
@Override
public HashMap<String, List<News>> archiveNews() {
LinkedHashMap<String, List<News>> map=new LinkedHashMap<>();
List<String> years=newsDao.findGroupYear();
for(String y:years){
List<News> news=newsDao.findByYear(y);
map.put(y,news);
}
return map;
}
@Override
public Long countNews() {
return newsDao.count();
}
NewsDao.java
@Query("select function('date_format',n.updateTime,'%Y') as year from News n group by function('date_format',n.updateTime,'%Y') order by year desc ")
List<String> findGroupYear();
@Query("select n from News n where function('date_format',n.updateTime,'%Y') = ?1")
List<News> findByYear(String y);
六、代码
controller层
IndexController.java
package com.wzx.controller;
import com.wzx.po.News;
import com.wzx.po.Tag;
import com.wzx.po.Type;
import com.wzx.service.NewsService;
import com.wzx.service.TagService;
import com.wzx.service.TypeService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.domain.Page;
import org.springframework.data.domain.Pageable;
import org.springframework.data.domain.Sort;
import org.springframework.data.web.PageableDefault;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import java.util.List;
@Controller
@RequestMapping
public class IndexController {
@Autowired
private NewsService newsServcie;
@Autowired
private TypeService typeService;
@Autowired
private TagService tagService;
@RequestMapping
public String index(@PageableDefault(size = 5, sort = {"updateTime"}, direction = Sort.Direction.DESC) Pageable pageable,
Model model){
Page<News> page = newsServcie.findByPageable(pageable);
List<Type> types=typeService.findTop(5);
List<Tag> tags=tagService.findTop(5);
model.addAttribute("page", page);
model.addAttribute("types",types);
model.addAttribute("tags",tags);
return "index";
}
@RequestMapping("/news/{id}")
public String news(@PathVariable Long id,Model model){
News news=newsServcie.findNewsById(id);
model.addAttribute("news",news);
return "news";
}
}
TagShowController.java
package com.wzx.controller;
import com.wzx.po.News;
import com.wzx.po.Tag;
import com.wzx.service.NewsService;
import com.wzx.service.TagService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.domain.Page;
import org.springframework.data.domain.Pageable;
import org.springframework.data.domain.Sort;
import org.springframework.data.web.PageableDefault;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import java.util.List;
@Controller
public class TagShowController {
@Autowired
private TagService tagService;
@Autowired
private NewsService newsService;
@RequestMapping("/tags/{id}")
public String tags(@PageableDefault(size = 5,sort = {"updateTime"},direction = Sort.Direction.DESC) Pageable pageable,
@PathVariable Long id, Model model){
List<Tag> tags = tagService.findTop(7);
if(id==-1){
id=tags.get(0).getId();
}
Page<News> page=newsService.searchNews(pageable,id);
model.addAttribute("page",page);
model.addAttribute("tags",tags);
return "tags";
}
}
TypeShowController.java
package com.wzx.controller;
import com.wzx.po.News;
import com.wzx.po.NewsQuery;
import com.wzx.po.Type;
import com.wzx.service.NewsService;
import com.wzx.service.TypeService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.domain.Page;
import org.springframework.data.domain.Pageable;
import org.springframework.data.domain.Sort;
import org.springframework.data.web.PageableDefault;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import java.util.List;
@Controller
public class TypeShowController {
@Autowired
private TypeService typeService;
@Autowired
private NewsService newsService;
@RequestMapping("/types/{id}")
public String types(@PageableDefault(size = 5,sort = {"updateTime"},direction = Sort.Direction.DESC)Pageable pageable,
@PathVariable Long id, Model model){
List<Type> types = typeService.findTop(7);
if(id==-1){
id=types.get(0).getId();
}
NewsQuery newsQuery=new NewsQuery();
newsQuery.setTypeId(id.toString());
Page<News> page = newsService.searchNews(pageable, newsQuery);
model.addAttribute("page",page);
model.addAttribute("types",types);
return "types";
}
}
service层
TagServiceImpl.java
package com.wzx.service.impl;
import com.wzx.dao.TagDao;
import com.wzx.po.Tag;
import com.wzx.service.TagService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.domain.Page;
import org.springframework.data.domain.PageRequest;
import org.springframework.data.domain.Pageable;
import org.springframework.data.domain.Sort;
import org.springframework.stereotype.Service;
import org.springframework.util.StringUtils;
import java.util.ArrayList;
import java.util.List;
@Service
public class TagServiceImpl implements TagService {
@Autowired
private TagDao tagDao;
@Override
public Page<Tag> listTag(Pageable pageable) {
return tagDao.findAll(pageable);
}
@Override
public void deleteById(Long id) {
tagDao.deleteById(id);
}
@Override
public Tag findTagById(Long id) {
return tagDao.getOne(id);
}
@Override
public void input(Tag tag) {
tagDao.save(tag);
}
@Override
public List<Tag> listTag() {
return tagDao.findAll();
}
@Override
public List<Tag> findTagByTagId(String tagIds) {
List<Long> ids=new ArrayList<>();
if(!StringUtils.isEmpty(tagIds)){
String[] str=tagIds.split(",");
for(String s:str){
if(!StringUtils.isEmpty(s)){
ids.add(new Long(s));
}
}
}
return tagDao.findAllById(ids);
}
@Override
public String getTagIds(List<Tag> tags) {
StringBuffer ids=new StringBuffer();
if(!tags.isEmpty()){
boolean flag=false;
for(Tag t:tags){
if(flag){
ids.append(",");
ids.append(t.getId());
}else {
ids.append(t.getId());
flag=true;
}
}
}
return ids.toString();
}
@Override
public List<Tag> findTop(int i) {
Sort sort=Sort.by(Sort.Direction.DESC,"newsList.size");
Pageable pageable = PageRequest.of(0, i, sort);
return tagDao.findTop(pageable);
}
}
TypeServiceImpl.java
package com.wzx.service.impl;
import com.wzx.dao.TypeDao;
import com.wzx.po.Type;
import com.wzx.service.TypeService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.domain.Page;
import org.springframework.data.domain.PageRequest;
import org.springframework.data.domain.Pageable;
import org.springframework.data.domain.Sort;
import org.springframework.stereotype.Service;
import java.util.List;
@Service
public class TypeServiceImpl implements TypeService {
@Autowired
private TypeDao typeDao;
@Override
public Page<Type> listType(Pageable pageable) {
return typeDao.findAll(pageable);
}
@Override
public void deleteById(Long id) {
typeDao.deleteById(id);
}
@Override
public Type findTypeById(Long id) {
return typeDao.getOne(id);
}
@Override
public void input(Type type) {
typeDao.save(type);
}
@Override
public List<Type> listType() {
return typeDao.findAll();
}
@Override
public List<Type> findTop(int i) {
Sort sort=Sort.by(Sort.Direction.DESC,"newsList.size");
Pageable pageable = PageRequest.of(0, i, sort);
return typeDao.findTop(pageable);
}
}
NewsServiceImpl.java
package com.wzx.service.impl;
import com.wzx.dao.NewsDao;
import com.wzx.po.News;
import com.wzx.po.NewsQuery;
import com.wzx.po.Type;
import com.wzx.service.NewsService;
import com.wzx.util.MyBeanUtils;
import org.springframework.beans.BeanUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.domain.Page;
import org.springframework.data.domain.PageRequest;
import org.springframework.data.domain.Pageable;
import org.springframework.data.domain.Sort;
import org.springframework.data.jpa.domain.Specification;
import org.springframework.stereotype.Service;
import org.springframework.util.StringUtils;
import javax.persistence.criteria.*;
import java.util.*;
@Service
public class NewsServiceImpl implements NewsService {
@Autowired
private NewsDao newsDao;
@Override
public News findNewsById(Long id) {
return newsDao.getOne(id);
}
@Override
public void input(News news) {
if(news.getId()==null){
news.setUpdateTime(new Date());
news.setCreateTime(new Date());
newsDao.save(news);
}else {
news.setUpdateTime(new Date());
News n=newsDao.getOne(news.getId());
BeanUtils.copyProperties(news,n, MyBeanUtils.getNullPropertyNames(news));
newsDao.save(n);
}
}
@Override
public Page<News> findByPageable(Pageable pageable) {
return newsDao.findAll(pageable);
}
@Override
public Page<News> searchNews(Pageable pageable, NewsQuery newsQuery) {
Page<News> news=newsDao.findAll(new Specification<News>() {
@Override
public Predicate toPredicate(Root<News> root, CriteriaQuery<?> query, CriteriaBuilder criteriaBuilder) {
List<Predicate> predicates=new ArrayList<>();
if(!StringUtils.isEmpty(newsQuery.getTitle())){
predicates.add(criteriaBuilder.like(root.<String>get("title"),"%"+newsQuery.getTitle()+"%"));
}
if(!StringUtils.isEmpty(newsQuery.getTypeId())){
predicates.add(criteriaBuilder.equal(root.<Type>get("type").get("id"),newsQuery.getTypeId()));
}
if(newsQuery.getRecommend()!=null){
predicates.add(criteriaBuilder.equal(root.<Boolean>get("recommend"),newsQuery.getRecommend()));
}
query.where(predicates.toArray(new Predicate[predicates.size()]));
return null;
}
},pageable);
return news;
}
@Override
public Page<News> searchNews(Pageable pageable, Long id) {
return newsDao.findAll(new Specification<News>() {
@Override
public Predicate toPredicate(Root<News> root, CriteriaQuery<?> query, CriteriaBuilder criteriaBuilder) {
Join join=root.join("tags");
return criteriaBuilder.equal(join.get("id"),id);
}
}, pageable);
}
@Override
public void deleteById(Long id) {
newsDao.deleteById(id);
}
@Override
public HashMap<String, List<News>> archiveNews() {
LinkedHashMap<String, List<News>> map=new LinkedHashMap<>();
List<String> years=newsDao.findGroupYear();
for(String y:years){
List<News> news=newsDao.findByYear(y);
map.put(y,news);
}
return map;
}
@Override
public Long countNews() {
return newsDao.count();
}
@Override
public Page<News> findNewsByQuery(String query, Pageable pageable) {
return newsDao.findByquery("%"+query+"%",pageable);
}
@Override
public List<News> findTop(int i) {
Sort sort=Sort.by(Sort.Direction.DESC,"updateTime");
Pageable pageable= PageRequest.of(0,i,sort);
return newsDao.findTop(pageable);
}
}
dao层
NewsDao.java
package com.wzx.dao;
import com.wzx.po.News;
import org.springframework.data.domain.Page;
import org.springframework.data.domain.Pageable;
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.data.jpa.repository.JpaSpecificationExecutor;
import org.springframework.data.jpa.repository.Query;
import java.util.List;
public interface NewsDao extends JpaRepository<News,Long>, JpaSpecificationExecutor<News> {
@Query("select function('date_format',n.updateTime,'%Y') as year from News n group by function('date_format',n.updateTime,'%Y') order by year desc ")
List<String> findGroupYear();
@Query("select n from News n where function('date_format',n.updateTime,'%Y') = ?1")
List<News> findByYear(String y);
@Query("select n from News n where n.title like ?1 or n.content like ?1")
Page<News> findByquery(String s, Pageable pageable);
@Query("select n from News n where n.recommend=true ")
List<News> findTop(Pageable pageable);
}
TagDao.java
package com.wzx.dao;
import com.wzx.po.Tag;
import org.springframework.data.domain.Pageable;
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.data.jpa.repository.Query;
import java.util.List;
public interface TagDao extends JpaRepository<Tag,Long> {
@Query("SELECT t from Tag t")
List<Tag> findTop(Pageable pageable);
}
TypeDao.java
package com.wzx.dao;
import com.wzx.po.Type;
import org.springframework.data.domain.Pageable;
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.data.jpa.repository.Query;
import java.util.List;
public interface TypeDao extends JpaRepository<Type,Long> {
@Query("select t from Type t")
List<Type> findTop(Pageable pageable);
}
_fragments.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:fragment="head(title)">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title th:replace="${title}">新闻详情</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
<link rel="stylesheet" href="../static/css/typo.css" th:href="@{/css/typo.css}">
<link rel="stylesheet" href="../static/css/animate.css" th:href="@{/css/animate.css}">
<link rel="stylesheet" href="../static/lib/prism/prism.css" th:href="@{/lib/prism/prism.css}">
<link rel="stylesheet" href="../static/lib/tocbot/tocbot.css" th:href="@{/lib/tocbot/tocbot.css}">
<link rel="stylesheet" href="../static/css/me.css" th:href="@{/css/me.css}">
</head>
<body>
<!--导航-->
<nav th:fragment="menu(n)" class="ui inverted attached segment m-padded-tb-mini m-shadow-small" >
<div class="ui container">
<div class="ui inverted secondary stackable menu">
<h2 class="ui teal header item">news</h2>
<a href="#" th:href="@{/}" class="m-item item m-mobile-hide " th:classappend="${n==1} ? 'active'">首页</a>
<a href="#" th:href="@{/types/-1}" class="m-item item m-mobile-hide" th:classappend="${n==2} ? 'active'">分类</a>
<a href="#" th:href="@{/tags/-1}" class="m-item item m-mobile-hide" th:classappend="${n==3} ? 'active'">标签</a>
<a href="#" th:href="@{/archives}" class="m-item item m-mobile-hide" th:classappend="${n==4} ? 'active'">归档</a>
<a href="#" th:href="@{/about}" class="m-item item m-mobile-hide" th:classappend="${n==5} ? 'active'">关于我</a>
<div class="right m-item item m-mobile-hide">
<form name="search" action="#" th:action="@{/search}" method="post" target="_blank">
<div class="ui icon inverted transparent input m-margin-tb-tiny">
<input type="text" name="query" placeholder="Search...." th:value="${query}">
<i onclick="document.forms['search'].submit()" class="search link icon"></i>
</div>
</form>
</div>
</div>
</div>
<a href="#" class="ui menu toggle black icon button m-right-top m-mobile-show">
<i class="sidebar icon"></i>
</a>
</nav>
<!--底部footer-->
<footer th:fragment="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">
<div class="item">
<img src="../static/images/wechat.jpg" th:src="@{/images/wechat.jpg}" class="ui rounded image" alt="" style="width: 110px">
</div>
</div>
</div>
<div class="three wide column" >
<h4 class="ui inverted header m-text-thin m-text-spaced " >最新新闻</h4>
<div id="newnews-container">
<div class="ui inverted link list" th:fragment="lastestNewslist1">
<a href="#" th:href="@{/news/{id}(id=${news.id})}" target="_blank" class="item m-text-thin" th:each="news : ${lastestNewslist}" th:text="${news.title}">用户故事(User Story)</a>
<!--/*-->
<a href="#" class="item m-text-thin">用户故事(User Story)</a>
<a href="#" class="item m-text-thin">用户故事(User Story)</a>
<!--*/-->
</div>
</div>
</div>
<div class="three wide column">
<h4 class="ui inverted header m-text-thin m-text-spaced ">联系我</h4>
<div class="ui inverted link list">
<a href="#" class="item m-text-thin" >Email:hualili@163.com</a>
<a href="#" class="item m-text-thin" >QQ:hualili</a>
</div>
</div>
<div class="seven wide column">
<h4 class="ui inverted header m-text-thin m-text-spaced ">news</h4>
<p class="m-text-thin m-text-spaced m-opacity-mini" >消息即狭义的新闻,它是对新近发生的有社会意义并引起公众兴趣的事实的简短报道。因此,真实性、时效性及文字少、篇幅小成为消息的基本特征...</p>
</div>
</div>
<div class="ui inverted section divider"></div>
<p class="m-text-thin m-text-spaced m-opacity-tiny">Copyright © 2016 - <span th:text="${#dates.year(#dates.createNow())}">2017</span> hualili Designed by hualili</p>
</div>
</footer>
<th:block th:fragment="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="//cdn.jsdelivr.net/npm/jquery.scrollto@2.1.2/jquery.scrollTo.min.js"></script>
<script src="../static/lib/prism/prism.js" th:src="@{/lib/prism/prism.js}"></script>
<script src="../static/lib/tocbot/tocbot.min.js" th:src="@{/lib/tocbot/tocbot.min.js}"></script>
<script src="../static/lib/qrcode/qrcode.min.js" th:src="@{/lib/qrcode/qrcode.min.js}"></script>
<script src="../static/lib/waypoints/jquery.waypoints.min.js" th:src="@{/lib/waypoints/jquery.waypoints.min.js}"></script>
<script>
$('#newnews-container').load(/*[[@{/footer/lastestNews}]]*/"/footer/lastestNews");
</script>
</th:block>
</body>
</html>
index.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:replace="_fragments :: head(~{::title})">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>新闻</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css" >
<link rel="stylesheet" href="../static/css/me.css" >
</head>
<body>
<!--导航-->
<nav th:replace="_fragments :: menu(1)" class="ui inverted attached segment m-padded-tb-mini m-shadow-small" >
<div class="ui container">
<div class="ui inverted secondary stackable menu">
<h2 class="ui teal header item">news</h2>
<a href="#" class=" m-item item m-mobile-hide">首页</a>
<a href="#" class="m-item item m-mobile-hide">分类</a>
<a href="#" class="m-item item m-mobile-hide">标签</a>
<a href="#" class="m-item item m-mobile-hide">归档</a>
<a href="#" class="m-item item m-mobile-hide">关于我</a>
<div class="right m-item item m-mobile-hide">
<div class="ui icon inverted transparent input m-margin-tb-tiny">
<input type="text" placeholder="Search....">
<i class="search link icon"></i>
</div>
</div>
</div>
</div>
<a href="#" class="ui menu toggle black icon button m-right-top m-mobile-show">
<i class="sidebar icon"></i>
</a>
</nav>
<!--中间内容-->
<div class="m-container m-padded-tb-big animated fadeIn">
<div class="ui container">
<div class="ui stackable grid">
<!--左边的top-->
<div class="five wide column">
<!--分类-->
<div class="ui segments">
<div class="ui secondary segment">
<div class="ui two column grid">
<div class="column">
分类
</div>
<div class="right aligned column">
<a href="#" target="_blank">more <i class="angle double right icon"></i></a>
</div>
</div>
</div>
<div class="ui teal segment">
<div class="ui fluid vertical menu" >
<a href="#" th:href="@{/types/{id}(id=${type.id})}" target="_blank" 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.newsList)}">13</div>
</a>
<!--/*-->
<a href="#" class="item">
思考与感悟
<div class="ui teal basic left pointing label">13</div>
</a>
<a href="#" class="item">
学习日志
<div class="ui teal basic left pointing label">13</div>
</a>
<a href="#" class="item">
学习日志
<div class="ui teal basic left pointing label">13</div>
</a>
<a href="#" class="item">
学习日志
<div class="ui teal basic left pointing label">13</div>
</a>
<a href="#" class="item">
学习日志
<div class="ui teal basic left pointing label">13</div>
</a>
<!--*/-->
</div>
</div>
</div>
<!--标签-->
<div class="ui segments m-margin-top-large">
<div class="ui secondary segment">
<div class="ui two column grid">
<div class="column">
标签
</div>
<div class="right aligned column">
<a href="#" target="_blank">more <i class="angle double right icon"></i></a>
</div>
</div>
</div>
<div class="ui teal segment">
<a href="#" target="_blank" th:href="@{/tags/{id}(id=${tag.id})}" class="ui teal basic left pointing label m-margin-tb-tiny " th:each="tag : ${tags}" >
<span th:text="${tag.name}">方法论</span> <div class="detail" th:text="${#arrays.length(tag.newsList)}">23</div>
</a>
<!--/*-->
<a href="#" target="_blank" class="ui teal basic left pointing label m-margin-tb-tiny">
论 <div class="detail">23</div>
</a>
<a href="#" target="_blank" class="ui teal basic left pointing label m-margin-tb-tiny">
论 <div class="detail">23</div>
</a>
<a href="#" target="_blank" class="ui teal basic left pointing label m-margin-tb-tiny">
方法论 <div class="detail">23</div>
</a>
<a href="#" target="_blank" class="ui teal basic left pointing label m-margin-tb-tiny">
方法论 <div class="detail">23</div>
</a>
<a href="#" target="_blank" class="ui teal basic left pointing label m-margin-tb-tiny">
方法论 <div class="detail">23</div>
</a>
<a href="#" target="_blank" class="ui teal basic left pointing label m-margin-tb-tiny">
方法论 <div class="detail">23</div>
</a>
<a href="#" target="_blank" class="ui teal basic left pointing label m-margin-tb-tiny">
方法论 <div class="detail">23</div>
</a>
<a href="#" target="_blank" class="ui teal basic left pointing label m-margin-tb-tiny">
方法论 <div class="detail">23</div>
</a>
<a href="#" target="_blank" class="ui teal basic left pointing label m-margin-tb-tiny">
方法论 <div class="detail">23</div>
</a>
<!--*/-->
</div>
</div>
<!--最新推荐-->
<div class="ui segments m-margin-top-large">
<div class="ui secondary segment ">
最新推荐
</div>
<div class="ui segment" >
<a href="#" target="_blank" class="m-black m-text-thin" >用户故事(User Story)</a>
</div>
<!--/*-->
<div class="ui segment" >
<a href="#" target="_blank" class="m-black m-text-thin">用户故事(User Story)</a>
</div>
<div class="ui segment">
<a href="#" target="_blank" class="m-black m-text-thin">用户故事(User Story)</a>
</div>
<div class="ui segment">
<a href="#" target="_blank" class="m-black m-text-thin">用户故事(User Story)</a>
</div>
<div class="ui segment">
<a href="#" target="_blank" class="m-black m-text-thin">用户故事(User Story)</a>
</div>
<div class="ui segment">
<a href="#" target="_blank" class="m-black m-text-thin">用户故事(User Story)</a>
</div>
<div class="ui segment">
<a href="#" target="_blank" class="m-black m-text-thin">用户故事(User Story)</a>
</div>
<div class="ui segment">
<a href="#" target="_blank" class="m-black m-text-thin">用户故事(User Story)</a>
</div>
<!--*/-->
</div>
</div>
<!--右边新闻列表-->
<div class="eleven wide column">
<!--header-->
<div class="ui top attached segment">
<div class="ui middle aligned two column grid">
<div class="column">
<h3 class="ui teal header">新闻</h3>
</div>
<div class="right aligned column">
共 <h2 class="ui orange header m-inline-block m-text-thin" > 14 </h2> 篇
</div>
</div>
</div>
<!--content-->
<div class="ui attached segment">
<div class="ui padded vertical segment m-padded-tb-large" th:each="news : ${page.content}">
<div class="ui middle aligned mobile reversed stackable grid" >
<div class="eleven wide column">
<h3 class="ui header" ><a href="#" th:href="@{/news/{id}(id=${news.id})}" target="_blank" class="m-black" th:text="${news.title}">你真的理解什么是财富自由吗?</a></h3>
<p class="m-text" th:text="|${news.description}......|">正确做好任何一件事情的前提是清晰、正确的理解目标。而事实是,我们很多人很多时候根本没有对目标正确的定义,甚至根本从来就没有想过,只是大家都那么做而已…...</p>
<div class="ui grid">
<div class="eleven wide column">
<div class="ui mini horizontal link list">
<div class="item">
<img src="../static/images/wechat.jpg" th:src="@{${news.user.avatar}}" alt="" class="ui avatar image">
<div class="content"><a href="#" class="header" th:text="${news.user.nickname}" >hualili</a></div>
</div>
<div class="item">
<i class="calendar icon"></i><span th:text="${#dates.format(news.updateTime,'yyyy-MM-dd')}">2017-10-01</span>
</div>
<div class="item">
<i class="eye icon"></i> <span th:text="${news.views}">2342</span>
</div>
</div>
</div>
<div class="right aligned five wide column">
<a href="#" target="_blank" class="ui teal basic label m-padded-tiny m-text-thin" th:text="${news.type.name}">认知升级</a>
</div>
</div>
</div>
<div class="five wide column">
<a href="#" th:href="@{/news/{id}(id=${news.id})}" target="_blank">
<img src="../static/images/wechat.jpg" th:src="@{${news.firstPicture}}" alt="" class="ui rounded image">
</a>
</div>
</div>
</div>
<!--/*-->
<div class="ui padded vertical segment m-padded-tb-large">
<div class="ui mobile reversed stackable grid">
<div class="eleven wide column">
<h3 class="ui header">你真的理解什么是财富自由吗?</h3>
<p class="m-text">正确做好任何一件事情的前提是清晰、正确的理解目标。而事实是,我们很多人很多时候根本没有对目标正确的定义,甚至根本从来就没有想过,只是大家都那么做而已…...</p>
<div class="ui grid">
<div class="eleven wide column">
<div class="ui mini horizontal link list">
<div class="item">
<img src="../static/images/wechat.jpg" alt="" class="ui avatar image">
<div class="content"><a href="#" class="header">hualili</a></div>
</div>
<div class="item">
<i class="calendar icon"></i> 2017-10-01
</div>
<div class="item">
<i class="eye icon"></i> 2342
</div>
</div>
</div>
<div class="right aligned five wide 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="../static/images/wechat.jpg" alt="" class="ui rounded image">
</a>
</div>
</div>
</div>
<div class="ui padded vertical segment m-padded-tb-large">
<div class="ui mobile reversed stackable grid">
<div class="eleven wide column">
<h3 class="ui header">你真的理解什么是财富自由吗?</h3>
<p class="m-text">正确做好任何一件事情的前提是清晰、正确的理解目标。而事实是,我们很多人很多时候根本没有对目标正确的定义,甚至根本从来就没有想过,只是大家都那么做而已…...</p>
<div class="ui grid">
<div class="eleven wide column">
<div class="ui mini horizontal link list">
<div class="item">
<img src="../static/images/wechat.jpg" alt="" class="ui avatar image">
<div class="content"><a href="#" class="header">hualili</a></div>
</div>
<div class="item">
<i class="calendar icon"></i> 2017-10-01
</div>
<div class="item">
<i class="eye icon"></i> 2342
</div>
</div>
</div>
<div class="right aligned five wide 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="../static/images/wechat.jpg" alt="" class="ui rounded image">
</a>
</div>
</div>
</div>
<div class="ui padded vertical segment m-padded-tb-large">
<div class="ui mobile reversed stackable grid">
<div class="eleven wide column">
<h3 class="ui header">你真的理解什么是财富自由吗?</h3>
<p class="m-text">正确做好任何一件事情的前提是清晰、正确的理解目标。而事实是,我们很多人很多时候根本没有对目标正确的定义,甚至根本从来就没有想过,只是大家都那么做而已…...</p>
<div class="ui grid">
<div class="eleven wide column">
<div class="ui mini horizontal link list">
<div class="item">
<img src="../static/images/wechat.jpg" alt="" class="ui avatar image">
<div class="content"><a href="#" class="header">hualili</a></div>
</div>
<div class="item">
<i class="calendar icon"></i> 2017-10-01
</div>
<div class="item">
<i class="eye icon"></i> 2342
</div>
</div>
</div>
<div class="right aligned five wide 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="../static/images/wechat.jpg" alt="" class="ui rounded image">
</a>
</div>
</div>
</div>
<div class="ui padded vertical segment m-padded-tb-large">
<div class="ui mobile reversed stackable grid">
<div class="eleven wide column">
<h3 class="ui header">你真的理解什么是财富自由吗?</h3>
<p class="m-text">正确做好任何一件事情的前提是清晰、正确的理解目标。而事实是,我们很多人很多时候根本没有对目标正确的定义,甚至根本从来就没有想过,只是大家都那么做而已…...</p>
<div class="ui grid">
<div class="eleven wide column">
<div class="ui mini horizontal link list">
<div class="item">
<img src="../static/images/wechat.jpg" alt="" class="ui avatar image">
<div class="content"><a href="#" class="header">hualili</a></div>
</div>
<div class="item">
<i class="calendar icon"></i> 2017-10-01
</div>
<div class="item">
<i class="eye icon"></i> 2342
</div>
</div>
</div>
<div class="right aligned five wide 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="../static/images/wechat.jpg" alt="" class="ui rounded image">
</a>
</div>
</div>
</div>
<div class="ui padded vertical segment m-padded-tb-large">
<div class="ui mobile reversed stackable grid">
<div class="eleven wide column">
<h3 class="ui header">你真的理解什么是财富自由吗?</h3>
<p class="m-text">正确做好任何一件事情的前提是清晰、正确的理解目标。而事实是,我们很多人很多时候根本没有对目标正确的定义,甚至根本从来就没有想过,只是大家都那么做而已…...</p>
<div class="ui grid">
<div class="eleven wide column">
<div class="ui mini horizontal link list">
<div class="item">
<img src="../static/images/wechat.jpg" alt="" class="ui avatar image">
<div class="content"><a href="#" class="header">hualili</a></div>
</div>
<div class="item">
<i class="calendar icon"></i> 2017-10-01
</div>
<div class="item">
<i class="eye icon"></i> 2342
</div>
</div>
</div>
<div class="right aligned five wide 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="../static/images/wechat.jpg" alt="" class="ui rounded image">
</a>
</div>
</div>
</div>
<div class="ui padded vertical segment m-padded-tb-large">
<div class="ui mobile reversed stackable grid">
<div class="eleven wide column">
<h3 class="ui header">你真的理解什么是财富自由吗?</h3>
<p class="m-text">正确做好任何一件事情的前提是清晰、正确的理解目标。而事实是,我们很多人很多时候根本没有对目标正确的定义,甚至根本从来就没有想过,只是大家都那么做而已…...</p>
<div class="ui grid">
<div class="eleven wide column">
<div class="ui mini horizontal link list">
<div class="item">
<img src="../static/images/wechat.jpg" alt="" class="ui avatar image">
<div class="content"><a href="#" class="header">hualili</a></div>
</div>
<div class="item">
<i class="calendar icon"></i> 2017-10-01
</div>
<div class="item">
<i class="eye icon"></i> 2342
</div>
</div>
</div>
<div class="right aligned five wide 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="../static/images/wechat.jpg" alt="" class="ui rounded image">
</a>
</div>
</div>
</div>
<div class="ui padded vertical segment m-padded-tb-large">
<div class="ui mobile reversed stackable grid">
<div class="eleven wide column">
<h3 class="ui header">你真的理解什么是财富自由吗?</h3>
<p class="m-text">正确做好任何一件事情的前提是清晰、正确的理解目标。而事实是,我们很多人很多时候根本没有对目标正确的定义,甚至根本从来就没有想过,只是大家都那么做而已…...</p>
<div class="ui grid">
<div class="eleven wide column">
<div class="ui mini horizontal link list">
<div class="item">
<img src="../static/images/wechat.jpg" alt="" class="ui avatar image">
<div class="content"><a href="#" class="header">hualili</a></div>
</div>
<div class="item">
<i class="calendar icon"></i> 2017-10-01
</div>
<div class="item">
<i class="eye icon"></i> 2342
</div>
</div>
</div>
<div class="right aligned five wide 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="../static/images/wechat.jpg" alt="" class="ui rounded image">
</a>
</div>
</div>
</div>
<div class="ui padded vertical segment m-padded-tb-large">
<div class="ui mobile reversed stackable grid">
<div class="eleven wide column">
<h3 class="ui header">你真的理解什么是财富自由吗?</h3>
<p class="m-text">正确做好任何一件事情的前提是清晰、正确的理解目标。而事实是,我们很多人很多时候根本没有对目标正确的定义,甚至根本从来就没有想过,只是大家都那么做而已…...</p>
<div class="ui grid">
<div class="eleven wide column">
<div class="ui mini horizontal link list">
<div class="item">
<img src="../static/images/wechat.jpg" alt="" class="ui avatar image">
<div class="content"><a href="#" class="header">hualili</a></div>
</div>
<div class="item">
<i class="calendar icon"></i> 2017-10-01
</div>
<div class="item">
<i class="eye icon"></i> 2342
</div>
</div>
</div>
<div class="right aligned five wide 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="../static/images/wechat.jpg" alt="" class="ui rounded image">
</a>
</div>
</div>
</div>
<div class="ui padded vertical segment m-padded-tb-large">
<div class="ui mobile reversed stackable grid">
<div class="eleven wide column">
<h3 class="ui header">你真的理解什么是财富自由吗?</h3>
<p class="m-text">正确做好任何一件事情的前提是清晰、正确的理解目标。而事实是,我们很多人很多时候根本没有对目标正确的定义,甚至根本从来就没有想过,只是大家都那么做而已…...</p>
<div class="ui grid">
<div class="eleven wide column">
<div class="ui mini horizontal link list">
<div class="item">
<img src="../static/images/wechat.jpg" alt="" class="ui avatar image">
<div class="content"><a href="#" class="header">hualili</a></div>
</div>
<div class="item">
<i class="calendar icon"></i> 2017-10-01
</div>
<div class="item">
<i class="eye icon"></i> 2342
</div>
</div>
</div>
<div class="right aligned five wide 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="../static/images/wechat.jpg" alt="" class="ui rounded image">
</a>
</div>
</div>
</div>
<!--*/-->
</div>
<!--footer-->
<div class="ui bottom attached segment" th:if="${page.totalPages}>1">
<div class="ui middle aligned two column grid">
<div class="column">
<a href="#" th:href="@{/(page=${page.number}-1)}" th:unless="${page.first}" class="ui mini teal basic button">上一页</a>
</div>
<div class="right aligned column">
<a href="#" th:href="@{/(page=${page.number}+1)}" th:unless="${page.last}" class="ui mini teal basic button">下一页</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<br>
<br>
<!--底部footer-->
<footer th:replace="_fragments :: footer" class="ui inverted vertical segment m-padded-tb-massive">
<div class="ui center aligned container">
<div class="ui inverted divided stackable grid">
<div class="three wide column">
<div class="ui inverted link list">
<div class="item">
<img src="../static/images/wechat.jpg" th:src="@{/images/wechat.jpg}" class="ui rounded image" alt="" style="width: 110px">
</div>
</div>
</div>
<div class="three wide column">
<h4 class="ui inverted header m-text-thin m-text-spaced " >最新新闻</h4>
<div class="ui inverted link list">
<a href="#" class="item m-text-thin">用户故事(User Story)</a>
<a href="#" class="item m-text-thin">用户故事(User Story)</a>
<a href="#" class="item m-text-thin">用户故事(User Story)</a>
</div>
</div>
<div class="three wide column">
<h4 class="ui inverted header m-text-thin m-text-spaced ">联系我</h4>
<div class="ui inverted link list">
<a href="#" class="item m-text-thin">Email:hualili@163.com</a>
<a href="#" class="item m-text-thin">QQ:hualili</a>
</div>
</div>
<div class="seven wide column">
<h4 class="ui inverted header m-text-thin m-text-spaced ">news</h4>
<p class="m-text-thin m-text-spaced m-opacity-mini">消息即狭义的新闻,它是对新近发生的有社会意义并引起公众兴趣的事实的简短报道。因此,真实性、时效性及文字少、篇幅小成为消息的基本特征...</p>
</div>
</div>
<div class="ui inverted section divider"></div>
<p class="m-text-thin m-text-spaced m-opacity-tiny">Copyright © 2016 - 2017 hualili Designed by hualili</p>
</div>
</footer>
<!--/*/<th:block th:replace="_fragments :: 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>
<!--/*/</th:block>/*/-->
<script>
$('.menu.toggle').click(function () {
$('.m-item').toggleClass('m-mobile-hide');
});
</script>
</body>
</html>
tags.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:replace="_fragments :: head(~{::title})">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>标签</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
<link rel="stylesheet" href="../static/css/me.css">
</head>
<body>
<!--导航-->
<nav th:replace="_fragments :: menu(3)" class="ui inverted attached segment m-padded-tb-mini m-shadow-small" >
<div class="ui container">
<div class="ui inverted secondary stackable menu">
<h2 class="ui teal header item">news</h2>
<a href="#" class=" m-item item m-mobile-hide"><i class="mini home icon"></i>首页</a>
<a href="#" class="m-item item m-mobile-hide"><i class="mini idea icon"></i>分类</a>
<a href="#" class="active m-item item m-mobile-hide"><i class="mini tags icon"></i>标签</a>
<a href="#" class="m-item item m-mobile-hide"><i class="mini clone icon"></i>归档</a>
<a href="#" class="m-item item m-mobile-hide"><i class="mini info icon"></i>关于我</a>
<div class="right m-item item m-mobile-hide">
<div class="ui icon inverted transparent input m-margin-tb-tiny">
<input type="text" placeholder="Search....">
<i class="search link icon"></i>
</div>
</div>
</div>
</div>
<a href="#" class="ui menu toggle black icon button m-right-top m-mobile-show">
<i class="sidebar icon"></i>
</a>
</nav>
<!--中间内容-->
<div class="m-container-small m-padded-tb-big animated fadeIn">
<div class="ui container">
<!--header-->
<div class="ui top attached segment">
<div class="ui middle aligned two column grid">
<div class="column">
<h3 class="ui teal header">标签</h3>
</div>
<div class="right aligned column">
共 <h2 class="ui orange header m-inline-block m-text-thin" th:text="${#arrays.length(tags)}"> 14 </h2> 个
</div>
</div>
</div>
<div class="ui attached segment m-padded-tb-large">
<a href="#" th:href="@{/tags/{id}(id=${tag.id})}" class="ui basic left pointing large label m-margin-tb-tiny" th:classappend="${tag.id==activeTagId} ? 'teal'" th:each="tag : ${tags}">
<span th:text="${tag.name}">方法论</span> <div class="detail" th:text="${#arrays.length(tag.newsList)}">23</div>
</a>
</div>
<div class="ui top attached teal segment">
<div class="ui padded vertical segment m-padded-tb-large" th:each="news : ${page.content}">
<div class="ui middle aligned mobile reversed stackable grid" >
<div class="eleven wide column">
<h3 class="ui header" ><a href="#" th:href="@{/news/{id}(id=${news.id})}" target="_blank" class="m-black" th:text="${news.title}">你真的理解什么是财富自由吗?</a></h3>
<p class="m-text" th:text="|${news.description}......|">正确做好任何一件事情的前提是清晰、正确的理解目标。而事实是,我们很多人很多时候根本没有对目标正确的定义,甚至根本从来就没有想过,只是大家都那么做而已…...</p>
<div class="ui grid">
<div class="row">
<div class="eleven wide column">
<div class="ui mini horizontal link list">
<div class="item">
<img src="../static/images/wechat.jpg" th:src="@{${news.user.avatar}}" alt="" class="ui avatar image">
<div class="content"><a href="#" class="header" th:text="${news.user.nickname}" >hualili</a></div>
</div>
<div class="item">
<i class="calendar icon"></i><span th:text="${#dates.format(news.updateTime,'yyyy-MM-dd')}">2017-10-01</span>
</div>
<div class="item">
<i class="eye icon"></i> <span th:text="${news.views}">2342</span>
</div>
</div>
</div>
<div class="right aligned five wide column">
<a href="#" target="_blank" class="ui teal basic label m-padded-tiny m-text-thin" th:text="${news.type.name}">认知升级</a>
</div>
</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==activeTagId} ? 'teal'" th:each="tag : ${news.tags}" th:text="${tag.name}">方法论</a>
</div>
</div>
</div>
</div>
<div class="five wide column">
<a href="#" th:href="@{/news/{id}(id=${news.id})}" target="_blank">
<img src="/static/images/wechat.jpg" th:src="@{${news.firstPicture}}" alt="" class="ui rounded image">
</a>
</div>
</div>
</div>
</div>
<!--footer-->
<div class="ui bottom attached segment" th:if="${page.totalPages}>1">
<div class="ui middle aligned two column grid">
<div class="column">
<a href="#" th:href="@{'/tags/'+${activeTagId}(page=${page.number}-1)}" th:unless="${page.first}" class="ui mini teal basic button">上一页</a>
</div>
<div class="right aligned column">
<a href="#" th:href="@{'/tags/'+${activeTagId}(page=${page.number}+1)}" th:unless="${page.last}" class="ui mini teal basic button">下一页</a>
</div>
</div>
</div>
</div>
</div>
<br>
<br>
<!--底部footer-->
<footer th:replace="_fragments :: footer" class="ui inverted vertical segment m-padded-tb-massive">
<div class="ui center aligned container">
<div class="ui inverted divided stackable grid">
<div class="three wide column">
<div class="ui inverted link list">
<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-text-thin m-text-spaced " >最新新闻</h4>
<div class="ui inverted link list">
<a href="#" class="item m-text-thin">用户故事(User Story)</a>
<a href="#" class="item m-text-thin">用户故事(User Story)</a>
<a href="#" class="item m-text-thin">用户故事(User Story)</a>
</div>
</div>
<div class="three wide column">
<h4 class="ui inverted header m-text-thin m-text-spaced ">联系我</h4>
<div class="ui inverted link list">
<a href="#" class="item m-text-thin">Email:hualili@163.com</a>
<a href="#" class="item m-text-thin">QQ:hualili</a>
</div>
</div>
<div class="seven wide column">
<h4 class="ui inverted header m-text-thin m-text-spaced ">news</h4>
<p class="m-text-thin m-text-spaced m-opacity-mini">消息即狭义的新闻,它是对新近发生的有社会意义并引起公众兴趣的事实的简短报道。因此,真实性、时效性及文字少、篇幅小成为消息的基本特征...</p>
</div>
</div>
<div class="ui inverted section divider"></div>
<p class="m-text-thin m-text-spaced m-opacity-tiny">Copyright © 2016 - 2017 hualili Designed by hualili</p>
</div>
</footer>
<!--/*/<th:block th:replace="_fragments :: 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>
<!--/*/</th:block>/*/-->
<script>
$('.menu.toggle').click(function () {
$('.m-item').toggleClass('m-mobile-hide');
});
</script>
</body>
</html>
types.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:replace="_fragments :: head(~{::title})">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>分类</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
<link rel="stylesheet" href="../static/css/me.css">
</head>
<body>
<!--导航-->
<nav th:replace="_fragments :: menu(2)" class="ui inverted attached segment m-padded-tb-mini m-shadow-small" >
<div class="ui container">
<div class="ui inverted secondary stackable menu">
<h2 class="ui teal header item">news</h2>
<a href="#" class=" m-item item m-mobile-hide"><i class="mini home icon"></i>首页</a>
<a href="#" class="active m-item item m-mobile-hide"><i class="mini idea icon"></i>分类</a>
<a href="#" class="m-item item m-mobile-hide"><i class="mini tags icon"></i>标签</a>
<a href="#" class="m-item item m-mobile-hide"><i class="mini clone icon"></i>归档</a>
<a href="#" class="m-item item m-mobile-hide"><i class="mini info icon"></i>关于我</a>
<div class="right m-item item m-mobile-hide">
<div class="ui icon inverted transparent input m-margin-tb-tiny">
<input type="text" placeholder="Search....">
<i class="search link icon"></i>
</div>
</div>
</div>
</div>
<a href="#" class="ui menu toggle black icon button m-right-top m-mobile-show">
<i class="sidebar icon"></i>
</a>
</nav>
<!--中间内容-->
<div class="m-container-small m-padded-tb-big animated fadeIn">
<div class="ui container">
<!--header-->
<div class="ui top attached segment">
<div class="ui middle aligned two column grid">
<div class="column">
<h3 class="ui teal header">分类</h3>
</div>
<div class="right aligned column">
共 <h2 class="ui orange header m-inline-block m-text-thin" th:text="${#arrays.length(types)}"> 14 </h2> 个
</div>
</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==activeTypeId} ? 'teal'" th:text="${type.name}">思考与感悟</a>
<div class="ui basic left pointing label" th:classappend="${type.id==activeTypeId} ? 'teal'" th:text="${#arrays.length(type.newsList)}">24</div>
</div>
</div>
<div class="ui top attached teal segment">
<div class="ui padded vertical segment m-padded-tb-large" th:each="news : ${page.content}">
<div class="ui middle aligned mobile reversed stackable grid" >
<div class="eleven wide column">
<h3 class="ui header" ><a href="#" th:href="@{/news/{id}(id=${news.id})}" target="_blank" class="m-black" th:text="${news.title}">你真的理解什么是财富自由吗?</a></h3>
<p class="m-text" th:text="|${news.description}......|">正确做好任何一件事情的前提是清晰、正确的理解目标。而事实是,我们很多人很多时候根本没有对目标正确的定义,甚至根本从来就没有想过,只是大家都那么做而已…...</p>
<div class="ui grid">
<div class="eleven wide column">
<div class="ui mini horizontal link list">
<div class="item">
<img src="/static/images/wechat.jpg" th:src="@{${news.user.avatar}}" alt="" class="ui avatar image">
<div class="content"><a href="#" class="header" th:text="${news.user.nickname}" >hualili</a></div>
</div>
<div class="item">
<i class="calendar icon"></i><span th:text="${#dates.format(news.updateTime,'yyyy-MM-dd')}">2017-10-01</span>
</div>
<div class="item">
<i class="eye icon"></i> <span th:text="${news.views}">2342</span>
</div>
</div>
</div>
<div class="right aligned five wide column">
<a href="#" target="_blank" class="ui teal basic label m-padded-tiny m-text-thin" th:text="${news.type.name}">认知升级</a>
</div>
</div>
</div>
<div class="five wide column">
<a href="#" th:href="@{/news/{id}(id=${news.id})}" target="_blank">
<img src="/static/images/wechat.jpg" th:src="@{${news.firstPicture}}" alt="" class="ui rounded image">
</a>
</div>
</div>
</div>
</div>
<!--footer-->
<div class="ui bottom attached segment" th:if="${page.totalPages}>1">
<div class="ui middle aligned two column grid">
<div class="column">
<a href="#" th:href="@{'/types/'+${activeTypeId}(page=${page.number}-1)}" th:unless="${page.first}" class="ui mini teal basic button">上一页</a>
</div>
<div class="right aligned column">
<a href="#" th:href="@{'/types/'+${activeTypeId}(page=${page.number}+1)}" th:unless="${page.last}" class="ui mini teal basic button">下一页</a>
</div>
</div>
</div>
</div>
</div>
<br>
<br>
<!--底部footer-->
<footer th:replace="_fragments :: footer" class="ui inverted vertical segment m-padded-tb-massive">
<div class="ui center aligned container">
<div class="ui inverted divided stackable grid">
<div class="three wide column">
<div class="ui inverted link list">
<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-text-thin m-text-spaced " >最新新闻</h4>
<div class="ui inverted link list">
<a href="#" class="item m-text-thin">用户故事(User Story)</a>
<a href="#" class="item m-text-thin">用户故事(User Story)</a>
<a href="#" class="item m-text-thin">用户故事(User Story)</a>
</div>
</div>
<div class="three wide column">
<h4 class="ui inverted header m-text-thin m-text-spaced ">联系我</h4>
<div class="ui inverted link list">
<a href="#" class="item m-text-thin">Email:hualili@163.com</a>
<a href="#" class="item m-text-thin">QQ:hualili</a>
</div>
</div>
<div class="seven wide column">
<h4 class="ui inverted header m-text-thin m-text-spaced ">news</h4>
<p class="m-text-thin m-text-spaced m-opacity-mini">消息即狭义的新闻,它是对新近发生的有社会意义并引起公众兴趣的事实的简短报道。因此,真实性、时效性及文字少、篇幅小成为消息的基本特征。...</p>
</div>
</div>
<div class="ui inverted section divider"></div>
<p class="m-text-thin m-text-spaced m-opacity-tiny">Copyright © 2016 - 2017 hualili Designed by hualili</p>
</div>
</footer>
<!--/*/<th:block th:replace="_fragments :: 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>
<!--/*/</th:block>/*/-->
<script>
$('.menu.toggle').click(function () {
$('.m-item').toggleClass('m-mobile-hide');
});
</script>
</body>
</html>
archives.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:replace="_fragments :: head(~{::title})">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>归档</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
<link rel="stylesheet" href="../static/css/me.css">
</head>
<body>
<!--导航-->
<nav th:replace="_fragments :: menu(4)" class="ui inverted attached segment m-padded-tb-mini m-shadow-small" >
<div class="ui container">
<div class="ui inverted secondary stackable menu">
<h2 class="ui teal header item">news</h2>
<a href="#" class=" m-item item m-mobile-hide"><i class="mini home icon"></i>首页</a>
<a href="#" class="m-item item m-mobile-hide"><i class="mini idea icon"></i>分类</a>
<a href="#" class=" m-item item m-mobile-hide"><i class="mini tags icon"></i>标签</a>
<a href="#" class="active m-item item m-mobile-hide"><i class="mini clone icon"></i>归档</a>
<a href="#" class="m-item item m-mobile-hide"><i class="mini info icon"></i>关于我</a>
<div class="right m-item item m-mobile-hide">
<div class="ui icon inverted transparent input m-margin-tb-tiny">
<input type="text" placeholder="Search....">
<i class="search link icon"></i>
</div>
</div>
</div>
</div>
<a href="#" class="ui menu toggle black icon button m-right-top m-mobile-show">
<i class="sidebar icon"></i>
</a>
</nav>
<!--中间内容-->
<div class="m-container-small m-padded-tb-big" style="height: 800px!important;">
<div class="ui container">
<!--header-->
<div class="ui top attached padded segment">
<div class="ui middle aligned two column grid">
<div class="column">
<h3 class="ui teal header">归档</h3>
</div>
<div class="right aligned column">
共 <h2 class="ui orange header m-inline-block m-text-thin" th:text="${newsCount}"> 114 </h2> 篇新闻
</div>
</div>
</div>
<th:block th:each="item : ${archiveMap}">
<h3 class="ui center aligned header" th:text="${item.key}">2017</h3>
<div class="ui fluid vertical menu">
<a href="#" th:href="@{/news/{id}(id=${news.id})}" target="_blank" class="item" th:each="news : ${item.value}">
<span>
<i class="mini teal circle icon"></i><span th:text="${news.title}">关于刻意练习的清单</span>
<div class="ui teal basic left pointing label m-padded-mini " th:text="${#dates.format(news.updateTime,'MMMdd')}">9月03</div>
</span>
<div class="ui orange basic left pointing label m-padded-mini " th:text="${news.flag}">原创</div>
</a>
<!--/*-->
<a href="#" target="_blank" class="item">
<span>
<i class="mini teal circle icon"></i>关于刻意练习的清单
<div class="ui teal basic left pointing label m-padded-mini ">9月03</div>
</span>
<div class="ui orange basic left pointing label m-padded-mini ">原创</div>
</a>
<a href="#" target="_blank" class="item">
<span>
<i class="mini teal circle icon"></i>关于刻意练习的清单
<div class="ui teal basic left pointing label m-padded-mini ">9月03</div>
</span>
<div class="ui orange basic left pointing label m-padded-mini ">原创</div>
</a>
<a href="#" target="_blank" class="item">
<span>
<i class="mini teal circle icon"></i>关于刻意练习的清单
<div class="ui teal basic left pointing label m-padded-mini ">9月03</div>
</span>
<div class="ui orange basic left pointing label m-padded-mini ">原创</div>
</a>
<!--*/-->
</div>
</th:block>
</div>
</div>
<br>
<br>
<!--底部footer-->
<footer th:replace="_fragments :: footer" class="ui inverted vertical segment m-padded-tb-massive">
<div class="ui center aligned container">
<div class="ui inverted divided stackable grid">
<div class="three wide column">
<div class="ui inverted link list">
<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-text-thin m-text-spaced " >最新新闻</h4>
<div class="ui inverted link list">
<a href="#" class="item m-text-thin">用户故事(User Story)</a>
<a href="#" class="item m-text-thin">用户故事(User Story)</a>
<a href="#" class="item m-text-thin">用户故事(User Story)</a>
</div>
</div>
<div class="three wide column">
<h4 class="ui inverted header m-text-thin m-text-spaced ">联系我</h4>
<div class="ui inverted link list">
<a href="#" class="item m-text-thin">Email:hualili@163.com</a>
<a href="#" class="item m-text-thin">QQ:hualili</a>
</div>
</div>
<div class="seven wide column">
<h4 class="ui inverted header m-text-thin m-text-spaced ">news</h4>
<p class="m-text-thin m-text-spaced m-opacity-mini">消息即狭义的新闻,它是对新近发生的有社会意义并引起公众兴趣的事实的简短报道。因此,真实性、时效性及文字少、篇幅小成为消息的基本特征...</p>
</div>
</div>
<div class="ui inverted section divider"></div>
<p class="m-text-thin m-text-spaced m-opacity-tiny">Copyright © 2016 - 2017 hualili Designed by hualili</p>
</div>
</footer>
<!--/*/<th:block th:replace="_fragments :: 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>
<!--/*/</th:block>/*/-->
<script>
$('.menu.toggle').click(function () {
$('.m-item').toggleClass('m-mobile-hide');
});
</script>
</body>
</html>