diff options
| author | Eltrac <hi@guhub.cn> | 2025-06-19 13:58:34 +0800 |
|---|---|---|
| committer | Eltrac <hi@guhub.cn> | 2025-06-19 13:58:34 +0800 |
| commit | a1bf685c4fb83e05bba3b1e89dd42ea59309cef2 (patch) | |
| tree | 25783631d50c61952cbb38731d9d85a1b34ba417 | |
| parent | db4122f2547e13471f566524916001815dea43fe (diff) | |
fix(like-button): 修复已点赞按钮仍会晃动的问题
避免在已点赞状态下添加 near-comments 类,并优化相关样式
Former-commit-id: b61f7a464a405809181fb72109120f62ccc42cd6
| -rw-r--r-- | layouts/partials/components/like-button.html | 22 |
1 files changed, 21 insertions, 1 deletions
diff --git a/layouts/partials/components/like-button.html b/layouts/partials/components/like-button.html index 02c084b8..aa665453 100644 --- a/layouts/partials/components/like-button.html +++ b/layouts/partials/components/like-button.html @@ -30,6 +30,11 @@ if (shouldHighlight !== isNearComments) { isNearComments = shouldHighlight; + // 如果已经点赞,不添加 near-comments 类(避免晃动) + if (containerEl.classList.contains('liked')) { + return; + } + if (isNearComments) { containerEl.classList.add('near-comments'); } else { @@ -54,6 +59,8 @@ if (localStorage.getItem("liked_" + pageId)) { btnEl.disabled = true; containerEl.classList.add("liked"); + // 移除可能存在的 near-comments 类 + containerEl.classList.remove('near-comments'); updateTooltip(); } }) @@ -65,7 +72,9 @@ window.sendLike = function(pageId) { if (localStorage.getItem("liked_" + pageId)) return; - umami.track('👍 Hit Like Button'); + if (window.location.hostname !== 'localhost') { + umami.track('👍 Hit Like Button'); + } // 添加点击效果 btnEl.classList.add("clicked"); @@ -80,6 +89,8 @@ countEl.innerText = data.likes ?? 1; btnEl.disabled = true; containerEl.classList.add("liked"); + // 移除 near-comments 类,停止晃动 + containerEl.classList.remove('near-comments'); updateTooltip(); }) .catch(() => { @@ -121,6 +132,15 @@ animation: none; } +/* 已点赞状态:保持最高不透明度,不再晃动 */ +.floating-like-container.liked { + opacity: 1 !important; +} + +.floating-like-container.liked.near-comments { + animation: none !important; +} + .floating-like-button { display: flex; flex-direction: column; |
