nxxy335
9f677a9f0d
- Hero：背景图 opacity 0.15 -> 1 完整显示（此前近乎透明的背景图是"蒙灰"观感的 主因）；标题/副标题/一言按明暗模式补轻投影保证复杂图片上的可读性 - 导航栏二级菜单：桌面端纯 CSS 悬停/聚焦展开（零 JS），带悬停桥防误关、 下拉箭头旋转反馈；移动端菜单以缩进子项形式呈现 - 瞬间页朋友圈化：头像（moment.owner.avatar，缺省回退站点名首字占位）+ 昵称 + 正文 + 九宫格图片 + 时间操作；九宫格遵循微信规则（单图原比例、2/4 图两列、 其余三列） - 友情链接页适配 plugin-links 友链申请：同源表单（POST /links/apply/submit + csrfToken + GET /links/apply/captcha 验证码图，点击刷新），支持名称/链接/ Logo/描述/邮箱/反链/RSS 字段、提交结果与错误提示；插件未开放申请时验证码 加载失败自动隐藏表单；新增 links_apply_form_enabled 开关（默认开启）
449 lines
13 KiB
Plaintext
449 lines
13 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: 1;
|
|
}
|
|
|
|
/* 深色模式背景图切换：未配置双图时不生效，保持单一背景图 */
|
|
.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);
|
|
/* 背景图完整显示后，用轻投影保证文字在复杂图片上仍可读 */
|
|
text-shadow: 0 1px 3px rgba(255, 253, 250, 0.6), 0 1px 14px rgba(255, 253, 250, 0.4);
|
|
}
|
|
|
|
html.dark .hero__title {
|
|
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55), 0 1px 14px rgba(0, 0, 0, 0.35);
|
|
}
|
|
|
|
.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);
|
|
text-shadow: 0 1px 3px rgba(255, 253, 250, 0.6), 0 1px 10px rgba(255, 253, 250, 0.4);
|
|
}
|
|
|
|
html.dark .hero__subtitle {
|
|
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55), 0 1px 10px rgba(0, 0, 0, 0.35);
|
|
}
|
|
|
|
.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;
|
|
text-shadow: 0 1px 3px rgba(255, 253, 250, 0.55);
|
|
}
|
|
|
|
html.dark .hero__description {
|
|
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
.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>
|