Halo博客主题页脚遮挡评论表情框如何解决？

Halo版本：Halo 2.20.14

主题：Hao

评论组件：Halo官方组件（plugin-comment-widget）

BUG内容

在搭建博客的时候，博主发现评论功能的表情按钮在点击后弹出的表情框会被页脚遮挡，电脑端和手机端都有这个问题，影响观感和体验。如下图所示：

出现这个问题的原因在于评论区功能的表情框作为悬浮窗口没有指定z-index参数以设置页面层次，从而导致表情框被后面一层的网页内容遮挡。

解决方案

博主给出的方法是调整表情框显示的位置，Halo官方评论组件的表情框默认显示在表情按钮下方，可以使用JavaScript脚本将表情框位置调整到表情按钮上方来解决这个问题。

在博客控制台页面点击“设置——>代码注入”，找到”页脚“这栏，复制下方代码到其中,点击保存。

<!-- 评论表情框向上弹出 -->
<script>
document.querySelector('#content-inner').addEventListener('click', function handleClick(event) {
    if (event.target.tagName.toLowerCase() === 'comment-widget') {
        console.log("Emoji button clicked!");

        // 获取表情面板的元素
        const commentWidget = document.querySelector('comment-widget');
        if (commentWidget && commentWidget.shadowRoot) {
            const emojiButton = commentWidget.shadowRoot
                .querySelector('comment-form')
                .shadowRoot.querySelector('base-form')
                .shadowRoot.querySelector('.form__actions')
                .querySelector('emoji-button');
            
            if (emojiButton && emojiButton.shadowRoot) {
                const emojiPanel = emojiButton.shadowRoot.querySelector('.form__emoji-panel');
                
                if (emojiPanel) {
                    // 移除点击事件监听器，避免重复设置观察器
                    document.querySelector('#content-inner').removeEventListener('click', handleClick);

                    // 创建 MutationObserver 监听 style 属性的变化
                    const observer = new MutationObserver((mutations) => {
                        mutations.forEach((mutation) => {
                            if (mutation.attributeName === 'style') {
                                // 检查是否是 top 属性发生变化
                                const topValue = window.getComputedStyle(emojiPanel).top;
                                if (topValue !== '-22em') {
                                    emojiPanel.style.top = '-22em';
                                    console.log("Top style updated to -22em.");
                                }
                            }
                        });
                    });

                    // 监听 emojiPanel 的 style 属性变化
                    observer.observe(emojiPanel, {
                        attributes: true, // 监听属性的变化
                        attributeFilter: ['style'], // 仅监听 style 属性
                    });

                    // 设置 top 样式
                    emojiPanel.style.top = '-22em';
                    console.log("Initial top style set to -22em.");
                }
            }
        }
    }
});
</script>

然后打开博客，点击表情按钮，就能看到表情框弹出到表情按钮上方了。

参考链接：https://github.com/nineya/halo-theme-dream2.0/issues/131