巅峰霸主 > 设计开发 > 前端技术 > discuz帖子页添加二维码功能

discuz帖子详情页增加qrcode手机扫二维码访问功能

时间:2021-02-04 10:29:33  来源:巅峰霸主网  作者:烈火大地 点击:
摘要:想要discuz帖子页面增加一个qrcode实现手机扫二维码访问的功能,应用中心的插件都不满意,自己写了一下,代码也很简单,几步就搞定了,不论是否伪静态都支持……

这个手机扫二维码访问功能还是挺实用的,有的时候还真的会使用手机扫码访问,仿淘宝天猫商品详情页那种,放一个很小的二维码示意图,鼠标移动上去显示当前页面的URL二维码,只要用手机(微信、手机浏览器等能扫码的都可以)扫码就能很方便的在移动端浏览了,不管是否伪静态都支持,根据当前页面的URL自动生成一个“canvas图片”(不是真正的图片,是通过代码自动生成的一个图片),不占用服务器空间。以下本地项目截图,演示网址可以查看www.asneel.com任意帖子详情页。

discuz使用qrcode.js生成二维码

一、创建目录文件夹

功能并不复杂,代码也很少,需要qrcode.js、jQuery.js两个文件,自定义css样式,为了和系统默认的程序分开,所以先在template/default/下面新建文件夹:liehuo_style/js/目录,创建好之后去网上下载(也可以在本文最后直接下载附件使用)jquery-3.5.1.slim.min.js和jquery.qrcode.min.js这两个文件放在我们新建的目录里面。

二、在适当的位置调用

1、只在帖子详情页的标题末尾显示

打开template/default/forum/viewthread.htm文件,搜索代码:

<!--{hook/viewthread_title_extra}-->

在这段代码的下面一行添加如下代码:

    <script src="template/default/liehuo_style/js/jquery-3.5.1.slim.min.js?{VERHASH}" type="text/javascript"></script> 
    <script src="template/default/liehuo_style/js/jquery.qrcode.min.js?{VERHASH}" type="text/javascript"></script>
    <script type="text/javascript"> var jq = jQuery.noConflict(); </script>
    <span class="lh-qrcode">手机访问
    <span id="qrcode" class="qr">打开手机浏览器扫一扫<br></span>
    </span>
    <script>jq('#qrcode').qrcode({width:175,height:175,text:(window.location.href)});</script>

然后打开template/default/common/common.css文件,在这个文件的最后一行输入以下css代码:

/*二维码手机访问*/
.lh-qrcode { color:#f30 !important;position: absolute;padding: 5px 2px;text-shadow: 0 0 0.2em #ff9a9a;background-image: url("/template/default/liehuo_style/lh-qrcode.png");background-position-x: right;background-position-y: center;background-repeat: no-repeat;padding-right: 15px; }
.lh-qrcode .qr{ display:none;text-align:center;text-shadow: 0 0 0.2em #e5edf2;background-color: #fff; }
.lh-qrcode:hover .qr{ display:block;position: absolute; }

网站后台——工具——清除缓存,前台帖子详情页刷新一下,看看是不是想要的结果就出来了。演示图片请看文章开头的那张图。因为这个是PC端的帖子页面,所以只会在电脑端显示,如果用户本来就用手机访问,那这个功能是多余的,移动端不需要。

生成的二维码图片可以调整大小,上面代码中:

<script>jq('#qrcode').qrcode({width:175,height:175,text:(window.location.href)});</script>

其中的175就是qrcode加载出来的二维码宽和高,如果删除,默认是256px,也可以根据自己的喜好,设置成喜欢的大小,比如128等。此方法只有帖子详情页显示二维码,并且二维码显示的位置是在帖子标题的末尾,其他地方需要另外添加代码才能显示。

2、在右侧返回顶部菜单中显示qrcode二维码

打开template/default/common/footer.htm文件,搜索代码:

<div id="scrolltop">

在其下面一行添加如下代码:

    <span><div class="lh-qr" title="手机访问"><div id="qrcode">打开手机浏览器扫一扫<br></div></div></span>
    <script>jq('#qrcode').qrcode({width:175,height:175,text:(window.location.href)});</script>

同样,script里面的数字175是生成二维码的宽和高,可以根据自己的喜好设置大小。

添加css,使二维码符合想要的位置,打开template/default/common/common.css文件,在这个文件的最后一行添加如下代码:

/*二维码手机访问 by www.asneel.com*/
.lh-qr { background: url(/template/default/liehuo_style/lh-qrcode.png) no-repeat 100% 100%;width: 30px;height: 24px;padding: 3px 5px;line-height: 12px;text-align: center;border-top: 1px #cdcdcd solid;background-position: center; }
.lh-qr #qrcode { display: none; }
.lh-qr canvas { margin-top: 8px; }
.lh-qr:hover #qrcode { display: block;position: absolute;right: 40px;top: -120px;background-color: #fff;/* text-shadow: 0 0 0.2em #50565b; */color: #f26c4f;font-size: 1rem;padding: 5px 5px;border: 1px solid #ddd;border-radius: 5px 5px; }

然后进入网站后台,清除缓存,前台任何页面刷新一下,看看效果,截图看一下(需要页面滚动出现返回顶部按钮才有):

discuz右侧qrcode二维码.png

方法二的好处是一劳永逸,全站中不论是帖子详情页、帖子列表、论坛首页、群组、群组分类及详情页,门户相关分类、文章详情页等,所有会显示“返回顶部按钮”的地方都会自动生成canvas二维码图片,简单方便。根据实际情况选择喜欢的方式添加就可以了。

qrcode.js+jQuery.js下载:

(责任编辑:陆柏熺)
评价:
用户名: 验证码: 看不清?点击更换


关注站长自媒体 获取更多优质内容

  • 百家号
    百家号
  • 头条号
    头条号
  • 企鹅号
    企鹅号

2019-2021 ©巅峰霸主网 京ICP备12023415号-2
返回
顶部