方法有很多，以下方法不算是简单的 但是后续增加比较方便的！

一、修改前的准备

1. 备份文件

在修改之前，建议备份以下文件：

• /usr/themes/OneBlog/static/js/emoji.js
• /usr/themes/OneBlog/functions.php
• /usr/themes/OneBlog/comments.php

2. 创建表情文件夹

在/usr/themes/OneBlog/static/img/emoji/目录下创建新的文件夹，例如：

• douyin：存放抖音表情
• xiaohongshu：存放小红书表情

二、创建emoji.php接口文件

1. 创建文件

在/usr/themes/OneBlog/目录下创建emoji.php文件：

<?php
/**
 * 表情接口
 * 返回表情分类和表情列表
 */

// 表情文件夹路径
$emojiPath = __DIR__ . '/static/img/emoji/';

// 颜文字列表
$kaomoji = [
    '(✪ω✪)','(*^▽^*)','٩(๑❛ᴗ❛๑)۶',
    '(๑´ㅂ`๑) ','(◕ᴗ◕✿)',
    '(๑¯∀¯๑)','(＾ω＾)','(★ᴗ★)',
    '(*^__^*) ','(╯︵╰)','(T＿T)',
    '╥﹏╥','(｡•́︿•̀｡)','>_<',
    '(•ˇ‸ˇ•｡)','｡◕ᴗ◕｡','(´•༝•`)',
];

// 获取表情分类
$categories = [];
$dir = opendir($emojiPath);
while (($file = readdir($dir)) !== false) {
    if ($file != '.' && $file != '..' && is_dir($emojiPath . $file)) {
        $categories[] = $file;
    }
}
closedir($dir);

// 获取每个分类下的表情列表
$emojiData = [];
foreach ($categories as $category) {
    if ($category === 'kaomoji') {
        $emojiData['kaomoji'] = $kaomoji;
        continue;
    }
    $files = [];
    $categoryDir = opendir($emojiPath . $category);
    while (($file = readdir($categoryDir)) !== false) {
        if ($file != '.' && $file != '..' && pathinfo($file, PATHINFO_EXTENSION) === 'png') {
            $filename = pathinfo($file, PATHINFO_FILENAME);
            $files[] = $filename;
        }
    }
    closedir($categoryDir);
    // 按数字排序
    natsort($files);
    $emojiData[$category] = array_values($files);
}

// 添加颜文字分类
if (!isset($emojiData['kaomoji'])) {
    $emojiData['kaomoji'] = $kaomoji;
}

// 返回JSON格式
header('Content-Type: application/json; charset=utf-8');
echo json_encode($emojiData);
?>

三、修改emoji.js文件

1. 修改文件

打开/usr/themes/OneBlog/static/js/emoji.js文件，进行以下修改：

（1）修改变量定义

document.addEventListener('DOMContentLoaded', function() {
    var emojiBox = document.querySelector('.icon-emoji');
    if (!emojiBox) return; // 如果当前页面不存在表情按钮，则不执行该JS
    const richEditor = document.getElementById('rich-editor');
    const textarea = document.getElementById('textarea');
    const emojiBtn = document.getElementById('emoji-btn');
    const emojiPicker = document.getElementById('emoji-picker');
    const emojiContainer = document.querySelector('.emoji-container');
    const emojiCategoriesContainer = document.querySelector('.emoji-categories');
    const emojiBaseUrl = '/usr/themes/OneBlog/static/img/emoji/';
    let emojiData = {};
    let currentCategory = 'emotion';

（2）添加动态加载函数

// 动态加载表情分类和表情列表
function loadEmojiData() {
    fetch('/usr/themes/OneBlog/emoji.php')
        .then(response => response.json())
        .then(data => {
            emojiData = data;
            renderEmojiCategories();
            // 默认选中第一个分类
            const firstCategory = Object.keys(emojiData)[0] || 'emotion';
            currentCategory = firstCategory;
            loadEmojis(firstCategory);
            setActiveClass(firstCategory);
        })
        .catch(error => {
            console.error('加载表情数据失败:', error);
        });
}

// 渲染表情分类按钮
function renderEmojiCategories() {
    emojiCategoriesContainer.innerHTML = '';
    Object.keys(emojiData).forEach(category => {
        if (category !== 'kaomoji') {
            const button = document.createElement('button');
            button.type = 'button';
            button.className = 'emoji-category';
            button.setAttribute('data-category', category);
            button.textContent = getCategoryName(category);
            emojiCategoriesContainer.appendChild(button);
        }
    });
    // 添加颜文字分类
    const kaomojiButton = document.createElement('button');
    kaomojiButton.type = 'button';
    kaomojiButton.className = 'emoji-category';
    kaomojiButton.setAttribute('data-category', 'kaomoji');
    kaomojiButton.textContent = '颜文字';
    emojiCategoriesContainer.appendChild(kaomojiButton);
}

// 获取分类名称
function getCategoryName(category) {
    const categoryNames = {
        'douyin': '抖音',
        'xiaohongshu': '小红书',
        'emotion': '表情',
        'special': '特殊',
        'food': '食物',
        'travel': '旅行'
    };
    return categoryNames[category] || category;
}

（3）修改loadEmojis函数

function loadEmojis(category) {
    emojiContainer.innerHTML = '';
    currentCategory = category;
    const emojis = emojiData[category] || [];
    emojis.forEach(emoji => {
        if(category === 'kaomoji') {
            const span = document.createElement('span');
            span.textContent = emoji;
            span.className = 'kaomoji';
            emojiContainer.appendChild(span);
            span.addEventListener('click', () => {
                restoreSelection();
                insertNodeAtCursor(document.createTextNode(emoji));
                syncTextarea();
                saveSelection();
                emojiPicker.style.display = 'none';
            });
        } else {
            const img = document.createElement('img');
            img.src = `${emojiBaseUrl}${category}/${emoji}.png`;
            img.alt = `[emoji:${emoji}]`;
            img.className = 'biaoqing';
            img.setAttribute('data-emoji', emoji);
            img.setAttribute('data-category', category);
            emojiContainer.appendChild(img);
            img.addEventListener('click', () => {
                insertEmojiImg(emoji);
                emojiPicker.style.display = 'none';
            });
        }
    });
}

（4）修改insertEmojiImg函数

// 插入表情
function insertEmojiImg(emojiName) {
    restoreSelection();
    let img = document.createElement('img');
    img.src = `${emojiBaseUrl}${currentCategory}/${emojiName}.png`;
    img.alt = `[emoji:${emojiName}]`;
    img.className = 'biaoqing';
    img.setAttribute('data-emoji', emojiName);
    img.setAttribute('data-category', currentCategory);

    insertNodeAtCursor(img);
    // 光标放到表情后
    placeCaretAfterNode(img);
    syncTextarea();
    // 重新保存selection
    saveSelection();
}

（5）修改htmlToShortcode函数

function htmlToShortcode(html) {
    html = html.replace(/<div>|<br\s*\/?>/gi, '\n');
    html = html.replace(/<img[^>]*data-emoji="([a-zA-Z0-9_]+)"[^>]*data-category="([a-zA-Z0-9_]+)"[^>]*>/gi, function(_, emoji, category) {
        // 添加分类前缀
        const prefixMap = {
            'douyin': 'dy',
            'xiaohongshu': 'xh',
            'emotion': 'em',
            'special': 'sp',
            'food': 'fd',
            'travel': 'tr'
        };
        const prefix = prefixMap[category] || '';
        return `[emoji:${prefix}${emoji}]`;
    });
    let tmp = document.createElement('div');
    tmp.innerHTML = html;
    return tmp.textContent || tmp.innerText || '';
}

（6）修改事件监听

// emoji按钮，只负责弹窗
emojiBtn.addEventListener('click', (e) => {
    e.stopPropagation();
    if (emojiPicker.style.display === 'none') {
        emojiPicker.style.display = 'block';
        if (Object.keys(emojiData).length === 0) {
            loadEmojiData();
        } else {
            loadEmojis(currentCategory);
            setActiveClass(currentCategory);
        }
    } else {
        emojiPicker.style.display = 'none';
        clearActiveClass();
    }
});
// 使用事件委托，确保动态添加的按钮也能触发事件
emojiPicker.addEventListener('click', (event) => {
    if (event.target.classList.contains('emoji-category')) {
        event.preventDefault();
        const category = event.target.getAttribute('data-category');
        currentCategory = category;
        loadEmojis(category);
        setActiveClass(category);
    }
});

（7）修改clearActiveClass和setActiveClass函数

function clearActiveClass() {
    const allCategories = emojiCategoriesContainer.querySelectorAll('.emoji-category');
    allCategories.forEach(btn => btn.classList.remove('active'));
}
function setActiveClass(category) {
    const allCategories = emojiCategoriesContainer.querySelectorAll('.emoji-category');
    allCategories.forEach(button => {
        if (button.getAttribute('data-category') === category) {
            button.classList.add('active');
        } else {
            button.classList.remove('active');
        }
    });
}

四、修改parseEmojis函数

1. 修改文件

打开/usr/themes/OneBlog/functions.php文件，找到parseEmojis函数，进行以下修改：

//表情短代码解析
function parseEmojis($content) {
    // null、false等都转为空字符串，防止报错
    $content = (string)$content;
    $emojiPath = Helper::options()->siteUrl.'usr/themes/OneBlog/static/img/emoji/';
    
    // 表情分类映射，使用分类前缀来区分不同分类的表情
    $categoryMap = [
        'douyin' => 'dy',
        'xiaohongshu' => 'xh',
        'emotion' => 'em',
        'special' => 'sp',
        'food' => 'fd',
        'travel' => 'tr'
    ];
    
    return preg_replace_callback('/\[emoji:([a-zA-Z0-9_]+)\]/', function($matches) use ($emojiPath, $categoryMap) {
        $emojiName = $matches[1];
        $category = 'emotion';
        
        // 检查表情名称是否包含分类前缀
        foreach ($categoryMap as $cat => $prefix) {
            if (substr($emojiName, 0, strlen($prefix)) === $prefix) {
                $category = $cat;
                $emojiName = substr($emojiName, strlen($prefix));
                break;
            }
        }
        
        return '<img class="biaoqing" src="' . $emojiPath . $category . '/' . $emojiName . '.png" alt="' . $emojiName . '">';
    }, $content);
}

五、修改comments.php文件

1. 修改文件

打开/usr/themes/OneBlog/comments.php文件，找到表情分类按钮部分，进行以下修改：

<div class="emoji-categories">
    <!-- 表情分类按钮将动态加载 -->
</div>

六、后续添加表情分类的方法

1. 创建表情文件夹

在/usr/themes/OneBlog/static/img/emoji/目录下创建新的文件夹，例如animals

2. 添加表情图片

将PNG格式的表情图片放入新文件夹中，按数字顺序命名（如1.png、2.png等）

3. 更新分类前缀映射

• 在emoji.js文件中更新prefixMap：

  const prefixMap = {
      'douyin': 'dy',
      'xiaohongshu': 'xh',
      'animals': 'an' // 添加新分类的前缀
  };

• 在functions.php文件中更新categoryMap：

  $categoryMap = [
      'douyin' => 'dy',
      'xiaohongshu' => 'xh',
      'animals' => 'an' // 添加新分类的前缀
  ];

4. 更新分类名称映射（可选）

在emoji.js文件中更新getCategoryName函数：

function getCategoryName(category) {
    const categoryNames = {
        'douyin': '抖音',
        'xiaohongshu': '小红书',
        'animals': '动物' // 添加新分类的名称
    };
    return categoryNames[category] || category;
}

七、使用说明

1. 插入表情

• 点击表情分类标签，选择一个分类
• 点击表情，插入到评论框中
• 发布评论，表情会自动显示

2. 支持的表情分类

• douyin：抖音表情
• xiaohongshu：小红书表情
• emotion：普通表情
• special：特殊表情
• food：食物表情
• travel：旅行表情

3. 注意事项

• 表情图片必须为PNG格式
• 表情图片命名必须为数字，例如：1.png、2.png等
• 不同分类的表情图片可以使用相同的编号，系统会自动区分

八、常见问题

1. 表情无法显示

• 检查表情图片是否存在
• 检查表情图片格式是否为PNG
• 检查表情图片命名是否正确

2. 表情分类无法加载

• 检查emoji.php文件是否存在
• 检查emoji.php文件权限是否正确
• 检查表情文件夹是否存在

3. 表情无法插入

• 检查emoji.js文件是否正确加载
• 检查浏览器控制台是否有错误信息