表情图片给我们带来了很多欢乐,我们使用着各种表情表述自己的心情,拉动聊天气氛~(虽然常常聊着聊着就成了斗图大赛)。但是啊,系不系开心就好@(哈哈)~

今天给各位博主带来了一个js表情插件,效果如下@(高兴)

首先感谢OwOde作者DIYgod,项目开源在github上https://github.com/DIYgod/OwO。

使用教程

安装

1
$ npm install owo --save

或者直接去github下载源码

使用

HTML

1
2
3
4
5
<link rel="stylesheet" href="OwO.min.css">
<!-- ... -->
<div class="OwO"></div>
<!-- ... -->
<script src="OwO.min.js"></script>

JS

1
2
3
4
5
6
7
8
9
var OwO_demo = new OwO({
logo: 'OωO表情',
container: document.getElementsByClassName('OwO')[0],
target: document.getElementsByClassName('OwO-textarea')[0],
api: './OwO.json',
position: 'down',
width: '100%',
maxHeight: '250px'
});

然而这并不是真正的目的,真正目的是为了在文章里添加表情@(得意)@(得意)@(得意)~~~
让自己的文章充满画面感@(赞一个),就像现在一样@(鼓掌)

怎么实现呢?

第一步约定语法

我们约定 *@(表情名)* 为插入表情的语法

第二步解析markdown

博主使用的是hexo搭建的博客,在node_modules中找到解析markdown的js文件(可以看我的另一篇关于lozad.js文章有介绍)
\node_modules\_marked@0.3.6@marked\lib\marked.js
image
这里偷了一个小懒(其实是新建的搞不定@(无奈)),直接使用em即斜体的语法,在内部加了个正则匹配,来识别我们的表情语法。具体代码如下:
marked.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Renderer.prototype.em = function(text) {
var match = text.match(/@\((\S*?)\)/g);
if(match) {
var str = '';
var mlength = match.length;
for (var i = 0; i < mlength; i++) {
var emoji = match[i].substring(2);
emoji = emoji.substring(0, emoji.length-1);
//对应的表情图片地址,图片可自定义。表情名=图片名,并统一为png格式
emoji = '<img class="owoemoji" src="/OwO/img/' + emoji + '.png">';
str += emoji;
}
return str;
}
return '<em>' + text + '</em>';
};

第三步添加hover效果

添加表情hover贱贱的抖动css效果@(滑稽)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/*OwO emoji*/
.owoemoji {
display: inline-block !important;
position: relative;
top: 10px;
margin: 0 !important;
padding: 0;
}
.owoemoji:hover {
animation: owo-face 5s infinite ease-in-out;
}

@keyframes owo-face {
2% {
transform: translate(0, 1.5px) rotate(1.5deg);
}
4% {
transform: translate(0, -1.5px) rotate(-0.5deg);
}
太长略过...
}

好了,接下来就可以在你的markdown里面使用*@(表情名)*来添加表情,添加你的创作乐趣了!
祝大家开心生活,越活越年轻@(脸红)~

希望这篇文章能给你带来知识和乐趣,喜欢博主的文章可以加博主好友哦

有好的文章也可以向博主投稿哦