nxxy335/halo-theme-WarmIsland
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity
Files
c1b08ad915b20b605961340773add65f7b4a9e5a
halo-theme-WarmIsland/src/components/Navbar.astro
T
nxxy335 9f677a9f0d feat: Hero 背景图完整显示、导航二级菜单、瞬间朋友圈化、友链申请表单 (v1.1.9) 
- 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 开关（默认开启）
2026-09-26 16:14:20 +08:00

448 lines
12 KiB
Plaintext
Raw Blame History

---
import ThemeSwitcher from "./ThemeSwitcher.astro";
---
<header class="wi-navbar-wrapper" id="wi-navbar" th:classappend="${theme.config?.navbar?.navbar_style == 'minimal'} ? 'wi-navbar--minimal' : (${theme.config?.navbar?.navbar_style == 'float'} ? 'wi-navbar--float' : 'wi-navbar--glass')">
<div class="wi-navbar__capsule">
<a
class="wi-navbar__brand"
th:href="@{/}"
th:with="brandType=${theme.config?.navbar?.navbar_brand_type}, logoUrl=${!#strings.isEmpty(theme.config?.navbar?.navbar_logo) ? theme.config?.navbar?.navbar_logo : theme.config?.basic?.logo}, logoRadius=${theme.config?.navbar?.navbar_logo_radius}"
>
<img
th:if="${brandType == 'logo' and !#strings.isEmpty(logoUrl)}"
th:src="${logoUrl}"
alt=""
th:class="${'wi-navbar__logo wi-navbar__logo--' + (logoRadius != null ? logoRadius : 'rounded')}"
loading="eager"
decoding="async"
onerror="this.style.display='none'"
/>
<span
th:if="${brandType != 'logo' or #strings.isEmpty(logoUrl)}"
class="wi-navbar__title"
th:text="${site.title}"
></span>
</a>
<nav
class="wi-navbar__nav"
aria-label="Main navigation"
>
<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)}">
<div
th:each="menuItem : ${menu.menuItems}"
class="wi-navbar__item"
th:classappend="${not #lists.isEmpty(menuItem.children)} ? 'wi-navbar__item--has-children'"
>
<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>
</nav>
<div class="wi-navbar__actions">
<button
th:if="${pluginFinder.available('PluginSearchWidget') and theme.config?.navbar?.navbar_show_search != false}"
class="wi-navbar__action-btn wi-navbar__search-btn"
type="button"
th:aria-label="${theme.config?.basic?.label_search ?: '搜索'}"
onclick="SearchWidget.open()"
>
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
</button>
<th:block th:if="${theme.config?.navbar?.navbar_show_theme_switch != false}">
<span th:attr="data-label=${theme.config?.basic?.label_theme_switch ?: '切换主题'}" style="display:inline-flex">
<ThemeSwitcher />
</span>
</th:block>
<button
class="wi-navbar__action-btn wi-navbar__menu-btn"
type="button"
aria-label="Toggle menu"
>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="4" x2="20" y1="12" y2="12"/><line x1="4" x2="20" y1="6" y2="6"/><line x1="4" x2="20" y1="18" y2="18"/></svg>
</button>
</div>
</div>
</header>
<script is:inline th:inline="none">
const navbar = document.getElementById("wi-navbar");
let lastScrollY = window.scrollY;
let ticking = false;
function onScroll() {
if (!ticking) {
requestAnimationFrame(() => {
const currentScrollY = window.scrollY;
if (currentScrollY > 20) {
navbar?.classList.add("wi-navbar--scrolled");
} else {
navbar?.classList.remove("wi-navbar--scrolled");
}
if (currentScrollY > lastScrollY && currentScrollY > 80) {
navbar?.classList.add("wi-navbar--hidden");
} else if (currentScrollY < lastScrollY) {
navbar?.classList.remove("wi-navbar--hidden");
}
lastScrollY = currentScrollY;
ticking = false;
});
ticking = true;
}
}
window.addEventListener("scroll", onScroll, { passive: true });
document.querySelectorAll('.wi-navbar__link[data-href]').forEach(function(link) {
try {
if (new URL(link.href).pathname === window.location.pathname) {
link.classList.add('wi-navbar__link--active');
}
} catch(e) {}
});
document.querySelector(".wi-navbar__menu-btn")?.addEventListener("click", () => {
window.dispatchEvent(new CustomEvent("wi:toggle-mobile-menu"));
});
</script>
<style>
.wi-navbar-wrapper {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
display: flex;
justify-content: center;
padding: 0.75rem 1rem;
pointer-events: none;
transition:
transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
padding var(--duration-normal) var(--ease-out-expo);
}
.wi-navbar--hidden {
transform: translateY(-100%);
}
.wi-navbar__capsule {
display: flex;
align-items: center;
gap: 0.5rem;
width: 100%;
height: 56px;
padding: 0 1.5rem;
margin: 0 auto;
pointer-events: auto;
transition:
background var(--duration-normal) var(--ease-out-expo),
box-shadow var(--duration-normal) var(--ease-out-expo),
transform var(--duration-normal) var(--ease-out-expo);
}
.wi-navbar--glass .wi-navbar__capsule {
border-radius: 9999px;
background: var(--glass-bg);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border: 1px solid var(--glass-border);
box-shadow: var(--shadow-md);
max-width: 900px;
}
.wi-navbar--glass.wi-navbar--scrolled .wi-navbar__capsule {
background: var(--bg-overlay);
box-shadow: var(--shadow-lg);
transform: scale(0.98);
}
.wi-navbar--minimal {
padding: 0;
}
.wi-navbar--minimal .wi-navbar__capsule {
border-radius: 0;
background: transparent;
backdrop-filter: none;
-webkit-backdrop-filter: none;
border: none;
border-bottom: 1px solid transparent;
box-shadow: none;
max-width: 100%;
padding: 0 2rem;
transition: background 0.3s ease, border-color 0.3s ease;
}
.wi-navbar--minimal.wi-navbar--scrolled .wi-navbar__capsule {
background: var(--bg);
border-bottom-color: var(--rule);
}
.wi-navbar--float .wi-navbar__capsule {
border-radius: 16px;
background: var(--glass-bg);
backdrop-filter: blur(24px) saturate(180%);
-webkit-backdrop-filter: blur(24px) saturate(180%);
border: 1px solid var(--glass-border);
box-shadow: var(--shadow-lg);
max-width: 800px;
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s ease, box-shadow 0.3s ease;
}
.wi-navbar--float.wi-navbar--scrolled .wi-navbar__capsule {
transform: scale(0.96);
box-shadow: var(--shadow-md);
}
.wi-navbar__brand {
display: flex;
align-items: center;
gap: 0.5rem;
text-decoration: none;
flex-shrink: 0;
}
.wi-navbar__logo {
height: 32px;
width: auto;
border-radius: 8px;
object-fit: contain;
}
.wi-navbar__logo--square {
border-radius: 0;
}
.wi-navbar__logo--rounded {
border-radius: 8px;
}
.wi-navbar__logo--circle {
border-radius: 50%;
}
.wi-navbar__title {
font-family: var(--font-sans);
font-weight: 700;
font-size: var(--text-md);
color: var(--ink);
letter-spacing: var(--tracking-tight);
white-space: nowrap;
transition: color var(--duration-fast) var(--ease-out-quart);
}
.wi-navbar__brand:hover .wi-navbar__title {
color: var(--accent);
}
.wi-navbar__nav {
display: flex;
align-items: center;
gap: 0.25rem;
flex: 1;
justify-content: center;
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;
padding: 0.3rem 0.7rem;
border-radius: 9999px;
font-size: var(--text-sm);
color: var(--ink-2);
text-decoration: none;
white-space: nowrap;
transition:
color var(--duration-fast) var(--ease-out-quart),
background var(--duration-fast) var(--ease-out-quart);
}
.wi-navbar__link:hover {
color: var(--accent);
background: var(--bg-raised);
}
.wi-navbar__link--active {
color: var(--ink);
background: var(--bg-raised);
font-weight: 600;
}
.wi-navbar__actions {
display: flex;
align-items: center;
gap: 0.25rem;
flex-shrink: 0;
margin-left: auto;
}
.wi-navbar__action-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
padding: 0;
border: none;
border-radius: 9999px;
background: transparent;
color: var(--ink-2);
cursor: pointer;
transition:
background var(--duration-fast) var(--ease-out-quart),
color var(--duration-fast) var(--ease-out-quart);
}
.wi-navbar__action-btn:hover {
background: var(--bg-raised);
color: var(--ink);
}
.wi-navbar__action-btn:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.wi-navbar__menu-btn {
display: none;
}
@media (max-width: 768px) {
.wi-navbar-wrapper {
padding: 0.5rem 0.75rem;
}
.wi-navbar__capsule {
padding: 0 1rem;
}
.wi-navbar__nav {
display: none;
}
.wi-navbar__action-btn {
width: 40px;
height: 40px;
}
.wi-navbar__menu-btn {
display: inline-flex;
}
}
</style>
Reference in New Issue View Git Blame Copy Permalink