diff options
| -rw-r--r-- | assets/css/components/_post-tabs.scss | 206 | ||||
| -rw-r--r-- | assets/css/content.scss | 8 | ||||
| -rw-r--r-- | assets/css/global.scss (renamed from assets/css/index.scss) | 5 | ||||
| -rw-r--r-- | assets/css/like-button.css | 157 | ||||
| -rw-r--r-- | assets/js/like-button.js | 109 | ||||
| -rw-r--r-- | layouts/fictions/single.html | 1 | ||||
| -rw-r--r-- | layouts/library/single.html | 1 | ||||
| -rw-r--r-- | layouts/partials/components/like-button.html | 23 | ||||
| -rw-r--r-- | layouts/partials/components/post-tabs.html | 241 | ||||
| -rw-r--r-- | layouts/partials/head/css.html | 8 |
10 files changed, 237 insertions, 522 deletions
diff --git a/assets/css/components/_post-tabs.scss b/assets/css/components/_post-tabs.scss new file mode 100644 index 00000000..475fc12d --- /dev/null +++ b/assets/css/components/_post-tabs.scss @@ -0,0 +1,206 @@ +.post-actions-container { + margin: 2rem 0 1rem 0; +} + +.post-actions-nav { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 1.5rem; +} + +.left-actions { + display: flex; + gap: 0.5rem; +} + +.right-actions { + display: flex; + gap: 0.25rem; +} + +.action-btn { + display: flex; + align-items: center; + justify-content: center; + gap: 6px; + min-width: 48px; + height: 48px; + padding: 0 8px; + border: none; + background: transparent; + color: #666; + cursor: pointer; + text-decoration: none; + position: relative; + transition: all 0.2s ease; +} + +.action-btn:hover { + background: rgba(0, 0, 0, 0.05); + border-radius: 8px; +} + +/* 右侧小按钮样式 */ +.small-btn { + min-width: 32px; + height: 32px; + padding: 0 4px; +} + +.small-btn:hover { + background: transparent; + opacity: 0.7; +} + +/* 图标样式 */ +.icon { + filter: invert(0.4); + flex-shrink: 0; +} + +/* Tooltip 样式 */ +.action-btn::before { + content: attr(title); + position: absolute; + bottom: 100%; + left: 50%; + transform: translateX(-50%) translateY(5px); + background: rgba(0, 0, 0, 0.8); + color: white; + padding: 6px 10px; + border-radius: 4px; + font-size: 12px; + white-space: nowrap; + opacity: 0; + visibility: hidden; + transition: all 0.3s ease; + pointer-events: none; + margin-bottom: 8px; + z-index: 1000; +} + +.action-btn:hover::before { + opacity: 1; + visibility: visible; + transform: translateX(-50%) translateY(0); +} + +.like-button-container { + position: relative; +} + +.like-icon { + filter: invert(0.4); + flex-shrink: 0; + transition: all 0.3s ease; +} + +.liked .like-icon { + filter: brightness(0) saturate(100%) invert(8%) sepia(100%) saturate(7500%) hue-rotate(0deg) brightness(70%) contrast(150%); + animation: heartbeat 1.5s ease-in-out infinite; +} + +.count-badge { + font-size: 12px; + font-weight: bold; + color: #666; + min-width: 16px; + text-align: center; + background: rgba(255, 255, 255, 0.9); + border-radius: 10px; + padding: 2px 6px; + box-shadow: 0 1px 3px rgba(0,0,0,0.1); +} + +.liked .count-badge { + color: #8B0000; +} + +.comments-section { + margin-top: 1rem; +} + +/* 心脏搏动动画 */ +@keyframes heartbeat { + 0%, 100% { transform: scale(1); } + 25% { transform: scale(1.1); } + 50% { transform: scale(1.2); } + 75% { transform: scale(1.1); } +} + +/* 暗色主题适配 */ +@media (prefers-color-scheme: dark) { + .action-btn { + color: #999; + } + + .action-btn:hover { + background: rgba(255, 255, 255, 0.05); + } + + .small-btn:hover { + background: transparent; + opacity: 0.7; + } + + /* 暗色模式下的图标滤镜 */ + .icon { + filter: invert(0.7) brightness(1.2); + } + + .like-icon { + filter: invert(0.7) brightness(1.2); + } + + .liked .like-icon { + filter: brightness(0) saturate(100%) invert(8%) sepia(100%) saturate(7500%) hue-rotate(0deg) brightness(70%) contrast(150%); + animation: heartbeat 1.5s ease-in-out infinite; + } + + .action-btn::before { + background: rgba(255, 255, 255, 0.9); + color: #000; + } + + .count-badge { + color: #999; + background: rgba(0, 0, 0, 0.7); + } +} + +/* 移动端适配 */ +@media (max-width: 768px) { + .post-actions-nav { + gap: 0.5rem; + } + + .left-actions { + gap: 0.5rem; + } + + .right-actions { + gap: 0.25rem; + } + + .action-btn { + min-width: 44px; + height: 44px; + padding: 0 6px; + } + + .small-btn { + min-width: 28px; + height: 28px; + padding: 0 2px; + } + + .action-btn::before { + left: 50%; + transform: translateX(-50%) translateY(5px); + } + + .action-btn:hover::before { + transform: translateX(-50%) translateY(0); + } +} diff --git a/assets/css/content.scss b/assets/css/content.scss new file mode 100644 index 00000000..65a4339c --- /dev/null +++ b/assets/css/content.scss @@ -0,0 +1,8 @@ +@import "utils/mixins"; + +@import "components/post"; +@import "components/post-tabs"; +@import "components/comment"; + +@import "libraries/littlefoot"; +@import "libraries/fancybox"; diff --git a/assets/css/index.scss b/assets/css/global.scss index b3cec12c..e2f5126f 100644 --- a/assets/css/index.scss +++ b/assets/css/global.scss @@ -8,13 +8,8 @@ @import "components/pages"; @import "components/taxonomy"; @import "components/postlist"; -@import "components/post"; -@import "components/comment"; @import "components/shortcodes"; @import "components/card"; @import "components/fictions"; @import "components/library"; @import "components/footer"; - -@import "libraries/littlefoot"; -@import "libraries/fancybox"; diff --git a/assets/css/like-button.css b/assets/css/like-button.css deleted file mode 100644 index f26c776d..00000000 --- a/assets/css/like-button.css +++ /dev/null @@ -1,157 +0,0 @@ -.floating-like-container { - position: fixed; - bottom: 30px; - right: 30px; - z-index: 1000; - opacity: 0.3; - transition: all 0.3s ease; -} - -.floating-like-container:hover { - opacity: 1; -} - -.floating-like-container.near-comments { - opacity: 0.6; - animation: gentle-shake 2s ease-in-out infinite; -} - -.floating-like-container.near-comments:hover { - opacity: 1; - 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; - align-items: center; - cursor: pointer; - background: none; - border: none; - padding: 8px; - transition: all 0.3s ease; - position: relative; -} - -.floating-like-button:hover { - transform: scale(1.1); -} - -/* 已点赞状态下禁用hover放大效果 */ -.liked .floating-like-button:hover { - transform: none; -} - -.floating-like-button.clicked { - transform: scale(0.9); -} - -.floating-like-button:disabled { - cursor: not-allowed; -} - -#like-button-icon { - width: 32px; - height: 32px; - transition: all 0.3s ease; - filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2)); - @media (prefers-color-scheme:dark) { - filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2)) invert(1); - } -} - -.liked #like-button-icon { - filter: brightness(0) saturate(100%) invert(8%) sepia(100%) saturate(7500%) hue-rotate(0deg) brightness(70%) contrast(150%) drop-shadow(0 2px 4px rgba(0,0,0,0.2)); - animation: heartbeat 1.5s ease-in-out infinite; - @media (prefers-color-scheme:dark) { - filter: brightness(0) saturate(100%) invert(8%) sepia(100%) saturate(7500%) hue-rotate(0deg) brightness(70%) contrast(150%) drop-shadow(0 2px 4px rgba(0,0,0,0.2)); - } -} - -.like-count-display { - margin-top: 4px; - font-size: 12px; - font-weight: bold; - color: var(--secondary-text-color); - text-align: center; - min-width: 20px; - background: rgba(255, 255, 255, 0.9); - border-radius: 10px; - padding: 2px 6px; - box-shadow: 0 1px 3px rgba(0,0,0,0.1); -} - -.liked .like-count-display { - color: #8B0000; -} - -/* 悬浮提示样式 */ -.floating-like-button::before { - content: attr(title); - position: absolute; - bottom: 100%; - right: 0; - background: rgba(0, 0, 0, 0.8); - color: white; - padding: 6px 10px; - border-radius: 4px; - font-size: 12px; - white-space: nowrap; - opacity: 0; - visibility: hidden; - transform: translateY(5px); - transition: all 0.3s ease; - pointer-events: none; - margin-bottom: 8px; -} - -.floating-like-button:hover::before { - opacity: 1; - visibility: visible; - transform: translateY(0); -} - -/* 动画定义 */ -@keyframes gentle-shake { - 0%, 100% { transform: translateX(0); } - 25% { transform: translateX(-2px); } - 75% { transform: translateX(2px); } -} - -@keyframes heartbeat { - 0%, 100% { transform: scale(1); } - 25% { transform: scale(1.1); } - 50% { transform: scale(1.2); } - 75% { transform: scale(1.1); } -} - -/* 移动端适配 */ -@media screen and (max-width: 768px) { - .floating-like-container { - bottom: 20px; - right: 20px; - } - - #like-button-icon { - width: 28px; - height: 28px; - } - - .floating-like-button::before { - right: -10px; - transform: translateX(50%) translateY(5px); - } - - .floating-like-button:hover::before { - transform: translateX(50%) translateY(0); - } -} diff --git a/assets/js/like-button.js b/assets/js/like-button.js deleted file mode 100644 index e03e5447..00000000 --- a/assets/js/like-button.js +++ /dev/null @@ -1,109 +0,0 @@ -(function() { - // 获取页面ID（需要在HTML中设置） - const pageId = window.likeButtonPageId; - if (!pageId) { - console.error('Like button: pageId not found'); - return; - } - - const countEl = document.getElementById("like-count-" + pageId); - const btnEl = document.getElementById("like-btn-" + pageId); - const containerEl = document.getElementById("like-container-" + pageId); - - if (!countEl || !btnEl || !containerEl) { - console.error('Like button: required elements not found'); - return; - } - - let isNearComments = false; - - function checkScrollPosition() { - const commentsSection = document.querySelector('.post-comments'); - if (!commentsSection) return; - - const rect = commentsSection.getBoundingClientRect(); - const windowHeight = window.innerHeight; - - // 当评论区进入视窗下半部分时触发 - const shouldHighlight = rect.top < windowHeight * 0.8; - - if (shouldHighlight !== isNearComments) { - isNearComments = shouldHighlight; - // 如果已经点赞，不添加 near-comments 类（避免晃动） - if (containerEl.classList.contains('liked')) { - return; - } - - if (isNearComments) { - containerEl.classList.add('near-comments'); - } else { - containerEl.classList.remove('near-comments'); - } - } - } - - function updateTooltip() { - if (containerEl.classList.contains('liked')) { - btnEl.setAttribute('title', btnEl.getAttribute('data-liked-title')); - } else { - btnEl.setAttribute('title', '为这篇文章献上心脏'); - } - } - - function fetchLikes() { - fetch("https://like.guhub.cn/like/" + pageId) - .then(resp => resp.json()) - .then(data => { - countEl.innerText = data.likes ?? 0; - if (localStorage.getItem("liked_" + pageId)) { - btnEl.disabled = true; - containerEl.classList.add("liked"); - // 移除可能存在的 near-comments 类 - containerEl.classList.remove('near-comments'); - updateTooltip(); - } - }) - .catch(() => { - countEl.innerText = "❌"; - }); - } - - window.sendLike = function(pageId) { - if (localStorage.getItem("liked_" + pageId)) return; - - if (window.location.hostname !== 'localhost') { - if (typeof umami !== 'undefined') { - umami.track('👍 Hit Like Button'); - } - } - - // 添加点击效果 - btnEl.classList.add("clicked"); - setTimeout(() => { - btnEl.classList.remove("clicked"); - }, 300); - - fetch("https://like.guhub.cn/like/" + pageId, { method: "POST" }) - .then(resp => resp.json()) - .then(data => { - localStorage.setItem("liked_" + pageId, "1"); - countEl.innerText = data.likes ?? 1; - btnEl.disabled = true; - containerEl.classList.add("liked"); - // 移除 near-comments 类，停止晃动 - containerEl.classList.remove('near-comments'); - updateTooltip(); - }) - .catch(() => { - alert("点赞失败，请稍后再试"); - }); - }; - - // 监听滚动事件 - window.addEventListener('scroll', checkScrollPosition); - window.addEventListener('resize', checkScrollPosition); - - // 初始化 - fetchLikes(); - checkScrollPosition(); -})();
\ No newline at end of file diff --git a/layouts/fictions/single.html b/layouts/fictions/single.html index e503f901..83db7d60 100644 --- a/layouts/fictions/single.html +++ b/layouts/fictions/single.html @@ -21,7 +21,6 @@ </div> <!-- Comment --> - {{ partial "components/like-button.html" . }} {{ partial "components/comment.html" . }} </article> {{ end }} diff --git a/layouts/library/single.html b/layouts/library/single.html index c6797b0c..1f051da7 100644 --- a/layouts/library/single.html +++ b/layouts/library/single.html @@ -35,7 +35,6 @@ <p>于 {{ partial "components/date" . }} 读完</p> </div> </div> - {{ partial "components/like-button.html" . }} {{ partial "components/comment.html" . }} </article> {{ end }} diff --git a/layouts/partials/components/like-button.html b/layouts/partials/components/like-button.html deleted file mode 100644 index b94b6a26..00000000 --- a/layouts/partials/components/like-button.html +++ /dev/null @@ -1,23 +0,0 @@ -<div class="floating-like-container" id="like-container-{{ .File.UniqueID | urlize }}"> - <div class="floating-like-button" - onclick="sendLike('{{ .File.UniqueID | urlize }}')" - id="like-btn-{{ .File.UniqueID | urlize }}" - title="为这篇文章献上心脏" - data-liked-title="你已经献上心脏了"> - <img id="like-button-icon" src="/img/heart-organ.svg" class="invert-if-dark" alt="点赞" /> - <div class="like-count-display" id="like-count-{{ .File.UniqueID | urlize }}">...</div> - </div> -</div> - -<!-- 内嵌CSS样式 --> -{{ with resources.Get "css/like-button.css" | minify }} -<style>{{ .Content | safeCSS }}</style> -{{ end }} - -<!-- 设置页面ID并内嵌JavaScript --> -<script> - window.likeButtonPageId = "{{ .File.UniqueID | urlize }}"; -</script> -{{ with resources.Get "js/like-button.js" | minify }} -<script>{{ .Content | safeJS }}</script> -{{ end }} diff --git a/layouts/partials/components/post-tabs.html b/layouts/partials/components/post-tabs.html index cb377fe4..9a714491 100644 --- a/layouts/partials/components/post-tabs.html +++ b/layouts/partials/components/post-tabs.html @@ -6,7 +6,7 @@ <img src="/img/comments.svg" width="20" height="20" alt="评论" class="icon" /> <span class="count-badge" id="comment-count">...</span> </button> - + <!-- 点赞按钮 --> <div class="like-button-container" id="like-container-{{ .File.UniqueID | urlize }}"> <button class="action-btn like-btn" @@ -19,7 +19,7 @@ </button> </div> </div> - + <div class="right-actions"> <a href="https://t.me/teaparty418" target="_blank" class="action-btn small-btn" title="Telegram 群组" data-umami-event="✈️ Click Telegram link from post tabs"> <img src="/img/paper-plane.svg" width="16" height="16" alt="Telegram" class="icon" /> @@ -36,221 +36,12 @@ </div> </div> -<style> -.post-actions-container { - margin: 2rem 0 1rem 0; -} - -.post-actions-nav { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 1.5rem; -} - -.left-actions { - display: flex; - gap: 0.5rem; -} - -.right-actions { - display: flex; - gap: 0.25rem; -} - -.action-btn { - display: flex; - align-items: center; - justify-content: center; - gap: 6px; - min-width: 48px; - height: 48px; - padding: 0 8px; - border: none; - background: transparent; - color: #666; - cursor: pointer; - text-decoration: none; - position: relative; - transition: all 0.2s ease; -} - -.action-btn:hover { - background: rgba(0, 0, 0, 0.05); - border-radius: 8px; -} - -/* 右侧小按钮样式 */ -.small-btn { - min-width: 32px; - height: 32px; - padding: 0 4px; -} - -.small-btn:hover { - background: transparent; - opacity: 0.7; -} - -/* 图标样式 */ -.icon { - filter: invert(0.4); - flex-shrink: 0; -} - -/* Tooltip 样式 */ -.action-btn::before { - content: attr(title); - position: absolute; - bottom: 100%; - left: 50%; - transform: translateX(-50%) translateY(5px); - background: rgba(0, 0, 0, 0.8); - color: white; - padding: 6px 10px; - border-radius: 4px; - font-size: 12px; - white-space: nowrap; - opacity: 0; - visibility: hidden; - transition: all 0.3s ease; - pointer-events: none; - margin-bottom: 8px; - z-index: 1000; -} - -.action-btn:hover::before { - opacity: 1; - visibility: visible; - transform: translateX(-50%) translateY(0); -} - -.like-button-container { - position: relative; -} - -.like-icon { - filter: invert(0.4); - flex-shrink: 0; - transition: all 0.3s ease; -} - -.liked .like-icon { - filter: brightness(0) saturate(100%) invert(8%) sepia(100%) saturate(7500%) hue-rotate(0deg) brightness(70%) contrast(150%); - animation: heartbeat 1.5s ease-in-out infinite; -} - -.count-badge { - font-size: 12px; - font-weight: bold; - color: #666; - min-width: 16px; - text-align: center; - background: rgba(255, 255, 255, 0.9); - border-radius: 10px; - padding: 2px 6px; - box-shadow: 0 1px 3px rgba(0,0,0,0.1); -} - -.liked .count-badge { - color: #8B0000; -} - -.comments-section { - margin-top: 1rem; -} - -/* 心脏搏动动画 */ -@keyframes heartbeat { - 0%, 100% { transform: scale(1); } - 25% { transform: scale(1.1); } - 50% { transform: scale(1.2); } - 75% { transform: scale(1.1); } -} - -/* 暗色主题适配 */ -@media (prefers-color-scheme: dark) { - .action-btn { - color: #999; - } - - .action-btn:hover { - background: rgba(255, 255, 255, 0.05); - } - - .small-btn:hover { - background: transparent; - opacity: 0.7; - } - - /* 暗色模式下的图标滤镜 */ - .icon { - filter: invert(0.7) brightness(1.2); - } - - .like-icon { - filter: invert(0.7) brightness(1.2); - } - - .liked .like-icon { - filter: brightness(0) saturate(100%) invert(8%) sepia(100%) saturate(7500%) hue-rotate(0deg) brightness(70%) contrast(150%); - animation: heartbeat 1.5s ease-in-out infinite; - } - - .action-btn::before { - background: rgba(255, 255, 255, 0.9); - color: #000; - } - - .count-badge { - color: #999; - background: rgba(0, 0, 0, 0.7); - } -} - -/* 移动端适配 */ -@media (max-width: 768px) { - .post-actions-nav { - gap: 0.5rem; - } - - .left-actions { - gap: 0.5rem; - } - - .right-actions { - gap: 0.25rem; - } - - .action-btn { - min-width: 44px; - height: 44px; - padding: 0 6px; - } - - .small-btn { - min-width: 28px; - height: 28px; - padding: 0 2px; - } - - .action-btn::before { - left: 50%; - transform: translateX(-50%) translateY(5px); - } - - .action-btn:hover::before { - transform: translateX(-50%) translateY(0); - } -} -</style> - <script> // 评论展开/收起功能 document.addEventListener('DOMContentLoaded', function() { const commentsToggle = document.getElementById('comments-toggle'); const commentsSection = document.getElementById('comments-section'); - + if (commentsToggle && commentsSection) { commentsToggle.addEventListener('click', function() { if (commentsSection.style.display === 'none') { @@ -268,20 +59,20 @@ document.addEventListener('DOMContentLoaded', function() { function fetchGiscusCommentCount() { const commentCountEl = document.getElementById('comment-count'); if (!commentCountEl) return; - + // 设置初始值 commentCountEl.textContent = '0'; - + // 监听 Giscus 的消息事件 window.addEventListener('message', function(event) { if (event.origin !== 'https://giscus.app') return; - + const giscusData = event.data; - + // 检查是否为 IMetadataMessage - 数据结构是 {giscus: {discussion: {...}}} if (giscusData.giscus && giscusData.giscus.discussion) { const discussion = giscusData.giscus.discussion; - + // 计算总评论数：主评论数 + 回复数 const totalComments = (discussion.totalCommentCount || 0) + (discussion.totalReplyCount || 0); commentCountEl.textContent = totalComments.toString(); @@ -295,15 +86,15 @@ function fetchGiscusCommentCount() { if (!pageId) { return; } - + const countEl = document.getElementById("like-count-" + pageId); const btnEl = document.getElementById("like-btn-" + pageId); const containerEl = document.getElementById("like-container-" + pageId); - + if (!countEl || !btnEl || !containerEl) { return; } - + function updateTooltip() { if (containerEl.classList.contains('liked')) { btnEl.setAttribute('title', btnEl.getAttribute('data-liked-title')); @@ -311,7 +102,7 @@ function fetchGiscusCommentCount() { btnEl.setAttribute('title', '为这篇文章献上心脏'); } } - + function fetchLikes() { fetch("https://like.guhub.cn/like/" + pageId) .then(resp => resp.json()) @@ -327,7 +118,7 @@ function fetchGiscusCommentCount() { countEl.innerText = "❌"; }); } - + window.sendLike = function(pageId) { if (localStorage.getItem("liked_" + pageId)) return; @@ -336,7 +127,7 @@ function fetchGiscusCommentCount() { umami.track('👍 Hit Like Button'); } } - + fetch("https://like.guhub.cn/like/" + pageId, { method: "POST" }) .then(resp => resp.json()) .then(data => { @@ -350,7 +141,7 @@ function fetchGiscusCommentCount() { alert("点赞失败，请稍后再试"); }); }; - + // 初始化 fetchLikes(); })(); @@ -359,4 +150,4 @@ function fetchGiscusCommentCount() { document.addEventListener('DOMContentLoaded', function() { fetchGiscusCommentCount(); }); -</script>
\ No newline at end of file +</script> diff --git a/layouts/partials/head/css.html b/layouts/partials/head/css.html index bf041938..ca636713 100644 --- a/layouts/partials/head/css.html +++ b/layouts/partials/head/css.html @@ -23,6 +23,12 @@ {{- end }} <!-- theme css --> -{{ with resources.Get "css/index.scss" | css.Sass | minify }} +{{ with resources.Get "css/global.scss" | css.Sass | minify }} <style>{{ .Content | safeCSS }}</style> {{ end }} + +{{- if or (in .Section "posts") (in .Section "cards") (in .Section "library") (eq .Type "single") }} +{{ with resources.Get "css/content.scss" | css.Sass | minify }} +<style>{{ .Content | safeCSS }}</style> +{{ end }} +{{- end }} |