我使用的valine评论系统真的是棒,唯一我个人觉得不太舒服的就是表情说实话有点少。那怎么添加自定义表情呢?

下载js到本地

点击下载:valine.min.js

修改js中的表情部分

在这个js里面找到属于表情的部分,很好区分,因为原装的valine中的emoji表情是彩色的。在js中很好区分。
1.4+之后的版本中作者对表情进行了处理。但是大致的逻辑并无改变。照葫芦画瓢即可。

表情部分大概是这样子的

function(e,t){
    e.exports={
        grinning:"😀",smiley:"😃",smile:"😄",grin:"😁",laughing:"😆",sweat_smile:"😅",joy:"😂",blush:"😊",
        innocent:"😇",wink:"😉",relieved:"😌",heart_eyes:"😍",kissing_heart:"😘",kissing:"😗",
        kissing_smiling_eyes:"😙",kissing_closed_eyes:"😚",yum:"😋",stuck_out_tongue_winking_eye:"😜",      
        stuck_out_tongue_closed_eyes:"😝",stuck_out_tongue:"😛",sunglasses:"😎",smirk:"😏",unamused:"😒",      
        disappointed:"😞",pensive:"😔",worried:"😟",confused:"😕",persevere:"😣",confounded:"😖",tired_face:"😫",       
        weary:"😩",angry:"😠",rage:"😡",no_mouth:"😶",neutral_face:"😐",expressionless:"😑",hushed:"😯",        
        frowning:"😦",anguished:"😧",open_mouth:"😮",astonished:"😲",dizzy_face:"😵",flushed:"😳",scream:"😱",       
        fearful:"😨",cold_sweat:"😰",cry:"😢",disappointed_relieved:"😥",sob:"😭",sweat:"😓",sleepy:"😪",       
        sleeping:"😴",mask:"😷",smiling_imp:"😈",smiley_cat:"😺",smile_cat:"😸",joy_cat:"😹",heart_eyes_cat:"😻",       
        smirk_cat:"😼",kissing_cat:"😽",scream_cat:"🙀",crying_cat_face:"😿",pouting_cat:"😾",cat:"🐱",       
        mouse:"🐭",cow:"🐮",monkey_face:"🐵",hand:"✋",fist:"✊",v:"✌️",point_up:"👆",point_down:"👇", 
        point_left:"👈",point_right:"👉",facepunch:"👊",wave:"👋",clap:"👏",open_hands:"👐","+1":"👍","-1":"👎",
        ok_hand:"👌",pray:"🙏",ear:"👂",eyes:"👀",nose:"👃",lips:"👄",tongue:"👅",heart:"❤️",cupid:"💘",
        sparkling_heart:"💖",star:"⭐️",sparkles:"✨",zap:"⚡️",sunny:"☀️",cloud:"☁️",snowflake:"❄️",umbrella:"☔️",
        coffee:"☕️",airplane:"✈️",anchor:"⚓️",watch:"⌚️",phone:"☎️",hourglass:"⌛️",email:"✉️",scissors:"✂️",
        black_nib:"✒️",pencil2:"✏️",x:"❌",recycle:"♻️",white_check_mark:"✅",negative_squared_cross_mark:"❎",
        m:"Ⓜ️",i:"ℹ️",tm:"™️",copyright:"©️",registered:"®️"
    }
},

虽然我看不懂这个,但是照葫芦画瓢还是可以的。
在这里面添加你想要的表情即可。注意如果是图片格式的,img标签中的链接的双引号一定要加上转义字符\
这里放出来我添加后的一部分,仅供参考

function(e,t){
    e.exports={
        傲娇:"<img src=\"https://cdn.jsdelivr.net/gh/drew233/cdn/20200409103906.webp\" height=\"15px\" 
        width=\"25px\">",开心:"<img src=\"https://cdn.jsdelivr.net/gh/drew233/cdn/20200409104757.webp\" />",扣手
        手:"<img src=\"https://cdn.jsdelivr.net/gh/drew233/cdn/20200409130304.webp\" />",仙女下凡:"<img 
        src=\"https://cdn.jsdelivr.net/gh/drew233/cdn/20200409130301.webp\" />",得瑟:"<img src=\"https://cdn.
        jsdelivr.net/gh/drew233/cdn/20200409130258.webp\" />",揉左脸:"<img src=\"https://cdn.jsdelivr.net/gh/
        drew233/cdn/20200409130254.webp\" />",揉右脸:"<img src=\"https://cdn.jsdelivr.net/gh/drew233/cdn/
        20200409130249.webp\" />",滑稽:"<img src=\"https://cdn.jsdelivr.net/gh/moezx/cdn@3.1.9/img/Sakura/images/
        smilies/icon_huaji.gif\" width=\"30px\"/>",grinning:"😀",smiley:"😃",smile:"😄",grin:"😁",.......,
        negative_squared_cross_mark:"❎",m:"Ⓜ️",i:"ℹ️",tm:"™️",copyright:"©️",registered:"®️"
    }
},

调用修改过的js

修改完成之后,本地调用或者cdn调用即可。

效果图

后话

最近也是加了valine的交流群,跟作者提了一下相关需求。作者已经做了出来(期待发布
毕竟我这种小白弄得那也确实不好看。