大前端DUX主题美化小技巧在首页为当前24小时内更新的文章添加NEW图标

2021年4月26日10:18:46 发表评论 421

大前端DUX主题美化小技巧在首页为当前24小时内更新的文章添加NEW图标云服务器怎么样?云服务器值不值得购买?云服务器好不好?

大前端DUX主题美化小技巧在首页为当前24小时内更新的文章添加NEW图标

DUX主题如何在首页为当前24小时内更新的文章添加NEW图标，方法很简单，只需修改DUX主题的“excerpt.php、main.css”两个文件即可实现。

一、修改excerpt.php

打开主题的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>';

然后在上面代码后面加上下面这段代码，修改excerpt.php文件这一步就完成了。

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 '<span class="new-icon">New</span>';}
else{echo "";}

如下图：

二、修改main.css

在主题文件里找main.css文件，在最后面添加下面代码即可。然后清理下本地缓存或的CDN缓存就能看到和本站一样的效果了。

/** 修正摘要列表定位方式 */
.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%;
}

本文内容参考：https://blog.quietguoguo.com/3289.html

来源链接：https://www.vpssz.com/

本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。

郑重声明:VPS主机评测仅提供资料收集及VPS云主机信息推介，不提供任何VPS云主机及代购业务！

一、修改excerpt.php

二、修改main.css

微信