现象:导航左上角显示成「雪羊科技物联网卡与设备管理平台」挤在一行, 副标题没有换行,还压到了 logo 上。 根因 siteTitle 里的副标题是 <span class="site-subtitle">,经 v-html 插入后, 其父级是 VitePress 自己的**裸 <span>(无 class)**,而不是 .title-text。 原样式写的是 `.VPNavBarTitle .title-text .site-subtitle`, 选择器永远匹配不上,display:block 从未生效,副标题只能行内跟随。 改动 - 选择器改为 .VPNavBarTitle .site-subtitle(去掉不存在的 .title-text) - 品牌名与副标题的容器改为 flex 纵向 + 垂直居中, 整体在导航高度内居中 - 副标题 11px / 0.03em 字距 / var(--p-ink-3) 弱化; 品牌名与副标题间距 3px - 响应式:≤860px 副标题缩到 10.5px;≤480px 隐藏副标题只留品牌名 - 新增 scripts/check-nav-brand.mjs 并接入 npm run check(prebuild/predev 自动跑): 校验 siteTitle 的**品牌主体**必须是「雪羊科技」(允许带副标题 span), 且 logo 配置与文件都存在。 反例全部验证:改成「雪羊开源」→ 拦;只留「雪羊科技」→ 通过; 改成「雪羊科技开源」→ 拦;删掉 siteTitle → 拦 验证 - 干净副本构建后实测三档宽度: 1440/860 → 「雪羊科技 ⏎ 物联网卡与设备管理平台」,display:block 390 → 只显示「雪羊科技」,副标题 display:none - 品牌区截图确认两行居中、不压 logo
This commit is contained in:
@@ -1075,3 +1075,50 @@ html.portal-nav-home .VPNavBarMenuLink.active:not([data-anchor-active]) {
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
导航左上角品牌区:两行结构
|
||||
第一行:雪羊科技(品牌名)
|
||||
第二行:物联网卡与设备管理平台(定位副标题,更弱)
|
||||
siteTitle 里的副标题是 <span class="site-subtitle">,由 v-html 插入。
|
||||
注意:它的父级是 VitePress 自己的裸 <span>(无 class),
|
||||
所以选择器不能写 .title-text .site-subtitle —— 那个类根本不存在。
|
||||
直接用 .VPNavBarTitle .site-subtitle 即可。
|
||||
============================================================ */
|
||||
.VPNavBarTitle .title {
|
||||
line-height: 1.2;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
/* 品牌名与副标题的容器:两行紧凑排列,整体垂直居中 */
|
||||
.VPNavBarTitle .title > span {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
line-height: 1.15;
|
||||
/* 品牌名与副标题作为一个整体在导航高度内垂直居中 */
|
||||
height: var(--vp-nav-height);
|
||||
}
|
||||
|
||||
.VPNavBarTitle .site-subtitle {
|
||||
display: block;
|
||||
margin-top: 3px;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.03em;
|
||||
line-height: 1.25;
|
||||
color: var(--p-ink-3);
|
||||
}
|
||||
|
||||
@media (max-width: 860px) {
|
||||
.VPNavBarTitle .site-subtitle {
|
||||
font-size: 10.5px;
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* 窄屏下副标题可能挤压,超窄时隐藏,只留品牌名 */
|
||||
@media (max-width: 480px) {
|
||||
.VPNavBarTitle .site-subtitle {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user