主机测评
服务器促销分享

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

提示:如果官网是英文页面,建议使用谷歌浏览器能同步翻译页面。点击下载【谷歌浏览器最新绿色便携版】
注意:部分文章发布时间较长,可能存在未知因素,购买时建议现在本博客搜索商家名称,先充分了解商家动态。
交流:唯一投稿QQ768187171、唯一投稿邮箱768187171@qq.com、网友交流QQ群号218293922。
推荐:Telegram频道(博文同步推送,部分低价、少量促销信息仅在此频道推送!推荐订阅):https://t.me/wn789
文章目录

蜗牛789目前使用的是大前端DUX主题,在2018年11月6日正式购入了正版主题并启用(庆祝下!蜗牛789正式启用DUX正版主题/之前使用的DUX无限制版可联系蜗牛获取/100%直接从服务器下载/绿色安全)。由于自己使用的事DUX主题,所以对此主题的小修改、美化方面的内容关注的比较多,如果有兴趣可以关注下本博客关于WordPress的文章(点击这里查看)。之前蜗牛在WordPress美化小技巧 为新文章标题及内容页面添加NEW图标文章当中介绍过如何为24小时内发布的文章添加“NEW”图标,今天在此文章中再为大家介绍一个通过修改“main.css”文件来实现把“NEW”图标显示在文章的右上角,如下图,结合本博客的首页顶置图标(如果你用的是DUX 4.0以下版本,可以看看此文章DUX主题添加首页显示顶置文章功能 支持只显示指定顶置分类文章),显得更加美观、统一。整体效果可以查看蜗牛789首页。

下面直接说下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

DUX无限制版下载方法

蜗牛789博客DUX无限制版本下载方案,使用微信扫描下面二维码关注蜗牛789微信公众号。注意是关注微信公众号, 微信公众号每天晚上推送当日热门促销活动。然后在微信公众号回复“DUX主题”即可获取下载链接。

About 蜗牛

【声明】:蜗牛789站内所有资源均来自网络,由于网络资源安全性未知,使用前请自行甄别。蜗牛从不强制任何人使用或购买本站介绍的资源,如因自愿选择使用造成的损失自行承担!本博客若无意侵犯到您的权利,请及时与我们联系,我们将在48小时内删除侵权内容!参与评论互动的网友请填写真实的邮箱及昵称,如果昵称很明显的是随意输入、不填写正确邮箱,本博客将视为垃圾评论处理。

赞(0) 打赏
未经允许不得转载:蜗牛789 » 大前端DUX主题美化小技巧 在首页为当前24小时内更新的文章添加NEW图标

评论 2

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #1

    zblog吗?

    21sta8个月前 (11-19)回复

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

支付宝扫一扫打赏

微信扫一扫打赏