让 Typecho 原版 commentReplyJS 退休

2021-01-22 21:56:43
 尚寂新

众所周知,Typecho 在$this->header();中输出的内容中,其中有很长一段的两段 js 又臭又长,一个是 TypechoComment ,另一个是 Typecho 原版的 AntiSpam 用的。看着用原生 js 写的又臭又长,而且出来的效果还是让评论框顺着评论嵌套来回飞的,很是不优雅。故用 jQuery 改之。

不让原版的输出

其实是没有必要直接对着 te 的原版程序进行开刀的。
可参照源码:var/Widget/Archive.php#L1653

    public function header($rule = NULL)
    {
        $rules = array();
        $allows = array(
            'description'   =>  htmlspecialchars($this->_description),
            'keywords'      =>  htmlspecialchars($this->_keywords),
            'generator'     =>  $this->options->generator,
            'template'      =>  $this->options->theme,
            'pingback'      =>  $this->options->xmlRpcUrl,
            'xmlrpc'        =>  $this->options->xmlRpcUrl . '?rsd',
            'wlw'           =>  $this->options->xmlRpcUrl . '?wlw',
            'rss2'          =>  $this->_feedUrl,
            'rss1'          =>  $this->_feedRssUrl,
            'commentReply'  =>  1,
            'antiSpam'      =>  1,
            'atom'          =>  $this->_feedAtomUrl
        );
    //...

想不让评论的部分输出,就直接$this->header('commentReply=');即可。

替换新的上去

首先 jQuery 要先于它加载!!!
注意:此区域非通用区域,需要依照主题模板进行修改

function createReply(coid,author){
    var coid;
    var author;
    console.log('#coid-'+coid);
    $('#comment-parent').remove();
    $('#comment-form').append('<input type="hidden" name="parent" id="comment-parent" value="'+ coid +'">');
    $('#replyDisplay').text('正在回复:' + author );
    $('#cancelReply').css('display','inline-block');
    $("html, body").animate({
      scrollTop: $('#comment-form').offset().top + "px"
    }, {
      duration: 600,
      easing: "linear"
    });
}
function cancelReply(){
    $('#comment-parent').remove();
    $('#cancelReply').css('display','none');
    $('#replyDisplay').text('');
}

createReply:

  • 评论框<form>的 id 为 comment-form
  • 用于替换<?php $this->reply(); ?>
  • 随便弄个用于替换上面的那个玩意的按钮,设置 onclick 触发(当然你也可以改写,使用onclickfunction来触发)
  • 传参:传 coid 和 作者名
  • 例子如下(加 addslashes 是因为我在测试的时候,发现有个人的名字里有个单引号....)
<span title="回复" style="cursor:pointer" onclick="createReply('<?php $comments->coid(); ?>','<?php echo addslashes($comments->author); ?>');">回复</span>

cancelReply:

  • 用于替换<?php $comments->cancelReply(); ?>
  • 也是 随便弄个用于替换上面的那个玩意的按钮,设置 onclick 触发(当然你也可以改写,使用onclickfunction来触发)
  • 例子如下
    <div class="floatright"><!-- 这里 class 名什么的都是例子 -->
        <span style="display:none;cursor:pointer" title="取消回复" id="cancelReply" onclick="cancelReply();">取消回复</span>
        <span id="replyDisplay"></span><!-- 用于回显被评论的人(父评论) -->
    </div>

replyDisplay:

  • 要随便建一个标签,如<div>,设置 id 为 replyDisplay
  • 用于显示【正在回复何人】(回显父评论)

成果演示

还是挺成功的
还是挺成功的