QQ爹の博客 QQ爹の博客

给博客加入跨屏浏览,打赏功能。

in Typecho,代码相关 read (2736) 文章转载请注明来源!

很久以前就知道typecho有个把文章地址生成二维码的插件。但是感觉直接显示出来不太适合自己的模板。于是就不了了之了。

最近,我觉得这个功能很有必要,很方便,于是先是搜了下二维码自动生成的js,然后又找到个打赏分享插件,于是删除了打赏插件的分享功能和点赞功能,然后加入跨屏浏览(就是显示文章地址二维码)和版权声明。
代码如下:
css部分

.popup{background-color:#f8f8f8;box-shadow:0 2px 2px 0 rgba(0,0,0,.3)}.popup-content{padding:20px 20px 30px 20px}.popup-overlay{background-color:rgba(0,0,0,.3)}
/** * CSS for jQuery plugin 'popup' v.1.0.0 * Copyright (©) by Konstantin Kachurenko <konstantin.kachurenko@gmail.com> | http://konstantin-kachurenko.github.io | The MIT License (MIT) http://opensource.org/licenses/MIT */
.popup{position:fixed;top:50%;left:50%;width:auto;height:auto;min-width:320px;max-width:100%;max-height:100%;visibility:hidden;opacity:0;overflow:auto;-webkit-box-sizing:border-box;box-sizing:border-box}
.popup,.popup-overlay{z-index:0;-webkit-transform-style:flat;transform-style:flat;-webkit-transition:opacity .3s ease,left .5s,top .5s,transform .5s,-webkit-transform .5s;-ms-transition:opacity .3s ease,left .5s,top .5s,transform .5s,-ms-transform .5s;-o-transition:opacity .3s ease,left .5s,top .5s,transform .5s,-o-transform .5s;transition:opacity .3s ease,left .5s,top .5s,transform .5s,-webkit-transform .5s,-ms-transform .5s,-o-transform .5s}
.popup-content{position:relative}
.popup-overlay{position:fixed;visibility:hidden;opacity:0;top:-25%;left:0;width:100%;height:150%;background:rgba(0,0,0,.7)}
.popup-show{visibility:visible;opacity:1;z-index:2000}
/** * Effects: * .effect-fade-scale, .effect-slide-left, .effect-slide-right, * .effect-slide-top, .effect-newspaper, .effect-sticky */
.popup.effect-fade-scale{-webkit-transform:scale(0.7);-ms-transform:scale(0.7);-o-transform:scale(0.7);transform:scale(0.7)}
.popup-show.effect-fade-scale{-webkit-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1)}
.popup.effect-slide-left{left:20%}
.popup.effect-slide-right{left:80%}
.popup-show.effect-slide-right,.popup-show.effect-slide-left{left:50%}
.popup.effect-slide-top{top:20%}
.popup-show.effect-slide-top{top:50%}
.popup.effect-newspaper{-webkit-transform:scale(0) rotate(720deg);-ms-transform:scale(0) rotate(720deg);-o-transform:scale(0) rotate(720deg);transform:scale(0) rotate(720deg)}
.popup-show.effect-newspaper{-webkit-transform:scale(1) rotate(0deg);-ms-transform:scale(1) rotate(0deg);-o-transform:scale(1) rotate(0deg);transform:scale(1) rotate(0deg)}
.popup.effect-sticky{top:-100%}
.popup-show.effect-sticky{top:0;margin-top:0 !important}
#social{margin:12px -20px 12px}
.social-main{position:relative;margin:0 auto;width:283px}
.social-main a{float:left;color:#fff !important;line-height:35px;text-align:center;border-radius:2px}
.social-main a:hover{background:#878787;color:#fff;transition:all .2s ease-in 0s}
.like a{background:#f40;width:140px;display:block;box-shadow:0 1px 1px rgba(0,0,0,.1)}
.share-s a{background:#ecb842;width:140px;display:block;box-shadow:0 1px 1px rgba(0,0,0,.1)}
.social-main i{color:#fff;font-style:normal;margin:0 5px 0 0}
.shang-p a{position:absolute;left:115px;top:-11px;background:#7ab951;width:50px;height:50px;font-size:18px;font-weight:600;line-height:46px;border:4px solid #fff;border-radius:40px}
.shang-main input{height:auto;max-width:100%;vertical-align:middle;display:block}
.shang-main img{height:auto;max-width:100%;margin:0 auto;vertical-align:middle;display:block}
.shang-main h4{text-align:center}
.zanzhu{margin-top:-5px!important;padding-bottom:5px;border-bottom:1px solid #eee;color:#666;font-weight:bold;font-size:18px;}

div部分(这里有些代码是针对typecho的,如果你不是typecho,请自行修改)

  <div id="social">
<div class="social-main">
<span class="like">
<a data-dialog="#popup-erwei" data-effect="effect-newspaper" title="跨屏浏览">&nbsp;跨屏浏览</a>
</span>
<span class="shang-p">
<a data-dialog="#popup-shang" data-effect="effect-slide-top" title="赞助本站">赏</a>
</span>
<span class="share-s">
<a data-dialog="#popup-share" data-effect="effect-newspaper" title="版权声明">&nbsp;版权声明</a>
</span>
<div class="clear"></div>
</div>
</div>
<div class="popup effect-fade-scale" id="popup-erwei">
<div class="popup-content"><center>
<h3><i class="sidebar-button-icon fa fa-mobile-phone"></i>手机扫描下方二维码</h3>
<div class="bdsharebuttonbox"><div id="qrcode"></div>
</div></center></div>
</div>
<div class="popup effect-fade-scale" id="popup-shang">
<div class="popup-content"><center><h3>
支付宝转账赞助本站</h3>
<div class="bdsharebuttonbox">
<img width="200" height="200" src="这里写支付宝收款二维码地址" title="支付宝转账赞助" />
</div></center>
</div>
</div>
<div class="popup effect-fade-scale" id="popup-share">
<div class="popup-content"><div class="bdsharebuttonbox">
著作权归作者所有。<br>
商业转载请联系作者获得授权,非商业转载请注明出处。<br>
作者:<?php $this->author() ?><br>
链接:<?php $this->permalink() ?><br>
</div></div>
</div>

js部分

  <script type="text/javascript" src="Liang.popup.min.js"></script>
  <script src="jquery.qrcode.min.js"></script>
<script>
jQuery('#qrcode').qrcode({
        render    : "canvas",//也可以替换为table
    width   : 200,
    height  : 200,
    text    : "<?php $this->permalink() ?>"
});
</script>

jquery.qrcode.min.js下载 Liang.popup.min.js下载
二维码生成功能需要,加载jquery。

jrotty WeChat Pay

微信打赏

jrotty Alipay

支付宝打赏

文章二维码

扫描二维码,在手机上阅读!

文章二维码打赏
最后由Jrotty修改于2016-06-04 11:46
发表新评论
已有 37 条评论
  1. Mayor
    MayorWindows 10谷歌浏览器 回复

    做个插件吧 好不好 ...

    1. Jrotty
      JrottyWindows 10谷歌浏览器 回复

      @Mayor 文章二维码可以用百度接口,post.php里加句

  2. 程
    Windows 10谷歌浏览器 回复

    可以了,可以了,原来是忘记加个js/了,感谢博主

    1. Jrotty
      JrottyWindows 10谷歌浏览器 回复

      @程 没事,( ̄▽ ̄)

  3. 程
    Windows 10谷歌浏览器 回复

    博主麻烦问一下,怎么点击无反应啊,所有代码文件都放置对的啊,css在header,然后在post,最后footer,js文件放在模板/js里的就是不行。。。

    1. Jrotty
      JrottyWindows 10谷歌浏览器 回复

      @程 css是放在模板css里的,div那个放在post里,js那个放在jquery.js后面

    2. 程
      Windows 10谷歌浏览器 回复

      @程 copy; <?php echo date('Y'); ?> <?php $this->options->title(); ?>

    3. Jrotty
      JrottyWindows 10谷歌浏览器 回复

      @程 js你调用对了嘛?加载jquery了吗

  4. ‭蔡锶铎
    ‭蔡锶铎Windows 10谷歌浏览器 回复

    根据教程加了代码之后三个按钮是出来了 可就是不能点?求原因

    1. ‭蔡锶铎
      ‭蔡锶铎Windows 10谷歌浏览器 回复

      @‭蔡锶铎 (`・ω・´)

    2. Jrotty
      JrottyWindows 10谷歌浏览器 回复

      @‭蔡锶铎 看不懂(/TДT)/

    3. ‭蔡锶铎
      ‭蔡锶铎Windows 10谷歌浏览器 回复

      @‭蔡锶铎 你帮我看看咯owo

    4. Jrotty
      JrottyWindows 10谷歌浏览器 回复

      @‭蔡锶铎 没有加载jquery吧

  5. liwanglin12
    liwanglin12Windows 10谷歌浏览器 回复

    还有评论已提交=。=,咳咳。。

    1. 近泽
      近泽Windows 10谷歌浏览器 回复

      @liwanglin12 对啊!害的我这个文盲!写了半天js什么的

    2. liwanglin12
      liwanglin12Windows 10谷歌浏览器 回复

      @liwanglin12 秘制熟悉233,可惜你是TYPECHO,不然直接用我的插件就可以解决了~

    3. 近泽
      近泽Windows 10谷歌浏览器 回复

      @liwanglin12 [嘻嘻]看到好多人都有这个,我就也加了个,多说的评论提交是抄的你的[哈哈]

  6. liwanglin12
    liwanglin12Windows 10谷歌浏览器 回复

    =.=notie+复制版权声明什么的。。

前篇 后篇
雷姆
拉姆
音乐加载中...
0:00