前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >Typecho评论回复取消回复按钮合并显示

Typecho评论回复取消回复按钮合并显示

作者头像
泽泽社长
发布2023-04-17 15:15:35
发布2023-04-17 15:15:35
1.2K00
代码可运行
举报
文章被收录于专栏:泽泽社泽泽社
运行总次数:0
代码可运行

第一步屏蔽默认评论js

header.php中的header(); ?>改为header('commentReply='); ?>

第二步放置重构的js代码

将下面的一堆js代码放到comments.php下面(代码压缩过我自己也看不明白了哈哈哈)

代码语言:javascript
代码运行次数:0
运行
复制
function showhidediv(id){var sbtitle=document.getElementById(id);if(sbtitle){if(sbtitle.style.display=='flex'){sbtitle.style.display='none';}else{sbtitle.style.display='flex';}}}
(function(){window.TypechoComment={dom:function(id){return document.getElementById(id)},pom:function(id){return document.getElementsByClassName(id)[0]},iom:function(id,dis){var alist=document.getElementsByClassName(id);if(alist){for(var idx=0;idx<alist.length;idx++){var mya=alist[idx];mya.style.display=dis}}},create:function(tag,attr){var el=document.createElement(tag);for(var key in attr){el.setAttribute(key,attr[key])}return el},reply:function(cid,coid){var comment=this.dom(cid),parent=comment.parentNode,response=this.dom("<?php echo $this->respondId(); ?>"),input=this.dom("comment-parent"),form="form"==response.tagName?response:response.getElementsByTagName("form")[0],textarea=response.getElementsByTagName("textarea")[0];if(null==input){input=this.create("input",{"type":"hidden","name":"parent","id":"comment-parent"});form.appendChild(input)}input.setAttribute("value",coid);if(null==this.dom("comment-form-place-holder")){var holder=this.create("div",{"id":"comment-form-place-holder"});response.parentNode.insertBefore(holder,response)}comment.appendChild(response);this.iom("comment-reply","");this.pom("cp-"+cid).style.display="none";this.iom("cancel-comment-reply","none");this.pom("cl-"+cid).style.display="";if(null!=textarea&&"text"==textarea.name){textarea.focus()}return false},cancelReply:function(){var response=this.dom("<?php echo $this->respondId(); ?>"),holder=this.dom("comment-form-place-holder"),input=this.dom("comment-parent");if(null!=input){input.parentNode.removeChild(input)}if(null==holder){return true}this.iom("comment-reply","");this.iom("cancel-comment-reply","none");holder.parentNode.insertBefore(response,holder);return false}}})();

第三步

删除comments.php中的取消回复的按钮

代码语言:javascript
代码运行次数:0
运行
复制
<div class="cancel-comment-reply">
<?php $comments->cancelReply(); ?>
</div>

第四步 将回复按钮替换为回复与取消按钮

如果你的模板重构过评论列表,那么将回复按钮处的代码换成为下面代码即可

代码语言:javascript
代码运行次数:0
运行
复制
<span class="comment-reply cp-<?php $comments->theId(); ?> text-muted comment-reply-link"><?php $comments->reply('回复'); ?></span><span id="cancel-comment-reply" class="cancel-comment-reply cl-<?php $comments->theId(); ?> text-muted comment-reply-link" style="display:none" ><?php $comments->cancelReply('取消'); ?></span>

如果你的模板没有重构过评论列表,比如默认模板,建议学习下typecho的自定义评论列表的文档

第五步 重构样式

将下面的css加入到模板css中即可

代码语言:javascript
代码运行次数:0
运行
复制
#cancel-comment-reply-link {
    display: inline !important;
}

最终效果展示

GIF.gif

linkCard('.post-content','0');

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 第一步屏蔽默认评论js
  • 第二步放置重构的js代码
  • 第三步
  • 第四步 将回复按钮替换为回复与取消按钮
  • 第五步 重构样式
  • 最终效果展示
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档