# 给B2主题添加排行榜功能，首页自定义HTML+创作者排行小工具+排行榜页面

> 发布时间：2026-06-03 00:06
> 最后更新：2026-06-03 00:49
> 原文链接：https://tcbdb.com/1254.html

看到好多网站都有排行榜功能，作为一个自媒体创作者平台，怎么可以没有呢

于是叫AI帮我写了个，然后自己再这里缝一下那里补一下的，终于可以用了

先看图：

![](https://s.tcbdb.com/wp-content/uploads/2026/06/20260602155302256.png)

![](https://s.tcbdb.com/wp-content/uploads/2026/06/20260602155302168.png)

支持后台自定义设置

![](https://s.tcbdb.com/wp-content/uploads/2026/06/20260602155504139.png)

![](https://s.tcbdb.com/wp-content/uploads/2026/06/20260602152305856.png)

第一张是首页自定义HTML（PC端是横着的），第二张是排行榜页面

![](https://s.tcbdb.com/wp-content/uploads/2026/06/20260602152248741.png)

![](https://s.tcbdb.com/wp-content/uploads/2026/06/20260602152305761.png)

![](https://s.tcbdb.com/wp-content/uploads/2026/06/20260602152305945.png)

然后是PC端排行榜页面的热搜榜和人气榜，其余榜单几乎差不多就不截图了，有需要可以自己去[排行榜](https://tcbdb.com/phb)页面看

最右边是创作者排行小工具，目前只有我一个人哈哈

下面直接说怎么弄

在`functions.php`文件中添加代码：

在`style.css`中添加代码：

`/* ========================================
   创作者排行榜模块（优设作者榜风格 v2）
   ======================================== */

.tobe-author-wrap {
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    font-family: 'tcbdbzt', sans-serif;
}

.dark .tobe-author-wrap {
    background: #1a1a2e;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

.tobe-author {
    padding: 24px;
}

/* ===== 顶部一排：标题+描述+统计+按钮 ===== */
.tobe-author .author-top {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
    padding-bottom: 18px;
    border-bottom: 1px solid #f0f0f0;
}

.dark .tobe-author .author-top {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

.tobe-author .author-top-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.tobe-author .item-title {
    margin: 0;
    font-size: 25px;
    font-weight: 700;
}

.tobe-author .item-title a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #1a1a1a;
    text-decoration: none !important;
    transition: color 0.2s ease;
}

.tobe-author .item-title a:hover {
    color: #ff0044;
}

.dark .tobe-author .item-title a {
    color: #f0f0f0;
}

.dark .tobe-author .item-title a:hover {
    color: #ff0044;
}

.tobe-author .item-title .icon-zuozhe {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: linear-gradient(135deg, #ff0044, #ff4d6d);
    color: #fff;
    font-size: 14px;
    font-style: normal;
}

.tobe-author .item-title .icon-zuozhe::before {
    content: '';
    display: block;
    width: 14px;
    height: 14px;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='%23fff'%3E%3Cpath d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E") center/contain no-repeat;
}

.tobe-author .author-top-desc {
    margin-top: 10px;
    flex: 1;
    min-width: 0;
    font-size: 14px;
    color: #888;
    line-height: 1.5;
}

.dark .tobe-author .author-top-desc {
    color: rgba(255, 255, 255, 0.45);
}

.tobe-author .author-top-stat {
    display: flex;
    align-items: baseline;
    gap: 4px;
    flex-shrink: 0;
}

.tobe-author .author-top-stat strong {
    font-size: 26px;
    font-weight: 800;
    color: #ff0044;
    line-height: 1;
}

.tobe-author .author-top-stat span {
    font-size: 12px;
    color: #999;
}

.dark .tobe-author .author-top-stat span {
    color: rgba(255, 255, 255, 0.4);
}

.tobe-author .author-top-btns {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.tobe-author .author-top-btns .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 18px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none !important;
    transition: all 0.25s ease;
    cursor: pointer;
    border: none;
    font-family: inherit;
    white-space: nowrap;
}

.tobe-author .author-top-btns .btn-orange {
    background: linear-gradient(135deg, #ff0044, #ff4d6d);
    color: #fff;
    box-shadow: 0 2px 8px rgba(255, 0, 68, 0.25);
}

.tobe-author .author-top-btns .btn-orange:hover {
    box-shadow: 0 4px 16px rgba(255, 0, 68, 0.4);
    transform: translateY(-1px);
}

.tobe-author .author-top-btns .btn-orange-border {
    background: transparent;
    color: #ff0044;
    border: 1.5px solid #ff0044;
}

.tobe-author .author-top-btns .btn-orange-border:hover {
    background: rgba(255, 0, 68, 0.06);
}

.dark .tobe-author .author-top-btns .btn-orange-border {
    border-color: #ff0044;
    color: #ff0044;
}

.dark .tobe-author .author-top-btns .btn-orange-border:hover {
    background: rgba(255, 0, 68, 0.1);
}

/* ===== 下方：左侧竖排Tab + 右侧卡片网格 ===== */
.tobe-author .author-body {
    display: flex;
    gap: 20px;
}

/* 左侧竖排Tab */
.tobe-author .author-tabs {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-shrink: 0;
    width: 72px;
}

.tobe-author .author-tab {
    border: none;
    background: #f5f5f5;
    color: #666;
    font-size: 14px;
    font-weight: 500;
    padding: 31px 0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.25s ease;
    font-family: inherit;
    white-space: nowrap;
    text-align: center;
}

.dark .tobe-author .author-tab {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.5);
}

.tobe-author .author-tab:hover {
    color: #ff0044;
    background: #fff0f3;
}

.dark .tobe-author .author-tab:hover {
    background: rgba(255, 0, 68, 0.1);
}

.tobe-author .author-tab.active {
    background: linear-gradient(135deg, #ff0044, #ff4d6d);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(255, 0, 68, 0.3);
}

.dark .tobe-author .author-tab.active {
    background: linear-gradient(135deg, #ff0044, #ff4d6d);
    color: #fff;
    box-shadow: 0 2px 8px rgba(255, 0, 68, 0.4);
}

/* 右侧卡片网格 */
.tobe-author .author-list {
    flex: 1;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 18px;
}

/* ===== 创作者卡片 ===== */
.tobe-author .author-card {
    display: flex;
    flex-direction: column;
    padding: 22px 18px 18px;
    border-radius: 14px;
    text-decoration: none !important;
    transition: all 0.3s ease;
    background: #fafafa;
    border: 1px solid #f0f0f0;
    position: relative;
    overflow: hidden;
}

.tobe-author .author-card:hover {
    border-color: rgba(255, 0, 68, 0.2);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    transform: translateY(-3px);
}

.dark .tobe-author .author-card {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.06);
}

.dark .tobe-author .author-card:hover {
    border-color: rgba(255, 0, 68, 0.3);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    background: rgba(255, 255, 255, 0.05);
}

/* 大号排名数字 */
.tobe-author .author-rank-num {
    position: absolute;
    top: -8px;
    right: 6px;
    font-size: 64px;
    font-weight: 900;
    line-height: 1;
    opacity: 0.08;
    pointer-events: none;
    font-style: italic;
    color: #333;
}

.dark .tobe-author .author-rank-num {
    color: #fff;
}

/* 前5名渐变背景 */
.tobe-author .author-rank-1 {
    background: linear-gradient(135deg, #fff9e6 0%, #fff3cc 50%, #fff8e1 100%);
    border-color: rgba(255, 215, 0, 0.25);
}
.tobe-author .author-rank-1 .author-rank-num { color: #DAA520; opacity: 0.15; }
.tobe-author .author-rank-1:hover { box-shadow: 0 8px 24px rgba(255, 215, 0, 0.2); }

.tobe-author .author-rank-2 {
    background: linear-gradient(135deg, #f8f8f8 0%, #f0f0f0 50%, #f5f5f5 100%);
    border-color: rgba(192, 192, 192, 0.25);
}
.tobe-author .author-rank-2 .author-rank-num { color: #A0A0A0; opacity: 0.15; }
.tobe-author .author-rank-2:hover { box-shadow: 0 8px 24px rgba(192, 192, 192, 0.2); }

.tobe-author .author-rank-3 {
    background: linear-gradient(135deg, #fdf5ef 0%, #f9ece0 50%, #fdf2ea 100%);
    border-color: rgba(205, 127, 50, 0.25);
}
.tobe-author .author-rank-3 .author-rank-num { color: #CD7F32; opacity: 0.15; }
.tobe-author .author-rank-3:hover { box-shadow: 0 8px 24px rgba(205, 127, 50, 0.2); }

.tobe-author .author-rank-4 {
    background: linear-gradient(135deg, #f0f7ff 0%, #e8f2ff 50%, #eff6ff 100%);
    border-color: rgba(59, 130, 246, 0.15);
}
.tobe-author .author-rank-4 .author-rank-num { color: #3b82f6; opacity: 0.12; }
.tobe-author .author-rank-4:hover { box-shadow: 0 8px 24px rgba(59, 130, 246, 0.15); }

.tobe-author .author-rank-5 {
    background: linear-gradient(135deg, #f5f0ff 0%, #ede5ff 50%, #f3efff 100%);
    border-color: rgba(139, 92, 246, 0.15);
}
.tobe-author .author-rank-5 .author-rank-num { color: #8b5cf6; opacity: 0.12; }
.tobe-author .author-rank-5:hover { box-shadow: 0 8px 24px rgba(139, 92, 246, 0.15); }

/* 暗黑模式前5名 */
.dark .tobe-author .author-rank-1 {
    background: linear-gradient(135deg, rgba(255,215,0,0.08) 0%, rgba(255,215,0,0.04) 100%);
    border-color: rgba(255, 215, 0, 0.15);
}
.dark .tobe-author .author-rank-2 {
    background: linear-gradient(135deg, rgba(192,192,192,0.08) 0%, rgba(192,192,192,0.04) 100%);
    border-color: rgba(192, 192, 192, 0.12);
}
.dark .tobe-author .author-rank-3 {
    background: linear-gradient(135deg, rgba(205,127,50,0.08) 0%, rgba(205,127,50,0.04) 100%);
    border-color: rgba(205, 127, 50, 0.15);
}
.dark .tobe-author .author-rank-4 {
    background: linear-gradient(135deg, rgba(59,130,246,0.06) 0%, rgba(59,130,246,0.03) 100%);
    border-color: rgba(59, 130, 246, 0.1);
}
.dark .tobe-author .author-rank-5 {
    background: linear-gradient(135deg, rgba(139,92,246,0.06) 0%, rgba(139,92,246,0.03) 100%);
    border-color: rgba(139, 92, 246, 0.1);
}

/* 头像+名字行 */
.tobe-author .author-card-top {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.tobe-author .author-card-avatar {
    position: relative;
    width: 52px;
    height: 52px;
    flex-shrink: 0;
}

.tobe-author .author-card-avatar img {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    border: 2.5px solid #eee;
    transition: border-color 0.25s ease;
}

.tobe-author .author-card:hover .author-card-avatar img {
    border-color: #ff0044;
}

.dark .tobe-author .author-card-avatar img {
    border-color: rgba(255, 255, 255, 0.1);
}

.dark .tobe-author .author-card:hover .author-card-avatar img {
    border-color: #ff0044;
}

.tobe-author .author-rank-1 .author-card-avatar img { border-color: #FFD700; }
.tobe-author .author-rank-2 .author-card-avatar img { border-color: #C0C0C0; }
.tobe-author .author-rank-3 .author-card-avatar img { border-color: #CD7F32; }
.tobe-author .author-rank-4 .author-card-avatar img { border-color: #93c5fd; }
.tobe-author .author-rank-5 .author-card-avatar img { border-color: #c4b5fd; }

/* 名字+徽章区 */
.tobe-author .author-card-info {
    flex: 1;
    min-width: 0;
}

.tobe-author .author-card-name {
    font-size: 15px;
    font-weight: 700;
    color: #1a1a1a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
    transition: color 0.2s ease;
}

.tobe-author .author-card:hover .author-card-name {
    color: #ff0044;
}

.dark .tobe-author .author-card-name {
    color: #f0f0f0;
}

.dark .tobe-author .author-card:hover .author-card-name {
    color: #ff0044;
}

.tobe-author .author-card-badges {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 3px;
    flex-wrap: wrap;
    line-height: 1;
}

.tobe-author .author-card-badges .lv-icon {
    transform: scale(1);
    transform-origin: left center;
    margin-left: 0px;
}

.tobe-author .author-card-avatar.avatar-parent {
    position: relative;
    display: block;
}
.tobe-author .author-card-avatar.avatar-parent i.b2-vrenzhengguanli {
    position: absolute;
    bottom: 0px;
    right: 0px;
    font-weight: 400;
    line-height: 14px;
    background: #fff;
    border-radius: 100%;
    width: 14px;
    height: 14px;
    display: block;
    font-size: 20px;
    color: #ff3a55 !important;
}
.dark .tobe-author .author-card-avatar.avatar-parent i.b2-vrenzhengguanli {
    background: #222;
}

/* 描述 */
.tobe-author .author-card-desc {
    font-size: 13px;
    color: #888;
    line-height: 1.5;
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.dark .tobe-author .author-card-desc {
    color: rgba(255, 255, 255, 0.4);
}

/* 统计行：篇数+人气 */
.tobe-author .author-card-stats {
    display: flex;
    gap: 16px;
    margin-bottom: 12px;
    font-size: 12px;
    color: #999;
}

.dark .tobe-author .author-card-stats {
    color: rgba(255, 255, 255, 0.35);
}

.tobe-author .author-card-stats span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.tobe-author .author-card-stats svg {
    width: 13px;
    height: 13px;
    opacity: 0.6;
}

.tobe-author .author-card-stats strong {
    font-weight: 600;
    color: #666;
}

.dark .tobe-author .author-card-stats strong {
    color: rgba(255, 255, 255, 0.6);
}

/* 最近文章 */
.tobe-author .author-card-posts {
    border-top: 1px solid #f0f0f0;
    padding-top: 0px;
}

.dark .tobe-author .author-card-posts {
    border-top-color: rgba(255, 255, 255, 0.06);
}

.tobe-author .author-card-post {
    display: flex;
    align-items: baseline;
    padding: 4px 0;
    text-decoration: none !important;
}

.tobe-author .author-card-post-title {
    font-size: 13px;
    color: #555;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
    flex: 1;
    min-width: 0;
    transition: color 0.2s ease;
}

.tobe-author .author-card-post:hover .author-card-post-title {
    color: #ff0044;
}

.dark .tobe-author .author-card-post-title {
    color: rgba(255, 255, 255, 0.6);
}

.dark .tobe-author .author-card-post:hover .author-card-post-title {
    color: #ff0044;
}

.tobe-author .author-card-post-date {
    font-size: 11px;
    color: #ccc;
    margin-left: 8px;
    flex-shrink: 0;
}

.dark .tobe-author .author-card-post-date {
    color: rgba(255, 255, 255, 0.2);
}

/* 空状态 */
.tobe-author .author-empty {
    text-align: center;
    padding: 40px 24px;
    color: #999;
    font-size: 13px;
    grid-column: 1 / -1;
}

.dark .tobe-author .author-empty {
    color: rgba(255, 255, 255, 0.3);
}

/* 加载状态 */
.tobe-author .author-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
    color: #999;
    font-size: 13px;
    grid-column: 1 / -1;
    gap: 8px;
}

.dark .tobe-author .author-loading {
    color: rgba(255, 255, 255, 0.4);
}

.tobe-author .author-loading::after {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid #f0f0f0;
    border-top-color: #ff0044;
    border-radius: 50%;
    animation: tcbdb-author-spin 0.6s linear infinite;
}

.dark .tobe-author .author-loading::after {
    border-color: rgba(255, 255, 255, 0.08);
    border-top-color: #ff0044;
}

@keyframes tcbdb-author-spin {
    to { transform: rotate(360deg); }
}

/* 响应式适配 */
@media screen and (max-width: 768px) {
    .tobe-author {
        padding: 16px;
    }

    .tobe-author .author-top {
        padding-bottom: 0px;
        flex-wrap: wrap;
        gap: 12px;
    }

    .tobe-author .author-top-desc {
        margin-top: 0px;
        order: 10;
        width: 100%;
        flex: auto;
    }

    .tobe-author .author-top-stat strong {
        font-size: 30px;
    }

    .tobe-author .author-body {
        flex-direction: column;
        gap: 12px;
    }

    .tobe-author .author-tabs {
        flex-direction: row;
        width: auto;
    }

    .tobe-author .author-tab {
        padding: 6px 14px;
    }

    .tobe-author .author-list {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 12px;
    }

    .tobe-author .author-card {
        padding: 14px 12px 12px;
    }
}

@media screen and (max-width: 480px) {
    .tobe-author .item-title {
        font-size: 25px;
    }

    .tobe-author .author-top-btns {
        width: 100%;
    }

    .tobe-author .author-top-btns .btn {
        flex: 1;
        justify-content: center;
        padding: 6px 12px;
        font-size: 12px;
    }

    .tobe-author .author-list {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .tobe-author .author-card {
        padding: 12px 10px 10px;
    }

    .tobe-author .author-card-avatar {
        width: 40px;
        height: 40px;
    }

    .tobe-author .author-card-avatar img {
        width: 40px;
        height: 40px;
    }

    .tobe-author .author-card-name {
        font-size: 13px;
    }

    .tobe-author .author-card-desc {
        font-size: 11px;
    }
}
/*end 创作者排行榜*/

/* ========================================
   创作者排行榜 - 侧边栏小工具
   ======================================== */

.tcbdb-sidebar-leaderboard {
    font-family: 'tcbdbzt', sans-serif;
}

/* Tab切换 */
.tcbdb-sl-tabs {
    display: flex;
    background: #f5f5f5;
    border-radius: 8px;
    padding: 3px;
    gap: 2px;
    margin-bottom: 12px;
}

.dark .tcbdb-sl-tabs {
    background: rgba(255, 255, 255, 0.08);
}

.tcbdb-sl-tab {
    border: none;
    background: transparent;
    color: #666;
    font-size: 12px;
    font-weight: 500;
    padding: 5px 0;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.25s ease;
    font-family: inherit;
    flex: 1;
    text-align: center;
}

.dark .tcbdb-sl-tab {
    color: rgba(255, 255, 255, 0.5);
}

.tcbdb-sl-tab:hover {
    color: #ff0044;
}

.tcbdb-sl-tab.active {
    background: #fff;
    color: #ff0044;
    font-weight: 600;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.dark .tcbdb-sl-tab.active {
    background: rgba(255, 255, 255, 0.12);
    color: #ff0044;
    box-shadow: none;
}

/* 列表 */
.tcbdb-sl-list {
    min-height: 60px;
}

/* 每行 */
.tcbdb-sl-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0px 15px;
    border-bottom: 1px solid #f5f5f5;
    transition: background 0.2s ease;
}

.tcbdb-sl-item:last-child {
    border-bottom: none;
}

.dark .tcbdb-sl-item {
    border-bottom-color: rgba(255, 255, 255, 0.05);
}

/* 排名数字（掘金风格） */
.tcbdb-sl-rank {
    width: 22px;
    height: 22px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    color: #c2c8d1;
    background: transparent;
    flex-shrink: 0;
}

.dark .tcbdb-sl-rank {
    color: #555;
}

.tcbdb-sl-rank.sl-rank-1 {
    background: #fff0e5;
    color: #FF0044;
}
.tcbdb-sl-rank.sl-rank-2 {
    background: #fff5f0;
    color: #FF6A28;
}
.tcbdb-sl-rank.sl-rank-3 {
    background: #fff8e6;
    color: #FF9600;
}
.dark .tcbdb-sl-rank.sl-rank-1 { background: rgba(255,0,68,0.12); color: #FF4466; }
.dark .tcbdb-sl-rank.sl-rank-2 { background: rgba(255,106,40,0.12); color: #FF8844; }
.dark .tcbdb-sl-rank.sl-rank-3 { background: rgba(255,150,0,0.12); color: #FFAA22; }

/* 头像 */
.tcbdb-sl-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #f0f0f0;
    flex-shrink: 0;
}

.dark .tcbdb-sl-avatar {
    border-color: rgba(255, 255, 255, 0.08);
}

.tcbdb-sl-item:nth-child(1) .tcbdb-sl-avatar { border-color: #FF0044; }
.tcbdb-sl-item:nth-child(2) .tcbdb-sl-avatar { border-color: #FF6A28; }
.tcbdb-sl-item:nth-child(3) .tcbdb-sl-avatar { border-color: #FF9600; }

/* 信息 */
.tcbdb-sl-info {
    flex: 1;
    min-width: 0;
}

.tcbdb-sl-name-row {
    display: flex;
    align-items: center;
    gap: 4px;
}

.tcbdb-sl-name {
    font-size: 13px;
    font-weight: 600;
    color: #1a1a1a;
    text-decoration: none !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
    transition: color 0.2s ease;
}

.tcbdb-sl-name:hover {
    color: #ff0044;
}

.dark .tcbdb-sl-name {
    color: #f0f0f0;
}

.dark .tcbdb-sl-name:hover {
    color: #ff0044;
}

.tcbdb-sl-badges {
    display: inline-flex;
    align-items: center;
    gap: 0;
    flex-wrap: nowrap;
    line-height: 1;
    flex-shrink: 0;
}

.tcbdb-sl-badge {
    display: inline-flex;
    align-items: center;
    transform: scale(0.8);
    margin-left: -8px;
}

.tcbdb-sl-desc {
    font-size: 11px;
    color: #999;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
}

.dark .tcbdb-sl-desc {
    color: rgba(255, 255, 255, 0.35);
}

.tcbdb-sidebar-leaderboard .avatar-parent {
    position: relative;
    display: inline-block;
}
.tcbdb-sidebar-leaderboard .avatar-parent i.b2-vrenzhengguanli {
    position: absolute;
    bottom: 0px;
    right: 0px;
    font-weight: 400;
    line-height: 12px;
    background: #fff;
    border-radius: 100%;
    width: 12px;
    height: 12px;
    display: block;
    font-size: 14px;
    color: #ff3a55 !important;
}
.dark .tcbdb-sidebar-leaderboard .avatar-parent i.b2-vrenzhengguanli {
    background: #222;
}

/* 底部链接 */
.tcbdb-sl-footer {
    margin-top: 12px;
    text-align: center;
    padding: 10px 0 4px;
    border-top: 1px solid #f0f0f0;
}

.dark .tcbdb-sl-footer {
    border-top-color: rgba(255,255,255,0.06);
}

.tcbdb-sl-footer a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #FF0044;
    text-decoration: none !important;
    font-weight: 500;
    transition: all 0.2s ease;
    padding: 4px 12px;
    border-radius: 14px;
    /*background: rgba(255,0,68,0.06);*/
}

.tcbdb-sl-footer a:hover {
    background: rgba(255,0,68,0.12);
}

.dark .tcbdb-sl-footer a {
    background: rgba(255,0,68,0.1);
    color: #FF4466;
}

.dark .tcbdb-sl-footer a:hover {
    background: rgba(255,0,68,0.18);
}

/* 加载/空状态 */
.tcbdb-sl-loading,
.tcbdb-sl-empty {
    text-align: center;
    padding: 20px 0;
    color: #999;
    font-size: 13px;
}

.dark .tcbdb-sl-loading,
.dark .tcbdb-sl-empty {
    color: rgba(255, 255, 255, 0.3);
}

.tcbdb-sl-loading::after {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid #f0f0f0;
    border-top-color: #ff0044;
    border-radius: 50%;
    animation: tcbdb-author-spin 0.6s linear infinite;
    vertical-align: middle;
    margin-left: 6px;
}

.dark .tcbdb-sl-loading::after {
    border-color: rgba(255, 255, 255, 0.08);
    border-top-color: #ff0044;
}
/*end 侧边栏小工具*/

/* ========================================
   排行榜页面 - 掘金热榜风格
   ======================================== */

.tcbdb-ranking-page {
    background: #f4f5f5;
    min-height: 100vh;
    padding: 20px 0;
    overflow: visible;
}

.dark .tcbdb-ranking-page { background: #121212; }

.tcbdb-ranking-page .tcbdb-rp-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    gap: 20px;
    padding: 0 0px;
    align-items: flex-start;
    min-height: calc(100vh - 160px);
}

/* ===== 排名数字（掘金风格） ===== */
.tcbdb-rp-rank-num {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 800;
    color: #c2c8d1;
    flex-shrink: 0;
    font-style: normal;
    border-radius: 4px;
}
.tcbdb-rp-rank-num.rank-1 {
    background: #fff0e5;
    color: #FF0044;
    font-size: 15px;
}
.tcbdb-rp-rank-num.rank-2 {
    background: #fff5f0;
    color: #FF6A28;
}
.tcbdb-rp-rank-num.rank-3 {
    background: #fff8e6;
    color: #FF9600;
}
.dark .tcbdb-rp-rank-num { color: #555; }
.dark .tcbdb-rp-rank-num.rank-1 { background: rgba(255,0,68,0.12); color: #FF4466; }
.dark .tcbdb-rp-rank-num.rank-2 { background: rgba(255,106,40,0.12); color: #FF8844; }
.dark .tcbdb-rp-rank-num.rank-3 { background: rgba(255,150,0,0.12); color: #FFAA22; }

/* ===== 热度 ===== */
.tcbdb-rp-heat {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 16px;
    color: #FF0044;
    font-weight: 600;
    flex-shrink: 0;
    white-space: nowrap;
}
.tcbdb-rp-heat i.b2-blaze-line { font-size: 14px; }
.dark .tcbdb-rp-heat { color: #FF4466; }

/* ===== 左侧导航 ===== */
.tcbdb-rp-sidebar { width: 200px; flex-shrink: 0; }
.tcbdb-rp-sidebar-inner { background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,0.06); }
.dark .tcbdb-rp-sidebar-inner { background: #1e1e1e; box-shadow: 0 1px 2px rgba(0,0,0,0.3); }

/* ===== Banner ===== */
.tcbdb-rp-banner { width: 100%; }
.tcbdb-rp-banner-img { width: 100%; display: block; border-radius: 8px 8px 0 0; }
.tcbdb-rp-banner-placeholder { padding: 0; }

.tcbdb-rp-nav { display: flex; flex-direction: column; padding: 8px 0; }
.tcbdb-rp-nav-tab { display: flex; align-items: center; gap: 10px; padding: 12px 20px; font-size: 16px; color: #515767; background: none; border: none; cursor: pointer; transition: all 0.15s ease; text-align: left; width: 100%; position: relative; }
.dark .tcbdb-rp-nav-tab { color: #a0a0a0; }
.tcbdb-rp-nav-tab:hover { background: #fff5f7; color: #FF0044; }
.dark .tcbdb-rp-nav-tab:hover { background: rgba(255,0,68,0.04); color: #FF4466; }
.tcbdb-rp-nav-tab.active { color: #FF0044; background: #fff0f3; font-weight: 600; }
.dark .tcbdb-rp-nav-tab.active { background: rgba(255,0,68,0.08); color: #FF4466; }
.tcbdb-rp-nav-tab.active::before { content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; background: #FF0044; border-radius: 0 3px 3px 0; }
.tcbdb-rp-nav-tab svg { opacity: 0.6; flex-shrink: 0; }
.tcbdb-rp-nav-tab.active svg { opacity: 1; }
.tcbdb-rp-sidebar-footer { padding: 14px 20px; font-size: 12px; color: #8a9199; border-top: 1px solid #f0f0f0; }
.dark .tcbdb-rp-sidebar-footer { border-top-color: rgba(255,255,255,0.06); color: #666; }
.tcbdb-rp-sidebar-footer .author-count-num { font-weight: 700; color: #FF0044; font-size: 16px; }
.dark .tcbdb-rp-sidebar-footer .author-count-num { color: #FF4466; }

/* ===== 右侧主内容 ===== */
.tcbdb-rp-main { flex: 1; min-width: 0; }
.tcbdb-rp-main-header { display: flex; align-items: center; justify-content: space-between; background: #fff; border-radius: 8px 8px 0 0; padding: 16px 24px; border-bottom: 1px solid #f0f0f0; }
.dark .tcbdb-rp-main-header { background: #1e1e1e; border-bottom-color: rgba(255,255,255,0.06); }
.tcbdb-rp-main-title { font-size: 16px; font-weight: 700; color: #252933; margin: 0; }
.dark .tcbdb-rp-main-title { color: #e0e0e0; }
.tcbdb-rp-period-tabs { display: flex; gap: 0; background: #f2f3f5; border-radius: 6px; padding: 2px; }
.dark .tcbdb-rp-period-tabs { background: rgba(255,255,255,0.06); }
.tcbdb-rp-period { padding: 6px 16px; font-size: 13px; color: #8a9199; background: none; border: none; border-radius: 5px; cursor: pointer; transition: all 0.15s ease; font-weight: 500; }
.tcbdb-rp-period:hover { color: #FF0044; }
.dark .tcbdb-rp-period:hover { color: #FF4466; }
.tcbdb-rp-period.active { background: #fff; color: #FF0044; font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,0.08); }
.dark .tcbdb-rp-period.active { background: #2a2a2a; color: #FF4466; box-shadow: 0 1px 2px rgba(0,0,0,0.3); }

/* ===== 面板 ===== */
.tcbdb-rp-panel { display: none; background: #fff; border-radius: 0 0 8px 8px; }
.tcbdb-rp-panel.active { display: block; }
.dark .tcbdb-rp-panel { background: #1e1e1e; }
.tcbdb-rp-loading, .tcbdb-rp-empty { text-align: center; padding: 60px 24px; color: #8a9199; font-size: 14px; }

/* ===== 创作者榜列表 ===== */
.tcbdb-rp-creator-grid { display: flex; flex-direction: column; }
.tcbdb-rp-creator-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 24px;
    border-bottom: 1px solid #f4f5f5;
    transition: background 0.15s ease;
}
.tcbdb-rp-creator-item:last-child { border-bottom: none; }
.tcbdb-rp-creator-item:hover { background: #fff5f7; }
.dark .tcbdb-rp-creator-item { border-bottom-color: rgba(255,255,255,0.04); }
.dark .tcbdb-rp-creator-item:hover { background: rgba(255,0,68,0.03); }
.tcbdb-rp-creator-main { flex: 1; min-width: 0; }
.tcbdb-rp-creator-top { display: flex; align-items: center; gap: 10px; }
.tcbdb-rp-creator-avatar { position: relative; display: block; width: 40px; height: 40px; flex-shrink: 0; }
.tcbdb-rp-creator-avatar img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: none; }
.tcbdb-rp-creator-avatar.avatar-parent i.b2-vrenzhengguanli { position: absolute; bottom: -2px; right: -2px; font-weight: 400; line-height: 12px; background: #fff; border-radius: 100%; width: 12px; height: 12px; display: block; font-size: 12px; color: #ff3a55 !important; }
.dark .tcbdb-rp-creator-avatar.avatar-parent i.b2-vrenzhengguanli { background: #222; }
.tcbdb-rp-creator-info { flex: 1; min-width: 0; }
.tcbdb-rp-creator-name-row { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
.tcbdb-rp-creator-name { font-size: 14px; font-weight: 600; color: #252933; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color 0.15s ease; text-decoration: none !important; }
.tcbdb-rp-creator-item:hover .tcbdb-rp-creator-name { color: #FF0044; }
.dark .tcbdb-rp-creator-name { color: #e0e0e0; }
.dark .tcbdb-rp-creator-item:hover .tcbdb-rp-creator-name { color: #FF4466; }
.tcbdb-rp-creator-badges { display: flex; align-items: center; gap: 0; line-height: 1; }
.tcbdb-rp-creator-badges .lv-icon { transform: scale(0.9);
/*transform-origin: left center;*/
 margin-left: -3px; }
.tcbdb-rp-creator-stats { display: flex; gap: 12px; margin-top: 4px; font-size: 12px; color: #8a9199; flex-wrap: wrap; }
.dark .tcbdb-rp-creator-stats { color: #666; }
.tcbdb-rp-creator-stats span { white-space: nowrap; }

/* ===== 文章排行列表 ===== */
.tcbdb-rp-post-list { display: flex; flex-direction: column; }
.tcbdb-rp-post-item { display: flex; align-items: center; gap: 16px; padding: 16px 24px; border-bottom: 1px solid #f4f5f5; transition: background 0.15s ease; }
.tcbdb-rp-post-item:last-child { border-bottom: none; }
.tcbdb-rp-post-item:hover { background: #fff5f7; }
.dark .tcbdb-rp-post-item { border-bottom-color: rgba(255,255,255,0.04); }
.dark .tcbdb-rp-post-item:hover { background: rgba(255,0,68,0.03); }
.tcbdb-rp-post-info { flex: 1; min-width: 0; }
.tcbdb-rp-post-title { font-size: 16px; font-weight: 600; color: #252933; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-decoration: none !important; transition: color 0.15s ease; }
.tcbdb-rp-post-title:hover { color: #FF0044; }
.dark .tcbdb-rp-post-title { color: #e0e0e0; }
.dark .tcbdb-rp-post-title:hover { color: #FF4466; }
.tcbdb-rp-post-meta { font-size: 12px; color: #8a9199; margin-top: 4px; }
.tcbdb-rp-post-meta a { color: #8a9199; text-decoration: none; }
.tcbdb-rp-post-meta a:hover { color: #FF0044; }
.dark .tcbdb-rp-post-meta { color: #666; }
.dark .tcbdb-rp-post-meta a { color: #666; }
.dark .tcbdb-rp-post-meta a:hover { color: #FF4466; }

/* ===== 活跃榜列表 ===== */
.tcbdb-rp-active-grid { display: flex; flex-direction: column; }
.tcbdb-rp-active-card { display: flex; align-items: center; gap: 12px; padding: 14px 24px; border-bottom: 1px solid #f4f5f5; text-decoration: none !important; transition: background 0.15s ease; position: relative; }
.tcbdb-rp-active-card:last-child { border-bottom: none; }
.tcbdb-rp-active-card:hover { background: #fff5f7; }
.dark .tcbdb-rp-active-card { border-bottom-color: rgba(255,255,255,0.04); }
.dark .tcbdb-rp-active-card:hover { background: rgba(255,0,68,0.03); }
.tcbdb-rp-active-card .avatar-parent { position: relative; display: inline-block; flex-shrink: 0; }
.tcbdb-rp-active-card .avatar-parent img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: none; }
.tcbdb-rp-active-card .avatar-parent i.b2-vrenzhengguanli { position: absolute; bottom: -2px; right: -2px; font-weight: 400; line-height: 12px; background: #fff; border-radius: 100%; width: 12px; height: 12px; display: block; font-size: 12px; color: #ff3a55 !important; }
.dark .tcbdb-rp-active-card .avatar-parent i.b2-vrenzhengguanli { background: #222; }
.tcbdb-rp-active-card-info { flex: 1; min-width: 0; }
.tcbdb-rp-active-card-name { font-size: 14px; font-weight: 600; color: #252933; line-height: 1.3; }
.dark .tcbdb-rp-active-card-name { color: #e0e0e0; }
.tcbdb-rp-active-card-count { font-size: 12px; color: #8a9199; margin-top: 2px; }
.dark .tcbdb-rp-active-card-count { color: #666; }

/* ===== 热搜榜（单列） ===== */
.tcbdb-rp-hotsearch-grid { display: flex; flex-direction: column; }
.tcbdb-rp-hot-item { display: flex; align-items: center; gap: 12px; padding: 14px 24px; border-bottom: 1px solid #f4f5f5; text-decoration: none !important; transition: background 0.15s ease; font-size: 14px; color: #252933; font-weight: 500; }
.tcbdb-rp-hot-item:last-child { border-bottom: none; }
.tcbdb-rp-hot-item:hover { background: #fff5f7; color: #FF0044; }
.dark .tcbdb-rp-hot-item { border-bottom-color: rgba(255,255,255,0.04); color: #e0e0e0; }
.dark .tcbdb-rp-hot-item:hover { background: rgba(255,0,68,0.03); color: #FF4466; }
.tcbdb-rp-hot-word { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tcbdb-rp-hot-tag { font-size: 10px; font-weight: 700; color: #fff; background: linear-gradient(135deg, #FF0044, #ff6a28); padding: 1px 6px; border-radius: 3px; flex-shrink: 0; letter-spacing: 0.5px; }
.tcbdb-rp-hot-tag.hot-new { background: linear-gradient(135deg, #FF0044, #ff6090); }

/* ===== 响应式 ===== */
@media screen and (max-width: 768px) {
    .tcbdb-ranking-page { padding: 12px 0; }
    .tcbdb-rp-container { flex-direction: column; padding: 0; gap: 12px; }
    .tcbdb-rp-sidebar { width: 100%; position: static; }
    .tcbdb-rp-banner { display: none; }
    .tcbdb-rp-nav { flex-direction: row; overflow-x: auto; padding: 0 8px; scrollbar-width: none; }
    .tcbdb-rp-nav::-webkit-scrollbar { display: none; }
    .tcbdb-rp-nav-tab { white-space: nowrap; padding: 10px 14px; font-size: 13px; }
    .tcbdb-rp-nav-tab.active::before { display: none; }
    .tcbdb-rp-sidebar-footer { display: none; }
    .tcbdb-rp-main { width: 100%; }
    .tcbdb-rp-main-header { padding: 12px 16px; }
    .tcbdb-rp-creator-item { padding: 12px 16px; }
    .tcbdb-rp-post-item { padding: 12px 16px; }
    .tcbdb-rp-creator-stats { display: none; }
    .tcbdb-rp-post-meta span { display: none; }
    .tcbdb-rp-hot-item { padding: 12px 16px; }
    .tcbdb-rp-active-card { padding: 12px 16px; }
}

@media screen and (max-width: 480px) {
    .tcbdb-rp-creator-avatar { width: 32px; height: 32px; }
    .tcbdb-rp-creator-avatar img { width: 32px; height: 32px; }
    .tcbdb-rp-heat { font-size: 11px; }
    .tcbdb-rp-post-title { font-size: 13px; }
    .tcbdb-rp-post-meta { font-size: 11px; }
}
/*end 排行榜页面*/`

在`child.js`中添加代码：

`// 创作者排行榜 - 自定义HTML纯前端渲染 v2
(function(){
    'use strict';

    function escHtml(str){
        var div = document.createElement('div');
        div.appendChild(document.createTextNode(str));
        return div.innerHTML;
    }

    function formatViews(n){
        if(n >= 10000) return (n / 10000).toFixed(1) + 'w';
        if(n >= 1000) return (n / 1000).toFixed(1) + 'k';
        return n;
    }

    function renderAuthors(listEl, authors){
        if(!authors || !authors.length){
            listEl.innerHTML = '<div class="author-empty">暂无创作者数据</div>';
            return;
        }
        var html = '';
        authors.forEach(function(item){
            var rankClass = '';
            if(item.rank === 1) rankClass = ' author-rank-1';
            else if(item.rank === 2) rankClass = ' author-rank-2';
            else if(item.rank === 3) rankClass = ' author-rank-3';
            else if(item.rank === 4) rankClass = ' author-rank-4';
            else if(item.rank === 5) rankClass = ' author-rank-5';

            html += '<div class="author-card' + rankClass + '">';
            // 大号排名数字
            html += '<div class="author-rank-num">' + item.rank + '</div>';
            html += '<div class="author-card-top">';
            html += '<a href="' + escHtml(item.url) + '" class="author-card-avatar avatar-parent">';
            html += '<img src="' + escHtml(item.avatar) + '" alt="' + escHtml(item.name) + '" loading="lazy">';
            if(item.verify_icon) html += item.verify_icon;
            html += '</a>';
            html += '<div class="author-card-info">';
            html += '<a href="' + escHtml(item.url) + '" class="author-card-name">' + escHtml(item.name) + '</a>';
            html += '<div class="author-card-badges">';
            if(item.vip_icon){
                html += item.vip_icon;
            }
            if(item.lv_icon){
                html += item.lv_icon;
            }
            html += '</div>';
            html += '</div>';
            html += '</div>';
            html += '<div class="author-card-desc">' + escHtml(item.description) + '</div>';
            // 统计行：篇数+人气
            html += '<div class="author-card-stats">';
            html += '<span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg><strong>' + item.count + '</strong> 篇创作</span>';
            html += '<span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg><strong>' + formatViews(item.views || 0) + '</strong> 人气</span>';
            html += '</div>';
            if(item.recent_posts && item.recent_posts.length){
                html += '<div class="author-card-posts">';
                item.recent_posts.forEach(function(post){
                    html += '<a href="' + escHtml(post.url) + '" class="author-card-post">';
                    html += '<span class="author-card-post-title">' + escHtml(post.title) + '</span>';
                    html += '<span class="author-card-post-date">' + escHtml(post.date) + '</span>';
                    html += '</a>';
                });
                html += '</div>';
            }
            html += '</div>';
        });
        listEl.innerHTML = html;
    }

    function fetchAuthors(period, listEl, countEl, customIds){
        listEl.innerHTML = '<div class="author-loading">加载中</div>';

        if(typeof tcbdb_leaderboard_api === 'undefined'){
            listEl.innerHTML = '<div class="author-empty">模块未正确初始化</div>';
            return;
        }

        var apiUrl;
        if(customIds){
            apiUrl = tcbdb_leaderboard_api.rest_url + 'tcbdb/v1/leaderboard-custom?user_ids=' + encodeURIComponent(customIds);
        } else {
            apiUrl = tcbdb_leaderboard_api.rest_url + 'tcbdb/v1/leaderboard?period=' + encodeURIComponent(period) + '&count=12';
        }

        fetch(apiUrl, {
            method: 'GET',
            headers: { 'X-WP-Nonce': tcbdb_leaderboard_api.nonce }
        })
        .then(function(r){
            if(!r.ok) throw new Error('HTTP ' + r.status);
            return r.json();
        })
        .then(function(data){
            if(data.error) throw new Error(data.error);
            if(countEl && data.total_count){
                countEl.textContent = data.total_count;
            }
            renderAuthors(listEl, data.authors || []);
        })
        .catch(function(err){
            console.error('[创作者排行榜]', err.message || err);
            listEl.innerHTML = '<div class="author-empty">加载失败，请刷新重试</div>';
        });
    }

    function initLeaderboard(){
        var wraps = document.querySelectorAll('.tobe-author-wrap');
        if(!wraps.length) return;

        // 读取后台配置
        var configCustomIds = '';
        var configDefaultPeriod = 'all';
        if(typeof tcbdb_leaderboard_api !== 'undefined'){
            configCustomIds = tcbdb_leaderboard_api.custom_ids || '';
            configDefaultPeriod = tcbdb_leaderboard_api.default_period || 'all';
        }

        wraps.forEach(function(wrap){
            var tabs = wrap.querySelectorAll('.author-tab');
            var listEl = wrap.querySelector('.author-list');
            var countEl = wrap.querySelector('.author-count-num');
            // 优先使用HTML属性，其次使用后台配置
            var customIds = wrap.getAttribute('data-user-ids') || configCustomIds;
            if(!listEl) return;

            // Tab切换
            tabs.forEach(function(tab){
                tab.addEventListener('click', function(){
                    var period = this.getAttribute('data-period');
                    if(!period) return;
                    tabs.forEach(function(t){ t.classList.remove('active'); });
                    this.classList.add('active');
                    fetchAuthors(period, listEl, countEl, '');
                });
            });

            // 首次加载
            if(!listEl.querySelector('.author-card')){
                var activeTab = wrap.querySelector('.author-tab.active');
                var period = activeTab ? activeTab.getAttribute('data-period') : configDefaultPeriod;
                fetchAuthors(period, listEl, countEl, customIds);
            }
        });
    }

    if(document.readyState === 'loading'){
        document.addEventListener('DOMContentLoaded', function(){
            setTimeout(initLeaderboard, 300);
        });
    } else {
        setTimeout(initLeaderboard, 300);
    }
})();
// end 创作者排行榜

// 侧边栏排行榜小工具
(function(){
    'use strict';

    function escHtml(str){
        var div = document.createElement('div');
        div.appendChild(document.createTextNode(str));
        return div.innerHTML;
    }

    function formatViews(n){
        if(n >= 10000) return (n / 10000).toFixed(1) + 'w';
        if(n >= 1000) return (n / 1000).toFixed(1) + 'k';
        return n;
    }

    function renderSidebarList(listEl, authors){
        if(!authors || !authors.length){
            listEl.className = 'tcbdb-sl-list tcbdb-sl-empty';
            listEl.textContent = '暂无数据';
            return;
        }
        var html = '';
        authors.forEach(function(item){
            var rankCls = item.rank <= 3 ? ' sl-rank-' + item.rank : '';
            html += '<div class="tcbdb-sl-item">';
            html += '<span class="tcbdb-sl-rank' + rankCls + '">' + item.rank + '</span>';
            html += '<a href="' + escHtml(item.url) + '" class="avatar-parent"><img class="tcbdb-sl-avatar" src="' + escHtml(item.avatar) + '" alt="' + escHtml(item.name) + '" loading="lazy">';
            if(item.verify_icon) html += item.verify_icon;
            html += '</a>';
            html += '<div class="tcbdb-sl-info">';
            html += '<div class="tcbdb-sl-name-row">';
            html += '<a href="' + escHtml(item.url) + '" class="tcbdb-sl-name">' + escHtml(item.name) + '</a>';
            html += '<span class="tcbdb-sl-badges">';
            if(item.vip_icon) html += '<span class="tcbdb-sl-badge">' + item.vip_icon + '</span>';
            if(item.lv_icon) html += '<span class="tcbdb-sl-badge">' + item.lv_icon + '</span>';
            html += '</span>';
            html += '</div>';
            if(item.description) html += '<div class="tcbdb-sl-desc">' + escHtml(item.description) + '</div>';
            html += '</div>';
            html += '</div>';
        });
        listEl.className = 'tcbdb-sl-list';
        listEl.innerHTML = html;
    }

    function fetchSidebar(period, listEl, count){
        listEl.className = 'tcbdb-sl-list tcbdb-sl-loading';
        listEl.textContent = '加载中';

        if(typeof tcbdb_leaderboard_api === 'undefined') return;

        var apiUrl = tcbdb_leaderboard_api.rest_url + 'tcbdb/v1/leaderboard?period=' + encodeURIComponent(period) + '&count=' + encodeURIComponent(count);

        fetch(apiUrl, {
            method: 'GET',
            headers: { 'X-WP-Nonce': tcbdb_leaderboard_api.nonce }
        })
        .then(function(r){
            if(!r.ok) throw new Error('HTTP ' + r.status);
            return r.json();
        })
        .then(function(data){
            renderSidebarList(listEl, data.authors || []);
        })
        .catch(function(){
            listEl.className = 'tcbdb-sl-list tcbdb-sl-empty';
            listEl.textContent = '加载失败';
        });
    }

    function initSidebarWidget(){
        var widgets = document.querySelectorAll('.tcbdb-sidebar-leaderboard');
        if(!widgets.length) return;

        widgets.forEach(function(widget){
            var tabs = widget.querySelectorAll('.tcbdb-sl-tab');
            var listEl = widget.querySelector('.tcbdb-sl-list');
            var count = widget.getAttribute('data-count') || '6';
            if(!listEl) return;

            tabs.forEach(function(tab){
                tab.addEventListener('click', function(){
                    var period = this.getAttribute('data-period');
                    if(!period) return;
                    tabs.forEach(function(t){ t.classList.remove('active'); });
                    this.classList.add('active');
                    fetchSidebar(period, listEl, count);
                });
            });

            // 首次加载
            var activeTab = widget.querySelector('.tcbdb-sl-tab.active');
            var period = activeTab ? activeTab.getAttribute('data-period') : 'all';
            fetchSidebar(period, listEl, count);
        });
    }

    if(document.readyState === 'loading'){
        document.addEventListener('DOMContentLoaded', function(){
            setTimeout(initSidebarWidget, 500);
        });
    } else {
        setTimeout(initSidebarWidget, 500);
    }
})();
// end 侧边栏排行榜小工具

// 排行榜页面交互逻辑
(function(){
    'use strict';

    var page = document.querySelector('.tcbdb-ranking-page');
    if(!page) return;

    function escHtml(str){
        var div = document.createElement('div');
        div.appendChild(document.createTextNode(str));
        return div.innerHTML;
    }

    function formatViews(n){
        if(n >= 10000) return (n / 10000).toFixed(1) + 'w';
        if(n >= 1000) return (n / 1000).toFixed(1) + 'k';
        return n;
    }

    function formatHeat(n){
        if(n >= 10000) return (n / 10000).toFixed(1) + 'w';
        if(n >= 1000) return (n / 1000).toFixed(1) + 'k';
        return n;
    }

    function apiRequest(url){
        return fetch(url, {
            method: 'GET',
            headers: { 'X-WP-Nonce': tcbdb_leaderboard_api.nonce }
        }).then(function(r){
            if(!r.ok) throw new Error('HTTP ' + r.status);
            return r.json();
        });
    }

    // ===== 主Tab切换 =====
    var navTabs = page.querySelectorAll('.tcbdb-rp-nav-tab');
    var panels = page.querySelectorAll('.tcbdb-rp-panel');
    var globalPeriod = page.querySelector('#tcbdb-global-period');
    var periodBtns = globalPeriod ? globalPeriod.querySelectorAll('.tcbdb-rp-period') : [];

    var noPeriodTabs = ['active', 'hotsearch'];

    var tabTitleMap = {
        'creator': '创作者榜',
        'popular': '人气榜',
        'likes': '点赞收藏榜',
        'paid': '付费榜',
        'download': '下载榜',
        'active': '活跃榜',
        'hotsearch': '热搜榜'
    };

    navTabs.forEach(function(tab){
        tab.addEventListener('click', function(){
            var tabName = this.getAttribute('data-tab');
            navTabs.forEach(function(t){ t.classList.remove('active'); });
            this.classList.add('active');
            panels.forEach(function(p){ p.classList.remove('active'); });
            var targetPanel = document.getElementById('tcbdb-panel-' + tabName);
            if(targetPanel) targetPanel.classList.add('active');

            var titleEl = page.querySelector('.tcbdb-rp-main-title');
            if(titleEl && tabTitleMap[tabName]) titleEl.textContent = tabTitleMap[tabName];

            if(globalPeriod){
                if(noPeriodTabs.indexOf(tabName) >= 0){
                    globalPeriod.style.display = 'none';
                } else {
                    globalPeriod.style.display = '';
                }
            }

            if(targetPanel && !targetPanel.getAttribute('data-loaded')){
                var period = getCurrentPeriod();
                loadPanelData(tabName, targetPanel, period);
            }
        });
    });

    // ===== Period Tab切换（全局） =====
    if(globalPeriod){
        globalPeriod.addEventListener('click', function(e){
            var periodBtn = e.target.closest('.tcbdb-rp-period');
            if(!periodBtn) return;

            periodBtns.forEach(function(t){ t.classList.remove('active'); });
            periodBtn.classList.add('active');

            var period = periodBtn.getAttribute('data-period');
            var activeTab = page.querySelector('.tcbdb-rp-nav-tab.active');
            if(!activeTab) return;
            var tabName = activeTab.getAttribute('data-tab');
            var panel = document.getElementById('tcbdb-panel-' + tabName);
            if(!panel) return;

            loadPanelData(tabName, panel, period);
        });
    }

    function getCurrentPeriod(){
        var active = globalPeriod ? globalPeriod.querySelector('.tcbdb-rp-period.active') : null;
        return active ? active.getAttribute('data-period') : 'all';
    }

    // ===== 排名数字渲染（掘金风格） =====
    function renderRankNum(rank){
        if(rank <= 3){
            var cls = rank === 1 ? 'rank-1' : (rank === 2 ? 'rank-2' : 'rank-3');
            return '<span class="tcbdb-rp-rank-num ' + cls + '">' + rank + '</span>';
        }
        return '<span class="tcbdb-rp-rank-num">' + rank + '</span>';
    }

    // ===== 热度渲染 =====
    function renderHeat(heat){
        if(!heat) return '';
        return '<div class="tcbdb-rp-heat"><i class="b2font b2-blaze-line"></i>' + formatHeat(heat) + '</div>';
    }

    // ===== 创作者榜渲染 =====
    function renderCreatorGrid(container, authors){
        if(!authors || !authors.length){
            container.innerHTML = '<div class="tcbdb-rp-empty">暂无创作者数据</div>';
            return;
        }
        var html = '';
        authors.forEach(function(item){
            html += '<div class="tcbdb-rp-creator-item">';
            html += renderRankNum(item.rank);
            html += '<div class="tcbdb-rp-creator-main">';
            html += '<div class="tcbdb-rp-creator-top">';
            html += '<a href="' + escHtml(item.url) + '" class="avatar-parent tcbdb-rp-creator-avatar">';
            html += '<img src="' + escHtml(item.avatar) + '" alt="' + escHtml(item.name) + '" loading="lazy">';
            if(item.verify_icon) html += item.verify_icon;
            html += '</a>';
            html += '<div class="tcbdb-rp-creator-info">';
            html += '<div class="tcbdb-rp-creator-name-row">';
            html += '<a href="' + escHtml(item.url) + '" class="tcbdb-rp-creator-name">' + escHtml(item.name) + '</a>';
            html += '<span class="tcbdb-rp-creator-badges">';
            if(item.vip_icon) html += item.vip_icon;
            if(item.lv_icon) html += item.lv_icon;
            html += '</span>';
            html += '</div>';
            html += '<div class="tcbdb-rp-creator-stats">';
            html += '<span>' + item.count + ' 篇文章</span>';
            html += '<span>' + formatViews(item.views || 0) + ' 浏览</span>';
            html += '<span>' + (item.comments || 0) + ' 评论</span>';
            html += '<span>' + formatViews(item.likes || 0) + ' 点赞</span>';
            html += '<span>' + (item.favorites || 0) + ' 收藏</span>';
            html += '</div>';
            html += '</div></div>';
            html += '</div>';
            html += renderHeat(item.heat);
            html += '</div>';
        });
        container.innerHTML = html;
    }

    function loadCreatorList(container, period){
        if(!container) return;
        container.innerHTML = '<div class="tcbdb-rp-loading">加载中</div>';
        var url = tcbdb_leaderboard_api.rest_url + 'tcbdb/v1/leaderboard?period=' + encodeURIComponent(period) + '&count=20';
        apiRequest(url).then(function(data){
            if(data.error) throw new Error(data.error);
            var countEl = page.querySelector('.author-count-num');
            if(countEl && data.total_count) countEl.textContent = data.total_count;
            renderCreatorGrid(container, data.authors || []);
        }).catch(function(err){
            console.error('[排行榜-创作者榜]', err);
            container.innerHTML = '<div class="tcbdb-rp-empty">加载失败，请刷新重试</div>';
        });
    }

    // ===== 文章排行列表渲染（人气榜/点赞收藏榜/付费榜/下载榜） =====
    function renderPostList(container, items, type){
        if(!items || !items.length){
            container.innerHTML = '<div class="tcbdb-rp-empty">暂无数据</div>';
            return;
        }
        var html = '';
        items.forEach(function(item){
            html += '<div class="tcbdb-rp-post-item">';
            html += renderRankNum(item.rank);
            html += '<div class="tcbdb-rp-post-info">';
            html += '<a href="' + escHtml(item.url) + '" class="tcbdb-rp-post-title">' + escHtml(item.title) + '</a>';
            html += '<div class="tcbdb-rp-post-meta">';
            html += '<a href="' + escHtml(item.author_url) + '">' + escHtml(item.author) + '</a> · ' + escHtml(item.date);
            html += ' · <span>' + formatViews(item.views || 0) + ' 浏览</span>';
            html += ' · <span>' + (item.comments || 0) + ' 评论</span>';
            html += ' · <span>' + formatViews(item.likes || 0) + ' 点赞</span>';
            html += ' · <span>' + (item.favorites || 0) + ' 收藏</span>';
            html += '</div></div>';
            html += renderHeat(item.heat);
            html += '</div>';
        });
        container.innerHTML = html;
    }

    function loadPostList(container, type, period){
        if(!container) return;
        container.innerHTML = '<div class="tcbdb-rp-loading">加载中</div>';
        var url = tcbdb_leaderboard_api.rest_url + 'tcbdb/v1/ranking/' + type + '?count=20&period=' + encodeURIComponent(period);
        apiRequest(url).then(function(data){
            if(data.error) throw new Error(data.error);
            renderPostList(container, data, type);
        }).catch(function(err){
            console.error('[排行榜-' + type + ']', err);
            container.innerHTML = '<div class="tcbdb-rp-empty">加载失败，请刷新重试</div>';
        });
    }

    // ===== 活跃榜渲染 =====
    function renderActiveGrid(container, items){
        if(!items || !items.length){
            container.innerHTML = '<div class="tcbdb-rp-empty">暂无数据</div>';
            return;
        }
        var html = '';
        items.forEach(function(item){
            html += '<a href="' + escHtml(item.url) + '" class="tcbdb-rp-active-card">';
            html += renderRankNum(item.rank);
            html += '<div class="avatar-parent">';
            html += '<img src="' + escHtml(item.avatar) + '" alt="' + escHtml(item.name) + '" loading="lazy">';
            if(item.verify_icon) html += item.verify_icon;
            html += '</div>';
            html += '<div class="tcbdb-rp-active-card-info">';
            html += '<div class="tcbdb-rp-active-card-name">' + escHtml(item.name) + '</div>';
            html += '<div class="tcbdb-rp-active-card-count">' + item.count + ' 次互动</div>';
            html += '</div></a>';
        });
        container.innerHTML = html;
    }

    function loadActiveList(container){
        if(!container) return;
        container.innerHTML = '<div class="tcbdb-rp-loading">加载中</div>';
        var url = tcbdb_leaderboard_api.rest_url + 'tcbdb/v1/ranking/active?count=20';
        apiRequest(url).then(function(data){
            if(data.error) throw new Error(data.error);
            renderActiveGrid(container, data);
        }).catch(function(err){
            console.error('[排行榜-活跃榜]', err);
            container.innerHTML = '<div class="tcbdb-rp-empty">加载失败，请刷新重试</div>';
        });
    }

    // ===== 热搜榜渲染（单列，掘金风格） =====
    function renderHotSearch(container, items){
        if(!items || !items.length){
            container.innerHTML = '<div class="tcbdb-rp-empty">暂无热搜数据</div>';
            return;
        }
        var html = '';
        items.forEach(function(item){
            html += '<a href="' + escHtml(item.url) + '" class="tcbdb-rp-hot-item">';
            html += renderRankNum(item.rank);
            html += '<span class="tcbdb-rp-hot-word">' + escHtml(item.word) + '</span>';
            if(item.rank <= 3){
                html += '<span class="tcbdb-rp-hot-tag">HOT</span>';
            } else if(item.rank <= 6){
                html += '<span class="tcbdb-rp-hot-tag hot-new">NEW</span>';
            }
            html += renderHeat(item.heat);
            html += '</a>';
        });
        container.innerHTML = html;
    }

    function loadHotSearch(container){
        if(!container) return;
        container.innerHTML = '<div class="tcbdb-rp-loading">加载中</div>';
        var url = tcbdb_leaderboard_api.rest_url + 'tcbdb/v1/ranking/hotsearch';
        apiRequest(url).then(function(data){
            if(data.error) throw new Error(data.error);
            renderHotSearch(container, data);
        }).catch(function(err){
            console.error('[排行榜-热搜榜]', err);
            container.innerHTML = '<div class="tcbdb-rp-empty">加载失败，请刷新重试</div>';
        });
    }

    // ===== 面板数据加载调度 =====
    function loadPanelData(tabName, panel, period){
        if(!period) period = getCurrentPeriod();
        panel.setAttribute('data-loaded', '1');
        switch(tabName){
            case 'creator':
                loadCreatorList(panel.querySelector('.tcbdb-rp-creator-grid'), period);
                break;
            case 'popular':
                loadPostList(panel.querySelector('.tcbdb-rp-post-list'), 'popular', period);
                break;
            case 'likes':
                loadPostList(panel.querySelector('.tcbdb-rp-post-list'), 'likes', period);
                break;
            case 'paid':
                loadPostList(panel.querySelector('.tcbdb-rp-post-list'), 'paid', period);
                break;
            case 'download':
                loadPostList(panel.querySelector('.tcbdb-rp-post-list'), 'download', period);
                break;
            case 'active':
                loadActiveList(panel.querySelector('.tcbdb-rp-active-grid'));
                break;
            case 'hotsearch':
                loadHotSearch(panel.querySelector('.tcbdb-rp-hotsearch-grid'));
                break;
        }
    }

    // ===== 初始化：加载默认面板 =====
    var activePanel = page.querySelector('.tcbdb-rp-panel.active');
    if(activePanel){
        var activeTab = page.querySelector('.tcbdb-rp-nav-tab.active');
        var tabName = activeTab ? activeTab.getAttribute('data-tab') : 'creator';
        loadPanelData(tabName, activePanel);
    }
})();
// end 排行榜页面交互逻辑`

在子主题中创建一个`page-leaderboard.php`文件，将下面代码复制进去：

`<?php
/**
 * Template Name: 创作者排行榜
 */
get_header();

$leaderboard_opts = tcbdb_leaderboard_get_options();
$tab_config = array(
    'popular'    => !empty($leaderboard_opts['popular_enabled']),
    'likes'      => !empty($leaderboard_opts['likes_enabled']),
    'paid'       => !empty($leaderboard_opts['paid_enabled']),
    'download'   => !empty($leaderboard_opts['download_enabled']),
    'active'     => !empty($leaderboard_opts['active_enabled']),
    'hotsearch'  => !empty($leaderboard_opts['hotsearch_enabled']),
);

$banner_url = !empty($leaderboard_opts['leaderboard_banner']) ? esc_url($leaderboard_opts['leaderboard_banner']) : '';
$bg_url = !empty($leaderboard_opts['leaderboard_bg']) ? esc_url($leaderboard_opts['leaderboard_bg']) : '';
?>

<style>
<?php if ($bg_url): ?>
body.tcbdb-leaderboard-page #page.site,
body.tcbdb-leaderboard-page.dark #page.site { background-image: url(<?php echo esc_url($bg_url); ?>) !important; background-size: cover !important; background-position: center !important; background-attachment: fixed !important; }
body.tcbdb-leaderboard-page #page.site { background-color: #f4f5f5 !important; }
body.tcbdb-leaderboard-page.dark #page.site { background-color: #121212 !important; }
<?php endif; ?>
body.tcbdb-leaderboard-page .b2-single-content { align-items: flex-start !important; }
</style>

<div class="b2-single-content wrapper">
    <div id="primary-home" class="content-area" style="max-width:100%">
        <div class="tcbdb-ranking-page">
            <div class="tcbdb-rp-container">
                <div class="tcbdb-rp-sidebar">
                    <div class="tcbdb-rp-sidebar-inner" id="tcbdb-rp-sidebar-sticky">
                        <div class="tcbdb-rp-banner">
                            <?php if ($banner_url): ?>
                                <img src="<?php echo $banner_url; ?>" alt="排行榜" class="tcbdb-rp-banner-img">
                            <?php else: ?>
                                <div class="tcbdb-rp-banner-placeholder">
                                    <svg viewBox="0 0 200 80" width="100%" height="80" fill="none">
                                        <rect width="200" height="80" rx="4" fill="#FF0044" fill-opacity="0.1"/>
                                        <text x="100" y="35" text-anchor="middle" fill="#FF0044" font-size="14" font-weight="700">排行榜</text>
                                        <text x="100" y="55" text-anchor="middle" fill="#FF0044" font-size="10" opacity="0.6">上传Banner图替换</text>
                                    </svg>
                                </div>
                            <?php endif; ?>
                        </div>
                        <nav class="tcbdb-rp-nav">
                            <button class="tcbdb-rp-nav-tab active" data-tab="creator">
                                <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
                                创作者榜
                            </button>
                            <?php if ($tab_config['hotsearch']): ?>
                            <button class="tcbdb-rp-nav-tab" data-tab="hotsearch">
                                <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
                                热搜榜
                            </button>
                            <?php endif; ?>
                            <?php if ($tab_config['popular']): ?>
                            <button class="tcbdb-rp-nav-tab" data-tab="popular">
                                <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
                                人气榜
                            </button>
                            <?php endif; ?>

                            <?php if ($tab_config['paid']): ?>
                            <button class="tcbdb-rp-nav-tab" data-tab="paid">
                                <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
                                付费榜
                            </button>
                            <?php endif; ?>
                            <?php if ($tab_config['download']): ?>
                            <button class="tcbdb-rp-nav-tab" data-tab="download">
                                <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
                                下载榜
                            </button>
                            <?php endif; ?>
                            <?php if ($tab_config['active']): ?>
                            <button class="tcbdb-rp-nav-tab" data-tab="active">
                                <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
                                活跃榜
                            </button>
                            <?php endif; ?>
                            <?php if ($tab_config['likes']): ?>
                            <button class="tcbdb-rp-nav-tab" data-tab="likes">
                                <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3H14z"/><path d="M7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"/></svg>
                                点赞收藏榜
                            </button>
                            <?php endif; ?>
                        </nav>
                        <div class="tcbdb-rp-sidebar-footer">
                            共有<span class="author-count-num">0</span> 位创作者争榜
                        </div>
                    </div>
                </div>
                <div class="tcbdb-rp-main">
                    <div class="tcbdb-rp-main-header">
                        <h2 class="tcbdb-rp-main-title">创作者榜</h2>
                        <div class="tcbdb-rp-period-tabs" id="tcbdb-global-period">
                            <button class="tcbdb-rp-period active" data-period="all">综合</button>
                            <button class="tcbdb-rp-period" data-period="month">月榜</button>
                            <button class="tcbdb-rp-period" data-period="week">周榜</button>
                        </div>
                    </div>

                    <div class="tcbdb-rp-panel active" id="tcbdb-panel-creator">
                        <div class="tcbdb-rp-creator-grid" id="tcbdb-creator-list"></div>
                    </div>

                    <?php if ($tab_config['popular']): ?>
                    <div class="tcbdb-rp-panel" id="tcbdb-panel-popular">
                        <div class="tcbdb-rp-post-list" id="tcbdb-popular-list"></div>
                    </div>
                    <?php endif; ?>

                    <?php if ($tab_config['likes']): ?>
                    <div class="tcbdb-rp-panel" id="tcbdb-panel-likes">
                        <div class="tcbdb-rp-post-list" id="tcbdb-likes-list"></div>
                    </div>
                    <?php endif; ?>

                    <?php if ($tab_config['paid']): ?>
                    <div class="tcbdb-rp-panel" id="tcbdb-panel-paid">
                        <div class="tcbdb-rp-post-list" id="tcbdb-paid-list"></div>
                    </div>
                    <?php endif; ?>

                    <?php if ($tab_config['download']): ?>
                    <div class="tcbdb-rp-panel" id="tcbdb-panel-download">
                        <div class="tcbdb-rp-post-list" id="tcbdb-download-list"></div>
                    </div>
                    <?php endif; ?>

                    <?php if ($tab_config['active']): ?>
                    <div class="tcbdb-rp-panel" id="tcbdb-panel-active">
                        <div class="tcbdb-rp-active-grid" id="tcbdb-active-list"></div>
                    </div>
                    <?php endif; ?>

                    <?php if ($tab_config['hotsearch']): ?>
                    <div class="tcbdb-rp-panel" id="tcbdb-panel-hotsearch">
                        <div class="tcbdb-rp-hotsearch-grid" id="tcbdb-hotsearch-list"></div>
                    </div>
                    <?php endif; ?>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
(function(){
    var sidebar = document.querySelector('.tcbdb-rp-sidebar');
    var inner = document.getElementById('tcbdb-rp-sidebar-sticky');
    if(!sidebar || !inner) return;

    var navH = 80;
    var fixed = false;

    function calc(){
        var sRect = sidebar.getBoundingClientRect();
        var shouldFix = sRect.top <= navH;

        if(shouldFix && !fixed){
            sidebar.style.height = inner.offsetHeight + 'px';
            inner.style.position = 'fixed';
            inner.style.top = navH + 'px';
            inner.style.width = sidebar.offsetWidth + 'px';
            inner.style.zIndex = '10';
            fixed = true;
        } else if(!shouldFix && fixed){
            sidebar.style.height = '';
            inner.style.position = '';
            inner.style.top = '';
            inner.style.width = '';
            inner.style.zIndex = '';
            fixed = false;
        }
    }

    window.addEventListener('scroll', function(){
        requestAnimationFrame(calc);
    }, {passive: true});
    window.addEventListener('resize', function(){
        if(fixed) inner.style.width = sidebar.offsetWidth + 'px';
    });
    calc();
})();
</script>

<?php get_footer(); ?>
`

嗯……然后就可以了，下面是首页模块自定义HTML的代码：

`<div class="tobe-author-wrap" data-user-ids="1,2,3">
    <div class="tobe-author">
        <div class="author-top">
            <div class="author-top-left">
                <h2 class="item-title"><a href="/phb"><i class="ico icon-zuozhe"></i> 创作者排行榜</a></h2>
            </div>
            <div class="author-top-desc">与优秀创作者同行，分享你的知识与经验，提升个人影响力。</div>
            <div class="author-top-stat">
<span>共有</span>
                <strong class="author-count-num">0</strong>
                <span>位创作者加入</span>
            </div>
            <div class="author-top-btns">
                <a href="/write" class="btn btn-orange">我要投稿</a>
                <a href="/phb" class="btn btn-orange-border">查看榜单</a>
            </div>
        </div>
        <div class="author-body">
            <div class="author-tabs">
                <button class="author-tab" data-period="week">周榜</button>
                <button class="author-tab" data-period="month">月榜</button>
                <button class="author-tab active" data-period="all">总榜</button>
            </div>
            <div class="author-list"></div>
        </div>
    </div>
</div>`

复制到后台主题设置-模块管理-首页-添加新模块，选择自定义!