Allen2030 / 对fuwari主题的Twikoo评论区样式修复

--- interface Props { path: string; } import { commentConfig } from "@/config"; const config = { el: "#twikoo", path: Astro.props.path, envId: commentConfig.twikoo?.envId, lang: commentConfig.twikoo?.lang || "zh-CN", region: commentConfig.twikoo?.region, visitor: true, // 启用访问统计 }; --- <!-- 简化了配置部分的代码，实际上可以把配置文件统一写入fuwari的配置文件统一读取 --> <div id="twikoo"></div> <script define:vars={{ config }}> function loadTwikoo() { console.log('loadTwikoo function called'); // 不输出包含敏感信息的配置 const script = document.createElement("script"); script.src = "https://registry.npmmirror.com/twikoo/1.6.44/files/dist/twikoo.min.js"; script.defer = true; script.onload = () => { console.log('Twikoo script loaded, initializing...'); // 不输出包含敏感信息的配置 // 尝试多种环境ID格式// 在现有的脚本中添加以下修复代码 // 修复表情包定位和点击问题 function fixTwikooEmoji() { // 等待 Twikoo 完全加载 const checkExist = setInterval(function() { const buttons = document.querySelectorAll('#twikoo .tk-emoji-btn'); if (buttons && buttons.length) { clearInterval(checkExist); // 注入样式（id 防重复） if (!document.getElementById('twikoo-emoji-fix-style')) { const style = document.createElement('style'); style.id = 'twikoo-emoji-fix-style'; style.textContent = ` #twikoo .tk-emoji-popover { position: fixed !important; z-index: 99999 !important; transform: none !important; display: none !important; will-change: transform, top, left; } #twikoo .tk-emoji-popover.tk-emoji-popover-show { display: block !important; } /* 避免父容器溢出剪裁 */ #twikoo { overflow: visible !important; } `; document.head.appendChild(style); } // 用于重定位的辅助函数 const positionPopover = (btn, popover) => { if (!btn || !popover) return; const rect = btn.getBoundingClientRect(); const left = Math.max(8, rect.left); const top = rect.bottom + 6; // 与按钮下方稍微留隙 popover.style.left = left + 'px'; popover.style.top = top + 'px'; }; // 处理每个按钮，确保点击时定位到视口 buttons.forEach((btn) => { // 去重，避免重复绑定 if (btn.__twikooEmojiBound) return; btn.__twikooEmojiBound = true; btn.addEventListener('click', function(e) { e.stopPropagation(); const popover = document.querySelector('#twikoo .tk-emoji-popover'); if (!popover) return; // 切换显示 const shown = popover.classList.toggle('tk-emoji-popover-show'); if (shown) { positionPopover(btn, popover); } }); }); // 点击空白区域关闭 document.addEventListener('click', function(e) { if (!e.target.closest('#twikoo .tk-emoji-btn') && !e.target.closest('#twikoo .tk-emoji-popover')) { const popover = document.querySelector('#twikoo .tk-emoji-popover'); if (popover) popover.classList.remove('tk-emoji-popover-show'); } }); // 在滚动或调整大小时重定位当前打开的 popover const repositionIfShown = () => { const popover = document.querySelector('#twikoo .tk-emoji-popover'); if (!popover || !popover.classList.contains('tk-emoji-popover-show')) return; // 找到与之对应的按钮（靠近左上角的按钮） const buttons = Array.from(document.querySelectorAll('#twikoo .tk-emoji-btn')); let closest = null; let minDist = Infinity; const popRect = popover.getBoundingClientRect(); buttons.forEach((b) => { const r = b.getBoundingClientRect(); const dx = r.left - popRect.left; const dy = r.top - popRect.top; const d = Math.hypot(dx, dy); if (d < minDist) { minDist = d; closest = b; } }); if (closest) positionPopover(closest, popover); }; window.addEventListener('resize', repositionIfShown); window.addEventListener('scroll', repositionIfShown, { passive: true }); } }, 100); } // 在 DOM 加载完成后调用修复函数 window.addEventListener('DOMContentLoaded', function() { setTimeout(fixTwikooEmoji, 2000); // 给 Twikoo 更多时间初始化 }); // 在 Twikoo 初始化完成后再执行一次 document.addEventListener("loadComment", () => { setTimeout(fixTwikooEmoji, 1000); }, { once: true }); const originalEnvId = config.envId; const envIdWithoutProtocol = originalEnvId ? originalEnvId.replace(/^https?:\/\//, '') : ''; // 尝试使用原始URL try { twikoo.init({ ...config, envId: originalEnvId }); } catch (error) { // 尝试使用不带协议的URL try { twikoo.init({ ...config, envId: envIdWithoutProtocol }); } catch (error) { // 最后尝试使用一个简单的字符串 try { // 从原始envId中提取域名部分作为简单ID const simpleEnvId = originalEnvId ? originalEnvId.replace(/^https?:\/\//, '').split('.')[0] : 'twikoo-env'; twikoo.init({ ...config, envId: simpleEnvId }); } catch (error) { // 初始化失败，静默处理 } } } // 全面改进的移动端点击处理 // 存储触摸开始的信息 let touchStartInfo = { target: null, x: 0, y: 0, time: 0, isScrolling: false }; // 添加触摸移动事件处理 const handleTouchMove = function(e) { if (!touchStartInfo.target) return; // 计算移动距离 const touchMoveX = e.touches[0].clientX; const touchMoveY = e.touches[0].clientY; const moveDistance = Math.sqrt( Math.pow(touchMoveX - touchStartInfo.x, 2) + Math.pow(touchMoveY - touchStartInfo.y, 2) ); // 如果移动距离超过阈值，标记为滑动操作 if (moveDistance > 10) { touchStartInfo.isScrolling = true; } }; const preventDefaultForTwikoo = function(e) { const target = e.target.closest('#twikoo button, #twikoo a'); if (target) { // 特别处理href="#"的链接，这些链接会导致页面跳转到顶部 if (target.tagName === 'A' && (target.getAttribute('href') === '#' || target.getAttribute('href') === '' || target.getAttribute('href') === 'javascript:void(0)' || target.getAttribute('href') === 'javascript:;')) { // 替换href属性，防止导航到页面顶部 if (target.getAttribute('original-href') === null) { target.setAttribute('original-href', target.getAttribute('href')); } target.setAttribute('href', 'javascript:void(0);'); } // 处理触摸开始事件 if (e.type === 'touchstart') { // 记录触摸开始的目标元素和位置 touchStartInfo.target = target; touchStartInfo.x = e.touches[0].clientX; touchStartInfo.y = e.touches[0].clientY; touchStartInfo.time = Date.now(); touchStartInfo.isScrolling = false; // 只对空链接阻止默认行为，允许按钮正常工作 if (target.tagName === 'A' && (target.getAttribute('href') === '#' || target.getAttribute('href') === '' || target.getAttribute('href') === 'javascript:void(0)' || target.getAttribute('href') === 'javascript:;')) { e.preventDefault(); } } // 处理触摸结束事件 if (e.type === 'touchend') { // 如果被标记为滑动操作，不触发点击 if (touchStartInfo.isScrolling) { // 重置触摸信息 touchStartInfo = { target: null, x: 0, y: 0, time: 0, isScrolling: false }; return; } // 计算触摸的移动距离和时间 const touchEndX = e.changedTouches[0].clientX; const touchEndY = e.changedTouches[0].clientY; const touchEndTime = Date.now(); const moveDistance = Math.sqrt( Math.pow(touchEndX - touchStartInfo.x, 2) + Math.pow(touchEndY - touchStartInfo.y, 2) ); const touchDuration = touchEndTime - touchStartInfo.time; // 检查触摸结束时的元素是否与开始时相同 const isSameTarget = touchStartInfo.target === target; // 设置阈值：移动距离小于10px且触摸时间小于300ms视为点击 const isValidTap = moveDistance < 10 && touchDuration < 300; // 只有当触摸结束时的元素与开始时相同，且移动距离小于阈值时，才触发点击 if (isSameTarget && isValidTap) { // 只对空链接阻止默认行为，允许按钮正常工作 if (target.tagName === 'A' && (target.getAttribute('href') === '#' || target.getAttribute('href') === '' || target.getAttribute('href') === 'javascript:void(0)' || target.getAttribute('href') === 'javascript:;')) { e.preventDefault(); // 如果链接有onclick处理函数，手动触发它 if (typeof target.onclick === 'function') { target.onclick.call(target); } } // 不再阻止按钮的默认行为 } // 重置触摸信息 touchStartInfo = { target: null, x: 0, y: 0, time: 0, isScrolling: false }; } } }; // 添加事件监听器 document.addEventListener('touchstart', preventDefaultForTwikoo, {passive: false, capture: true}); document.addEventListener('touchmove', handleTouchMove, {passive: true, capture: true}); document.addEventListener('touchend', preventDefaultForTwikoo, {passive: false, capture: true}); document.addEventListener('click', function(e) { const target = e.target.closest('#twikoo a[href="#"]'); if (target) { e.preventDefault(); e.stopPropagation(); } }, {capture: true}); // 在Twikoo初始化完成后添加事件处理 setTimeout(() => { setupCommentEventHandlers(); }, 1000); // 给Twikoo一些时间来渲染评论区 }; script.onerror = (error) => { // Twikoo 脚本加载失败，静默处理 }; document.body.appendChild(script); } // 监听加载评论事件 document.addEventListener("loadComment", () => { loadTwikoo(); }, { once: true }); // 页面加载完成后自动加载Twikoo（作为备用方案） window.addEventListener('DOMContentLoaded', () => { console.log('DOMContentLoaded event triggered'); // 检查是否已经加载过Twikoo if (!document.querySelector('script[src*="twikoo.min.js"]')) { console.log('Twikoo not loaded yet, loading now...'); loadTwikoo(); } }); console.log('Twikoo component initialized'); // 设置评论区事件处理函数 function setupCommentEventHandlers() { console.log('Setting up comment event handlers'); // 移除之前可能存在的事件监听器 document.removeEventListener('click', handleCommentClick); // 添加新的事件监听器 document.addEventListener('click', handleCommentClick); // 使用MutationObserver监听DOM变化 const observer = new MutationObserver((mutations) => { // 当DOM变化时，确保所有新添加的按钮都被正确处理 console.log('DOM mutations detected in comment area'); }); // 开始观察评论区的DOM变化 const twikooElement = document.getElementById('twikoo'); if (twikooElement) { observer.observe(twikooElement, { childList: true, subtree: true, attributes: true, attributeFilter: ['href', 'onclick'] }); console.log('MutationObserver started for #twikoo element'); } // 直接修改所有评论区内的链接和按钮 fixAllCommentButtons(); } // 处理评论区内的点击事件 function handleCommentClick(event) { // 检查点击事件是否发生在评论区内 const twikooElement = event.target.closest('#twikoo'); if (!twikooElement) return; // 检查点击的元素是否是按钮或链接 const clickedElement = event.target.closest('button, a'); if (!clickedElement) return; // 获取原始点击事件的目标元素 const originalTarget = event.target; // 检查是否是评论提交按钮或其他特殊按钮 const isSubmitButton = clickedElement.classList.contains('tk-submit') || clickedElement.classList.contains('el-button--primary') || clickedElement.getAttribute('type') === 'submit'; // 检查是否是有效的外部链接 const href = clickedElement.getAttribute('href'); const isExternalLink = href && href.startsWith('http') && !href.includes('#'); // 只阻止空链接的默认行为，允许其他按钮正常工作 if (clickedElement.tagName === 'A' && (href === '#' || href === '' || href === 'javascript:void(0)' || href === 'javascript:;')) { event.preventDefault(); console.log('Prevented default action for empty link in comment area'); // 如果元素有onclick属性或事件监听器，手动触发点击逻辑但不导航 if (typeof clickedElement.onclick === 'function') { console.log('Element has onclick handler, executing custom logic without navigation'); clickedElement.onclick.call(clickedElement); } } } // 修复所有评论区内的按钮 function fixAllCommentButtons() { console.log('Fixing all comment buttons'); const twikooElement = document.getElementById('twikoo'); if (!twikooElement) return; // 只修复空链接，避免干扰其他正常链接 const links = twikooElement.querySelectorAll('a'); links.forEach(link => { const href = link.getAttribute('href'); if (href === '#' || href === '' || href === 'javascript:void(0)') { // 替换href属性，防止导航到页面顶部 link.setAttribute('href', 'javascript:void(0);'); link.addEventListener('click', (e) => { e.preventDefault(); console.log('Prevented navigation for empty link'); // 如果链接有onclick处理函数，手动触发它 if (typeof link.onclick === 'function') { link.onclick.call(link); } }); } }); // 不再阻止按钮的默认行为，让它们正常工作 console.log('Fixed all comment buttons'); } // 初始的事件监听器设置 - 只处理空链接 document.addEventListener('click', function(event) { // 检查点击事件是否发生在评论区内 if (event.target.closest('#twikoo')) { // 检查点击的元素是否是链接 const clickedElement = event.target.closest('a'); if (clickedElement) { // 如果是链接且href为#或javascript:void(0)等，阻止默认行为 if (clickedElement.getAttribute('href') === '#' || clickedElement.getAttribute('href') === 'javascript:void(0)' || clickedElement.getAttribute('href') === '') { event.preventDefault(); console.log('Prevented default action for empty link in comment area'); // 如果链接有onclick处理函数，手动触发它 if (typeof clickedElement.onclick === 'function') { clickedElement.onclick.call(clickedElement); } } } // 不再阻止按钮的默认行为，让它们正常工作 } }); </script>