拓展自定义表情功能至支持表情和表情包两种类型的表情

[HuajiMX]

原自定义表情仅支持emoji类的表情，不支持表情包。现拓展了表情包类型表情的适配，同时向下兼容原表情系统。

主要改动

functions.php

get_custom_smilies_list 函数中，第 ~1475 行

...
+             // 解析文件名，获取表情的基本名称和类型（自定义表情拓展为meme和emoji两类；可向下兼容，默认识别为emoji）
+             $file_base_name_part = explode('_', $file_base_name);
+             $name = $file_base_name_part[0];
+             $type = isset($file_base_name_part[1]) ? ($file_base_name_part[1] == '1' ? 'meme' : 'emoji') : 'emoji';
+ 
            if (in_array($file_extension, $custom_smilies_extension)) {
                $custom_smilies_list[] = array(
                    'path' => $file_path,
                    'little_path' => $file_little_path,
                    'file_url' => $file_url,
                    'name' => $file_name,
-                     'base_name' => $file_base_name,
+                     'base_name' => $name,
+                     'type' => $type,
                    'extension' => $file_extension
                );
            }
...

表情文件按 {name}_{type: 0/1}.{extension} 的格式命名，php 代码内分割相应成分。type 为 0 表示 emoji 类型，为 1 表示 meme 类型。

push_custom_smilies 函数（第 ~1549 行）

function push_custom_smilies()
{

    global $custom_smiliestrans;
-     $custom_smilies_panel = '';
+ 
+     // 拓展自定义表情类型
+     $custom_smilies_emoji_panel = '';
+     $custom_smilies_meme_panel = '';
    $custom_smilies_list = get_custom_smilies_list();

    if (!$custom_smilies_list) {
        $custom_smilies_panel = '<div style="font-size: 20px;text-align: center;width: 300px;height: 100px;line-height: 100px;">File does not exist!</div>';
        return $custom_smilies_panel;
    }

    $custom_smilies_cdn = iro_opt('smilies_proxy');
    foreach ($custom_smilies_list as $smiley) {

        if ($custom_smilies_cdn) {
            $smiley_url = $custom_smilies_cdn . $smiley['little_path'];
        } else {
            $smiley_url = $smiley['file_url'];
        }
        
-         $custom_smilies_panel = $custom_smilies_panel . '<span title="' . $smiley['base_name'].'" ' . make_onclick_grin($smiley['base_name'],'Math').'><img alt="custom_smilies" loading="lazy" style="height: 60px;" src="' . $smiley_url . '" /></span>';
-         $custom_smiliestrans['{{' . $smiley['base_name'] . '}}'] = '<span title="' . $smiley['base_name'] . '" ><img alt="custom_smilies" loading="lazy" style="height: 60px;" src="' . $smiley_url . '" /></span>';
+         // 拓展自定义表情类型，按不同样式展示（emoji正常表情样式，meme按大图表情包展示，独占一行）
+         if($smiley['type'] === 'emoji') {
+             $custom_smilies_emoji_panel = $custom_smilies_emoji_panel . '<span title="' . $smiley['base_name'].'" ' . make_onclick_grin($smiley['base_name'],'Math').'><img alt="custom_smilies" class="custom-smilies-type-emoji" loading="lazy" src="' . $smiley_url . '" /></span>';
+             $custom_smiliestrans['{{' . $smiley['base_name'] . '}}'] = '<span title="' . $smiley['base_name'] . '" ><img alt="custom_smilies" class="smilie-emoji-in-content" loading="lazy" src="' . $smiley_url . '" /></span>';
+         } else if($smiley['type'] === 'meme') {
+             $custom_smilies_meme_panel = $custom_smilies_meme_panel . '<span title="' . $smiley['base_name'].'" ' . make_onclick_grin($smiley['base_name'],'Math').'><img alt="custom_smilies" class="custom-smilies-type-meme" loading="lazy" src="' . $smiley_url . '" /></span>';
+             $custom_smiliestrans['{{' . $smiley['base_name'] . '}}'] = '<span title="' . $smiley['base_name'] . '" ><img alt="custom_smilies" loading="lazy" style="height: 100px; display: block; margin: 5px; border-radius: 5px;" src="' . $smiley_url . '" /></span>';
        }
    }

+     // 两种表情在面板上分开展示
+     $custom_smilies_panel = $custom_smilies_emoji_panel . ($custom_smilies_emoji_panel ? '<br>' : '') . $custom_smilies_meme_panel;
    return $custom_smilies_panel;
}

按不同表情类型分别设置面板中显示样式和正文中展示样式。同时在表情面板中按 emoji 在前，meme 在后的顺序分离展示两种表情。

style.css

.bili-container,
- .tieba-container {
+ .tieba-container,
+ .custom-container {
  padding-left: 16px;
}

.tieba-container span {
  width: 32px;
  height: 32px;
}

.tieba-container img,
- .bili-container img {
+ .bili-container img,
+ .custom-smilies-type-emoji {
  width: 32px;
  height: 32px;
  margin: 7px;
}
+ 
+ .custom-smilies-type-meme {
+     max-width: 80px;
+     max-height: 80px;
+     width: auto;
+     height: auto;
+     aspect-ratio: auto;
+     vertical-align: middle;
+     margin: 5px;
+ }
+ 
+ .custom-container img {
+   border-radius: 5px;
+ }

主要是对两种不同自定义表情的面板样式进行适配优化。

+ /* 优化表情垂直对齐位置 */
+ .smilie-emoji-in-content {
+   height: 30px;
+   vertical-align: bottom;
+ }

这里优化了 emoji 类表情（包括模板内置表情）在正文内的垂直对齐位置，原先的表情位置相比正文文字较为靠上，调整后与正文视觉上居中平齐，效果更好。