loading
为页面自动添加二维码

为页面自动添加二维码

扫码盛行,也跟风一下

很早之前我也在 Jekyll 博客分享按钮里面添加过二维码,后来换了模板就舍弃了。这次修改这个博客主题,又尝试加回来,鼓捣鼓捣也可以扫一扫了!

网上有很多生成二维码的 js 库可用,一搜索一大把,这次逛了逛选了个可定制性较强、体积也较小的 jQuery.qrcode,如果不想使用 jQuery, 它也有个对应的原生 js 版本 kjua,大小差不多,还有在线 demo: https://larsjung.de/jquery-qrcode/latest/demo/,先看看体验一下再下手也不错。

jQuery.qrcode 使用起来非常简单:$(selector).qrcode(options); 就行!可配置的选项挺多,还是看它官网比较好,我就不再赘述了。

这里就说说配合 tooltipster 的使用吧。

<a id="qrcode-icon" href="javascript:void(0);">
    <i class="fa fa-fw fa-qrcode"></i>
</a>
<div class="qr-content">
    <span id="qrcode"></span>
</div>

先在分享按钮那一块增加一个二维码图标,再弄个 div 安放二维码,用 css 把它隐藏起来,只有当鼠标划过(在移动设备上为点击)二维码图标的时候才在 tooltip 中显示出来。

if ($('#qrcode-icon').length) {
    $('#qrcode').qrcode({
        text: window.location.href,
        minVersion: 1,
        ecLevel: 'M',
        crisp: true,
        render: 'image',
        background: null,
        quiet: 1,
        radius: 0.5,
        size: 300,
        mode: 2,
        mSize: 0.12,
        mPosX: 0.5,
        mPosY: 0.5,
        label: 'inDev. Journal'
    });
    $('#qrcode-icon').tooltipster({
        touchDevices: true,
        maxWidth: 150,
        zIndex: 999,
        content: $("#qrcode"),
        trigger: 'custom',
        triggerOpen: {
            mouseenter: true,
            touchstart: true
        },
        triggerClose: {
            mouseleave: true,
            originClick: true,
            touchleave: true
        }
    })
}

为了分辨率考虑,我把生成的二维码设为 300 px,在 tooltipster 中限制为 150px,看起来稍稍好些了。

好了,就这么着吧,扫一扫试试吧。

林宏

Frank Lin

Hey, there! This is Frank Lin (@flinhong), one of the 1.4 billion 🇨🇳. This 'inDev. Journal' site holds the exploration of my quirky thoughts and random adventures through life. Hope you enjoy reading and perusing my posts.

YOU MAY ALSO LIKE

Figure caption for images on Jekyll sites - single line with Markdown

Web Notes

2016.09.22

Figure caption for images on Jekyll sites - single line with Markdown

Markdown makes writing blog posts simple and fast, but sometimes that simplicity comes with limitations. Recently on updating this blog theme, I'm intend to include images in the post with captions, and there wasn’t a straightforward way using Markdown. While adding an img tag is very easy with Markdown, I would have to do some fiddling to inset the caption.

Sass 基础

Web Notes

2017.08.17

Sass 基础

该来的总会来,用到的时候总是要去学习的。Bootstrap 4 进入 Beta,就想着是不是要折腾一下博客模板,这次就试试用 Scss 来更新吧。

Self-host comments in Jekyll, powered by Firebase real-time database

Tutorials

2017.03.25

Self-host comments in Jekyll, powered by Firebase real-time database

It's convenient to set up a comment system in Jekyll site with external social comment systems like Disqus or Duoshuo (多说). However, as you all know, Disqus was blocked in China and Duoshuo is going to shutdown. It's the time to rethink about the comment system (although I didn't get too many comments →_→), simple and controllable. And it becomes true with Firebase database.