杨小杰Blog(Youngxj)提供免费教程下载和网站搭建技术教程,主要分享和发布网站源码,致力创造一个高质量网络资源教程的分享平台

EMLOG博客添加OwO表情教程

Young小杰2017-8-13 16:40 网站搭建(25)7765小标签: 网站搭建教程 森七博客

QQ截图20170815221425.png

森七大佬博客发出来的教程,小杰我都难以看懂,最后请教强某人才把这整个教程看懂及完工

下面我给大家分享一下我在实际添加中所使用的方法及心得写给大家,关注杨小杰博客,你就不会迷路

1、下载OwO表情包及css和js文件,都已整合在附件中

2、上传后查看中文文件名是否显示完整,如果显示不完整或者乱码,请尝试解压后重新打包上传,当然不支持中文文件名的空间就不要去折腾了,虽然可以实现但是难度很大

3、header.php引用到自己本地的js和css文件,也就是附件中OwO.min.js及OwO.min.css不会引用请参考下面的代码

<link href="http://blog.youngxj.cn/OwO/OwO.min.css" rel="stylesheet" type="text/css" />
<script src="http://blog.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表情教程


OwO表情包大小:848KB | 来源:本地下载 | 下载次数:
本文最后更新于2017-8-13,已超过 1 年没有更新,如果文章内容或图片资源失效,请留言反馈,我们会及时处理,谢谢!

发表评论:

评论列表:

  • 半醉 Lv 1

    胖子是不会饿死的,饿死了也是死胖子打卡成功,现在时间:11点17分记得每天坚持打卡哦!
    你的文章写的太好啦,赞一个回复了[真棒]
    对方不想跟你说话并向你丢了一朵小黄花回复了(献花)

  • 文天 Lv 1

    他们只是想保护自己的灵魂,结果,雪穗从不以真面目示人,亮司则至今仍在黑暗的通风管中徘徊。OωO

  • Young小杰 站长

    回复了(不出所料)回复了(鼓掌)

  • KUMA Lv 1

    大佬,有没有wordpress版的!

    • Young小杰 站长

      回复了KUMA:目前没有,才基础wordpress

  • Simplexity Lv 1

    回复了[滑稽]还是喜欢图片表情,文字的太抽象~

  • sneuron Lv 1

    OωO(((┏(; ̄▽ ̄)┛装完逼就跑 杰哥什么时候给emlog加一个极验验证码啊  论坛里3月份的插件大部分模板都不能使用啊

    • Young小杰 站长

      回复了sneuron:极验验证码是什么鬼

    • Young小杰 站长

      回复了sneuron:极验的插件我在一个博客中找到了,应该是可用的,如果需要请联系

  • 流星 Lv 1

    回复了(中枪)

  • 你猜猜 Lv 1

    回复了[嘚瑟]回复了[乖]

  • Flyer Lv 3

    你现在的表情重复了

    • Young小杰 站长

      回复了Flyer:没有吧,一个静态表情,一个动态表情

  • 欣欣 Lv 1

    小杰你太勤奋啦。这个表情萌

    • Young小杰 站长

      回复了欣欣:最近文章更新的少,但都是不错的教程

  • 手机扫描二维码
    阅读体验更佳