手机扫码,文章阅读转移功能

      我们一般在PC端在阅读诸如CSDN博客,如果想要在手机上阅读某一文章只需点击文章右侧的“阅读转移”即可弹出表示此页面链接的二维码,手机扫码即可阅读。本教程旨在迅速帮大家完成这一功能,实现效果如图所示:
qrcode

第一步,将如下代码拷贝至sidebar.php(handsome/component下)文件最顶部。

<style>
    /* 工具栏 - start */
    .tools-item {
        position: fixed;
        bottom: 20px;
        right: 227px;
        width: 45px;
        height: 45px;
        text-align: center;
    }

    .tools-item > i {
        display: inline;
        line-height: 45px;
    }

    #qrcode-img {
        position: fixed;
        bottom: 70px;
        right: 260px;
        display: none;
        box-shadow: 0 0 20px #B6DFE9;
        padding:25px;
        background: #fff;
    }
</style>
<link rel="stylesheet" href="font-awesome.min.css" type="text/css"/> //font-awesome.min.css文件下方给出下载链接
<script type="text/javascript" src="qrcode.min.js"></script>//qrcode.min.js文件下方给出下载链接
<script type="text/javascript">
    $(function(){
        var system = { 
            win: false, 
            mac: false, 
            xll: false
        }; 
        //检测平台 
        var p = navigator.platform; 
        system.win = p.indexOf("Win") == 0; 
        system.mac = p.indexOf("Mac") == 0; 
        system.x11 = (p == "X11") || (p.indexOf("Linux") == 0); 
        if (system.win || system.mac || system.xll) { 
 
        } else {
            $("#qrcode").attr("hidden","hidden");
        } 

        var url = encodeURI(location.href);
        var select = true;
        $('#qrcode').click(function() {
            if(select) {
                $('#qrcode-img').empty();
                new QRCode(document.getElementById("qrcode-img"), {
                    text: url,
                    width: 180,
                    height: 180,
                    colorDark : "#000000",
                    colorLight : "#ffffff",
                    correctLevel : QRCode.CorrectLevel.L
                });
                $('#qrcode-img').fadeIn(500);
                select = false;
            } else {
                $('#qrcode-img').fadeOut(500);
                select = true;
            }
        });
    });
</script>

第二部,拷贝以下代码至第187行(在执行完第一步的前提下):

<div id="qrcode" class="tools-item" title="阅读转移"><div id="qrcode-img"></div><i class="fa fa-mobile  fa-3x" aria-hidden="false"></i></div>

拷贝位置如下图所示:
qrcode

额外文件下载:
链接:https://pan.baidu.com/s/1K_9Zi0CsoSRmNA0WquUaZA
提取码:8dri

Last modification:September 19th, 2019 at 07:16 pm
如果觉得我的文章对你有用,请随意赞赏

3 comments

  1. 1

    额外文件放在哪里呢

    1. 带翅膀的猫
      @1

      随意呀,只要你在href或src上填写上正确地址就行了呀

  2. ysicing

    用附件的话字体可能还需要细微调整一下

Leave a Comment