在折腾彩虹外链网盘程序的时候,发现在查看页面的侧栏有个将当前页面url生成为二维码的功能,生成的二维码可以让手机端扫描之后直接打开当前的网页,个人觉得这个功能还是很赞的,毕竟是外链分享尤其适用于临时要分享给朋友下载东西的时候,扫一下就打开,特别的方便。

但是,程序使用的是一个生成二维码的api,并且速度不是很快,页面的卡顿大都是因为调用这个api来实现的,而且有个严重的问题,就是我的网站,完!全!不!能!生!成!二!维!码!

插画:https://www.pixiv.net/artworks/78745730

分析

这里是啰嗦的内容,不想看可以直接跳过。

首先查看以下这个结构,一个框框里面一个img标签,那么这就好办了,我们换个api来生成二维码吧。

<div class="panel-body text-center" id="qrcode" >
<img alt="二维码" src="//api.qrserver.com/v1/create-qr-code/?size=180x180&margin=10&data=<?php echo urlencode($thisurl);?>">
</div>

经过我的一番搜索,发现并没有什么可以用并且速度很快的api,唯一可用的就是草料api,但是有个缺点,就是调用api生成的是一个页面,页面里面有图片,而不是单独生成一张图片。

image-20201015163823884

那么我们就换个方式吧,要不自己生成二维码?既然要自己生成了,那就交给万能的JS来处理吧,服务器是能省则省了。

然后还真的被我发现了一个好东西:QRCode.js

image-20201015164135624

使用

先放上使用文档的链接,菜鸟教程真的是一个非常不错的网站

https://www.runoob.com/w3cnote/javascript-qrcodejs-library.html

QRCode.js 是一个用于生成二维码的 JavaScript 库。主要是通过获取 DOM 的标签,再通过 HTML5 Canvas 绘制而成,不依赖任何库。

通过文档和我的测试,我发现生成二维码只需要一个外部容器即可,QRCode.js会自东=动在容器内生成一个img标签,然后放上生成的二维码。

那么我们开始使用了!

首先需要引入jQuery和QRCode.js 的js文件

<script type="text/javascript" src="//cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.staticfile.org/qrcodejs/1.0.0/qrcode.js"></script>

然后需要一个容器来盛放生成后的二维码

<div id="qrcode" ></div>

好了,接下来重点来了,我们需要获取到当前页面的url,js可以直接通过window.location.href;来获取当前页面完整的url,如果你只想获取首页url,可参考:https://blog.kaygb.com/138.html

然后将获取到的url作为值让QRCode来处理即可。

<script type="text/javascript">

var elText = window.location.href;
new QRCode(document.getElementById("qrcode"), elText);

</script>

对,就是这么多!

然后放上效果图,可以前往c.eas1.cn查看效果。

image-20201015165404745

在handsome主题侧边栏添加二维码

目前我也在handsome主题的侧边栏添加了此功能,接下来是使用教程,需要修改主题的源码。

打开/usr/themes/handsome/component文件夹下的sidebar.php在大概81行的section之后,也就是随机文章那一块之后,博客信息之前。当然具体位置可以按照自己的喜好来。

image-20201015165757094

后面另起一行,填入以下的代码保存即可:

handsome主题默认自带jQuery,可能无需再次引用
<section  id="blog_qrurl" class="widget widget_categories wrapper-md clear">
         
        <script type="text/javascript" src="//cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
        <script type="text/javascript" src="//static.runoob.com/assets/qrcode/qrcode.min.js"></script>
          <h5 class="widget-title m-t-none text-md"><?php _me("移动端阅读") ?></h5>
          <style>
              #qrcode img{
                  max-width: 100%;
              }
              @media (max-width: 767px){
                  #qrcode{
                      display: none;
                  }
              }

          </style>
          <div id="qrcode"></div>
          <script>
            var elText = window.location.href;
            new QRCode(document.getElementById("qrcode"), elText);
          </script>
          
      </section>
      

然后回到前台刷新一下,即可看到效果,目前未发现与pjax有没有冲突,如有问题,请下方留言。

image-20201015165417827

文章目录
文章目录