halo评论表情问题部分解决

页脚注入

 <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>

一键解决halo博客评论组件表情被遮挡的BUG | 余劫于人间渡