IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓ 		图片批量下载器
↓批量下载图片,美女图库↓ 		图片自动播放器
↓图片自动播放器↓ 		一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> PHP知识库 -> handsome主题添加点赞功能 -> 正文阅读

[PHP知识库]handsome主题添加点赞功能

文章目录

效果：

文章最底部

方法：

添加功能

1.函数

在/usr/themes/handsome/functions.php中添加(参考Typecho 主题开发 - 点赞功能)

function agreeNum($cid)
{
    $db = Typecho_Db::get();
    $prefix = $db->getPrefix();

    //  判断点赞数量字段是否存在
    if (!array_key_exists('agree', $db->fetchRow($db->select()->from('table.contents')))) {
        //  在文章表中创建一个字段用来存储点赞数量
        $db->query('ALTER TABLE `' . $prefix . 'contents` ADD `agree` INT(10) NOT NULL DEFAULT 0;');
    }

    //  查询出点赞数量
    $agree = $db->fetchRow($db->select('table.contents.agree')->from('table.contents')->where('cid = ?', $cid));

    //  返回
    return array(
        //  点赞数量
        'agree' => $agree['agree'],
        //  文章是否点赞过
        'recording' => in_array($cid, json_decode(Typecho_Cookie::get('typechoAgreeRecording'))) ? true : false
    );
}
function agree($cid)
{
    $db = Typecho_Db::get();
    //  根据文章的 `cid` 查询出点赞数量
    $agree = $db->fetchRow($db->select('table.contents.agree')->from('table.contents')->where('cid = ?', $cid));
    //  更新点赞字段，让点赞字段 +1
    $db->query($db->update('table.contents')->rows(array('agree' => (int)$agree['agree'] + 1))->where('cid = ?', $cid));
    //  查询出点赞数量
    $agree = $db->fetchRow($db->select('table.contents.agree')->from('table.contents')->where('cid = ?', $cid));
    //  返回点赞数量
    return $agree['agree'];
}
//文章点赞
function agreeNum($cid)
{
    $db = Typecho_Db::get();
    $prefix = $db->getPrefix();

    //  判断点赞数量字段是否存在
    if (!array_key_exists('agree', $db->fetchRow($db->select()->from('table.contents')))) {
        //  在文章表中创建一个字段用来存储点赞数量
        $db->query('ALTER TABLE `' . $prefix . 'contents` ADD `agree` INT(10) NOT NULL DEFAULT 0;');
    }

    //  查询出点赞数量
    $agree = $db->fetchRow($db->select('table.contents.agree')->from('table.contents')->where('cid = ?', $cid));

    //  返回
    return array(
        //  点赞数量
        'agree' => $agree['agree'],
        //  文章是否点赞过
        'recording' => in_array($cid, json_decode(Typecho_Cookie::get('typechoAgreeRecording'))) ? true : false
    );
}
function agree($cid)
{
    $db = Typecho_Db::get();
    //  根据文章的 `cid` 查询出点赞数量
    $agree = $db->fetchRow($db->select('table.contents.agree')->from('table.contents')->where('cid = ?', $cid));
    //  更新点赞字段，让点赞字段 +1
    $db->query($db->update('table.contents')->rows(array('agree' => (int)$agree['agree'] + 1))->where('cid = ?', $cid));
    //  查询出点赞数量
    $agree = $db->fetchRow($db->select('table.contents.agree')->from('table.contents')->where('cid = ?', $cid));
    //  返回点赞数量
    return $agree['agree'];
}
2.https支持

在/usr/themes/handsome/post.php中顶部添加

//  判断是否是点赞的 POST 请求
if (isset($_POST['agree'])) {
    //  判断 POST 请求中的 cid 是否是本篇文章的 cid
    if ($_POST['agree'] == $this->cid) {
        //  调用点赞函数，传入文章的 cid，然后通过 exit 输出点赞数量
        exit(agree($this->cid));
    }
    //  如果点赞的文章 cid 不是本篇文章的 cid 就输出 error 不再往下执行
    exit('error');
}
?>
<?php
//  判断是否是点赞的 POST 请求
if (isset($_POST['agree'])) {
    //  判断 POST 请求中的 cid 是否是本篇文章的 cid
    if ($_POST['agree'] == $this->cid) {
        //  调用点赞函数，传入文章的 cid，然后通过 exit 输出点赞数量
        exit(agree($this->cid));
    }
    //  如果点赞的文章 cid 不是本篇文章的 cid 就输出 error 不再往下执行
    exit('error');
}
?>
3.js支持

点赞JS
添加js本人菜不会用 ajax勿喷

        let element = document.getElementById("zan")
        let fetchurl = element.dataset["url"];
        let cid = element.dataset["cid"];
        fetch(fetchurl,{
            method:"POST",
            body: `agree=${cid}`,
            headers: {
                "content-type": "application/x-www-form-urlencoded"
            }
        });
}
function remcls(){$('.heart').removeClass("heartAnimation");}
function addcls(){$('.heart').addClass("heartAnimation");    }
$(document).ready(function ()  { //.post-content 文章内页样式
	    $('body').on("click",'.heart',function(){
		    $('.heart').css("background-position","")
		    var wwin=$('.heart').attr("class");
		    if(wwin === 'heart'){
		    	$('.heart').addClass("heartAnimation");
		    	tui=setTimeout("remcls()",800)
		    }else{
		     	remcls()
		     	tuiw=setTimeout("addcls()",100)
		    }
		    $("#zan_text").text(parseInt($("#zan_text").text())+1);//更新框中的数字
		    $(".meta-zan .meta-value").text(parseInt($(".meta-zan .meta-value").text())+1)
	    });  
 });
function zan(){
        let element = document.getElementById("zan")
        let fetchurl = element.dataset["url"];
        let cid = element.dataset["cid"];
        fetch(fetchurl,{
            method:"POST",
            body: `agree=${cid}`,
            headers: {
                "content-type": "application/x-www-form-urlencoded"
            }
        });
}
function remcls(){$('.heart').removeClass("heartAnimation");}
function addcls(){$('.heart').addClass("heartAnimation");    }
$(document).ready(function ()  { //.post-content 文章内页样式
	    $('body').on("click",'.heart',function(){
		    $('.heart').css("background-position","")
		    var wwin=$('.heart').attr("class");
		    if(wwin === 'heart'){
		    	$('.heart').addClass("heartAnimation");
		    	tui=setTimeout("remcls()",800)
		    }else{
		     	remcls()
		     	tuiw=setTimeout("addcls()",100)
		    }
		    $("#zan_text").text(parseInt($("#zan_text").text())+1);//更新框中的数字
		    $(".meta-zan .meta-value").text(parseInt($(".meta-zan .meta-value").text())+1)
	    });  
 });

前端修改

1.样式

引入css（感谢@Zfour）

    position: absolute;
    top: .7rem;
    right: .7rem;
    width: .4rem;
    height: .4rem;
    border-radius: .4rem;
    background: var(--card-bg);
    content: '';
}
#zan:before {
    position: absolute;
    top: .5rem;
    right: .5rem;
    width: .8rem;
    height: .8rem;
    border-radius: .8rem;
    background: #b30070;
    content: '';
}
#zan:hover{
    -webkit-box-shadow: 0 0 8px 0 rgba(232,237,250,.6), 0 2px 4px 0 rgba(232,237,250,.5);
    box-shadow: 0 0 8px 0 rgba(232,237,250,.6), 0 2px 4px 0 rgba(232,237,250,.5);

}

#zan {
	margin-top:40px;
	position:relative;
	    -webkit-transition: box-shadow .3s ease-in-out;
    -moz-transition: box-shadow .3s ease-in-out;
    -o-transition: box-shadow .3s ease-in-out;
    -ms-transition: box-shadow .3s ease-in-out;
    transition: box-shadow .3s ease-in-out;
	border: 1px solid var(--light-grey);
   display: flex;  
   justify-content: center; 
  width:100%;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
#zan .heart {
  background: url(zan.png);
  background-position: left;
  background-repeat: no-repeat;
  height: 100px;
  width: 100px;
  background-size: 2900%;
  float: left;
  display: inline-block;
  position: relative;
  left: 0;
  top: 0;
  z-index: 0;
}
#zan #zan_text {
  display: inline-block;
  font-family: "Georgia", Times, serif;
  font-size: 25px;
  color: #999;
  position: relative;
  left: -15px;
  line-height: 100px;
}

@keyframes heartBlast {
  0% {
    background-position: left;
  }
  100% {
    background-position: right;
  }
}
.heartAnimation {
  display: inline-block;
  animation-name: heartBlast;
  animation-duration: 0.8s;
  animation-iteration-count: 1;
  animation-timing-function: steps(28);
  background-position: right;
}
#zan:after {
    position: absolute;
    top: .7rem;
    right: .7rem;
    width: .4rem;
    height: .4rem;
    border-radius: .4rem;
    background: var(--card-bg);
    content: '';
}
#zan:before {
    position: absolute;
    top: .5rem;
    right: .5rem;
    width: .8rem;
    height: .8rem;
    border-radius: .8rem;
    background: #b30070;
    content: '';
}
#zan:hover{
    -webkit-box-shadow: 0 0 8px 0 rgba(232,237,250,.6), 0 2px 4px 0 rgba(232,237,250,.5);
    box-shadow: 0 0 8px 0 rgba(232,237,250,.6), 0 2px 4px 0 rgba(232,237,250,.5);

}

#zan {
	margin-top:40px;
	position:relative;
	    -webkit-transition: box-shadow .3s ease-in-out;
    -moz-transition: box-shadow .3s ease-in-out;
    -o-transition: box-shadow .3s ease-in-out;
    -ms-transition: box-shadow .3s ease-in-out;
    transition: box-shadow .3s ease-in-out;
	border: 1px solid var(--light-grey);
   display: flex;  
   justify-content: center; 
  width:100%;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
#zan .heart {
  background: url(zan.png);
  background-position: left;
  background-repeat: no-repeat;
  height: 100px;
  width: 100px;
  background-size: 2900%;
  float: left;
  display: inline-block;
  position: relative;
  left: 0;
  top: 0;
  z-index: 0;
}
#zan #zan_text {
  display: inline-block;
  font-family: "Georgia", Times, serif;
  font-size: 25px;
  color: #999;
  position: relative;
  left: -15px;
  line-height: 100px;
}

@keyframes heartBlast {
  0% {
    background-position: left;
  }
  100% {
    background-position: right;
  }
}
.heartAnimation {
  display: inline-block;
  animation-name: heartBlast;
  animation-duration: 0.8s;
  animation-iteration-count: 1;
  animation-timing-function: steps(28);
  background-position: right;
}
2.元素

在标题下面的点赞数（可选）
大约在80-90行

<li class="meta-zan"><span class="post-icons"><i data-feather="thumbs-up"></i></span><span class="meta-value"><?php $agree = $this->hidden ? array('agree' => 0, 'recording' => true) : agreeNum($this->cid);echo $agree['agree']; ?></span></li>
<!--点赞数目-->
<li class="meta-zan"><span class="post-icons"><i data-feather="thumbs-up"></i></span><span class="meta-value"><?php $agree = $this->hidden ? array('agree' => 0, 'recording' => true) : agreeNum($this->cid);echo $agree['agree']; ?></span></li>

点赞按钮
在文末选择一处添加

<div class='heart' οnclick="zan()"></div><br>
<div id='zan_text'><?php echo $agree['agree']; ?></div>
</div>
<div id='zan' class='clearfix' data-cid="<?php echo $this->cid; ?>" data-url="<?php $this->permalink(); ?>">
<div class='heart' οnclick="zan()"></div><br>
<div id='zan_text'><?php echo $agree['agree']; ?></div>
</div>

后记

基本上没有自己写代码，只是借鉴了别人的。但是学到了很多关于jQuery的操作
完结撒花
★,°:.☆(￣▽￣)/$:.°★ 。
  PHP知识库 最新文章
Laravel 下实现 Google 2fa 验证
UUCTF WP
DASCTF10月 web
XAMPP任意命令执行提升权限漏洞（CVE-2020-
[GYCTF2020]Easyphp
iwebsec靶场 代码执行关卡通关笔记
多个线程同步执行，多个线程依次执行，多个
php 没事记录下常用方法 (TP5.1)
php之jwt
2021-09-18
上一篇文章      下一篇文章      查看所有文章
加:2021-08-28 08:48:43  更:2021-08-28 08:50:03 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/15 10:49:30-

图片自动播放器
↓图片自动播放器↓ 		TxT小说阅读器
↓语音阅读,小说下载,古典文学↓ 		一键清除垃圾
↓轻轻一点,清除系统垃圾↓ 		图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码