站长视角
用户至上

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

香港110M(含10M CN2)大带宽独服限量促销,香港E3-8G-1T硬盘-3IP,月付仅799!

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 "";}

如下图:

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

二、修改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

关于 国外主机测评

大前端DUX主题美化小技巧 在首页为当前24小时内更新的文章添加NEW图标插图1【声明】:本站宗旨是为方便站长、科研及外贸人员,请勿用于其它用途!站内所有内容及资源,均来自网络。本站自身不提供任何资源的储存及下载,若无意侵犯到您的权利,请及时与我们联系。另外群里不定期放出优质免费资源,欢迎加入!

赞(1) 打赏
版权声明:本文采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权, 转载请注明出处。
文章名称:《大前端DUX主题美化小技巧 在首页为当前24小时内更新的文章添加NEW图标》
文章链接:https://www.veidc.com/9372.html
【声明】:国外主机测评仅分享信息,不参与任何交易,也非中介,所有内容仅代表个人观点,均不作直接、间接、法定、约定的保证,读者购买风险自担。一旦您访问国外主机测评,即表示您已经知晓并接受了此声明通告。
【关于安全】:任何 IDC商家都有倒闭和跑路的可能,备份永远是最佳选择,服务器也是机器,不勤备份是对自己极不负责的表现,请保持良好的备份习惯。
标签:
广告位招租,欢迎骚扰
香港110M(含10M CN2)大带宽独服限量促销,香港E3-8G-1T硬盘-3IP,月付仅799!

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏