博客项目目录： 请戳这里
准备
问题：我们需要把红框标记的时间，转换成“多少秒前”、“多少小时前”、“几个月前”等
分析：可以继承DirectiveHandler的BaseMethod，自定义时间模板，然后通过FreeMarker将方法注入到前端页面。
1.引入maven依赖
<!-- commons-lang3 -->
<dependency>
<groupId>org.apache.commons</groupId>
<artifactId>commons-lang3</artifactId>
<version>3.9</version>
</dependency>
2.新建common包，引入红框标记的类
3.新建template包，自定义TimeAgoMethod类
@Component
public class TimeAgoMethod extends DirectiveHandler.BaseMethod {
private static final long ONE_MINUTE = 60000L;
private static final long ONE_HOUR = 3600000L;
private static final long ONE_DAY = 86400000L;
private static final long ONE_WEEK = 604800000L;
private static final String ONE_SECOND_AGO = "秒前";
private static final String ONE_MINUTE_AGO = "分钟前";
private static final String ONE_HOUR_AGO = "小时前";
private static final String ONE_DAY_AGO = "天前";
private static final String ONE_MONTH_AGO = "月前";
private static final String ONE_YEAR_AGO = "年前";
private static final String ONE_UNKNOWN = "未知";
@Override
public Object exec(List arguments) throws TemplateModelException {
Date time = getDate(arguments, 0);
return format(time);
}
public static String format(Date date) {
if (null == date) {
return ONE_UNKNOWN;
}
long delta = new Date().getTime() - date.getTime();
if (delta < 1L * ONE_MINUTE) {
long seconds = toSeconds(delta);
return (seconds <= 0 ? 1 : seconds) + ONE_SECOND_AGO;
}
if (delta < 45L * ONE_MINUTE) {
long minutes = toMinutes(delta);
return (minutes <= 0 ? 1 : minutes) + ONE_MINUTE_AGO;
}
if (delta < 24L * ONE_HOUR) {
long hours = toHours(delta);
return (hours <= 0 ? 1 : hours) + ONE_HOUR_AGO;
}
if (delta < 48L * ONE_HOUR) {
return "昨天";
}
if (delta < 30L * ONE_DAY) {
long days = toDays(delta);
return (days <= 0 ? 1 : days) + ONE_DAY_AGO;
}
if (delta < 12L * 4L * ONE_WEEK) {
long months = toMonths(delta);
return (months <= 0 ? 1 : months) + ONE_MONTH_AGO;
} else {
long years = toYears(delta);
return (years <= 0 ? 1 : years) + ONE_YEAR_AGO;
}
}
private static long toSeconds(long date) {
return date / 1000L;
}
private static long toMinutes(long date) {
return toSeconds(date) / 60L;
}
private static long toHours(long date) {
return toMinutes(date) / 60L;
}
private static long toDays(long date) {
return toHours(date) / 24L;
}
private static long toMonths(long date) {
return toDays(date) / 30L;
}
private static long toYears(long date) {
return toMonths(date) / 365L;
}
}
4.新建FreemarkerConfig配置类，将方法注入到前端
@Configuration
public class FreemarkerConfig {
@Autowired
private freemarker.template.Configuration configuration;
@PostConstruct
public void setUp() {
configuration.setSharedVariable("timeAgo", new TimeAgoMethod());
}
}
5.修改index.ftl
<span>${timeAgo(post.created)}</span>
6.测试
已经达到要显示的效果
置顶内容展示
问题：展示红框标记的内容
分析：可以继承TemplateDirective，自定义文章模板，然后通过FreeMarker将方法注入到前端页面。
1.自定义PostsTemplate类
根据置顶信息和分类，来确定查找的文章，并自定义一个名为“posts”的标签，最后实际查找的结果存在results里面。
@Component
public class PostsTemplate extends TemplateDirective {
@Autowired
PostService postService;
@Override
public String getName() {
return "posts";
}
@Override
public void execute(DirectiveHandler handler) throws Exception {
Integer level = handler.getInteger("level");
Integer pn = handler.getInteger("pn", 1);
Integer size = handler.getInteger("size", 2);
Long categoryId = handler.getLong("categoryId");
IPage page = postService.paging(new Page(pn, size), categoryId, null, level, null, "created");
handler.put(RESULTS, page).render();
}
}
2.设置配置类信息，将自定义模板引入到前端
3.修改index.ftl相关内容
list标签与原来的pageData内容差不多，不过要将pageData改为results，然后在外面套一个posts标签，size为置顶文章有多少条，level为1表示需要置顶。
<@posts size=3 level=1>
<#list results.records as post>
<li>
<a href="/user/${post.authorId}" class="fly-avatar">
<img src="${post.authorAvatar}" alt="${post.authorName}">
</a>
<h2>
<a class="layui-badge">${post.categoryName}</a>
<a href="jie/detail.html">${post.title}</a>
</h2>
<div class="fly-list-info">
<a href="/user/${post.authorId}" link>
<cite>${post.authorName}</cite>
</a>
<span>${timeAgo(post.created)}</span>
<span class="fly-list-nums">
<i class="iconfont icon-pinglun1" title="回答"></i> ${post.commentCount}
</span>
</div>
<div class="fly-list-badge">
<!--<span class="layui-badge layui-bg-red">精帖</span>-->
</div>
</li>
</#list>
</@posts>
4.测试结果
发现有两条置顶信息，查看数据库，正好是level为1对应的文章
5.抽取文章查询部分
- 在common.ftl自定义文章列表
<#--文章列表-->
<#macro plisting post>
<li>
<a href="/user/${post.authorId}" class="fly-avatar">
<img src="${post.authorAvatar}" alt="${post.authorName}">
</a>
<h2>
<a class="layui-badge">${post.categoryName}</a>
<a href="/post/${post.id}">${post.title}</a>
</h2>
<div class="fly-list-info">
<a href="/user/${post.authorId}" link>
<cite>${post.authorName}</cite>
<!--
<i class="iconfont icon-renzheng" title="认证信息：XXX"></i>
<i class="layui-badge fly-badge-vip">VIP3</i>
-->
</a>
<span>${timeAgo(post.created)}</span>
<span class="fly-list-nums">
<i class="iconfont icon-pinglun1" title="回答"></i> ${post.commentCount}
</span>
</div>
<div class="fly-list-badge">
<!--<span class="layui-badge layui-bg-red">精帖</span>-->
</div>
</li>
</#macro>
- 在index.ftl进行引用
<ul class="fly-list">
<@posts size=3 level=1>
<#list results.records as post>
<@plisting post></@plisting>
</#list>
</@posts>
</ul>
<ul class="fly-list">
<#list pageData.records as post>
<@plisting post></@plisting>
</#list>
<@paging pageData></@paging>
</ul>
参考资料：
https://github.com/MarkerHub/eblog
本文暂时没有评论，来添加一个吧(●'◡'●)