最新DUX主题美化教程，大前端DUX主题给最近新发布文章添加右上角的NEW图标，附详细教程及代码

适用于wordpress系统的dux主题模板，具体演示可以参考本站，也就是针对dux主题的相关美化，在首页最新发布的文章添加一个右上角NEW图标，美化修改起来也是非常简单，只需要简单的修改一下main.css文件，下面是本站的详细教程。

第一步，我们先去修改主题的excerpt.php

1、打开主题目录下的excerpt.php文件，Ctrl+F搜索下面的代码

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、然后在后面添加下面的代码，第一步修改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文件

在主题CSS文件里找main.css文件，然后我们在最后面添加下面代码就可以了，记得刷新页面或者清除下缓存就可以看到和本站一样的效果了

/** 修正摘要列表定位方式 */
/** https://www.vpsmr.com/62.html */
.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%;
}