首页文章卡片左上角添加标签

仿照着空梦的首页,写出了这个首页文章卡片左上角添加标签的教程。

效果示例


我们先找到post-ui.pug文件,位置为layout/includes/mixins,在文件的约21行的位置添加如下内容
···
if article.cardtag
  .card-tag= article.cardtag

if post_cover && theme.cover.index_enable
···

打开你的文章,添加cardtag: 魔改

创建custom.css位置如下source/css/custom/custom.css
/* 文章标签*/
#recent-posts .recent-post-item .card-tag {
  left: 0;
  border-bottom-right-radius: 12px;
  position: absolute;
  top: 0;
  padding: 3px 8px;
  background: linear-gradient(90deg,#e5b085,#d48f16);
  color: #fff;
  font-size: .85em;
  z-index: 1;
}

可能标签名和你的不一样,记得自己修改,不要忘记把custom.css引入到你的站点。