博客项目学习笔记七：首页与文章详情页置顶和加精

博客项目目录： 请戳这里

准备

将置顶和加精展示在首页和文章详情页，红框标记处应有置顶和加精，并与数据库里的数据是一致的
![在这里插入图片描述]( https://img-blog.csdnimg.cn/20210421213300362.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTY4MTA5,size_16,color_FFFFFF,t_70)
![在这里插入图片描述]( https://img-blog.csdnimg.cn/20210421213513383.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTY4MTA5,size_16,color_FFFFFF,t_70)

1.修改detail.ftl，在对应位置添加如下逻辑

level为1表示置顶，为0表示不置顶；recommend为1表示加精，为0表示不加精

<#if post.level gt 0><span class="layui-badge layui-bg-black">置顶</span></#if>
<#if post.recommend><span class="layui-badge layui-bg-red">精帖</span></#if>

2.测试详情页

![在这里插入图片描述]( https://img-blog.csdnimg.cn/20210421214117376.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTY4MTA5,size_16,color_FFFFFF,t_70)

3.查看数据库

发现测试文章的level和recommend都为1，符合预期
![在这里插入图片描述]( https://img-blog.csdnimg.cn/20210421214248322.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTY4MTA5,size_16,color_FFFFFF,t_70)

4.修改commen.ftl，在对应位置添加如下逻辑

<#if post.level gt 0><span class="layui-badge layui-bg-black">置顶</span></#if>
<#if post.recommend><span class="layui-badge layui-bg-red">精帖</span></#if>

5.测试首页

![在这里插入图片描述]( https://img-blog.csdnimg.cn/20210421214547103.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTY4MTA5,size_16,color_FFFFFF,t_70)

参考资料：

https://github.com/MarkerHub/eblog

posted @ 2021-05-24 20:42  xqxls  阅读(202)  评论(0)    收藏  举报