nxxy335
bcc221c3bd
修复 - 首页文章卡片开启"显示字数"后无效果：该配置项此前只有声明没有实现，现已在文章流卡片接入服务端字数统计（依赖 API 扩展包，未安装时自动隐藏） - Hero 下滑箭头滚动不到位：Hero 为固定背景（position: fixed），此前箭头额外减去了导航栏高度，导致内容区上方始终露出一段 Hero 渐变；现与滚动吸附逻辑对齐，内容区顶部直接对齐视口顶部 - 鼠标点击特效开启后无效果：特效类型默认值为 off（关闭），开启开关但不选择类型时静默不生效；默认值改为"社会主义核心价值观" 移除 - 移除鼠标光感跟随功能及对应配置项 优化 - 上下篇导航：新增方向箭头与悬停反馈（背景、位移、变色），移动端收紧内边距 - Hero 一言自动刷新改为淡出→换文案→淡入的过渡动画，避免生硬跳变 - README 全面更新：环境要求、插件适配表（新增微信读书与 API 扩展包）、自定义页面模板、功能说明、目录结构与开发注意事项
433 lines
12 KiB
Plaintext
433 lines
12 KiB
Plaintext
---
|
|
---
|
|
|
|
<style is:inline th:if="${theme.config?.hero?.hero_title_color_light != null and theme.config?.hero?.hero_title_color_light != ''}" th:utext="${' :root { --hero-title-text: ' + theme.config?.hero?.hero_title_color_light + '; } '}">/*hero-title-light*/</style>
|
|
<style is:inline th:if="${theme.config?.hero?.hero_title_color_dark != null and theme.config?.hero?.hero_title_color_dark != ''}" th:utext="${' html.dark { --hero-title-text: ' + theme.config?.hero?.hero_title_color_dark + '; } '}">/*hero-title-dark*/</style>
|
|
<style is:inline th:if="${theme.config?.hero?.hero_subtitle_color_light != null and theme.config?.hero?.hero_subtitle_color_light != ''}" th:utext="${' :root { --hero-subtitle-text: ' + theme.config?.hero?.hero_subtitle_color_light + '; } '}">/*hero-subtitle-light*/</style>
|
|
<style is:inline th:if="${theme.config?.hero?.hero_subtitle_color_dark != null and theme.config?.hero?.hero_subtitle_color_dark != ''}" th:utext="${' html.dark { --hero-subtitle-text: ' + theme.config?.hero?.hero_subtitle_color_dark + '; } '}">/*hero-subtitle-dark*/</style>
|
|
|
|
<section
|
|
class="hero"
|
|
id="wi-hero"
|
|
th:if="${theme.config?.hero?.hero_enabled != false}"
|
|
th:classappend="${theme.config?.animation?.animation_breath == false} ? 'hero--no-breath'"
|
|
>
|
|
<div class="hero__bg">
|
|
<div class="hero__orb hero__orb--1"></div>
|
|
<div class="hero__orb hero__orb--2"></div>
|
|
<div class="hero__orb hero__orb--3"></div>
|
|
<div
|
|
class="hero__bg-image"
|
|
th:if="${!#strings.isEmpty(theme.config?.hero?.hero_background_image) and #strings.isEmpty(theme.config?.hero?.hero_background_image_dark)}"
|
|
th:style="'background-image: url(' + ${theme.config?.hero?.hero_background_image} + ')'"
|
|
></div>
|
|
<div
|
|
class="hero__bg-image"
|
|
th:if="${#strings.isEmpty(theme.config?.hero?.hero_background_image) and !#strings.isEmpty(theme.config?.hero?.hero_background_image_dark)}"
|
|
th:style="'background-image: url(' + ${theme.config?.hero?.hero_background_image_dark} + ')'"
|
|
></div>
|
|
<div
|
|
class="hero__bg-image hero__bg-image--light"
|
|
th:if="${!#strings.isEmpty(theme.config?.hero?.hero_background_image) and !#strings.isEmpty(theme.config?.hero?.hero_background_image_dark)}"
|
|
th:style="'background-image: url(' + ${theme.config?.hero?.hero_background_image} + ')'"
|
|
></div>
|
|
<div
|
|
class="hero__bg-image hero__bg-image--dark"
|
|
th:if="${!#strings.isEmpty(theme.config?.hero?.hero_background_image) and !#strings.isEmpty(theme.config?.hero?.hero_background_image_dark)}"
|
|
th:style="'background-image: url(' + ${theme.config?.hero?.hero_background_image_dark} + ')'"
|
|
></div>
|
|
</div>
|
|
|
|
<div class="hero__blur-overlay" id="wi-hero-blur-overlay"></div>
|
|
|
|
<div class="hero__content" id="wi-hero-content">
|
|
<h1
|
|
class="hero__title"
|
|
th:text="${theme.config?.hero?.hero_title != null and !#strings.isEmpty(theme.config?.hero?.hero_title) ? theme.config?.hero?.hero_title : site.title}"
|
|
>
|
|
暖屿
|
|
</h1>
|
|
<p
|
|
class="hero__subtitle"
|
|
th:text="${theme.config?.hero?.hero_subtitle != null and !#strings.isEmpty(theme.config?.hero?.hero_subtitle) ? theme.config?.hero?.hero_subtitle : site.subtitle}"
|
|
>
|
|
深夜里温暖的小岛
|
|
</p>
|
|
<p
|
|
class="hero__description"
|
|
th:if="${theme.config?.hero?.hero_description_mode == 'hitokoto'}"
|
|
id="wi-hitokoto"
|
|
th:attr="data-api=${theme.config?.hero?.hero_hitokoto_api ?: 'https://v1.hitokoto.cn/'},data-categories=${theme.config?.hero?.hero_hitokoto_categories},data-auto-refresh=${theme.config?.hero?.hero_hitokoto_auto_refresh == true ? 'true' : 'false'},data-refresh-interval=${theme.config?.hero?.hero_hitokoto_refresh_interval ?: 10000}"
|
|
></p>
|
|
<p
|
|
class="hero__description"
|
|
th:if="${theme.config?.hero?.hero_description_mode == 'custom'}"
|
|
th:text="${theme.config?.hero?.hero_custom_description}"
|
|
></p>
|
|
</div>
|
|
|
|
<button
|
|
class="hero__scroll-indicator"
|
|
id="wi-hero-scroll-indicator"
|
|
type="button"
|
|
aria-label="向下浏览"
|
|
>
|
|
<svg
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
aria-hidden="true"
|
|
>
|
|
<polyline points="6 9 12 15 18 9"></polyline>
|
|
</svg>
|
|
</button>
|
|
</section>
|
|
|
|
<script is:inline th:inline="none">
|
|
/* Hero 下滑箭头：平滑滚动到首屏内容区 */
|
|
(function () {
|
|
var indicator = document.getElementById("wi-hero-scroll-indicator");
|
|
if (!indicator) return;
|
|
|
|
indicator.addEventListener("click", function () {
|
|
var content = document.querySelector(".wi-home-content");
|
|
var hero = document.getElementById("wi-hero");
|
|
var top;
|
|
|
|
if (content) {
|
|
/* 与首页滚动吸附逻辑保持一致：内容区顶部对齐视口顶部，完全盖住固定背景的 Hero */
|
|
top = content.getBoundingClientRect().top + window.pageYOffset;
|
|
} else if (hero) {
|
|
top = hero.offsetTop + hero.offsetHeight;
|
|
} else {
|
|
top = window.innerHeight;
|
|
}
|
|
|
|
var reduce =
|
|
window.matchMedia &&
|
|
window.matchMedia("(prefers-reduced-motion: reduce)").matches;
|
|
|
|
window.scrollTo({
|
|
top: Math.max(0, top),
|
|
behavior: reduce ? "auto" : "smooth",
|
|
});
|
|
});
|
|
})();
|
|
|
|
(function () {
|
|
var el = document.getElementById("wi-hitokoto");
|
|
if (!el) return;
|
|
|
|
var api = el.getAttribute("data-api") || "https://v1.hitokoto.cn/";
|
|
var categories = el.getAttribute("data-categories");
|
|
var autoRefresh = el.getAttribute("data-auto-refresh") === "true";
|
|
var refreshInterval = parseInt(el.getAttribute("data-refresh-interval"), 10) || 10000;
|
|
|
|
function buildUrl() {
|
|
var url = api + "?encode=json";
|
|
if (categories) {
|
|
try {
|
|
var cats = JSON.parse(categories);
|
|
if (Array.isArray(cats)) {
|
|
cats.forEach(function (c) {
|
|
url += "&c=" + encodeURIComponent(c);
|
|
});
|
|
}
|
|
} catch (e) {}
|
|
}
|
|
return url;
|
|
}
|
|
|
|
function load(initial) {
|
|
if (initial) {
|
|
el.style.opacity = "0.5";
|
|
el.textContent = "\u2026";
|
|
}
|
|
|
|
return fetch(buildUrl())
|
|
.then(function (res) {
|
|
if (!res.ok) throw new Error("HTTP " + res.status);
|
|
return res.json();
|
|
})
|
|
.then(function (data) {
|
|
var text = data.hitokoto || "";
|
|
var from = data.from || data.from_who || "";
|
|
if (from) {
|
|
text += " \u2014\u2014 " + from;
|
|
}
|
|
|
|
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 = "";
|
|
});
|
|
}
|
|
|
|
load(true);
|
|
|
|
// 自动刷新：仅在开启且间隔不小于 3 秒时启用，避免请求过于频繁
|
|
if (autoRefresh && refreshInterval >= 3000) {
|
|
setInterval(function () {
|
|
load(false);
|
|
}, refreshInterval);
|
|
}
|
|
})();
|
|
</script>
|
|
|
|
<style>
|
|
.hero {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
overflow: hidden;
|
|
background: linear-gradient(
|
|
160deg,
|
|
var(--bg) 0%,
|
|
color-mix(in srgb, var(--bg) 85%, var(--accent) 15%) 40%,
|
|
color-mix(in srgb, var(--bg) 90%, var(--mist-pink) 10%) 70%,
|
|
var(--bg) 100%
|
|
);
|
|
width: 100%;
|
|
}
|
|
|
|
.hero__bg {
|
|
position: absolute;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.hero__blur-overlay {
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: 1;
|
|
backdrop-filter: blur(0px);
|
|
-webkit-backdrop-filter: blur(0px);
|
|
will-change: backdrop-filter;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.hero__orb {
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
filter: blur(80px);
|
|
animation: breathe 5s ease-in-out infinite;
|
|
}
|
|
|
|
.hero__orb--1 {
|
|
width: 420px;
|
|
height: 420px;
|
|
top: -10%;
|
|
right: -5%;
|
|
background: radial-gradient(
|
|
circle,
|
|
rgba(212, 118, 78, 0.4) 0%,
|
|
transparent 70%
|
|
);
|
|
animation-delay: 0s;
|
|
animation-duration: 5s;
|
|
}
|
|
|
|
.hero__orb--2 {
|
|
width: 350px;
|
|
height: 350px;
|
|
bottom: -8%;
|
|
left: -5%;
|
|
background: radial-gradient(
|
|
circle,
|
|
rgba(220, 140, 160, 0.3) 0%,
|
|
transparent 70%
|
|
);
|
|
animation-delay: -1.8s;
|
|
animation-duration: 6s;
|
|
}
|
|
|
|
.hero__orb--3 {
|
|
width: 300px;
|
|
height: 300px;
|
|
top: 40%;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
background: radial-gradient(
|
|
circle,
|
|
rgba(180, 150, 200, 0.2) 0%,
|
|
transparent 70%
|
|
);
|
|
animation-delay: -3.2s;
|
|
animation-duration: 4.5s;
|
|
}
|
|
|
|
.hero__bg-image {
|
|
position: absolute;
|
|
inset: 0;
|
|
background-size: cover;
|
|
background-position: center;
|
|
opacity: 0.15;
|
|
}
|
|
|
|
/* 深色模式背景图切换：未配置双图时不生效，保持单一背景图 */
|
|
.hero__bg-image--dark,
|
|
html.dark .hero__bg-image--light {
|
|
display: none;
|
|
}
|
|
|
|
html.dark .hero__bg-image--dark {
|
|
display: block;
|
|
}
|
|
|
|
.hero__content {
|
|
position: relative;
|
|
z-index: 2;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
text-align: center;
|
|
padding: var(--space-xl);
|
|
gap: var(--space-lg);
|
|
transition: opacity 0.4s ease, transform 0.4s ease;
|
|
}
|
|
|
|
.hero__title {
|
|
font-family: var(--font-sans);
|
|
font-size: clamp(3rem, 8vw, 6rem);
|
|
font-weight: 700;
|
|
letter-spacing: -0.03em;
|
|
color: var(--hero-title-text, var(--ink));
|
|
line-height: var(--leading-tight);
|
|
}
|
|
|
|
.hero__subtitle {
|
|
font-family: var(--font-body);
|
|
font-size: var(--text-xl);
|
|
color: var(--hero-subtitle-text, var(--ink-2));
|
|
letter-spacing: 0.05em;
|
|
line-height: var(--leading-normal);
|
|
}
|
|
|
|
.hero__description {
|
|
font-size: var(--text-lg);
|
|
color: var(--ink-2);
|
|
line-height: var(--leading-relaxed);
|
|
max-width: 560px;
|
|
text-align: center;
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
.hero__scroll-indicator {
|
|
position: absolute;
|
|
bottom: 2rem;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
z-index: 2;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 40px;
|
|
height: 40px;
|
|
padding: 0;
|
|
border: none;
|
|
border-radius: 50%;
|
|
background: transparent;
|
|
color: var(--ink-3);
|
|
cursor: pointer;
|
|
animation: scrollHint 2s ease-in-out infinite;
|
|
transition: opacity 0.4s ease, color 0.2s ease, background 0.2s ease;
|
|
}
|
|
|
|
.hero__scroll-indicator:hover {
|
|
color: var(--accent);
|
|
background: color-mix(in srgb, var(--accent) 10%, transparent);
|
|
}
|
|
|
|
.hero__scroll-indicator:focus-visible {
|
|
outline: 2px solid var(--accent);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
.hero--no-breath .hero__orb {
|
|
animation: none;
|
|
}
|
|
|
|
html.dark .hero {
|
|
background: linear-gradient(
|
|
160deg,
|
|
var(--bg) 0%,
|
|
color-mix(in srgb, var(--bg) 85%, var(--accent) 12%) 40%,
|
|
var(--bg) 100%
|
|
);
|
|
}
|
|
|
|
html.dark .hero__orb--1 {
|
|
background: radial-gradient(
|
|
circle,
|
|
rgba(232, 149, 95, 0.25) 0%,
|
|
transparent 70%
|
|
);
|
|
}
|
|
|
|
html.dark .hero__orb--2 {
|
|
background: radial-gradient(
|
|
circle,
|
|
rgba(200, 120, 140, 0.18) 0%,
|
|
transparent 70%
|
|
);
|
|
}
|
|
|
|
html.dark .hero__orb--3 {
|
|
background: radial-gradient(
|
|
circle,
|
|
rgba(160, 130, 180, 0.12) 0%,
|
|
transparent 70%
|
|
);
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.hero__title {
|
|
font-size: clamp(2.25rem, 10vw, 3.5rem);
|
|
}
|
|
|
|
.hero__orb--1 {
|
|
width: 260px;
|
|
height: 260px;
|
|
}
|
|
|
|
.hero__orb--2 {
|
|
width: 220px;
|
|
height: 220px;
|
|
}
|
|
|
|
.hero__orb--3 {
|
|
width: 180px;
|
|
height: 180px;
|
|
}
|
|
|
|
.hero__content {
|
|
padding: var(--space-lg);
|
|
gap: var(--space-md);
|
|
}
|
|
|
|
.hero__description {
|
|
max-width: 90vw;
|
|
}
|
|
}
|
|
</style>
|