XIU主题首页文章添加 NEW 图标来辨识最新发布文章

小七博客使用XIU可以说时间是相当长的，从大前端推出XIU主题预告的时候就已经下了订单，一直使用在2020年9月份，目前已经切换到了DUX主题。不过XIU主题还是比较不错的，如果有计划给XIU主题增加一个24小时内发布的文章添加NEW图片来辨认最新发布，可以借助于DUX主机优化版的一些代码，因为多数情况下是通用的，具体的代码命令如下：

1、在 excerpt.php 文件，找到该段代码

echo‘<h2><a’._post_target_blank().’ href=”‘.get_permalink().'” title=”‘.get_the_title().get_the_subtitle(false)._get_delimiter().get_bloginfo(‘name’).'”>’.get_the_title().get_the_subtitle().'</a></h2>

2、在后面添加以下代码

date_default_timezone_set('PRC');
$t1=$post->post_date;
$t2=date("Y-m-d H:i:s");
$diff=(strtotime($t2)-strtotime($t1))/3600;
if($diff<24){echo 'New';}
else{echo "";}

3、在style.css文件里增加以下内容

/** 修正摘要列表定位方式 */
.excerpt {
    position: relative;
}
/** NEW 图标文字版样式 **/
.excerpt .new-icon{
    position: absolute;
    right: -38px;
    top: -16px;
    display: block;
    width: 76px;
    height: 20px;
    line-height: 20px;
    background: #4caf50;
    color: #fff;
    font-size: 14px;
    font-weight: 400;
    text-align: center;
    transform: rotate(45deg);
    transform-origin: 0% 0%;
}

刷新你的主页，就会看到最新发布的文章显示了NEW的图标了。