给Bitcron添加Emoji表情


Bitcron默认没有表情,日常评论互动性可能就会稍差一些。一个表情有时候可以将文字表达的更简洁到位。关于表情这一功能, @林木木 大神已经专门写过两篇关于添加表情的文章,我直接借鉴了过来。不过为了减少请求,让网站加载的更快速,本次使用的是Emoji表情,而非图片表情的形式。具体的代码也稍有所区别,效果可评论测试。

准备表情

在模板根目录建立一个emoji.jade文件,文件设置好需要循环输出的表情,原本想通过建立数组,用each语法遍历输出,结果提示“need more than 1 value to unpack”。

- var emoji={"抛媚眼":"😉","大笑":"😀","微笑":"🙂","可爱":"😊"……}
each name,date in emoji
   a.insert_emoji(href="javascript:;",data-emoji=name,title=date)=name

后来改成了混合宏(mixins),传递了两个参数,一个是表情(name),一个是表情提示(date)。表情具体为哪些,可以自行确定。

mixin emoji(date,name)
   a.insert_emoji(href="javascript:;",data-emoji=name,title=date)=name
.comment-emoji(style="display:none")
   +emoji("抛媚眼","😉")  
   +emoji("大笑","😀")
   ……

调用输出

建议在post.jade文件的+post.comments_as_html( )下面调用emoji.jade

+post.comments_as_html()
include emoji.jade
+h.load("/template/emoji.js")

实时插入

通过js调整下表情元素的位置,只有访客点击评论框输入评论时才会显示,并实现表情的实时点击插入。因为模板加载了tooltip功能,因此选定表情时会自动提示该表情的含义。建议将emoji.js代码加载到模板评论位置,以避免非评论页面后台提示错误。

(function($) {
    $.fn.extend({
        insertAtCaret: function(myValue) {
            var $t = $(this)[0];
            if (document.selection) {
                this.focus();
                sel = document.selection.createRange();
                sel.text = myValue;
                this.focus();
            } else if ($t.selectionStart || $t.selectionStart == '0') {
                var startPos = $t.selectionStart;
                var endPos = $t.selectionEnd;
                var scrollTop = $t.scrollTop;
                $t.value = $t.value.substring(0, startPos) + myValue + $t.value.substring(endPos, $t.value.length);
                this.focus();
                $t.selectionStart = startPos + myValue.length;
                $t.selectionEnd = startPos + myValue.length;
                $t.scrollTop = scrollTop;
            } else {
                this.value += myValue;
                this.focus();
            }
        }
    })
})(jQuery);
$(document).ready(function() {
    var nf=$("#new_comment_form").children().eq(0);
    $(".comment-emoji").insertBefore(nf);
    $('#new_comment_form textarea').click(function() {
        $('.comment-emoji').fadeIn("slow");
    });
});
$(document).on('click', '.insert_emoji',function(event) {
    event.preventDefault();
    var emoji = $(this).data('emoji');
    $('.textarea_box').insertAtCaret(' ' + emoji + ' ');
}); `

调整美化

为了可以更清晰的识别表情,需要利用CSS进行一番调整,通过CSS3transform:scale()属性进行2D缩放,这样能够让选定的表情单独放大确认。

.comment-emoji a {padding: 4px;font-size: 16px;border: none;display: inline-block;-webkit-transition-duration: .3s;transition-duration: .3s;}
.comment-emoji a:hover{-webkit-transform: scale(1.5);-moz-transform: scale(1.5);transform: scale(1.5);}

附件下载

点击下载相关源码:⇩ emoji.rar ,解压后按路径丢到模板对应位置,并按照上述第二步进行调用和第四步CSS调整。

本文最后一次更新时间:

Comments
Write a Comment
  • 测试测试。。。 😉 😉 😉 😉 😜 😜 😜 😜

  • 哇哦 你们真是太厉害了 👏 👏 👏

    • @小F 过奖 😀 ,还得要感谢@林木木老师的贡献。

  • 😶 火狐下显示乱码,表情……

    • @小彦 我试了一下在Win10下火狐显示正常,应该与浏览器无关。估计因为Win10自带Emoji表情,支持的较好,所以除了Win10的系统外,其他的系统支持的都不太完美,是会显示乱码的 😔

      • 林木木 reply

        所以换用图片啦 @Ton

  • 厉害啊,我想改却不知道怎么弄~网上一搜就链接到你这里来了~能否把你现在用的共享下,我实在是代码小白 😂

    • @编程札记 周末我整理一下,打包放出来。

  • 👏 👏 掌声献上!

  • 发布于,文章最后更新的代码也来一篇?我那的自己竟然报错了。。。 😓

    • @林木木 其实我用的这个 😜 https://tokinx.github.io/lately/;另外一个可以支持实时更新 https://github.com/hustcc/timeago.js/blob/master/README_zh.md

    • 林木木 reply

      @Ton 已用上,还是javascript大法好!

  • 😉 好厉害!

  • 我只能说我来看看效果,看着还不错 👍

  • 😯 😯 😯 看了一下效果感觉很棒~

    之前曾经试过一次,可不知道怎么回事总是显示不出来

    所以干脆就放弃了 😥

  • 漂亮啊 🎁 🎁 🎁

  • 😵 我的表情包都把我手机内存占满了

  • 我觉得这么博客,非常的美丽啦!

  • 💊 记得以前注册.tn是为了短,基本上都是xx.tn

  • 😉 😉 不错不错,就是不同平台不统一