子比主题美化 – 文章角标（初一原创-筱信日记站长二改）

前言

很高兴认识筱信日记站长，网站也挺好看的，这是基于初一写的角标代码改的，区别在与初一的是调用子比内置的可视化颜色选取，筱信日记站长的是自定义颜色代码，各有千秋吧。主要功能是实现文章列表封面的自定义文字声明。之前也有发了好几个版本了，这个还是比较适用的哦，本站目前替换了原版，使用了这个版本。

效果图

文章发布时可自行选择内容与颜色，不填写内容则不显示

在此基础上我把渐变颜色可视化了一下，但是搞不来选定颜色。

教程

css代码

/*角标css*/
.posts-item.card .item-thumbnail {
  background:#c4cffa26;
  width:100%;
  padding-bottom:var(--posts-card-scale);
}
a.item-category {
  position:absolute;
  left:10px;
  top:10px;
  padding:5px 6px;
  font-size:1rem;
  line-height:1;
  color:#fff;
  background:var(--theme-color);
  border-radius:6px;
}
a.item-category-app {
  position:absolute;
  height:24px;
  line-height:24px;
  width:100%;
  text-align:center;
  bottom:0;
  left:0;
  background:radial-gradient(circle,#3783ff,#3783ffbf);
  color:#fff;
  font-size:12px;
  border-radius:0 0 10px 10px;
}
a.item-category-app-b {
  position:absolute;
  height:24px;
  line-height:24px;
  width:100%;
  text-align:center;
  bottom:0;
  left:0;
  background:radial-gradient(circle,#ff5631,#ff5631ba);
  color:#fff;
  font-size:12px;
  border-radius:0 0 10px 10px;
}
a.item-category-app-c {
  position:absolute;
  height:24px;
  line-height:24px;
  width:100%;
  text-align:center;
  bottom:0;
  left:0;
  background:radial-gradient(circle,#464242,#464242ad);
  color:#fff;
  font-size:12px;
  border-radius:0 0 10px 10px;
}
span.bottom-l {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.n-collect-item-bottom {
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:25px;
  background:var(--theme-color);
  border-radius:0 0 var(--main-radius);
  font-size:13px;
  color:#fff;
  text-shadow:0 2px 2px rgba(0,0,0,.16);
  display:flex;
  -webkit-box-align:center;
  align-items:center;
  -webkit-box-pack:justify;
  justify-content:space-between;
  padding:0 18px;
  z-index:5;
  justify-content:center;
}
.jiaobiao2 {
  position:absolute;
  top:10px;
  right:-50px;
  z-index:1;
  width:140px;
  height:20px;
  background:var(--theme-color);
  color:#fff;
  line-height:20px;
  transform:rotate(45deg);
  text-align:center;
  font-size:12px;
  left:auto;
  border-radius:0 50px 50px 0;
}

将下面代码添加进子比主题下的func.php文件内,若没有则创建一个,如果是新建func.php文件夹记得复制<?php 去掉前面两竖线

打开子比主题文件夹下的inc/functions/zib-post-list.php文件，搜索 置顶 添加以下代码

//添加在这个代码的下面一行
 if (is_sticky()) {
        $sticky = '<badge class="img-badge left jb-red">置顶</badge>';
    } else {
        $sticky = '';
    }
//在这加

新增代码如下