OwO-可爱的js表情符号插件
表情图片给我们带来了很多欢乐,我们使用着各种表情表述自己的心情,拉动聊天气氛(虽然常常聊着聊着就成了斗图大赛)。但是啊,系不系开心就好
今天给各位博主带来了一个js表情插件,效果如下:
首先感谢OwOde作者DIYgod,项目开源在github上https://github.com/DIYgod/OwO。
使用教程
安装
1 | $ npm install owo --save |
或者直接去github下载源码
使用
HTML
1 | <link rel="stylesheet" href="OwO.min.css"> |
JS
1 | var OwO_demo = new OwO({ |
然而这并不是真正的目的,真正目的是为了在文章里添加表情~
让自己的文章充满画面感,就像现在一样。
怎么实现呢?
第一步约定语法
我们约定 *@(表情名)*
为插入表情的语法
第二步解析markdown
博主使用的是hexo搭建的博客,在node_modules中找到解析markdown的js文件(可以看我的另一篇关于lozad.js文章有介绍)\node_modules\_marked@0.3.6@marked\lib\marked.js
这里偷了一个小懒(其实是新建的搞不定),直接使用em即斜体的语法,在内部加了个正则匹配,来识别我们的表情语法。具体代码如下:
marked.js
1 | Renderer.prototype.em = function(text) { |
第三步添加hover效果
添加表情hover贱贱的抖动css效果
1 | /*OwO emoji*/ |
好了,接下来就可以在你的markdown里面使用*@(表情名)*
来添加表情,添加你的创作乐趣了!
祝大家开心生活,越活越年轻~
希望这篇文章能给你带来知识和乐趣,喜欢博主的文章可以加博主好友哦
有好的文章也可以向博主投稿哦
您的喜欢是作者写作最大的动力
QQ群和公众号
hexo折腾-系列文章:
给博客添加个人域名
给hexo的jsimple主题添加代码高亮
给博客添加网易云跟帖评论
给博客添加https支持
博客添加gitment评论
给博客添加APlayer音乐播放器^-^
hexo 使用说明
Lozad.js学习使用
snowfall.jquery.js实现樱花飘落效果
Hexo博客备份—妈妈再也不用担心你使用hexo写博客
github博客迁移至coding并提交百度收录
博客小人
live2d-看板娘小埋
使用disqus评论
anime.js实现logo动画
OwO-可爱的js表情符号插件
给博客添加图集展示
评论系统之来必力
添加系列文章功能
给Hexo博客添加Mathjax数学公式支持
给博客添加上一篇下一篇功能
给博客添加文章目录
hexo评论系统之valine快速使用
快速开发属于自己的APP-FusionApp
miccall主题及html5up站点推荐
CSS+SVG路径描边特效
网页看板娘-Live2d蕾姆
还没好图床的小伙伴看过来,微博是个好图床!