zblog用键盘上的左右箭头(←和→)实现快速翻页这个功能是用js实现的,加上这个好听点说就是优化了用户体验。实现起来也非常简单,有动手能力的朋友可以尝试下。
zblog现在分为zblogasp和zblogphp两个版本,js代码都是一样的,html代码略有不同。
zblogphp版,将以下代码和最下面的js代码添加到post-single.php合适的位置:
<p>{if $article.Prev} <a href="{$article.Prev.Url}" title="{$article.Prev.Title}" class="up" id="up" >上一篇</a> {/if}</p> <p>{if $article.Next} <a href="{$article.Next.Url}" title="{$article.Next.Title}" class="next" id="next">下一篇</a> {/if}</p> <p>试试用"←"或"→"方向键快速翻页把 \(^o^)/</p>
zblogasp版,在模板文件夹里面新建两个文件,分别是“b_article_navbar_l.html”和“b_article_navbar_r.html“,如果模板内已有这两个文件的仅需需求代码和下面的代码保持一致即可。
b_article_navbar_r.html:
<p>下一篇:<a href="<#article/nav_r/url#>" title="<#article/nav_r/name#>" class="up" id="up"><#article/nav_r/name#></a></p>
b_article_navbar_l.html:
<p>下一篇:<a href="<#article/nav_l/url#>" title="<#article/nav_l/name#>" class="up" id="up"><#article/nav_l/name#></a></p>
然后在b_article-single.html合适的位置添加以下代码和js代码即可。
<#template:article_navbar_l#> <#template:article_navbar_r#>
最后上js代码,zblogasp版和zblogphp版的js代码都是一样的。
<script language="javascript"> last=document . getElementById("up").href; next=document.getElementById("next").href; function keyUp(e) { if(navigator.appName == "Microsoft Internet Explorer"){ var keycode = event.keyCode;var realkey = String.fromCharCode(event.keyCode); }else{ var keycode = e.which;var realkey = String.fromCharCode(e.which); } if(keycode==39){window.location.href=next;} if(keycode==37){window.location.href=last;} } document.onkeyup = keyUp; </script>
最后的最后,按照自己的需求美化下css就是大功告成了,上个演示截图:
相关推荐
- vue3项目引入vant报错的错误原因和解决办法03-12
- zblog怎么截取指定字数的摘要?zblog摘要自定义截取方法介绍02-29
- 51.la统计的js文件被劫持了会跳转违法网站09-27
- 微信支付JSPAI调起支付后提示“该订单已过期,请重新下单”的解决办法06-11
- 宝塔一键迁移提示“连接服务器失败”的原因和解决办法05-16
- 微信小程序报错:operateWXDataForAd:fail的原因和解决办法05-14
- php保存添加bom头的txt文件和读取时去除txt的bom头05-02
- 小程序使用mp-html组件后输出空白的原因和解决办法04-08
- zblog获取全部分类列表函数GetCategoryList的参数和使用方法介绍说明03-30
- emlog通过分类id获取指定分类的标题链接等数据03-20
- 小皮面板(phpstudy)提示No input file specified的原因和解决办法03-07
- zblog获取当前页面的标题/链接/ID等属性02-02
- windows+phpstudy+Apache设置允许跨域请求的方法01-09
- 网站使用宝塔面板服务器cpu占用100%排查方法和解决方案01-04
- zblog应用中心如何开发票?在zblog应用中心购买应用后开发票流程11-29
- zblog模板文章发布时间格式详细说明11-23
欢迎 你 发表评论: 取消回复
- 最新文章
- 热文排行
- 最多评论
- 1天兴工作室zblog纯博客主题 vue3+小程序双版本03-19
- 2vue3项目引入vant报错的错误原因和解决办法03-12
- 3天兴工作室zblog百科主题 可搭配会员插件实现知识付费盈利03-06
- 4zblog怎么截取指定字数的摘要?zblog摘要自定义截取方法介绍02-29
- 5天兴工作室2023双11活动:五折优惠券大放送11-05
- 6腾讯云2023双11活动:2H2G3M轻量服务器88一年限新用户11-05
- 7新老同享 阿里云2023双11活动:2核2G3M带宽云服务器99元/年!10-31
- 8天兴工作室zblog免登录付费阅读插件 支持支付宝微信支付虎皮椒支付10-09
- 9[已下线] 天兴工作室2023双节活动:五折优惠券09-29
- 标签聚合
- ×2openssl×1方言×1文件重建×3zblog主题安装×1绝对地址×1文心一言×1自定义表单×1域名新注册×1vite跨域×1zblogphp摘要×2更新×1zblog专用主机×1zblogphp1.5错误×1在线订单×1会员系统×2zblog图片主题×1二维码生成×2emlog主题×1改模板×1UTF-8
最新评论
-
天兴工作室
03-21对的,下个版本会修复 -
访客
03-20此模版多张并排图片,不管点哪张图,都显示第一张,且没有轮播按钮,只能手动关闭。 系统:win7+火狐浏览器 -
天兴工作室
01-19没听懂 你是要批量创建分类?这是插件的事情主题不会考虑的 -
访客
01-18分类一个一个设置太麻烦了。能不能在主题设置里添加对分类的设置。 -
天兴工作室
01-16没太理解你的需求,麻烦联系我们的在线qq2076496616提供订单号详细说明下需求
有 2 位网友评论:
天兴工作室网友 8年前 (2015-12-28) 回复
能不能稍微详细一点,截图什么的。 这样新手实在是看不懂。。例如js代码放在哪里。
天兴工作室 8年前 (2015-12-28) 回复
如果是这样,那么不建议动手修改...