nxxy335/halo-theme-WarmIsland
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity

feat: Hero 背景图完整显示、导航二级菜单、瞬间朋友圈化、友链申请表单 (v1.1.9)

Browse Source 
- 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 开关（默认开启）
This commit is contained in:
nxxy335
2026-09-26 16:14:20 +08:00
parent c1950e142a
commit 9f677a9f0d
8 changed files with 446 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package.json
+1 -1
View File
@@ -1,5 +1,5 @@
{
"version": "1.1.8",
"version": "1.1.9",
"type": "module",
"engines": {
"node": ">=22.12.0"
settings.yaml
+5
View File
@@ -575,6 +575,11 @@ spec:
- group: links
label: 友情链接
formSchema:
- $formkit: switch
name: links_apply_form_enabled
label: 显示友链申请表单
value: true
help: 在友链页底部展示访客申请表单；需链接管理插件开启「友链申请」功能，未开启时表单自动隐藏
- $formkit: text
name: links_page_title
label: 页面标题
src/components/HeroSection.astro
+17 -1
View File
@@ -281,7 +281,7 @@
inset: 0;
background-size: cover;
background-position: center;
opacity: 0.15;
opacity: 1;
}
/* 深色模式背景图切换：未配置双图时不生效，保持单一背景图 */
@@ -313,6 +313,12 @@
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 {
@@ -321,6 +327,11 @@
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 {
@@ -330,6 +341,11 @@
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 {
src/components/MobileMenu.astro
+18
View File
@@ -21,6 +21,16 @@
class="wi-mobile-menu__link"
th:data-href="${menuItem.status.href}"
></a>
<th:block th:if="${not #lists.isEmpty(menuItem.children)}">
<a
th:each="child : ${menuItem.children}"
th:href="@{${child.status.href}}"
th:target="${child.spec?.target?.value == '_blank'} ? '_blank' : '_self'"
th:text="${'| ' + child.status.displayName}"
class="wi-mobile-menu__link wi-mobile-menu__link--sub"
th:data-href="${child.status.href}"
></a>
</th:block>
</th:block>
</th:block>
</th:block>
@@ -213,6 +223,14 @@
background var(--duration-fast) var(--ease-out-quart);
}
/* 二级菜单项：缩进 + 弱化，与一级项区分 */
.wi-mobile-menu__link--sub {
padding-left: 2rem;
font-size: var(--text-base);
font-weight: 400;
color: var(--ink-3);
}
.wi-mobile-menu__link:hover {
color: var(--accent);
background: var(--bg-raised);
src/components/Navbar.astro
+108 -7
View File
@@ -32,15 +32,34 @@ import ThemeSwitcher from "./ThemeSwitcher.astro";
<th:block th:if="${menuFinder != null}">
<th:block th:with="menu = ${menuFinder.getPrimary()}">
<th:block th:if="${menu != null and menu.menuItems != null and not #lists.isEmpty(menu.menuItems)}">
<a
<div
th:each="menuItem : ${menu.menuItems}"
th:href="@{${menuItem.status.href}}"
th:target="${menuItem.spec?.target?.value == '_blank'} ? '_blank' : '_self'"
th:text="${menuItem.status.displayName}"
class="wi-navbar__link"
th:data-href="${menuItem.status.href}"
class="wi-navbar__item"
th:classappend="${not #lists.isEmpty(menuItem.children)} ? 'wi-navbar__item--has-children'"
>
</a>
<a
th:href="@{${menuItem.status.href}}"
th:target="${menuItem.spec?.target?.value == '_blank'} ? '_blank' : '_self'"
th:text="${menuItem.status.displayName}"
class="wi-navbar__link"
th:data-href="${menuItem.status.href}"
th:aria-haspopup="${not #lists.isEmpty(menuItem.children)} ? 'true' : null"
>
</a>
<div
class="wi-navbar__submenu"
th:if="${not #lists.isEmpty(menuItem.children)}"
>
<a
th:each="child : ${menuItem.children}"
th:href="@{${child.status.href}}"
th:target="${child.spec?.target?.value == '_blank'} ? '_blank' : '_self'"
th:text="${child.status.displayName}"
class="wi-navbar__submenu-link"
>
</a>
</div>
</div>
</th:block>
</th:block>
</th:block>
@@ -257,6 +276,88 @@ import ThemeSwitcher from "./ThemeSwitcher.astro";
min-width: 0;
}
/* 一级菜单项容器（含子菜单时作为下拉的定位锚点） */
.wi-navbar__item {
position: relative;
display: inline-flex;
}
/* 二级下拉：纯 CSS 悬停/聚焦展开，无 JS 开销 */
.wi-navbar__submenu {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%) translateY(6px);
display: flex;
flex-direction: column;
min-width: 168px;
padding: 6px;
margin: 0;
list-style: none;
border-radius: var(--radius-md, 12px);
background: var(--bg-raised);
border: 1px solid var(--rule);
box-shadow: var(--shadow-lg);
opacity: 0;
visibility: hidden;
transition: opacity 0.18s ease, transform 0.18s var(--ease-out-quart),
visibility 0.18s;
z-index: 101;
}
/* 悬停桥：避免鼠标从一级移到二级途中经过空隙导致菜单关闭 */
.wi-navbar__item--has-children::after {
content: "";
position: absolute;
left: 0;
right: 0;
top: 100%;
height: 10px;
}
.wi-navbar__item--has-children:hover .wi-navbar__submenu,
.wi-navbar__item--has-children:focus-within .wi-navbar__submenu {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
.wi-navbar__submenu-link {
display: block;
padding: 0.5rem 0.75rem;
border-radius: 8px;
font-size: var(--text-sm);
color: var(--ink-2);
text-decoration: none;
white-space: nowrap;
transition: color 0.15s ease, background 0.15s ease;
}
.wi-navbar__submenu-link:hover {
color: var(--accent);
background: color-mix(in srgb, var(--accent) 8%, transparent);
}
/* 有子菜单的一级项带下拉小箭头 */
.wi-navbar__item--has-children > .wi-navbar__link::after {
content: "";
display: inline-block;
width: 4px;
height: 4px;
margin-left: 0.3rem;
margin-top: -2px;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: rotate(45deg);
opacity: 0.6;
transition: transform 0.18s var(--ease-out-quart);
}
.wi-navbar__item--has-children:hover > .wi-navbar__link::after {
transform: rotate(225deg);
margin-top: 2px;
}
.wi-navbar__link {
display: inline-flex;
align-items: center;
src/pages/links.astro
+212
View File
@@ -87,6 +87,92 @@ import Layout from "../layouts/Layout.astro";
</div>
</th:block>
<div
class="wi-links__apply"
th:if="${theme.config?.links?.links_apply_form_enabled != false}"
th:with="applied=${param.applied != null and !#lists.isEmpty(param.applied) and param.applied[0] == 'true'},
applyMsg=${param.message != null and !#lists.isEmpty(param.message) ? param.message[0] : null}"
>
<h2 class="wi-links__apply-title" th:text="'申请友链'">申请友链</h2>
<p
class="wi-links__apply-result"
th:if="${applied}"
th:text="'申请已提交，等待站长审核 🌙'"
role="status"
></p>
<p
class="wi-links__apply-result wi-links__apply-result--error"
th:if="${not applied and applyMsg != null}"
th:text="${applyMsg}"
role="alert"
></p>
<form
class="wi-links__apply-form"
method="post"
th:action="@{/links/apply/submit}"
>
<input type="hidden" name="_csrf" th:value="${csrfToken}" />
<div class="wi-links__apply-row">
<label class="wi-links__apply-field">
<span th:text="'站点名称 *'">站点名称 *</span>
<input type="text" name="displayName" required maxlength="50" placeholder="你的站点名称" th:attr="value=${param.value != null and !#lists.isEmpty(param.value) ? param.value[0] : ''}" />
</label>
<label class="wi-links__apply-field">
<span th:text="'站点链接 *'">站点链接 *</span>
<input type="url" name="url" required placeholder="https://" />
</label>
</div>
<div class="wi-links__apply-row">
<label class="wi-links__apply-field">
<span th:text="'图标地址'">图标地址</span>
<input type="url" name="logo" placeholder="https://" />
</label>
<label class="wi-links__apply-field">
<span th:text="'联系邮箱'">联系邮箱</span>
<input type="email" name="email" placeholder="用于通知审核结果" />
</label>
</div>
<label class="wi-links__apply-field">
<span th:text="'站点描述'">站点描述</span>
<input type="text" name="description" maxlength="120" placeholder="一句话介绍你的站点" />
</label>
<label class="wi-links__apply-field">
<span th:text="'反链页面'">反链页面</span>
<input type="url" name="backlink" placeholder="https://" />
</label>
<label class="wi-links__apply-field">
<span th:text="'RSS / Atom 地址（每行一个）'">RSS / Atom 地址（每行一个）</span>
<textarea name="feedUrls" rows="2" placeholder="https://"></textarea>
</label>
<div class="wi-links__apply-row">
<label class="wi-links__apply-field">
<span th:text="'验证码 *'">验证码 *</span>
<input type="text" name="captchaCode" required maxlength="8" autocomplete="off" placeholder="图中五位字符" />
</label>
<div class="wi-links__apply-captcha">
<img
class="wi-links__apply-captcha-img"
th:src="@{/links/apply/captcha}"
alt="验证码"
width="120"
height="44"
loading="lazy"
title="点击刷新验证码"
onclick="this.src=this.src.split('?')[0]+'?ts='+Date.now()"
th:onerror="|this.closest('.wi-links__apply').classList.add('wi-links__apply--unavailable')|"
/>
</div>
</div>
<button class="wi-links__apply-submit" type="submit" th:text="'提交申请'">提交申请</button>
</form>
<p
class="wi-links__apply-unavailable-tip"
th:text="'友链申请暂未开放。'"
hidden
></p>
</div>
<div class="wi-links__comment" th:if="${theme.config?.links?.links_show_comment == true}">
<halo:comment group="plugin.halo.run" kind="Plugin" name="PluginLinks"></halo:comment>
</div>
@@ -189,6 +275,132 @@ import Layout from "../layouts/Layout.astro";
margin-top: var(--space-3xl);
}
/* ===== 友链申请表单 ===== */
.wi-links__apply {
margin-top: var(--space-3xl);
padding: var(--space-xl);
border: 1px solid var(--rule);
border-radius: var(--radius-lg, 16px);
background: var(--bg-raised);
}
.wi-links__apply-title {
text-align: center;
font-size: var(--text-xl);
font-weight: 700;
color: var(--ink);
margin-bottom: var(--space-lg);
}
.wi-links__apply-result {
text-align: center;
font-size: var(--text-sm);
color: var(--accent);
margin-bottom: var(--space-md);
}
.wi-links__apply-result--error {
color: #e6162d;
}
html.dark .wi-links__apply-result--error {
color: #ff6b6b;
}
.wi-links__apply-form {
display: flex;
flex-direction: column;
gap: var(--space-md);
}
.wi-links__apply-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-md);
}
.wi-links__apply-field {
display: flex;
flex-direction: column;
gap: 0.35rem;
font-size: var(--text-sm);
color: var(--ink-2);
}
.wi-links__apply-field input,
.wi-links__apply-field textarea {
padding: 0.6rem 0.8rem;
border: 1px solid var(--rule);
border-radius: 10px;
background: var(--bg);
color: var(--ink);
font-family: inherit;
font-size: var(--text-sm);
transition: border-color 0.15s ease, box-shadow 0.15s ease;
resize: vertical;
}
.wi-links__apply-field input:focus,
.wi-links__apply-field textarea:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent);
}
.wi-links__apply-captcha {
display: flex;
align-items: flex-end;
padding-bottom: 2px;
}
.wi-links__apply-captcha-img {
border-radius: 8px;
border: 1px solid var(--rule);
cursor: pointer;
}
.wi-links__apply-submit {
align-self: center;
padding: 0.65rem 2.2rem;
min-height: 44px;
border: none;
border-radius: 9999px;
font-size: var(--text-sm);
font-weight: 600;
font-family: inherit;
color: #fff;
background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 70%, #000));
cursor: pointer;
transition: transform var(--duration-fast) var(--ease-out-quart), opacity 0.15s ease;
}
.wi-links__apply-submit:hover {
transform: translateY(-1px);
opacity: 0.95;
}
.wi-links__apply-submit:active {
transform: translateY(0) scale(0.98);
}
/* 插件未开放申请时（验证码 404）自动隐藏表单并提示 */
.wi-links__apply--unavailable .wi-links__apply-form {
display: none;
}
.wi-links__apply--unavailable .wi-links__apply-unavailable-tip {
display: block !important;
text-align: center;
color: var(--ink-3);
font-size: var(--text-sm);
}
@media (max-width: 640px) {
.wi-links__apply-row {
grid-template-columns: 1fr;
}
}
.wi-links__title {
font-size: var(--text-4xl);
margin-bottom: var(--space-xs);
src/pages/moments.astro
+84 -16
View File
@@ -31,20 +31,42 @@ import LightGallery from "../components/LightGallery.astro";
<div class="wi-moments-page__cards" th:if="${theme.config?.moments?.moments_style == 'cards' or theme.config?.moments?.moments_style == null or theme.config?.moments?.moments_style == 'timeline'}">
<th:block th:if="${momentsResult != null and not #lists.isEmpty(momentsResult.items)}">
<div class="wi-moments-page__card-item" th:each="moment : ${momentsResult.items}">
<div class="wi-moments-page__card-text" th:utext="${moment.spec?.content?.html ?: moment.spec?.content?.raw ?: moment.spec?.content}"></div>
<div class="wi-moments-page__card-media" th:if="${moment.spec.content.medium != null and !#lists.isEmpty(moment.spec.content.medium)}">
<th:block th:each="media : ${moment.spec.content.medium}">
<img
th:if="${media.type.name == 'PHOTO'}"
th:src="${media.url}"
th:alt="''"
class="wi-moments-page__card-image"
loading="lazy"
decoding="async"
/>
</th:block>
</div>
<div class="wi-moments-page__card-footer">
<div class="wi-moments-page__card-layout">
<img
th:if="${moment.owner != null and !#strings.isEmpty(moment.owner.avatar)}"
class="wi-moments-page__avatar"
th:src="${moment.owner.avatar}"
th:alt="''"
loading="lazy"
decoding="async"
/>
<div
th:unless="${moment.owner != null and !#strings.isEmpty(moment.owner.avatar)}"
class="wi-moments-page__avatar wi-moments-page__avatar--fallback"
aria-hidden="true"
>
<span th:text="${#strings.substring(site.title, 0, 1)}"></span>
</div>
<div class="wi-moments-page__main">
<div
class="wi-moments-page__name"
th:text="${moment.owner != null and !#strings.isEmpty(moment.owner.displayName) ? moment.owner.displayName : site.title}"
></div>
<div class="wi-moments-page__card-text" th:utext="${moment.spec?.content?.html ?: moment.spec?.content?.raw ?: moment.spec?.content}"></div>
<div class="wi-moments-page__card-media" th:if="${moment.spec.content.medium != null and !#lists.isEmpty(moment.spec.content.medium)}">
<th:block th:each="media : ${moment.spec.content.medium}">
<img
th:if="${media.type.name == 'PHOTO'}"
th:src="${media.url}"
th:alt="''"
class="wi-moments-page__card-image"
loading="lazy"
decoding="async"
/>
</th:block>
</div>
<div class="wi-moments-page__card-footer">
<time
class="wi-moments-page__card-date"
th:text="${#dates.format(moment.spec?.releaseTime ?: moment.metadata?.creationTimestamp, 'yyyy-MM-dd HH:mm')}"
@@ -75,6 +97,8 @@ import LightGallery from "../components/LightGallery.astro";
th:attr="name=${moment.metadata.name}"
/>
</div>
</div> <!-- /__main -->
</div> <!-- /__card-layout -->
</div>
</th:block>
<th:block th:if="${momentsResult == null or #lists.isEmpty(momentsResult.items)}">
@@ -527,6 +551,43 @@ import LightGallery from "../components/LightGallery.astro";
transform: translateY(-3px);
}
/* 朋友圈式布局：头像在左，昵称/正文/九宫格在右 */
.wi-moments-page__card-layout {
display: flex;
gap: var(--space-md);
align-items: flex-start;
}
.wi-moments-page__avatar {
flex-shrink: 0;
width: 44px;
height: 44px;
border-radius: 10px;
object-fit: cover;
}
.wi-moments-page__avatar--fallback {
display: flex;
align-items: center;
justify-content: center;
background: color-mix(in srgb, var(--accent) 14%, transparent);
color: var(--accent);
font-weight: 700;
font-size: var(--text-lg);
}
.wi-moments-page__main {
flex: 1;
min-width: 0;
}
.wi-moments-page__name {
font-size: var(--text-base);
font-weight: 600;
color: var(--accent);
margin-bottom: var(--space-xs);
}
.wi-moments-page__card-text {
font-size: var(--text-base);
line-height: var(--leading-relaxed);
@@ -568,8 +629,15 @@ import LightGallery from "../components/LightGallery.astro";
grid-template-columns: repeat(2, 1fr);
}
.wi-moments-page__card-media:has(.wi-moments-page__card-image:nth-child(4)) {
grid-template-columns: repeat(3, 1fr);
/* 微信九宫格规则：4 张时 2x2 排布 */
.wi-moments-page__card-media:has(.wi-moments-page__card-image:nth-child(4)):not(:has(.wi-moments-page__card-image:nth-child(5))) {
grid-template-columns: repeat(2, 1fr);
max-width: 72%;
}
/* 三列九宫格限制宽度，避免大屏下图片单元过大 */
.wi-moments-page__card-media:has(.wi-moments-page__card-image:nth-child(3)) {
max-width: 100%;
}
.wi-moments-page__card-footer {
theme.yaml
+1 -1
View File
@@ -28,7 +28,7 @@ spec:
description: 微信读书书架（依赖微信读书插件）
screenshot:
file: weread.html
version: "1.1.8"
version: "1.1.9"
requires: ">=2.24.0"
license:
- name: "GPL-3.0"