评论区自定义表情包功能优化

甜橙酱

2025-10-02 06:55

147 阅读本文约806字，阅读需4分钟 1 评论

一、核心优化方向

UI 风格对齐：表情按钮改为评论框下方居中显示，表情包面板采用网格布局 + 分类切换；
支持自定义图片表情：按参考链接的目录结构加载本地图片表情包，而非系统 Emoji；
交互体验升级：添加表情包分类标签、hover 放大效果、表情代码插入（[emoji:表情名]格式）。

二、步骤 1：创建自定义表情包目录与配置文件

1.1 目录结构（按参考链接要求）

在模板目录下创建以下结构：

content/templates/你的模板名/
├─ assets/
│  ├─ images/
│  │  ├─ emoji_default/  # 默认表情包文件夹
│  │  │  ├─ info.json    # 表情包配置
│  │  │  ├─ icon.png     # 表情包分类图标（32x32px）
│  │  │  ├─ smile.png    # 表情图片1
│  │  │  ├─ laugh.png    # 表情图片2
│  │  │  └─ like.png     # 表情图片3
│  │  └─ emoji_custom/   # 自定义表情包文件夹（可新增）
│  │     ├─ info.json
│  │     ├─ icon.png
│  │     └─ ...
│  └─ emoji-config.php   # 表情包全局配置

1.2 编写表情包配置文件

① `emoji_default/info.json`（单个表情包配置）

{
    "name": "默认表情包",
    "prefix": "emoji-",
    "type": "png",
    "icon": "icon.png",
    "items": ["smile", "laugh", "like", "angry", "cry", "shy"]
}

name：表情包分类名称（显示在面板顶部）；
prefix：表情图片文件前缀（可选，若图片名有统一前缀）；
type：图片格式（png/jpg/gif）；
icon：分类切换图标路径；
items：表情图片名（不含后缀）。

② `emoji-config.php`（全局加载配置）

<?php
// 自定义表情包配置（参考链接格式）
$custom_emoji_packs = [
    [
        'name' => '默认表情包',
        'id' => 'emoji_default',
        'folder' => 'assets/images/emoji_default/',
        'prefix' => '',
        'default' => true  // 默认显示的表情包
    ],
    [
        'name' => '我的自定义表情',
        'id' => 'emoji_custom',
        'folder' => 'assets/images/emoji_custom/',
        'prefix' => '',
        'default' => false
    ]
];

// 加载表情包配置（供JS调用）
function get_emoji_packs() {
    global $custom_emoji_packs, $TEMPLATE_URL;
    $packs = [];
    foreach ($custom_emoji_packs as $pack) {
        $packs[] = [
            'id' => $pack['id'],
            'name' => $pack['name'],
            'folder' => $TEMPLATE_URL . $pack['folder'],
            'prefix' => $pack['prefix'],
            'default' => $pack['default']
        ];
    }
    return json_encode($packs);
}

三、步骤 2：修改评论表单 HTML 结构（适配参考链接 UI）

替换blog_comments_post函数中的评论表单部分，重点调整表情按钮位置与面板结构：

<?php
function blog_comments_post($logid, $ckname, $ckmail, $ckurl, $verifyCode, $allow_remark) {
    $isNeedChinese = Option::get('comment_needchinese');
    require_once TEMPLATE_PATH . 'assets/emoji-config.php'; // 引入表情包配置
?>
    <div class="comment-title"><i class="fa fa-comments-o mr-2"></i>评论</div>
    <div class="my-2em comment-body">
        <?php if (Option::get('iscomment') == 'n'): ?>
            <div class="comment-closed">博主关闭了评论</div>
        <?php elseif ($allow_remark == 'n'): ?>
            <div class="comment-closed">博主关闭了当前页面的评论</div>
        <?php elseif (Option::get('login_comment') == 'y' && ISLOGIN != 1): ?>
            <div class="comment-login">
                <div class="head">博主开启了登录后再评论，请登录后刷新本页！</div>
                <div class="body mt-1em flex-center">
                    <a class="button mx-1em" id="ajax-signin" href="<?= BLOG_URL ?>admin/">立即登录</a>
                    <a class="button mx-1em" id="ajax-signup" href="<?= BLOG_URL ?>admin/account.php?action=signup">注册帐号</a>
                </div>
            </div>
        <?php else: ?>
            <div class="comment-post">
                <form class="flex-column layui-form comment-form" method="post" name="commentForm" action="<?= BLOG_URL ?>index.php?action=addcom" id="comment-form">
                    <input type="hidden" name="gid" value="<?= $logid ?>">
                    <input type="hidden" name="pid" value="">

                    <!-- 访客信息（保持不变） -->
                    <?php if (User::isVisitor() && Option::get('login_comment') === 'n'): ?>
                        <div class="display-flex head mb-10">
                            <input class="comment-control comment-name" autocomplete="off" type="text" name="comname" maxlength="49" value="<?= $ckname ?>" placeholder="输入昵称（必填）" lay-verify="required">
                            <input class="comment-control comment-mail" autocomplete="off" type="text" name="commail" maxlength="128" value="<?= $ckmail ?>" placeholder="电子邮箱" lay-verify="email">
                            <input class="comment-control comment-url" autocomplete="off" type="text" name="comurl" maxlength="128" value="<?= $ckurl ?>" placeholder="个人主页" lay-verify="url">
                        </div>
                    <?php endif ?>

                    <!-- 评论框（宽度100%，无挤压） -->
                    <textarea class="comment-textarea w-full" name="comment" rows="6" placeholder="说点什么吧（必填）~" lay-verify="required<?php if ($isNeedChinese == 'y'): ?>|chinese<?php endif; ?>"></textarea>

                    <!-- 表情按钮（参考链接：评论框下方居中） -->
                    <div class="emoji-btn-container text-center mt-8">
                        <button type="button" id="emojiBtn" class="emoji-btn">
                            <svg viewBox="0 0 24 24" class="emoji-btn-icon">
                                <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z" fill="#666"></path>
                            </svg>
                            <span class="emoji-btn-text">表情</span>
                        </button>
                    </div>

                    <!-- 表情包面板（参考链接：居中显示+分类切换） -->
                    <div id="emojiPanel" class="emoji-panel hidden">
                        <!-- 表情包分类标签 -->
                        <div class="emoji-categories" id="emojiCategories">
                            <!-- JS动态加载分类 -->
                        </div>
                        <!-- 表情包列表（网格布局） -->
                        <div class="emoji-list" id="emojiList">
                            <!-- JS动态加载表情 -->
                        </div>
                    </div>

                    <!-- 提交区域（保持不变） -->
                    <div class="display-flex flex-warp foot justify-end mt-10">
                        <?php if (!empty($verifyCode)): ?>
                            <div class="display-flex items-center mr-10">
                                <img class="captcha" id="captcha" src="<?= BLOG_URL ?>include/lib/checkcode.php" alt="更换验证码">
                                <input name="imgcode" type="text" class="comment-control input-code mx-5" size="5" placeholder="验证码" lay-verify="required">
                            </div>
                        <?php endif; ?>
                        <button type="submit" class="button comment-submit">发送</button>
                    </div>
                </form>
            </div>
        <?php endif; ?>
    </div>
<?php } ?>

四、步骤 3：添加样式

在模板 CSS 文件中添加以下样式，实现 “简洁卡片 + 网格布局 + hover 效果”：

/* 1. 表情按钮样式（参考链接：评论框下方居中） */
.emoji-btn-container {
    text-align: center;
    margin: 8px 0;
}
.emoji-btn {
    display: inline-flex;
    align-items: center;
    padding: 6px 16px;
    border: 1px solid #e3e6f0;
    border-radius: 20px;
    background: #fff;
    color: #6e707e;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 14px;
}
.emoji-btn:hover {
    background: #f8f9fc;
    border-color: #d1d3e2;
}
.emoji-btn-icon {
    width: 16px;
    height: 16px;
    margin-right: 6px;
}
.emoji-btn-text {
    vertical-align: middle;
}

/* 2. 表情包面板样式（参考链接：卡片+阴影） */
.emoji-panel {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 100%;
    margin-top: 8px;
    width: 320px;
    padding: 12px;
    border: 1px solid #e3e6f0;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.075);
    z-index: 9999;
}
.emoji-panel.hidden {
    display: none;
}

/* 3. 表情包分类标签（参考链接：顶部横向排列） */
.emoji-categories {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    overflow-x: auto;
    padding-bottom: 4px;
}
.emoji-category {
    display: flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 16px;
    background: #f8f9fc;
    color: #6e707e;
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
}
.emoji-category.active {
    background: #4e73df;
    color: #fff;
}
.emoji-category img {
    width: 16px;
    height: 16px;
    margin-right: 4px;
}

/* 4. 表情包列表（参考链接：网格布局） */
.emoji-list {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
    max-height: 200px;
    overflow-y: auto;
}
.emoji-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: transform 0.2s;
}
.emoji-item:hover {
    background: #f8f9fc;
    transform: scale(1.1); /* 参考链接：hover放大效果 */
}
.emoji-item img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

/* 5. 评论框样式（确保不被挤压） */
.comment-textarea {
    width: 100% !important;
    padding: 12px;
    border: 1px solid #e3e6f0;
    border-radius: 8px;
    resize: vertical;
    box-sizing: border-box;
    font-size: 14px;
    line-height: 1.5;
}

七、效果与扩展说明

视觉对齐：表情按钮居中显示，表情包面板采用参考链接的 “分类标签 + 网格列表”，hover 有放大效果；
自定义扩展：新增表情包时，只需按目录结构添加文件夹 +info.json，在emoji-config.php中配置即可自动加载；
功能兼容：表情插入格式为[emoji:表情名]，后端自动解析为图片，支持动图（将type改为gif即可）。

如需进一步优化，可参考链接添加 “表情包搜索”“表情预览” 功能，或扩展更多分类。

上一篇：测试回复下载下一篇：测试购买链接地址仅供测试专用

甜橙酱情圣 Lv.6

😴🎉

21 天前