Typecho给评论增加表情

前两天根据大佬的一篇文章给撸上了表情功能，现在分享下

首先我们在评论框下方添加表情按钮

就像这样，然后添加到合适的地方

<div class="OwO-logo" onclick="OwO_show()">
    <span>OwO</span>
</div>

然后给按钮写点击事件，打开关闭表情列表

function OwO_show() {
    if ($("#OwO-container").css("display") == 'none') {
        $("#OwO-container").slideDown();
    } else {
        $("#OwO-container").slideUp();
    }
}

然后写表情内容列表

<div id="OwO-container">
    <div class="OwO OwO-open" id="qaq">
        <div class="OwO-body" id="OwO-body">
            <ul id="OwO-pp" class="OwO-items OwO-items-emoticon OwO-items-show" style="max-height: 197px;">
                <li class="OwO-item" onclick="Smilies.grin('@(chaiquan)');"><img src="https://www.96sir.com/usr/themes/Destiny/images/OwO/chaiquan.png"></li>
                <li class="OwO-item" onclick="Smilies.grin('@(chaiquanbugaoxin)');"><img src="https://www.96sir.com/usr/themes/Destiny/images/OwO/chaiquanbugaoxin.png"></li>
                。。。。。。
            </ul>
        </div>
    </div>
</div>

PS：这里建议单独新建一个OwO.php文件，然后<?php $this->need('OwO.php'); ?>输出到评论框下方的合适位置
想要新增表情的话就添加一个<ul id="OwO-pp">列表就可以了

这样基本完成了表情的展示，接下来实现点击表情插入到评论框里，这里用到核心JS

Smilies = {
    dom: function(id) {
        return document.getElementById(id);
    },
    grin: function(tag) {
        tag = ' ' + tag + ' ';
        myField = this.dom("comment");
        document.selection ? (myField.focus(), sel = document.selection.createRange(), sel.text = tag, myField.focus()) : this.insertTag(tag);
    },
    insertTag: function(tag) {
        myField = Smilies.dom("comment");
        myField.selectionStart || myField.selectionStart == "0" ? (startPos = myField.selectionStart, endPos = myField.selectionEnd, cursorPos = startPos, myField.value = myField.value.substring(0, startPos) + tag + myField.value.substring(endPos, myField.value.length), cursorPos += tag.length, myField.focus(), myField.selectionStart = cursorPos, myField.selectionEnd = cursorPos) : (myField.value += tag, myField.focus());
    }
}

然后进行表情的解析，修改comments.php文件

在这个文件中找到<?php $comments->content(); ?>这一段，这是输出评论内容的，将它替换成：

<?php echo preg_replace('#\@\((.*?)\)#', '<img src="表情图片地址/$1.jpg">', $comments->content); ?>

这样就完成了表情的解析