美化简介

子比主题文章卡片右上角更新时间功能：让内容呈现更具时效与质感 在子比主题的个性化美化中，文章卡片右上角的更新时间展示是一处细节却又关键的设计。它不仅能直观地向访客传递内容的新鲜度，还可通过样式的定制化，提升整体界面的精致感与辨识度。 我们可以通过调整代码样式，为更新时间添加醒目的边框、渐变背景或动态效果，使其在文章卡片中既不突兀又能快速吸引注意力。比如采用与主题色调相呼应的色彩搭配，让时间标识成为视觉焦点的同时，也强化了品牌风格的一致性。 这一功能的优化，无论是对于资讯类站点强调内容时效性，还是对于资源分享平台体现更新频率，都有着显著的实用价值，助力子比主题站点在细节处彰显专业，在用户体验上更上一层楼。

美化效果

代码部署

找到主题文件：/wp/content/themes/zibl/inc/functions/zib-posts-list.php

然后在里面搜索：获取卡片模式的

然后，替换下面的代码

//获取卡片模式的文章列表
function zib_posts_mian_list_card($args = array())
{
    // 准备必要参数
    $zbbox_date = get_the_modified_date('Y-m-d'); // 修改：使用更新时间
    $date       = get_the_modified_date('m-d');   // 修改：使用更新时间
    $graphic    = zib_get_posts_thumb_graphic();
    $title      = zib_get_posts_list_title();
    $badge      = zib_get_posts_list_badge($args);
    $meta       = zib_get_posts_list_meta(empty($args['no_author']), true);

    $class = 'posts-item card ajax-item';
    $style = _pz('list_card_option', '', 'style');
    $class .= $style && $style != 'null' ? ' ' . $style : '';

    $html = '';
    $html .= '<posts class="tuc-2ea177b2-326335-0 ' . $class . ' tuc-2ea177b2-326335-0">';

    // ========== ⬇️ 修改后的右上角日期（显示更新时间） ========== //
    $html .= '<div class="tuc-2ea177b2-326335-0 card-top-date tuc-2ea177b2-326335-0" style="position: absolute; top: 10px; right: 10px; z-index: 2;">';
    $html .= '<div class="tuc-2ea177b2-326335-0 post-time tuc-2ea177b2-326335-0">';
    $html .= '<svg t="1718343757391" class="tuc-2ea177b2-326335-0 icon tuc-2ea177b2-326335-0" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6786" width="16" height="16">';
    $html .= '<path d="M690.176 843.776l239.616-358.4c10.24-14.336 6.144-32.768-8.192-43.008-4.096-4.096-10.24-6.144-16.384-6.144H716.8v-225.28c0-16.384-14.336-30.72-30.72-30.72-10.24 0-20.48 6.144-24.576 14.336L421.888 552.96c-10.24 14.336-6.144 32.768 8.192 43.008 4.096 4.096 10.24 6.144 16.384 6.144H634.88v225.28c0 16.384 14.336 30.72 30.72 30.72 10.24 0 20.48-6.144 24.576-14.336z" p-id="6787" fill="#17abe3"></path>';
    $html .= '<path d="M204.8 231.424h204.8c34.816 0 61.44 26.624 61.44 61.44s-26.624 61.44-61.44 61.44H204.8c-34.816 0-61.44-26.624-61.44-61.44s26.624-61.44 61.44-61.44z m0 491.52h204.8c34.816 0 61.44 26.624 61.44 61.44s-26.624 61.44-61.44 61.44H204.8c-34.816 0-61.44-26.624-61.44-61.44s26.624-61.44 61.44-61.44z m-81.92-245.76h163.84c34.816 0 61.44 26.624 61.44 61.44s-26.624 61.44-61.44 61.44H122.88c-34.816 0-61.44-26.624-61.44-61.44s26.624-61.44 61.44-61.44z" opacity=".3" p-id="6788" fill="#17abe3"></path>';
    $html .= '</svg>';
    $html .= '<span class="tuc-2ea177b2-326335-0 full-date tuc-2ea177b2-326335-0">' . $zbbox_date . '</span>';
    $html .= '</div>';
    $html .= '</div>';
    // ========== ⬆️ 修改结束 ========== //

    // ========== 原始结构 100% 保留 ========== //
    $html .= $graphic;
    $html .= '<div class="tuc-2ea177b2-326335-0 item-body tuc-2ea177b2-326335-0">';
    $html .= $title;
    $html .= $badge;
    $html .= $meta;
    $html .= '</div>';
    $html .= '</posts>';

    return $html;
}