大前端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
- 黑色星期五 hostsolutions→9 欧 年 1G 内存 10T 全球[VPS测评]
- 促销 Hostdare→85 折促销优惠 CN2 和 CN2 GIA 线全球[VPS测评]
- 真实测评 六六云→洛杉矶三网双程 GIA1 核 1G 15G SSD 1全球[VPS测评]
- 预售 ¥399 月 L5630*2 16G 内存 1TB 硬盘 100M全球[VPS测评]
- 微基主机 IDC.WIKI→美国 CN2 虚拟主机 日本 CN2 VPS日本VPS[主机]
- porkbun - 域名注册.com 首年$5.95 .net 首年$6全球[VPS测评]
- RAKsmart→圣何塞服务器月付 46 美元起 任意服务器可申请 1 全球[VPS测评]
- [强推]搬瓦工$37.79 年双向 CN2 GIA 线路机器补货了 速度全球[VPS测评]
- DEDECMS 内容模型自定义字段在{dedearclist}中调用不显全球[VPS测评]
- 补货 搬瓦工→DC6 机房 CN2 GIA 线路补货了 2.5Gbps 全球[VPS测评]
- OVZ 不推荐-Webtropia→€1.5 月 2GB 内存 100G全球[VPS测评]
- 繁体的無字中间包含一个有字是什么成语?全球[VPS测评]
- 在宝塔面板安装WordPress如何设置伪静解决404页面全球[VPS测评]
- 体验 Google AdSense 广告联盟的链接广告样式全球[VPS测评]
- PIGYun香港/韩国/美国高端优化线路,优惠后最低月付14元起,可选香韩国VPS[主机]
- OneProvider(OP) 塞尔维亚 贝尔格莱德 服务器测试 (M2全球[VPS测评]
- Glesys-6€ 月 512M内存5G硬盘 100Mbps 瑞典 芬兰全球[VPS测评]
- 什么是云服务器?云服务器怎么登陆?全球[VPS测评]
- 美国信贷市场的痛苦将不亚于上世纪70年代的通胀时期美国VPS[主机]
- 2022年最新的15个美容院抖音文案,美容院文案怎么写全球[VPS测评]
- 如何设置指定路径跳转指定域名?全球[VPS测评]
- 江苏高防服务器哪里买?宿迁BGP、宿迁双线高防服务器的价格全球[VPS测评]
- 拼多多回应筹备跨境电商业务:不予置评全球[VPS测评]
- 无忧云:香港大埔/荃湾云服务器5折优惠,可叠加优惠码,国内高防78元起香港VPS[主机]
- 港网科技怎么样?国内BGP云主机,2核2G5M带宽仅377.46元/年全球[VPS测评]
- 如何设置指定路径跳转指定域名?全球[VPS测评]
- ucloud香港服务器怎么样?听听这些网友们怎么说的香港VPS[主机]
- 腾讯云香港服务器优惠价格:4核8G5M新用户1508元,老用户2639元香港VPS[主机]
- BBR对比BBR2BBRPLUSBBR2CAKE锐速哪个效果好全球[VPS测评]
- 恒创科技优惠码:Coupons_yun80,美国/香港云服务器8折优惠券美国VPS[主机]
转载请注明原文地址:http://140.238.13.167:12355/read-147090.html











