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

也许大家看博客园博客的时候,遇到过一些博客右侧,展示了打赏二维码~
如下图所示
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 基本…

RT-Thread设备框架学习感悟

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

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

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

安富莱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输出范围。使…

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; 使用潘多拉开…

清华大学-曾鸣-《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;从机只能监听该线上的电平状态。白色代表的是从机向…

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

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

RT-Thread 简介及架构

RT-Thread&#xff0c;全称是 Real Time-Thread&#xff0c;顾名思义&#xff0c;它是一个嵌入式实时多线程操作系统&#xff0c;基本属性之一是支持多任务&#xff0c;允许多个任务同时运行并不意味着处理器在同一时刻真地执行了多个任务。事实上&#xff0c;一个处理器核心在…

iOS HTML标签字符实体,转译字符串归类大全 【转载】

为什么要用转义字符串&#xff1f; HTML中<&#xff0c;>&#xff0c;&等有特殊含义&#xff08;<&#xff0c;>&#xff0c;用于链接签&#xff0c;&用于转义&#xff09;&#xff0c;不能直接使用。这些符号是不显示在我们最终看到的网页里的&#xff0c…

RT-Thread在github上的教程中图片显示不出来问题的解决方法

在github上查看RT-Thread STM32系列BSP制作教程时发现教程中所有的图片都加载不出来&#xff0c;非常影响教程的阅读使用。 使用记事本打开文件&#xff1a; C:\Windows\System32\drivers\etc\hosts 将如下内容复制粘贴到hosts文件末尾&#xff1a; # GitHub Start 140.82.11…

在STM32CubeMX生成的MDK5工程上添加RT-Thread Nano后双击工程名无法打开.map文件的解决方法

当我们基于STM32CubeMx完成芯片的基础配置&#xff0c;再将RT-Thread Nano添加到工程编译完成之后。双击工程名称发现无法打开工程的.map文件&#xff0c;.map文件是STM32开发中非常重要的一个文件&#xff0c;map文件中详细描述了各个函数在ROM中的存储地址和大小&#xff0c;…

STM32实现USB虚拟串口原理(下)

中断传输应用如主机定期间隔送鼠标读取当前的输入信息&#xff0c;或键盘的输入键值 同步传输应用于音视频等对延迟有严格要求的场合 大容量传输对实时性没有太高要求&#xff0c;对延迟有较大的容忍&#xff0c;且在协议层面并未规定最大的容忍延迟时间&#xff0c;但能从协议…

RT-Thread中堆和栈内存的分配

在嵌入式软件开发中&#xff0c;我们经常会提到堆和栈&#xff0c;实际上堆和栈都是RAM上的物理内存空间&#xff0c;只是使用方式不同而已。栈和堆都是单片机RAM中一段连续的存储空间&#xff0c;该段空间一般在启动文件或链接脚本中指定&#xff0c;最后在C库的_main函数中进…

RT-Thread Nano版本和RT-Thread Master版本的关系

RT-Thread Nano版本和RT-Thread Master版本的关系&#xff1a; RT-Thread Master版本不仅仅是一个实时内核&#xff0c;还包含了丰富的中间层组件。 RT-Thread Nano是RT-Thread Master之上进行剪裁后形成的精简版&#xff0c;去掉了一些组件和各种开发板的BSP&#xff0c;仅保…

VSCODE修改文字编码格式为GB2312和TAB键为2个空格(MDK5和VSCODE联合开发STM32程序)

在MDK5中&#xff0c;代码、变量等的高亮显示或代码自动补全做的不是很好&#xff0c;经常会出现在A函数中有变量的高亮功能&#xff0c;在B函数中就没有了。特别是在RT-Thread创建的多个线程中&#xff0c;发现同一文件中的其它函数中的变量都有同一变量高亮&#xff0c;在RT-…

IP选路

一、IP层工作流程 &#xfffc; 二、 简单路由表 输入netstate -rn&#xff0c;得到如下&#xfffc; 其中flag的标志如下 U 该路由可以使用G 该路由是到一个网管&#xff08;路由器&#xff09;&#xff0c;否则&#xff0c;说明目的地是直接相连的 该标志区分了间接路由和…