听书人

在鸡零狗碎操蛋的生活中找到闪闪发光的太阳

评论添加表情

听书人 · 沦陷于 · 2021/07/29 · 阅:263

昨晚闲的没事干,就研究了这个评论表情。不过倒不是以前没看过,就是没看懂,还特意去请教了北枫,问笔记的!!

欲知后事如何,请看下图

与北枫聊天记录.png
与北枫聊天记录.png

想看下一张??动动金贵的手指,评个论!

评论了吗(审核通过没)?就想看🤔

今天特意又去了一趟在百度搜到的那篇为 Typecho 博客添加表情评论 #1:使用 OwO.js ,以防万一哪天打不开了或者自己又傻了,所以按自己会的记下来

导入 OwO

  • OwO.min.css
  • OwO.min.js
  • OwO.min.js.map
  • 默认的 OwO 配置文件 OwO.json

之后在 html 模板的 <head></head> 部分中添加 css(对于 Tyepcho 一般是在模板主题的 header.php 中)

<link rel="stylesheet" href="css 文件地址">

修改 css 文件地址为自己的 css 文件地址。 在模板 <body></body> 中靠最后的部分添加 css(对于 Tyepcho 一般是在模板主题的 footer.php 中)

<script src="js 文件地址"></script>

修改 js 文件地址为自己的 js 文件地址

导入表情框按钮

(在填上一步的js 文件地址下面添加)
在上面导入 js 文件的下面插入以下代码:

<script> var OwO_demo = new OwO({ logo: 'OωO表情', container: document.getElementsByClassName('OwO')[0], target: document.getElementsByClassName('OwO-textarea')[0], api: 'JSON文件地址', position: 'down', width: '100%', maxHeight: '250px' }); </script>

修改 json 文件地址为自己的 json 文件地址。

绑定表情框与评论框

找到评论框的 html 元素 可以在 chrome 中找到评论框,右键点击审查元素,找到该元素具体在哪里,并在模板文件中找到相应的位置(对于 Tyepcho 一般是在模板主题的 comment.php 中)
比如具体的元素可能是这样 <input class='xxx'>*</input>
需要在 input 的 class 属性中补充 OwO-textarea 将其变成 <input class='xxx OwO-textarea'>*</input> 之后打开网站测试效果

如果出现没有成功,建议在 chrome 中按 F12 开启开发者模式 如果提示某文件 not found,是相关的文件没有被成功导入 如果没有错误,建议检查是否是绑定出现了问题 最后欢迎在下面评论区试验一下评论表情功能鸭!

附上 js的介绍

{ 
    logo : 'OωO表情' ,                                                // OwO按钮文字,默认:`OωO表情` 
    container : document . getElementsByClassName ( 'OwO' ) [ 0 ] ,          // OwO 容器,默认:`document.getElementsByClassName('OwO')[0]` 
    target : document . getElementsByClassName ( 'OwO-textarea' ) [ 0 ] ,    // OwO 目标输入或文本区域,默认:`document.getElementsByTagName('textarea')[0]` 
    api : './OwO.json' ,                                            // OwO 表情数据api,默认:`https://api.anotherhome.net/OwO/OwO.json` 
    position : 'down' ,                                              // OwO 身体位置,默认:`down` 
    width : '100%' ,                                                 // OwO 主体宽度,默认值:`100%` 
    maxHeight : '250px'                                             // OwO 主体最大高度,默认值:`250px` 
}

html调用

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

最后留下版权,他这个复制老带有版权,复制一个字母都有一段版权,唉,还挺烦的!

最后更新:2021-09-10
typecho,表情
文章分享
折叠评论
评论 (5)
  1. Mr.Chou

    挺不错,

    7月29日 回复
    1. 晚风
      @Mr.Chou

      你的博客也不错

      7月29日 回复
  2. 大树下

    我就想看下一张图,来评论下OωO

    7月29日 回复
    1. 晚风
      @大树下

      🤣看到后难受了没有

      7月29日 回复
      1. 大树下
        @晚风

        我大声的说一个不是很礼貌的叹词→_→

        7月29日 回复