关于本站的表情解析的解决方案
刚才在群里有小伙伴询问本站的表情解析的功能是如何实现的。其实这个功能实现起来,也是一个比较取巧的办法。下面就水一文,介绍一下。
function.php 处理表情
如果用过Typecho 使用 fancybox 踩过的坑这篇文章里的方案的话,可以直接接着在这篇文章里的parseContent()
的这个function里继续写。需要注意的是,这个文章中这个 function 中使用的形参名称为$obj
,被处理的内容为$obj->content
。所以,大可以在parseContent()
函数体内继续处理$obj->content
。
如果没用过的话。自己也单写一个parseContent()
也是可以的。
因为之前用这个 function 的时候,在主题post.php
的引用方式为将$this->content
替换为parseContent($this)
,故不与评论区里的解析通用(屎山+1)
文章正文如果想解析表情,可以不用改主题模板文件,可以在functions.php
用ThemeInit
方法实现。
function themeInit($archive) {
if ($archive->is('single')) {
$archive->content = parseContent($archive->content);
}
}
故文章内的 function 如下
function parseContent($obj){
/*此处可以任意处理 $obj->content*/
$obj->content = preg_replace_callback('/@\[(.*?)\]/is', 'forEmotionReplace', $obj->content);
/*此处也可以接着蹂躏 $obj->content*/
return trim($obj);
}
评论区的 function 如下
function parseCommentText($obj){
/*此处可以任意处理 $obj*/
$obj = preg_replace_callback('/@\[(.*?)\]/is', 'forEmotionReplace', $obj->content);
/*此处也可以接着蹂躏 $obj*/
return trim($obj);
}
2024-06-08强调注:parseCommentText的调用方法:在comments.php
或者是自己的主题的自定义评论结构中的$comments->content
,改为parseCommentText($comments->content);
即可完成调用。
评论区内,在你的【自定义评论结构】里,将$comments->content()
替换成parseCommentText($comments->content)
然后大家也注意到了,表情的格式为@防止被解析[$1]
。这两个里面都有一个forEmotionReplace
的东西,说明这两个都需要这个。关于这个的东西如下,需要写在这两个的下面。
function forEmotionReplace($matches){
return '<img style="vertical-align:middle;height:20px;width:20px;display: inline-block;margin: unset;" src="/usr/uploads/emotions/'.base64_encode($matches[1]).'.png" alt="'.$matches[0].'" />';
/* 里面的图片路径请自行解决 */
}
基本的思路就是,比如说我发了个表情,会把表情识别结构里的文字给转码成 base64 格式的,然后用这个 base64 拼接出表情的真实地址,然后对文章内的关键字进行替换。所以说,你要准备的表情文件夹里的表情,全部都要重命名为 base64_encode 后的文本!!!
前端方面
我这边的方法是把文件夹里已有的表情,全都手动手写成一起,然后进行添加。
然后关于前端页面插入图片的过程...在此概述
祖传传统,依赖jQuery!!!
首先,引入一个 jQ 的新方法(应该是这个叫法吧qwq)。如下:(也是从百度抄来的,来源早都忘了)
注意:最好在 jQ 引用完之后 再进行引用
(function($) {
$.fn.extend({
insertAtCaret: function(myValue) {
var $t = $(this)[0];
if (document.selection) {
this.focus();
sel = document.selection.createRange();
sel.text = myValue;
this.focus();
} else
if ($t.selectionStart || $t.selectionStart == '0') {
var startPos = $t.selectionStart;
var endPos = $t.selectionEnd;
var scrollTop = $t.scrollTop;
$t.value = $t.value.substring(0, startPos) + myValue + $t.value.substring(endPos, $t.value.length);
this.focus();
$t.selectionStart = startPos + myValue.length;
$t.selectionEnd = startPos + myValue.length;
$t.scrollTop = scrollTop;
} else {
this.value += myValue;
this.focus();
}
}
})
})(jQuery);
然后,对点击表情框内的图片,然后进行插入的这个动作,进行实现:
/*表情框*/
$(document).ready(function() {
/* 下方的选择器,应该选择到你表情选择框里的表情图片,或者是其他 */
$(".OwO-self .OwO-drop img").click(function() {
/* 下方的选择器,应选择到你的输入评论内容的评论框 */
$(".OwO-textarea").insertAtCaret($(this).attr("alt"));
});
});
然后我这边的表情选择框内的每个 unit 的表情的 html 是这样的
<img src="/usr/uploads/emotions/5aSn5ZOt.png" alt="@防止被解析[大哭]" title="大哭">
技术总结
然后,只要左左右右,然后上上下下,然后就弄好了。祝各位成功qwq
https://shangjixin.com/usr/uploads/emotions/5Y+X6JmQ5ruR56i9.png 还是不会!
这.... 你这链接是怎么鼓捣出来的...实际的评论流程中,不会出现表情的链接才对,表情是通过关键词替换匹配出来的
别问,问就是咕咕咕咕咕