【Tint-K主题教程】为你的文章页添加漂亮的打赏按钮 Tint-K/Cute主题教程 第1张

前言

不少站长都需要在文章页添加打赏按钮,大部分博客也都有这种功能,但是Tint主题没有添加这个按钮,可能是因为旁边可以加载赞助我的小工具吧,今天就写一篇加打赏按钮的教程吧。

第一步

首先在文章内容区域选择按钮位置,主题默认有一个点赞按钮,放在点赞按钮旁边相对合适,那么

首先打开文章页模版文件Tint/core/modules/mod.SinglePost.php

【Tint-K主题教程】为你的文章页添加漂亮的打赏按钮 Tint-K/Cute主题教程 第2张

然后搜索关键字post-like     第一个a标签是点赞按钮,所以在它下面添加一个a标签,图片看不清可以点击放大,下面是代码

<a class="post-pay" href="javascript:;" data-toggle="modal" data-target="#siteQrcodes" data-trigger="click"><i class="tico tico-jpy"></i><span class="text">打赏</span></a>

第二步

按钮添加上了,但是默认是没有css样式的哦,所以非常难看,css有很多种方式添加,这里介绍添加到额外的自定义css文件内。

新建一个custom.css,已有跳过,文件内添加以下内容:

#main .article-footer>.post-like>.post-pay {margin-left: 10px;outline:0;padding:0 10px;display:inline-block;min-width:105px;cursor:pointer;box-sizing:border-box;background-color:#fff;border:1px solid #F64540;border-radius:4px;color:#F64540;font-size:15px;line-height:38px;text-align: center;}
#main .article-footer>.post-like>.post-pay i {display:inline-block;vertical-align:middle;margin-top:-5px;margin-right:5px;}
body>#siteQrcodes {position:fixed;top:0;left:0;right:0;bottom:0;background:0 0;display:none;z-index:1050;-webkit-backface-visibility:hidden;}
body>#siteQrcodes>.qr-wrap {position:absolute;width:500px;top:50%;left:50%;margin-left:-250px;margin-top:-100px;}
body>#siteQrcodes>.qr-wrap>.qrcode>.ali-qr img,body>#siteQrcodes>.qr-wrap>.qrcode>.wx-qr img {width:100%;height:auto;}
@media (max-width: 480px){#main .article-footer>.post-like>.post-meta-likes {display:inline-block;width: auto;left: auto;margin-left: 0;}body>#siteQrcodes>.qr-wrap {width:200px;top:30%;margin-left:-100px;}}

添加后保存,然后在主题选项-页头自定义代码处引用此文件,添加如下

<link rel="stylesheet" type="text/css" href="你的css地址">

第三步

按钮添加好以后,现在要做的就是添加一个弹出层,用于显示二维码,首先打开文件Tint/core/modules/mod.Header.php

【Tint-K主题教程】为你的文章页添加漂亮的打赏按钮 Tint-K/Cute主题教程 第3张

在18行如图位置,看不清可以点击放大,添加以下代码并保存

<?php if(is_single()) { ?>//判断文章页,只在文章页加载
<div id="siteQrcodes" class="js-qrcode qrcode-modal fadeZoomIn" role="dialog" aria-hidden="true"><div class="qr-wrap"> <div class="qrcode col-md-6 col-sm-6 col-xs-12"> <div class="wx-qr"><img src="你的二维码图片地址" title="扫一扫二维码打赏我"></div> </div> <div class="qrcode col-md-6 col-sm-6 col-xs-12"> <div class="ali-qr"><img src="你的二维码图片地址" title="扫一扫二维码打赏我"></div> </div> </div></div>
<?php } ?>

这里图片的样式已经在第二步中添加过了,保存后直接刷新即可看到效果。

参与评论