大前端DUX主题的相关美化：在首页给新发布24小时内的主题添加NEW图标

大前端DUX主题，最近做了相关美化，就是在首页给新发布24小时内的主题添加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 "";}

二、修改主题的CSS文件 main.css

1、首先在主题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%;    }

未经允许不得转载：Just My Socks中文教程网 » 大前端DUX主题的相关美化：在首页给新发布24小时内的主题添加NEW图标