我的文章固定链接是%postname%形式，有时候需要用手机访问时，URL 输入很不方便，昨天我把文章底部作者信息中的文章链接改成了短链接。然后又想到，直接放一个二维码效果会更好。

至于生成二维码，直接用开放的api就行。我选择的是联图，调用方便，可自定义配置，且国内用户无障碍访问。

我把二维码放在文章底部作者信息卡片中，做了个简单的悬浮显示动画效果，以下是代码：

文章页的模版修改：

CSS 部分：

#qr_icon
{
    position:relative;
    display: inline-block;
    margin-bottom: -2px;
    margin-right: 80px;
    width: 18px;
    height: 16px;
    background-image: url('./images/qr_icon.png');
    background-repeat: no-repeat;
    background-size: 16px;
    background-position-y: bottom;
}
#qrcode{
    position: absolute;
    display: none;
    z-index: 9999;
    right: -78px;
    border-radius: 5px;
    width: 150px;
    padding: 10px;
    background: rgba( 204, 74, 0, 0.75 );
    text-align: center;
    cursor: pointer;
}
#qrcode img
{
    border:none;
    width: 150px;
    height: 150px;
}
#qrcode:after{
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-width: 10px;
    border-style: solid;
    border-color: rgba( 204, 74, 0, 0.75 ) transparent transparent;
    overflow: hidden;
    font-size: 0;
    right: 77px;
    bottom: -20px;
}

JS 部分:

jQuery(document).ready(function () {
        jQuery("#qr_icon").hover(function () {
            if (!jQuery("#qrcode").is(":animated")) {
                jQuery("#qrcode").animate({opacity: "show", top: "-185"}, "slow");
            }
        }, function () {
            jQuery("#qrcode").animate({opacity: "hide", top: "-195"}, "fast");
        });//悬浮和离开
    });

最终效果：