怎样使用两行代码实现博客园打赏功能

也许大家看博客园博客的时候,遇到过一些博客右侧,展示了打赏二维码~
如下图所示
686772-20170301103620048-1896715447.jpg

那么,这是怎么实现的呢~~~

不错,你没猜错,他们使用的是本人写的一个js插件--tctip。

大家搜一下,还能搜到网上有些tctip的教程。比如下面两个链接

http://www.cnblogs.com/softidea/p/5862961.html
http://www.cnblogs.com/wuql/p/6144791.html

不过以上两个链接,介绍的都是老版的tctip使用,使用方法较为老套繁琐。

这里,我要介绍的是tctip v1.0.0的使用方法,全世界第一篇,因为昨天晚上本人刚发布这个新版本(^o^)/~

相比于老版吗,新版做了以下事情

  • 简化了参数配置,大家不用按照老版的教程那样,配置图片链接、css路径啥的了。当然,收款二维码还是需要滴
  • 使用webpack+ES6等较新的方式完全重写代码,让代码更优美。可作为webpack+ES6入门示范使用

注意,新版本简化了使用方式,不兼容老版本,如需要升级到新版本,请修改您的配置参数

第一步,申请博客园js权限。

这一步大家可以参考前面别人的教程,或者点击这里。注意,只看申请js部分,后面tctip部分不要看,老版已经不维护了

第二步,获取微信和支付宝二维码图片,并上传到合适的地方,保存地址。

这里其实是支持各种各样的打赏方式的,包括比特币,甚至什么没听过的方式。但是根据统计,大多数人都是放一个支付宝,放一个二维码,这也符合大家的印象。
所以这里我就直接说支付宝和微信了。
上传图片,大家自行解决,包括博客园也是可以上传的,不再赘述

第三步, 复制并修改下面的代码

  <script src="http://static.tctip.com/tctip-1.0.0.min.js"></script><script>  new tctip({top: '20%',button: {id: 9,type: 'dashang',},list: [{type: 'alipay',qrImg: '你的支付宝收款二维码图片地址'}, {type: 'wechat',qrImg: '你的微信收款二维码图片地址'}]}).init()</script>

上面的代码,相信读这篇文章的人都懂,就是引入js,然后配置。
当然,大家也可以到我的github下载tctip-1.0.0.min.js,并上传到自己的服务器上使用。

第四步,粘贴代码

找到“我的博客”->“管理”->“设置”,将页面往下拉,找到“页首Html代码”这个位置,将修改好的代码复制进去,保存

第五步,感谢作者

是的,到这里你应该已经可以看到自己博客上的二维码了。
我个人之后会申请博客园的js权限,申请后自己也用一下这个插件,合合

请注意,作者五行缺钱,如果本文对你有用的话,欢迎扫描二维码打赏作者。

当然,你也可以fork、star、PR作者的项目, tctip

欢迎查询本人博客,这里的文章一般都是我个人博客的复制,点此查看

转载于:https://www.cnblogs.com/greedying/p/6483222.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/429587.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

STM32 HAL库 .c/.h 文件介绍

HAL库中各个文件的介绍&#xff1a; startup_stm32l475xx.s 启动文件的主要作用是进行RAM中堆、栈内存的分配和初始化&#xff0c;中断向量表及中断函数的定义等&#xff0c;进行完这一系列工作后执行系统复位从而跳转至用户main函数开始执行。 stm32l4xx_hal_ppp.c/.h 基本…

【bzoj3514】 Codechef MARCH14 GERALD07加强版

http://www.lydsy.com/JudgeOnline/problem.php?id3514 (题目链接) 题意 给出$n$个点$m$条边的无向图&#xff0c;询问保留图中编号在$[l,r]$的边的时候图中的连通块的个数。 Solution 将边的编号作为权值用LCT维护一个最大生成树&#xff0c;同时记录一下加入当前边$i$会把哪…

C语言中将浮点数四舍五入取整的宏定义(支持正数和负数的圆整)

在实际工程项目中经常会需要将浮点型的计算结果四舍五入为整型&#xff0c;因此定义如下宏定义对浮点型进行圆整。若所需圆整的浮点型结果正负号无法确定&#xff0c;则需要将结果圆整为带符号的整型结果如int8_t、int16_t、int32_t等。对于结果>0的浮点数和<0的浮点数圆…

原码、反码、补码,计算机中所有的数都是以补码的形式存储的

计算机中所有的数都是以补码的形式存储的 原码&#xff1a; 一个数的原码就是其10进制的数转换为2进制数&#xff0c;正数的原码符号位为0&#xff0c;负数的原码符号位为1。 如10进制的数26667&#xff0c;将其转换为2进制为0110 1000 0010 1011。10进制的数-26667&#xf…

RT-Thread设备框架学习感悟

前面几周跟着野火的教程从0到1实现了RT-Thread的内核&#xff0c;对RT-Thread的调度机制和线程、定时器的底层实现有了总体的了解。后面还需进一步对齐实现细节进行探索&#xff0c;但大致先了解其框架&#xff0c;后面再进行细致的了解。在学习新知识时&#xff0c;最重要的是…

Tensorflow之RNN,LSTM

Tensorflow之RNN,LSTM #!/usr/bin/env python2 # -*- coding: utf-8 -*- """ tensorflow之RNN 循环神经网络做手写数据集分类 """import tensorflow as tf from tensorflow.examples.tutorials.mnist import input_data#设置随机数来比较两种计算…

python selenium T3

python selenium T3 既然要做自动,就得对得起自动化的这个名字。这一章我们将进一步的增加自动化测试的实用,增加自动发邮件功能、多线程 和定时任务,让我们的自动化工作真正变得高效而又强大起来。 EG1 : with open(report.html , r) as f:msg MIMEText(f.read() , _subtypeh…

RT-Thread中自定义MSH命令传入的参数是字符串,需用户自行检查和解析

如下是在将安富莱的dac8563模块对接到潘多拉开发板RT-Thread SPI设备框架中时导出到RT-Thread的自定义MSH命令&#xff0c;需要注意的是MSH传入的是字符串&#xff0c;需要自行对字符串进行解析处理。 #include "stdlib.h" /* 使用其中的函数&#xff1a;atoi(); */…

水平+垂直布局-css (借鉴)

1. 水平居中 方法一&#xff1a;margin:0 auto; &#xff08;最常用的居中布局方式&#xff09;方法二&#xff1a;text-align和inline-block的结合&#xff08;设置父元素的text-align为center&#xff09;。 这种方式最好应用于图片、按钮、文字之类的居中模式&#xff0c;否…

安富莱DAC8653模块

产品规格&#xff1a;1、供电电压 &#xff1a; 2.7 - 5.5V 【3.3V供电时&#xff0c;输出电压也可以到正负10V】2、通道数&#xff1a; 2路 &#xff08;通过1片DAC8563实现&#xff09;3、输出电压范围 &#xff1a; -10V ~ 10V 【客户可以自己更改为 0-10V输出范围。使…

AD16 SCH原理图打开正常,PCB图纸打开为空白或仍是上一个界面的解决方法

重新安装AD16并激活后&#xff0c;发现SCH图纸打开正常&#xff0c;但打开PCB图纸时要么显示一片空白&#xff0c;要么显示的还是上一屏的内容&#xff0c;重启AD16软件或者重启电脑都没有用。 【问题原因】电脑显卡驱动有问题 【解决方法】更新或重新安装电脑显卡驱动 step…

flex布局应用与踩坑

一、预告本文不是一篇入门的文章所有请符合以下条件的战斗人员绕道&#xff1a; 1、初学前端&#xff0c;对前端的传统布局还不是很熟悉的人 2、后端人员对前端不打算深入学习的同学 二、开篇flex布局原本是好几个月前就一直想学习的东西&#xff0c;当时flex布局还算是比较新鲜…

RT-Thread I/O设备模型

I/O设备指的是嵌入式系统中的一些Input输入/Output输出设备&#xff0c;输入输出设备是嵌入式系统重要的组成部分。输入和输出设备可以看做是计算机系统和外界进行沟通的桥梁&#xff0c;因此在计算机组成原理中输入输出设备是重要的组成部分。 计算机组成原理中的5大组成部分…

如何使用易我数据恢复向导恢复数码相机删除的图片

1 使用"易我数据恢复向导"的高级恢复(务必将数码相机的存储卡取出单独插入SD卡槽,而不是直接用数据线连接到电脑上,这样存储卡才能以磁盘方式显示) 2 选中对应磁盘,点击下一步 3 如果出现"分区参数不正确"提示&#xff0c;直接取消即可开始搜索 4 搜索完…

RT-Thread对GPIO操作两种方式的区别:1)通过设备操作接口2)直接通过通用GPIO设备驱动

在学习RT-Thread设备驱动框架时&#xff0c;看到潘多拉开发板的RT-Thread例程资料中的文档《AN0002-RT-Thread-通用 GPIO 设备应用笔记》有如下描述&#xff0c;因此产生使用文档中未使用的方式1&#xff09;通过设备操作接口 方法实现GPIO操作的想法&#xff01; 使用潘多拉开…

英语----情态动词(下)

should 应该 竟然 Youd should go to school right now. I should help him. How should i know. Im surprised tha he that he should be so rude to you. it worries me its a pity. You cant imagine.... ought to // 用在比较严肃的场合 You ought to take car…

清华大学-曾鸣-《ARM微控制器与嵌入式系统》I2C总线(一)

I2C是一种双向2线制同步串行通讯接口&#xff0c;是一类非常经典的串行总线通讯&#xff0c;理解好I2C通讯会帮助理解USB通讯、以太网通讯中的握手、数据帧等环节。 I2C的发展历史&#xff1a; SPI串行通讯主要是由MOTOROLA公司提出的&#xff0c;MOTOROLA公司的半导体部门独立…

清华大学-曾鸣-《ARM微控制器与嵌入式系统》I2C总线(二)

I2C&#xff08;Inter IC Bus&#xff09;的通讯数据帧&#xff1a; SCL线无方向区分&#xff0c;SDA线上有数据的流动方向。上图中灰色的代表的是主机向从机发送数据&#xff0c;此时SDA线的电平控制权由主机掌控&#xff0c;从机只能监听该线上的电平状态。白色代表的是从机向…

window.open 和showModalDialog的返回值

方法&#xff1a; 1: 在父级页面 test.aspx 的点击<input type"button" id"btnShow" οnclick"showItem();" value"显示子窗体"/>按钮触发 &#xff0c;然后 &#xff1a; <script language"JavaScript" type&qu…

RT-Thread I2C设备驱动框架的对接使用

I2C和SPI是MCU和板载芯片之间最常用的通讯方式&#xff0c;现在先介绍下I2C总线。I2C的基本原理也很简单&#xff0c;只需要两根线&#xff08;时钟线SCL和信号线SDA&#xff09;即可实现挂载在I2C总线上设备之间的相互通讯。I2C协议并未规定I2C总线上哪个是主机&#xff1f;哪…