主机镇
主机测评网

DUX主题美化 大前端DUX主题给新发布的文章添加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%;
}

本文内容参考来着:https://www.wn789.com/category/wordpress

赞(2) 夸赞
声明:
1、本博客不从事任何主机及服务器租赁业务,不参与任何交易,也绝非中介。博客内容仅记录博主个人感兴趣的服务器测评结果及一些服务器相关的优惠活动,信息均摘自网络或来自服务商主动提供;所以对本博客提及的内容不作直接、间接、法定、约定的保证,博客内容也不具备任何参考价值及引导作用,访问者需自行甄别。

2、访问本博客请务必遵守有关互联网的相关法律、规定与规则;不能利用本博客所提及的内容从事任何违法、违规操作;否则造成的一切后果由访问者自行承担。

3、未成年人及不能独立承担法律责任的个人及群体请勿访问本博客。

4、一旦您访问本博客,即表示您已经知晓并接受了以上声明通告。

文章名称:《DUX主题美化 大前端DUX主题给新发布的文章添加NEW图标》
文章链接:https://www.zhujiz.com/91.html

夸赞作者,增加更新动力

非常感谢你的夸赞,我们将继续给力更多优质内容,让我们一起创建更加美好的网络世界!

支付宝扫一扫

微信扫一扫

登录

找回密码

注册