大前端DUX主题美化小技巧 在首页为当前24小时内更新的文章添加NEW图标
![]() | ![]() | ![]() | ![]() |
| 【性价之王】 | 【线路之王】 | 【价格之王】 | 【配置之王】 |
| 【免费之王】 | 【香港首推】 | 【梯子之王】 | 【独服之王】 |

蜗牛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().\' h=\"\'.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;}.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主题”即可获取下载链接。
猜你可能想看的VPS
- dogyun→香港“阿里云”线路 VPS 45 元 月 三网直连带 cn香港VPS[主机]
- 疯狂猜成语 图猜成语一根签子上有三个丸子两边各有一个问号是什么成语?全球[VPS测评]
- CombCloud→58 元 月 1GB 内存 20GB SSD 硬盘 香港VPS[主机]
- 便宜 $12.94 年 512M 内存 10G SSD 1T 流量@1G全球[VPS测评]
- 疯狂猜成语 图猜成语一个胖子在吃言是什么成语?全球[VPS测评]
- php 数组相加合并函数 多个数组相同键名项键值相加。全球[VPS测评]
- 补货通知 搬瓦工$29.99 年付 VPS 补货了 速度上了。全球[VPS测评]
- Linux Centos 服务器带宽异常跑满的排查解决办法全球[VPS测评]
- 二三互联香港新世界 vps 促销,5-8 折优惠,CN2 小带宽,不限流香港VPS[主机]
- WordPress基于WPJAM basic开发的主题:Sweet全球[VPS测评]
- WordPress插件:Add-Document-Pages为你的网站增全球[VPS测评]
- WordPress 简约瀑布流主题:mkBlog全球[VPS测评]
- Vpsfun 炯云-安徽马鞍山 联通VDS 128元月付 独立IP 5T独立服务器[U]
- on9host 1核心 512M内存 15G 储存 500G流量 30M全球[VPS测评]
- HostDoc 1核心 3G内存 30G SSD 60G HDD 1T流美国VPS[主机]
- 阁天互联怎么样?香港cn2云服务器 圣何塞cn2vps仅20/月香港VPS[主机]
- 野草云vps怎么样?香港美国vps,1核1G3M带宽,38元/月美国VPS[主机]
- 葫芦云:香港CN2/洛杉矶GIA高防vps,24元/月;1核/1GB/2虚拟空间(主机)
- 快速云:云计算分类和云计算的特点全球[VPS测评]
- wikihost,微基主机服务,100M带宽香港CMIVPS,5G防御,香港VPS[主机]
- 桔子数据:1核1GB香港CN2 GIA vps促销28元/月,最高30M香港VPS[主机]
- 恒创主机优惠码85折_服务器优惠券8折_恒创科技优惠_代金券全球[VPS测评]
- 阿里云香港服务器多少钱一年?香港阿里云服务器价格表香港VPS[主机]
- 恒创科技:国庆中秋双节同庆,香港1核2G云服务器,年付378元香港VPS[主机]
- 印象云怎么样?85折香港安畅CN2vps带宽3M月付23元香港VPS[主机]
- 跨境电商洋码头生死攸关:买手流失资金被冻结保全全球[VPS测评]
- jquery css3实现的进度条动画特效,带加载进度条百分比动态效果。全球[VPS测评]
- edgenat,低价年付促销活动,香港vps 4核8G仅300元/年,美美国VPS[主机]
- EdgeNAT,香港CN2+BGP vps 带宽5M 月付72元香港VPS[主机]
- DDOS攻击类型有哪些?全球[VPS测评]
转载请注明原文地址:http://140.238.13.167:12355/read-147090.html











