给你的网站内容页右侧底部添加扫码功能[js版]

aixiu 2023-8-7 244

不会写插件以下内容需要一点动手能力。

1、在使用主题的hook目录下新建一个footer_js_after.htm文件,内容如下:

<script src="//libs.cdnjs.net/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
<script type="text/javascript">
    if (!+[1,]) { /* 新增判断:如果是 IE 浏览器,则使用 table 兼容方式 */
        Render = "table";
    } else {
        Render = "canvas";
    }
    function utf16to8(str) {
        var out, i, len, c;
        out = "";
        len = str.length;
        for (i = 0; i < len; i++) {
            c = str.charCodeAt(i);
            if ((c >= 0x0001) && (c <= 0x007F)) {
                out += str.charAt(i);
            } else if (c > 0x07FF) {
                out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
                out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));
                out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
            } else {
                out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));
                out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
            }
        }
        return out;
    }
    $('#QR_code').qrcode({width:180,height:180,render:Render,correctLevel:0,text:window.location.href});  
</script>

2、为不修改源文件,将博客根目录下view/htm/thread.htm,复制一份到/plugin/当前使用的主题目录/overwrite/view/htm中,编辑此文件找到:

<!--{hook thread_user_after.htm}-->

在下边新增:

<!--扫码访问-->
<div class="card sticky-top">
    <div class="card-header text-bold">
        <span class="icon-qrcode"></span>&nbsp;扫码访问
    </div>
    <div class="card-body m-1">
        <div id="QR_code"></div>
    </div>
</div>  

刷新缓存生效。其它CSS效果如边距等自行修改。

引用到的JS见附件可自行引用,也可使用CDN地址:

<script src="//libs.cdnjs.net/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>

参考文章:https://zhangge.net/5083.html

上传的附件:
这家伙太懒了,什么也没留下。

最新回复 (0)
    • 芝麻地
      2
        登录 注册 QQ登录
返回