EMLOG博客添加OwO表情教程
QQ截图20170815221425.png
森七大佬博客发出来的教程，小杰我都难以看懂，最后请教强某人才把这整个教程看懂及完工
下面我给大家分享一下我在实际添加中所使用的方法及心得写给大家，关注杨小杰博客，你就不会迷路
1、下载OwO表情包及css和js文件，都已整合在附件中
2、上传后查看中文文件名是否显示完整，如果显示不完整或者乱码，请尝试解压后重新打包上传，当然不支持中文文件名的空间就不要去折腾了，虽然可以实现但是难度很大
3、header.php引用到自己本地的js和css文件，也就是附件中OwO.min.js及OwO.min.css不会引用请参考下面的代码
<link href="http://www.youngxj.cn/OwO/OwO.min.css" rel="stylesheet" type="text/css" />
<script src="http://www.youngxj.cn/OwO/OwO.min.js" type="text/javascript"></script>4、插入以下代码到模版module.php最后一行
<?php
/**
*替换OwO表情
*by 兰陵
*https://blog.thkira.com/
*/
function comment_add_owo($comment_text) {
$data_OwO = array(
'@(暗地观察)' => '<img src="/OwO/alu/暗地观察.png" alt="暗地观察" class="OwO-img">',
'@(便便)' => '<img src="/OwO/alu/便便.png" alt="便便" class="OwO-img">',
'@(不出所料)' => '<img src="/OwO/alu/不出所料.png" alt="不出所料" class="OwO-img">',
'@(不高兴)' => '<img src="/OwO/alu/不高兴.png" alt="不高兴" class="OwO-img">',
'@(不说话)' => '<img src="/OwO/alu/不说话.png" alt="不说话" class="OwO-img">',
'@(抽烟)' => '<img src="/OwO/alu/抽烟.png" alt="抽烟" class="OwO-img">',
'@(呲牙)' => '<img src="/OwO/alu/呲牙.png" alt="呲牙" class="OwO-img">',
'@(大囧)' => '<img src="/OwO/alu/大囧.png" alt="大囧" class="OwO-img">',
'@(得意)' => '<img src="/OwO/alu/得意.png" alt="得意" class="OwO-img">',
'@(愤怒)' => '<img src="/OwO/alu/愤怒.png" alt="愤怒" class="OwO-img">',
'@(尴尬)' => '<img src="/OwO/alu/尴尬.png" alt="尴尬" class="OwO-img">',
'@(高兴)' => '<img src="/OwO/alu/高兴.png" alt="高兴" class="OwO-img">',
'@(鼓掌)' => '<img src="/OwO/alu/鼓掌.png" alt="鼓掌" class="OwO-img">',
'@(观察)' => '<img src="/OwO/alu/观察.png" alt="观察" class="OwO-img">',
'@(害羞)' => '<img src="/OwO/alu/害羞.png" alt="害羞" class="OwO-img">',
'@(汗)' => '<img src="/OwO/alu/汗.png" alt="汗" class="OwO-img">',
'@(黑线)' => '<img src="/OwO/alu/黑线.png" alt="黑线" class="OwO-img">',
'@(欢呼)' => '<img src="/OwO/alu/欢呼.png" alt="欢呼" class="OwO-img">',
'@(击掌)' => '<img src="/OwO/alu/击掌.png" alt="击掌" class="OwO-img">',
'@(惊喜)' => '<img src="/OwO/alu/惊喜.png" alt="惊喜" class="OwO-img">',
'@(看不见)' => '<img src="/OwO/alu/看不见.png" alt="看不见" class="OwO-img">',
'@(看热闹)' => '<img src="/OwO/alu/看热闹.png" alt="看热闹" class="OwO-img">',
'@(抠鼻)' => '<img src="/OwO/alu/抠鼻.png" alt="抠鼻" class="OwO-img">',
'@(口水)' => '<img src="/OwO/alu/口水.png" alt="口水" class="OwO-img">',
'@(哭泣)' => '<img src="/OwO/alu/哭泣.png" alt="哭泣" class="OwO-img">',
'@(狂汗)' => '<img src="/OwO/alu/狂汗.png" alt="狂汗" class="OwO-img">',
'@(蜡烛)' => '<img src="/OwO/alu/蜡烛.png" alt="蜡烛" class="OwO-img">',
'@(脸红)' => '<img src="/OwO/alu/脸红.png" alt="脸红" class="OwO-img">',
'@(内伤)' => '<img src="/OwO/alu/内伤.png" alt="内伤" class="OwO-img">',
'@(喷水)' => '<img src="/OwO/alu/喷水.png" alt="喷水" class="OwO-img">',
'@(喷血)' => '<img src="/OwO/alu/喷血.png" alt="喷血" class="OwO-img">',
'@(期待)' => '<img src="/OwO/alu/期待.png" alt="期待" class="OwO-img">',
'@(亲亲)' => '<img src="/OwO/alu/亲亲.png" alt="亲亲" class="OwO-img">',
'@(傻笑)' => '<img src="/OwO/alu/傻笑.png" alt="傻笑" class="OwO-img">',
'@(扇耳光)' => '<img src="/OwO/alu/扇耳光.png" alt="扇耳光" class="OwO-img">',
'@(深思)' => '<img src="/OwO/alu/深思.png" alt="深思" class="OwO-img">',
'@(锁眉)' => '<img src="/OwO/alu/锁眉.png" alt="锁眉" class="OwO-img">',
'@(投降)' => '<img src="/OwO/alu/投降.png" alt="投降" class="OwO-img">',
'@(吐)' => '<img src="/OwO/alu/吐.png" alt="吐" class="OwO-img">',
'@(吐舌)' => '<img src="/OwO/alu/吐舌.png" alt="吐舌" class="OwO-img">',
'@(吐血倒地)' => '<img src="/OwO/alu/吐血倒地.png" alt="吐血倒地" class="OwO-img">',
'@(无奈)' => '<img src="/OwO/alu/无奈.png" alt="无奈" class="OwO-img">',
'@(无所谓)' => '<img src="/OwO/alu/无所谓.png" alt="无所谓" class="OwO-img">',
'@(无语)' => '<img src="/OwO/alu/无语.png" alt="无语" class="OwO-img">',
'@(喜极而泣)' => '<img src="/OwO/alu/喜极而泣.png" alt="喜极而泣" class="OwO-img">',
'@(献花)' => '<img src="/OwO/alu/献花.png" alt="献花" class="OwO-img">',
'@(献黄瓜)' => '<img src="/OwO/alu/献黄瓜.png" alt="献黄瓜" class="OwO-img">',
'@(想一想)' => '<img src="/OwO/alu/想一想.png" alt="想一想" class="OwO-img">',
'@(小怒)' => '<img src="/OwO/alu/小怒.png" alt="小怒" class="OwO-img">',
'@(小眼睛)' => '<img src="/OwO/alu/小眼睛.png" alt="小眼睛" class="OwO-img">',
'@(邪恶)' => '<img src="/OwO/alu/邪恶.png" alt="邪恶" class="OwO-img">',
'@(咽气)' => '<img src="/OwO/alu/咽气.png" alt="咽气" class="OwO-img">',
'@(阴暗)' => '<img src="/OwO/alu/阴暗.png" alt="阴暗" class="OwO-img">',
'@(赞一个)' => '<img src="/OwO/alu/赞一个.png" alt="赞一个" class="OwO-img">',
'@(长草)' => '<img src="/OwO/alu/长草.png" alt="长草" class="OwO-img">',
'@(中刀)' => '<img src="/OwO/alu/中刀.png" alt="中刀" class="OwO-img">',
'@(中枪)' => '<img src="/OwO/alu/中枪.png" alt="中枪" class="OwO-img">',
'@(中指)' => '<img src="/OwO/alu/中指.png" alt="中指" class="OwO-img">',
'@(肿包)' => '<img src="/OwO/alu/肿包.png" alt="肿包" class="OwO-img">',
'@(皱眉)' => '<img src="/OwO/alu/皱眉.png" alt="皱眉" class="OwO-img">',
'@(装大款)' => '<img src="/OwO/alu/装大款.png" alt="装大款" class="OwO-img">',
'@(坐等)' => '<img src="/OwO/alu/坐等.png" alt="坐等" class="OwO-img">',
'@[啊]' => '<img src="/OwO/paopao/啊.png" alt="啊" class="OwO-img">',
'@[爱心]' => '<img src="/OwO/paopao/爱心.png" alt="爱心" class="OwO-img">',
'@[鄙视]' => '<img src="/OwO/paopao/鄙视.png" alt="鄙视" class="OwO-img">',
'@[便便]' => '<img src="/OwO/paopao/便便.png" alt="便便" class="OwO-img">',
'@[不高兴]' => '<img src="/OwO/paopao/不高兴.png" alt="不高兴" class="OwO-img">',
'@[彩虹]' => '<img src="/OwO/paopao/彩虹.png" alt="彩虹" class="OwO-img">',
'@[茶杯]' => '<img src="/OwO/paopao/茶杯.png" alt="茶杯" class="OwO-img">',
'@[吃瓜]' => '<img src="/OwO/paopao/吃瓜.png" alt="吃瓜" class="OwO-img">',
'@[吃翔]' => '<img src="/OwO/paopao/吃翔.png" alt="吃翔" class="OwO-img">',
'@[大拇指]' => '<img src="/OwO/paopao/大拇指.png" alt="大拇指" class="OwO-img">',
'@[蛋糕]' => '<img src="/OwO/paopao/蛋糕.png" alt="蛋糕" class="OwO-img">',
'@[嘚瑟]' => '<img src="/OwO/paopao/嘚瑟.png" alt="嘚瑟" class="OwO-img">',
'@[灯泡]' => '<img src="/OwO/paopao/灯泡.png" alt="灯泡" class="OwO-img">',
'@[乖]' => '<img src="/OwO/paopao/乖.png" alt="乖" class="OwO-img">',
'@[哈哈]' => '<img src="/OwO/paopao/哈哈.png" alt="哈哈" class="OwO-img">',
'@[汗]' => '<img src="/OwO/paopao/汗.png" alt="汗" class="OwO-img">',
'@[呵呵]' => '<img src="/OwO/paopao/呵呵.png" alt="呵呵" class="OwO-img">',
'@[黑线]' => '<img src="/OwO/paopao/黑线.png" alt="黑线" class="OwO-img">',
'@[红领巾]' => '<img src="/OwO/paopao/红领巾.png" alt="红领巾" class="OwO-img">',
'@[呼]' => '<img src="/OwO/paopao/呼.png" alt="呼" class="OwO-img">',
'@[花心]' => '<img src="/OwO/paopao/花心.png" alt="花心" class="OwO-img">',
'@[滑稽]' => '<img src="/OwO/paopao/滑稽.png" alt="滑稽" class="OwO-img">',
'@[惊恐]' => '<img src="/OwO/paopao/惊恐.png" alt="惊恐" class="OwO-img">',
'@[惊哭]' => '<img src="/OwO/paopao/惊哭.png" alt="惊哭" class="OwO-img">',
'@[惊讶]' => '<img src="/OwO/paopao/惊讶.png" alt="惊讶" class="OwO-img">',
'@[开心]' => '<img src="/OwO/paopao/开心.png" alt="开心" class="OwO-img">',
'@[酷]' => '<img src="/OwO/paopao/酷.png" alt="酷" class="OwO-img">',
'@[狂汗]' => '<img src="/OwO/paopao/狂汗.png" alt="狂汗" class="OwO-img">',
'@[蜡烛]' => '<img src="/OwO/paopao/蜡烛.png" alt="蜡烛" class="OwO-img">',
'@[懒得理]' => '<img src="/OwO/paopao/懒得理.png" alt="懒得理" class="OwO-img">',
'@[泪]' => '<img src="/OwO/paopao/泪.png" alt="泪" class="OwO-img">',
'@[冷]' => '<img src="/OwO/paopao/冷.png" alt="冷" class="OwO-img">',
'@[礼物]' => '<img src="/OwO/paopao/礼物.png" alt="礼物" class="OwO-img">',
'@[玫瑰]' => '<img src="/OwO/paopao/玫瑰.png" alt="玫瑰" class="OwO-img">',
'@[勉强]' => '<img src="/OwO/paopao/勉强.png" alt="勉强" class="OwO-img">',
'@[你懂的]' => '<img src="/OwO/paopao/你懂的.png" alt="你懂的" class="OwO-img">',
'@[怒]' => '<img src="/OwO/paopao/怒.png" alt="怒" class="OwO-img">',
'@[喷]' => '<img src="/OwO/paopao/喷.png" alt="喷" class="OwO-img">',
'@[钱]' => '<img src="/OwO/paopao/钱.png" alt="钱" class="OwO-img">',
'@[钱币]' => '<img src="/OwO/paopao/钱币.png" alt="钱币" class="OwO-img">',
'@[弱]' => '<img src="/OwO/paopao/弱.png" alt="弱" class="OwO-img">',
'@[三道杠]' => '<img src="/OwO/paopao/三道杠.png" alt="三道杠" class="OwO-img">',
'@[沙发]' => '<img src="/OwO/paopao/沙发.png" alt="沙发" class="OwO-img">',
'@[生气]' => '<img src="/OwO/paopao/生气.png" alt="生气" class="OwO-img">',
'@[胜利]' => '<img src="/OwO/paopao/胜利.png" alt="胜利" class="OwO-img">',
'@[手纸]' => '<img src="/OwO/paopao/手纸.png" alt="手纸" class="OwO-img">',
'@[睡觉]' => '<img src="/OwO/paopao/睡觉.png" alt="睡觉" class="OwO-img">',
'@[酸爽]' => '<img src="/OwO/paopao/酸爽.png" alt="酸爽" class="OwO-img">',
'@[太开心]' => '<img src="/OwO/paopao/太开心.png" alt="太开心" class="OwO-img">',
'@[太阳]' => '<img src="/OwO/paopao/太阳.png" alt="太阳" class="OwO-img">',
'@[吐]' => '<img src="/OwO/paopao/吐.png" alt="吐" class="OwO-img">',
'@[吐舌]' => '<img src="/OwO/paopao/吐舌.png" alt="吐舌" class="OwO-img">',
'@[挖鼻]' => '<img src="/OwO/paopao/挖鼻.png" alt="挖鼻" class="OwO-img">',
'@[委屈]' => '<img src="/OwO/paopao/委屈.png" alt="委屈" class="OwO-img">',
'@[捂嘴笑]' => '<img src="/OwO/paopao/捂嘴笑.png" alt="捂嘴笑" class="OwO-img">',
'@[犀利]' => '<img src="/OwO/paopao/犀利.png" alt="犀利" class="OwO-img">',
'@[香蕉]' => '<img src="/OwO/paopao/香蕉.png" alt="香蕉" class="OwO-img">',
'@[小乖]' => '<img src="/OwO/paopao/小乖.png" alt="小乖" class="OwO-img">',
'@[小红脸]' => '<img src="/OwO/paopao/小红脸.png" alt="小红脸" class="OwO-img">',
'@[笑尿]' => '<img src="/OwO/paopao/笑尿.png" alt="笑尿" class="OwO-img">',
'@[笑眼]' => '<img src="/OwO/paopao/笑眼.png" alt="笑眼" class="OwO-img">',
'@[心碎]' => '<img src="/OwO/paopao/心碎.png" alt="心碎" class="OwO-img">',
'@[星星月亮]' => '<img src="/OwO/paopao/星星月亮.png" alt="星星月亮" class="OwO-img">',
'@[呀咩爹]' => '<img src="/OwO/paopao/呀咩爹.png" alt="呀咩爹" class="OwO-img">',
'@[药丸]' => '<img src="/OwO/paopao/药丸.png" alt="药丸" class="OwO-img">',
'@[咦]' => '<img src="/OwO/paopao/咦.png" alt="咦" class="OwO-img">',
'@[疑问]' => '<img src="/OwO/paopao/疑问.png" alt="疑问" class="OwO-img">',
'@[阴险]' => '<img src="/OwO/paopao/阴险.png" alt="阴险" class="OwO-img">',
'@[音乐]' => '<img src="/OwO/paopao/音乐.png" alt="音乐" class="OwO-img">',
'@[真棒]' => '<img src="/OwO/paopao/真棒.png" alt="真棒" class="OwO-img">',
'@[nico]' => '<img src="/OwO/paopao/nico.png" alt="nico" class="OwO-img">',
'@[OK]' => '<img src="/OwO/paopao/OK.png" alt="OK" class="OwO-img">',
'@[what]' => '<img src="/OwO/paopao/what.png" alt="what" class="OwO-img">',
'@[doge]' => '<img src="/OwO/doge.png" alt="doge" class="OwO-img">',
'@[原谅她]' => '<img src="/OwO/原谅她.png" alt="原谅她" class="OwO-img">'
);
return strtr($comment_text,$data_OwO);
}
?>5、再module.php文件中找到你的发表评论表单中<textarea代码，找不到的请参考下图
QQ截图20170813165512.png
6、找到这段代码之后，在class中添加OwO-textarea代码，如果存在class请在最后一个值空一格添加
OwO-textarea比如你的class中是这样的class="demo demo1"那么你只需要class="demo demo1 OwO-textarea"这样添加即可
如果没有class值那么就创建一个，如上图，如下代码：
class="OwO-textarea"7、更改class之后在</textarea>后添加如下代码:
<div title="OwO" class="OwO"></div>
<script>var OwO_demo = new OwO({
logo: 'OωO表情',
container: document.getElementsByClassName('OwO')[0],
target: document.getElementsByClassName('OwO-textarea')[0],
api: '/OwO/OwO.min.json',
position: 'down',
width: '100%',
maxHeight: '250px'
});</script>8、当这一切都已添加之后，你的评论框应该存在一个OwO表情的按钮，可以正常添加表情
，那么接下来需要添加的代码比较灵活，小杰给大家一个demo，仅供参考，其实就是要把评论列表和子评论列表以及你需要显示评论的地方添加一个comment_add_owo()函数，在你的评论列表函数中找到echo $comment['content']（也就是输出评论内容）的代码，接着在echo $comment['content']改成echo comment_add_owo($comment['content'])，具体模版变通操作
QQ截图20170813170455.png
9、教程到此为止应该可以正常评论添加表情，以及输出表情了，竟然再改的时候重定义向到自己的博客，以免出现cdn缓存导致等等错误，还需要随时刷新浏览器缓存。一步一步弄下去应该就能正常使用了。
森七博客原文地址：给EMLOG博客添加OwO表情教程
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2017-8-13 1，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读