fix: 修复首页卡片字数与 Hero 滚动,移除光感跟随 (v1.1.6)
修复 - 首页文章卡片开启"显示字数"后无效果:该配置项此前只有声明没有实现,现已在文章流卡片接入服务端字数统计(依赖 API 扩展包,未安装时自动隐藏) - Hero 下滑箭头滚动不到位:Hero 为固定背景(position: fixed),此前箭头额外减去了导航栏高度,导致内容区上方始终露出一段 Hero 渐变;现与滚动吸附逻辑对齐,内容区顶部直接对齐视口顶部 - 鼠标点击特效开启后无效果:特效类型默认值为 off(关闭),开启开关但不选择类型时静默不生效;默认值改为"社会主义核心价值观" 移除 - 移除鼠标光感跟随功能及对应配置项 优化 - 上下篇导航:新增方向箭头与悬停反馈(背景、位移、变色),移动端收紧内边距 - Hero 一言自动刷新改为淡出→换文案→淡入的过渡动画,避免生硬跳变 - README 全面更新:环境要求、插件适配表(新增微信读书与 API 扩展包)、自定义页面模板、功能说明、目录结构与开发注意事项
This commit is contained in:
1 parent
430d107d44
commit
bcc221c3bd
10 files changed
+180
-105
No files matched your search
@@ -1,56 +0,0 @@
|
||||
---
|
||||
---
|
||||
|
||||
<div class="wi-cursor-glow" id="wi-cursor-glow"></div>
|
||||
|
||||
<script is:inline th:inline="none">
|
||||
(function(){
|
||||
var glowEl = document.getElementById("wi-cursor-glow");
|
||||
if (!glowEl) return;
|
||||
var rafId = 0;
|
||||
document.addEventListener("mousemove", function(e) {
|
||||
if (rafId) return;
|
||||
rafId = requestAnimationFrame(function() {
|
||||
glowEl.style.transform = "translate(calc(" + e.clientX + "px - 50%), calc(" + e.clientY + "px - 50%))";
|
||||
glowEl.classList.add("wi-cursor-glow--visible");
|
||||
rafId = 0;
|
||||
});
|
||||
}, { passive: true });
|
||||
document.addEventListener("mouseleave", function() {
|
||||
glowEl.classList.remove("wi-cursor-glow--visible");
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.wi-cursor-glow {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(
|
||||
circle,
|
||||
rgba(212, 118, 78, 0.06) 0%,
|
||||
transparent 70%
|
||||
);
|
||||
pointer-events: none;
|
||||
z-index: 9999;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.wi-cursor-glow--visible {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
html.dark .wi-cursor-glow {
|
||||
background: radial-gradient(
|
||||
circle,
|
||||
rgba(232, 149, 95, 0.04) 0%,
|
||||
transparent 70%
|
||||
);
|
||||
}
|
||||
</style>
|
||||
@@ -100,6 +100,7 @@
|
||||
var top;
|
||||
|
||||
if (content) {
|
||||
/* 与首页滚动吸附逻辑保持一致:内容区顶部对齐视口顶部,完全盖住固定背景的 Hero */
|
||||
top = content.getBoundingClientRect().top + window.pageYOffset;
|
||||
} else if (hero) {
|
||||
top = hero.offsetTop + hero.offsetHeight;
|
||||
@@ -107,16 +108,12 @@
|
||||
top = window.innerHeight;
|
||||
}
|
||||
|
||||
/* 预留固定导航栏的高度,避免内容被顶栏遮住 */
|
||||
var navbar = document.getElementById("wi-navbar");
|
||||
var offset = navbar ? navbar.offsetHeight + 8 : 8;
|
||||
|
||||
var reduce =
|
||||
window.matchMedia &&
|
||||
window.matchMedia("(prefers-reduced-motion: reduce)").matches;
|
||||
|
||||
window.scrollTo({
|
||||
top: Math.max(0, top - offset),
|
||||
top: Math.max(0, top),
|
||||
behavior: reduce ? "auto" : "smooth",
|
||||
});
|
||||
});
|
||||
@@ -158,17 +155,27 @@
|
||||
return res.json();
|
||||
})
|
||||
.then(function (data) {
|
||||
el.style.opacity = "1";
|
||||
var text = data.hitokoto || "";
|
||||
var from = data.from || data.from_who || "";
|
||||
if (from) {
|
||||
text += " \u2014\u2014 " + from;
|
||||
}
|
||||
el.textContent = text;
|
||||
|
||||
if (initial) {
|
||||
el.style.opacity = "1";
|
||||
el.textContent = text;
|
||||
} else {
|
||||
/* 自动刷新:淡出 → 换文案 → 淡入,避免生硬跳变 */
|
||||
el.style.opacity = "0";
|
||||
setTimeout(function () {
|
||||
el.textContent = text;
|
||||
el.style.opacity = "1";
|
||||
}, 280);
|
||||
}
|
||||
})
|
||||
.catch(function () {
|
||||
// 失败时恢复可见:首次为空,刷新时保留原文案
|
||||
el.style.opacity = "1";
|
||||
// 自动刷新失败时保留原文案,避免闪烁成空白
|
||||
if (initial) el.textContent = "";
|
||||
});
|
||||
}
|
||||
|
||||
@@ -28,10 +28,18 @@ const { variant = "default" } = Astro.props;
|
||||
</div>
|
||||
|
||||
<div class="post-card__content">
|
||||
<time
|
||||
class="post-card__date"
|
||||
th:text="${#dates.format(post.spec.publishTime, 'yyyy-MM-dd')}"
|
||||
></time>
|
||||
<div class="post-card__meta">
|
||||
<time
|
||||
class="post-card__date"
|
||||
th:text="${#dates.format(post.spec.publishTime, 'yyyy-MM-dd')}"
|
||||
></time>
|
||||
<span
|
||||
class="post-card__words"
|
||||
th:if="${theme.config?.home?.home_card_show_wordcount == true and pluginFinder.available('extra-api')}"
|
||||
th:with="words=${extraApiStatsFinder.getPostWordCount({name: post.metadata.name})}"
|
||||
th:text="${words > 0 ? words + ' 字' : ''}"
|
||||
></span>
|
||||
</div>
|
||||
<h3 class="post-card__title" th:text="${post.spec.title}"></h3>
|
||||
<p
|
||||
th:if="${variant != 'compact'}"
|
||||
@@ -110,6 +118,20 @@ const { variant = "default" } = Astro.props;
|
||||
line-height: var(--leading-none);
|
||||
}
|
||||
|
||||
.post-card__meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.6rem;
|
||||
}
|
||||
|
||||
.post-card__words {
|
||||
font-size: var(--text-xs);
|
||||
color: var(--ink-3);
|
||||
line-height: var(--leading-none);
|
||||
padding-left: 0.6rem;
|
||||
border-left: 1px solid var(--rule);
|
||||
}
|
||||
|
||||
.post-card__title {
|
||||
font-family: var(--font-sans);
|
||||
font-weight: 700;
|
||||
|
||||
@@ -3,10 +3,8 @@ import "../styles/main.scss";
|
||||
import Navbar from "../components/Navbar.astro";
|
||||
import Footer from "../components/Footer.astro";
|
||||
import ScrollReveal from "../components/ScrollReveal.astro";
|
||||
import CursorGlow from "../components/CursorGlow.astro";
|
||||
import MobileMenu from "../components/MobileMenu.astro";
|
||||
import ClickEffect from "../components/ClickEffect.astro";
|
||||
|
||||
interface Props {
|
||||
pageTitle?: string;
|
||||
contentClass?: string;
|
||||
@@ -119,7 +117,6 @@ const fragmentAttr = layoutFragment ? "html (head, content)" : undefined;
|
||||
<Footer />
|
||||
<MobileMenu />
|
||||
<ScrollReveal th:if="${theme.config?.animation?.animation_enabled != false and theme.config?.animation?.animation_scroll_reveal != false}" />
|
||||
<CursorGlow th:if="${theme.config?.animation?.animation_enabled != false and theme.config?.animation?.animation_cursor_glow == true}" />
|
||||
<ClickEffect />
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -127,6 +127,11 @@ import WelcomePopup from "../components/WelcomePopup.astro";
|
||||
</div>
|
||||
</th:block>
|
||||
<div class="wi-flow__stats">
|
||||
<span
|
||||
class="wi-flow__stat"
|
||||
th:if="${theme.config?.home?.home_card_show_wordcount == true and pluginFinder.available('extra-api')}"
|
||||
th:text="${extraApiStatsFinder.getPostWordCount({name: post.metadata.name}) + ' 字'}"
|
||||
></span>
|
||||
<span
|
||||
class="wi-flow__stat"
|
||||
th:if="${theme.config?.home?.home_card_show_visit ?: true}"
|
||||
|
||||
+51
-8
@@ -1315,10 +1315,35 @@ import LightGallery from "../components/LightGallery.astro";
|
||||
.wi-post__nav-link {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.3rem;
|
||||
gap: 0.35rem;
|
||||
text-decoration: none;
|
||||
max-width: 45%;
|
||||
transition: color var(--duration-fast) var(--ease-out-quart);
|
||||
max-width: 48%;
|
||||
padding: 0.85rem 1.1rem;
|
||||
border-radius: var(--radius-md, 12px);
|
||||
background: transparent;
|
||||
transition: background 0.2s ease, transform 0.2s var(--ease-out-quart);
|
||||
}
|
||||
|
||||
.wi-post__nav-link:hover {
|
||||
background: color-mix(in srgb, var(--accent) 7%, transparent);
|
||||
}
|
||||
|
||||
.wi-post__nav-link--prev:hover {
|
||||
transform: translateX(-3px);
|
||||
}
|
||||
|
||||
.wi-post__nav-link--next:hover {
|
||||
transform: translateX(3px);
|
||||
}
|
||||
|
||||
.wi-post__nav-label {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
font-size: var(--text-xs);
|
||||
color: var(--ink-3);
|
||||
letter-spacing: var(--tracking-wider);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.wi-post__nav-link--next {
|
||||
@@ -1326,15 +1351,32 @@ import LightGallery from "../components/LightGallery.astro";
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.wi-post__nav-link--next .wi-post__nav-label {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.wi-post__nav-link--empty {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.wi-post__nav-label {
|
||||
font-size: var(--text-xs);
|
||||
color: var(--ink-3);
|
||||
letter-spacing: var(--tracking-wider);
|
||||
text-transform: uppercase;
|
||||
.wi-post__nav-link--prev .wi-post__nav-label::before {
|
||||
content: "←";
|
||||
font-size: 0.9em;
|
||||
transition: transform 0.2s var(--ease-out-quart);
|
||||
}
|
||||
|
||||
.wi-post__nav-link--next .wi-post__nav-label::after {
|
||||
content: "→";
|
||||
font-size: 0.9em;
|
||||
transition: transform 0.2s var(--ease-out-quart);
|
||||
}
|
||||
|
||||
.wi-post__nav-link--prev:hover .wi-post__nav-label::before {
|
||||
transform: translateX(-2px);
|
||||
}
|
||||
|
||||
.wi-post__nav-link--next:hover .wi-post__nav-label::after {
|
||||
transform: translateX(2px);
|
||||
}
|
||||
|
||||
.wi-post__nav-title {
|
||||
@@ -1468,6 +1510,7 @@ import LightGallery from "../components/LightGallery.astro";
|
||||
.wi-post__nav-link {
|
||||
max-width: 48%;
|
||||
min-width: 0;
|
||||
padding: 0.6rem 0.75rem;
|
||||
}
|
||||
|
||||
.wi-post__nav-title {
|
||||
|
||||
Reference in new issue
Block a user