fix(i18n): 语言轨导航修复+重排,热力图切 GitHub(车道 E)
- 真 bug(用户实测:切 en 后点板块回中文):Header nav href 硬编码
zh 路径,curLocale 只喂了词条——localeOf(Astro.url) 构建期自推断
+五项+品牌链接全轨化(brand 原指 / 同病同修),aria 同步
- 导航重排(用户拍板):开源 · 文章 · 图库 · 瞬间 · 关于;瞬间
新进导航;移动 320-430×双轨八格页面级溢出全 0(内滚阈值 350→450
+中段地板再收;en 390-430 尾部约 55px 靠内滚——'Open Source'→
'Projects' 改名可省 35px,留用户拍板)
- 热力图纯切 GitHub(用户拍板):GraphQL contributionsCollection
53 周窗口(上海日界);token=宿主 0600 github-token.txt,缺位→
WARN 降级样例数据(当前站点即样例);三级回落 token→样例→空网格
- E2E 新增 2 断言:en 页 nav 全 /en/ 前缀+brand 指 /en/(本 bug
的回归测试)
车道:op-gitea(自验 33/33);收编验收:en/zh 序实测+三宽度溢出 0+
E2E 33/33(本地 dist 口径——staging 未含未推代码为既定纪律)
验证: pnpm astro build 34 页 exit 0;node tests/e2e.mjs 33/33;
en/zh 导航序与 href 前缀 playwright 实测
Spec: none (Header 修复+重排+热力图换源,车道级交付)
Co-authored-by: GLM-5.3
This commit is contained in:
1 parent
363cc616f7
commit
d00ca7e447
5 files changed
+120
-63
No files matched your search
+20
-11
@@ -2,26 +2,30 @@
|
||||
import { localeOf, localePath } from '../lib/locale';
|
||||
import { t } from '../i18n/ui';
|
||||
|
||||
// 顶部导航:≤4 项纪律(防 higan 十项复发);当前页 aria-current
|
||||
// 顶部导航:单行纪律 + 双语整轨(zh 无前缀 ↔ /en/,locale 构建期按页自推断——
|
||||
// 曾只把 locale 喂给词条/语言钮而 href 裸奔 zh 路径,en 页点导航全部跌回中文轨)
|
||||
const path = Astro.url.pathname;
|
||||
const curLocale = localeOf(path);
|
||||
const prefix = curLocale === 'en' ? '/en' : '';
|
||||
const isCurrent = (href: string) =>
|
||||
path === href || path === href.replace(/\/$/, '') || path.startsWith(href);
|
||||
|
||||
// 语言切换:同路径跨前缀跳转(zh 无前缀 ↔ /en/),预构建双语毫秒级
|
||||
const curLocale = localeOf(path);
|
||||
// 顺序:开源 · 文章 · 图库 · 瞬间 · 关于(瞬间新进,开源前置)
|
||||
const nav = [
|
||||
{ href: '/archives/', label: t('nav_posts', curLocale) },
|
||||
{ href: '/gallery/', label: t('nav_gallery', curLocale) },
|
||||
{ href: '/about/', label: t('nav_about', curLocale) },
|
||||
{ href: '/opensource/', label: t('nav_opensource', curLocale) },
|
||||
{ href: `${prefix}/opensource/`, label: t('nav_opensource', curLocale) },
|
||||
{ href: `${prefix}/archives/`, label: t('nav_posts', curLocale) },
|
||||
{ href: `${prefix}/gallery/`, label: t('nav_gallery', curLocale) },
|
||||
{ href: `${prefix}/moments/`, label: t('nav_moments', curLocale) },
|
||||
{ href: `${prefix}/about/`, label: t('nav_about', curLocale) },
|
||||
];
|
||||
const homeHref = curLocale === 'en' ? '/en/' : '/';
|
||||
const switchHref = localePath(path, curLocale === 'zh' ? 'en' : 'zh');
|
||||
const switchLabel = curLocale === 'zh' ? 'EN' : '中';
|
||||
---
|
||||
|
||||
<header class="site-header safe-area">
|
||||
<div class="container-wide header-inner">
|
||||
<a href="/" class="brand" aria-label="wait4x 首页">wait4x</a>
|
||||
<a href={homeHref} class="brand" aria-label={`wait4x ${t('nav_home', curLocale)}`}>wait4x</a>
|
||||
<nav aria-label="主导航">
|
||||
<ul>
|
||||
{nav.map((item) => (
|
||||
@@ -133,11 +137,16 @@ const switchLabel = curLocale === 'zh' ? 'EN' : '中';
|
||||
nav ul { gap: clamp(2px, 0.8vw, 8px); }
|
||||
.header-inner .tap { min-width: clamp(28px, 8vw, 44px); min-height: clamp(28px, 8vw, 44px); }
|
||||
.nav-lang { font-size: clamp(11.5px, 3vw, 13px); }
|
||||
/* 超窄兜底(<350px,en 长词流式下限后仍溢):导航内滚代替页面晃动——
|
||||
页面级 scrollWidth 恒等于视口,任何机型不破版 */
|
||||
@media (max-width: 350px) {
|
||||
/* 超窄兜底:导航内滚代替页面晃动——页面级 scrollWidth 恒等于视口,任何机型不破版。
|
||||
阈值 350→450(E 车道 6 项后 en 词长实测:360-430px 页溢 42-51px;zh 无感知) */
|
||||
@media (max-width: 450px) {
|
||||
nav ul { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
|
||||
nav { min-width: 0; }
|
||||
.header-inner { flex-wrap: nowrap; }
|
||||
/* 中段再收一档地板(en 五词在 360-430 差 55-61px):字号 11px 下限仍可读,
|
||||
目标是常规视口零内滚、内滚只作极端巪余 */
|
||||
.nav-link { font-size: clamp(11px, 3.2vw, 14px); padding-inline: clamp(1px, 1vw, 8px); }
|
||||
nav ul { gap: clamp(1px, 0.8vw, 8px); }
|
||||
.header-inner .tap { min-width: clamp(26px, 8vw, 44px); }
|
||||
}
|
||||
</style>
|
||||
Reference in new issue
Block a user