大前端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
- 跨境贸易和跨境电商的三大区别简单分析 全球[VPS测评]
- 外贸无界烟台市有多少跨境电商?烟台跨境电商开发平台,烟台跨境电商选品 全球[VPS测评]
- 阁天互联怎么样?香港cn2云服务器 圣何塞cn2vps仅20/月 香港VPS[主机]
- anyhk香港HKT商宽NAT VPS,1Gbps无限流量,终身8折¥3 香港VPS[主机]
- 众创逸云:1核2G云服务器,不限流量vps/5Mbps/KVM/香港CN 香港VPS[主机]
- 微基主机:1核1G香港云服务器,100Mbps/香港CN2直连/KVM/ 香港VPS[主机]
- 景林网络:香港CN2vps,1核1G3M月付35元;美国高防vps,48 美国VPS[主机]
- 品光网络怎么样?香港美国服务器/云/高防,开年采购3.5折起 美国VPS[主机]
- 亿速云双12年终回馈:云服务器2折活动,订单满100元减50元 全球[VPS测评]
- 尊云双十二:国内4核4G5M云服务器仅28元/月,香港CN2VPS仅84 香港VPS[主机]
- 腾讯云秒杀活动:1核/2G/上海&北京,年付99元 全球[VPS测评]
- 初忆云:香港美国cn2云服务器30元;香港cn2高防vps30元,美国1 美国VPS[主机]
- 香港云服务器性价比高:香港云服务器哪家便宜 香港VPS[主机]
- RAKsmart:E3服务器秒杀$30/月起,韩国服务器,香港/日本/美 站群服务器[IP]
- VoLLCloud:香港1核/1G/20OM不限速VPS,全网特价,3$ 香港VPS[主机]
- Pia云:美国三网CN2 GIA线路,15元/月起;香港云主机1核/2G 美国VPS[主机]
- Vmshell:香港数据中心200MB/S大带宽vps,庆典活动(3日内 香港VPS[主机]
- 吸血鬼崛起服务器怎么快速搭建? 全球[VPS测评]
- HTML5绿色有机食品电商网站模板 - Organtio 全球[VPS测评]
- 香港云服务器的优势有哪些方面 香港VPS[主机]
- 6种样式社交论坛网站HTML5模板 - Social 全球[VPS测评]
- 网站迁移服务器是如何运作的?新手站长看完这篇文章,很容易就能看完。 全球[VPS测评]
- 兼容移动和PC的loading加载和toast消息插件 全球[VPS测评]
- 云服务器能干什么?有几十种玩法?阿里云,腾讯云服务器如何购买? 全球[VPS测评]
- 深圳市城市交通规划设计研究中心股份有限公司关于与腾讯云计算(北京)有限责 全球[VPS测评]
- 腾讯云香港轻量应用服务器 优惠活动最低月付仅24元 香港VPS[主机]
- CubeCloud,香港cn2,美国cn2 gia线路vps主机,2核1 美国VPS[主机]
- 瓜云互联怎么样?香港/美国洛杉矶CN2高防vps 50G月付34元 美国VPS[主机]
- 企鹅小屋怎么样?深港IPLC专线销售 500M大带宽/2核1G内存/55 全球[VPS测评]
- 手帕云,便宜小带宽香港CN2 VPS,集群10G防御,双向CN2直连,仅 香港VPS[主机]
转载请注明原文地址: http://140.238.13.167:12355/read-147090.html











