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

这个文章的核心思路就是给文章的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参数为true时，添加一个class：post-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;
}