列表如果都是统一的样式、高度未免有些过于单调和重重复。在一些关键性文章中加一些特殊的样式也是我们常用的举措,例如文章置顶。但是文章置顶多了就会看不见新文章,置顶折叠展示的力度又不够。所以对于有特殊意义的文章展示特殊的效果是非常必要的,丰富层次。

这个文章的核心思路就是给文章的markdown文件里添加一个large参数,当large=true时,则文章会添加一个class。然后针对这个class进行css的调整。让我们开始吧。

样式预览

Demo

修改源文件

编辑themes/butterfly/layout/includes/mixins/post-ui.pug

1
2
3
4
5
mixin postUI(posts)
each article , index in page.posts.data
if article.hide !== true
- .recent-post-item
+ .recent-post-item(class= (article.large === true) ? 'post-card-large' : '')

只是在.recent-post-item后面加一个三元运算符的判断,当large参数为post-card-large时,添加一个classpost-card-large

内联样式的扩展性不如添加class,所以这里使用的添加class方法而没用内联样式。建议使用class

修改css

这部分就比较容易了。在这里放出本站的样式,可能因为魔改问题仅供参考,不能直接使用。

1
2
3
4
5
6
7
#recent-posts>.post-card-large {
height: 20em!important;
}

#recent-posts > .post-card-large >.recent-post-info > .content{
-webkit-line-clamp: 5!important;
}