子比主题美化 – 侧边悬浮排行榜

简介

教程

首先是CSS部分：

/*左悬浮排行榜*/
.fix-left {
  position:fixed;
  top:150px;
  left:10px;
  z-index:10;
}
.fix-item {
  width:50px;
  height:68px;
  background-color:#fff;
  box-shadow:0 5px 10px 0 rgba(0,0,0,.1);
  margin-bottom:20px;
  border-radius:15px;
  transition:all .2s;
}
.item-title {
  text-align:center;
  overflow:hidden;
  cursor:pointer;
  position:relative;
  color:#333;
}
img[data-v-3b17862b] {
  width:30px;
  display:block;
  margin:8px auto 0;
}
span[data-v-3b17862b] {
  font-size:12px;
}
i[data-v-3b17862b] {
  display:none;
  position:absolute;
  width:30px;
  height:30px;
  line-height:30px;
  text-align:center;
  right:0;
  top:0;
  color:#fff;
}
.rank-box[data-v-3b17862b] {
  display:none;
  padding:0 10px;
  height:350px;
  overflow-y:auto;
  background-color:#fff;
  box-shadow:0 5px 10px 0 rgba(0,0,0,.1);
  border-bottom-right-radius:15px;
  border-bottom-left-radius:15px;
}
ul[data-v-3b17862b] {
  list-style:none;
}
li[data-v-3b17862b] {
  border-bottom:1px solid #f3e9e961;
  padding:8px 0;
}
.img[data-v-3b17862b] {
  float:left;
  width:100%;
  height:100%;
  overflow:hidden;
  margin-right:8px;
}
.img img[data-v-3b17862b] {
  width:100%;
  height:100%;
}
ul li .title[data-v-3b17862b] {
  overflow:hidden;
  height:32px;
  font-size:12px;
  line-height:16px;
  color:#333;
}
.fix-left .fix-item.active[data-v-3b17862b] {
  width:280px;
}
.fix-left .fix-item.active .item-title[data-v-3b17862b] {
  height:60px;
  line-height:60px;
  background-color:#333;
  color:#fff;
  border-top-left-radius:15px;
  border-top-right-radius:15px;
}
.fix-left .fix-item.active .item-title img[data-v-3b17862b] {
  display:inline-block;
  margin:0 15px 0 0;
}
.fix-left .fix-item.active .item-title span[data-v-3b17862b] {
  font-size:14px;
}
.fix-left .fix-item.active .item-title i[data-v-3b17862b],.fix-left .fix-item.active .rank-box[data-v-3b17862b] {
  display:block
}
.enlighter-default .enlighter {
  max-height:400px;
  overflow-y:auto !important;
}
.posts-item .item-heading>a {
  font-weight:bold;
  color:unset;
}
@media (max-width:640px) {
  .meta-right .meta-view {
  display:unset !important;
}
}
a.class-item.js-rank {
    display: block;
    width: 100%;
    height: 80px;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}
.class-info {
    width: 190px;
    font-size: 12px;
}
.name {
    line-height: 20px;
    font-weight: 400;
    margin-bottom: 2px;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    overflow: hidden;
    -webkit-box-orient: vertical;
    font-size: 15px;
}
img.class-pic {
    width: 90px;
    border-radius: 8px;
    margin-right: 5px;
}
a.class-item.js-rank {
    display: block;
    width: 100%;
    height: 80px;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

然后是JS

// 获取元素
var element = document.getElementById("macgf_cb_bd");

// 添加点击事件监听器
element.addEventListener("click", function() {
    // 切换 class
    if (element.classList.contains("active")) {
        element.classList.remove("active");
    } else {
        element.classList.add("active");
    }
});
document.getElementById("macgf_cb_ht").addEventListener("click", function() {
    // 跳转到指定网址
    window.location.href = "你的首页网址";
});
document.addEventListener("DOMContentLoaded", function() {
    var divElement = document.getElementById("macgf_cb_ht");
    // 获取当前页面的完整URL
    var currentPageUrl = window.location.href;
    // 指定的首页URL
    var homepageUrl = "你的首页网址";
    // 检查当前页面是否为首页
    if (currentPageUrl !== homepageUrl) {
        // 如果是首页，则显示 div 元素
        divElement.style.display = "block";
    } else {
        // 如果不是首页，则隐藏 div 元素
        divElement.style.display = "none";
    }
});

接下来则是PHP代码方面

放置于func.php内