fix(portal): 官方文档导航直接跳文档站,不再停在本站锚点
mirror-to-gitee / mirror (push) Successful in 3s

原先导航「官方文档」指向 /#docs(首页内的文档区块),
用户期望点它直接进 http://open.5iot.com:5051/docs/。

改动
- 导航项改为外链 http://open.5iot.com:5051/docs/,
  带 target=_blank 与 rel=noopener,新开标签页不打断阅读
- 首页 hero 的「官方文档」按钮同样改为外链直跳
- 文档站地址收敛为单一来源:data/content.ts 导出 DOCS_BASE / DOCS_HOME,
  可用环境变量 DOCS_BASE 覆盖;config.mts 与 HomePage.vue 都引用它,
  消除原先三处硬编码
- 首页的「官方文档」区块(#docs)保留,仍是各手册入口的聚合卡片

验证
- 导航渲染实测:href=http://open.5iot.com:5051/docs/, target=_blank
- 点击实测:新开标签页到目标地址,原页面 URL 不变
- 锚点项高亮不受影响(点「产品功能」仍正常变蓝)
- 构建 13 页 262 引用 0 失效
This commit is contained in:
Dai0814
2026-11-04 15:36:04 +08:00
parent 39209ef591
commit 6944652966
9 changed files with 195 additions and 21 deletions
+2
View File
@@ -17,3 +17,5 @@ dist
.vitepress/v4 .vitepress/v4
.vitepress/v5 .vitepress/v5
.vitepress/v6 .vitepress/v6
.vitepress/vbuild-check
.vitepress/v7
+62 -5
View File
@@ -1,5 +1,6 @@
import { defineConfig } from 'vitepress' import { defineConfig } from 'vitepress'
import { projects } from '../data/projects' import { projects } from '../data/projects'
import { docs, DOCS_HOME } from '../data/content'
/** /**
* 门户站构建配置 * 门户站构建配置
@@ -19,11 +20,42 @@ const DOCS_URL: Record<string, string> = {
iotlcm: 'http://open.5iot.com:5051/docs/', iotlcm: 'http://open.5iot.com:5051/docs/',
} }
function tokenizeSearchText(text: string): string[] {
const terms = text.match(/[A-Za-z0-9]+|[\u3400-\u9fff]+/g) ?? []
return terms.flatMap((term) => {
if (!/^[\u3400-\u9fff]+$/.test(term)) return [term.toLowerCase()]
if (term.length === 1) return [term]
return Array.from({ length: term.length - 1 }, (_, index) => term.slice(index, index + 2))
})
}
const searchTranslations = {
button: {
buttonText: '搜索',
buttonAriaLabel: '搜索文档',
},
modal: {
displayDetails: '显示详细结果',
resetButtonTitle: '清除搜索',
backButtonTitle: '关闭搜索',
noResultsText: '没有找到相关结果',
footer: {
selectText: '选择',
selectKeyAriaLabel: '回车',
navigateText: '切换结果',
navigateUpKeyAriaLabel: '上箭头',
navigateDownKeyAriaLabel: '下箭头',
closeText: '关闭',
closeKeyAriaLabel: '退出',
},
},
}
export default defineConfig({ export default defineConfig({
srcDir: './pages', srcDir: './pages',
base: SITE_BASE, base: SITE_BASE,
title: '雪羊科技开源', title: '雪羊科技物联网卡与设备管理平台',
description: '雪羊科技开源项目门户:物联网卡管理、DTU 设备管理、中后台开发框架', description: '雪羊科技开源的物联网卡与设备管理平台:物联网卡管理、DTU 设备管理、中后台开发框架,Apache-2.0 许可',
lang: 'zh-CN', lang: 'zh-CN',
cleanUrls: true, cleanUrls: true,
lastUpdated: false, lastUpdated: false,
@@ -31,7 +63,7 @@ export default defineConfig({
['link', { rel: 'icon', type: 'image/svg+xml', href: `${SITE_BASE}favicon.svg` }], ['link', { rel: 'icon', type: 'image/svg+xml', href: `${SITE_BASE}favicon.svg` }],
], ],
themeConfig: { themeConfig: {
siteTitle: '雪羊科技', siteTitle: '雪羊科技<span class="site-subtitle">物联网卡与设备管理平台</span>',
logo: { src: '/snowgoat-logo.png', alt: '雪羊科技' }, logo: { src: '/snowgoat-logo.png', alt: '雪羊科技' },
nav: [ nav: [
{ text: '首页', link: '/' }, { text: '首页', link: '/' },
@@ -40,7 +72,13 @@ export default defineConfig({
{ text: '界面预览', link: '/#preview' }, { text: '界面预览', link: '/#preview' },
// activeMatch:进入任一项目详情页时「项目」保持高亮 // activeMatch:进入任一项目详情页时「项目」保持高亮
{ text: '项目', link: '/projects/', activeMatch: '^/projects/' }, { text: '项目', link: '/projects/', activeMatch: '^/projects/' },
{ text: '官方文档', link: '/#docs' }, // 官方文档直接跳文档站(外站),不在本站内做锚点停留
{
text: '官方文档',
link: DOCS_HOME,
target: '_blank',
rel: 'noopener',
},
{ text: '关于', link: '/about' }, { text: '关于', link: '/about' },
], ],
sidebar: { sidebar: {
@@ -63,11 +101,30 @@ export default defineConfig({
{ icon: 'github', link: ORG_URL }, { icon: 'github', link: ORG_URL },
], ],
footer: { footer: {
message: '雪羊科技开源 · Apache-2.0', message: '雪羊科技物联网卡与设备管理平台 · Apache-2.0',
copyright: 'Copyright © 雪羊科技', copyright: 'Copyright © 雪羊科技',
}, },
search: { search: {
provider: 'local', provider: 'local',
options: {
translations: searchTranslations,
miniSearch: {
options: { tokenize: tokenizeSearchText },
searchOptions: { combineWith: 'AND' },
},
_render(src, env, md) {
const html = md.render(src, env)
if (env.relativePath !== 'index.md') return html
const homeSearchText = [
'雪羊科技开源 首页 项目 产品功能 核心能力 界面预览 官方文档',
...projects.map((project) => `${project.name} ${project.tagline} ${project.summary}`),
...docs.map((doc) => `${doc.name} ${doc.desc} ${doc.project}`),
].join('\n\n')
return `${html}\n${md.render(homeSearchText, env)}`
},
},
}, },
outline: { outline: {
level: [2, 3], level: [2, 3],
+11 -5
View File
@@ -6,6 +6,7 @@ import {
productLines, productLines,
coreAbilities, coreAbilities,
docs, docs,
DOCS_HOME,
} from '../../../data/content' } from '../../../data/content'
</script> </script>
@@ -14,10 +15,10 @@ import {
<!-- Hero --> <!-- Hero -->
<section class="p-hero"> <section class="p-hero">
<div class="p-wrap"> <div class="p-wrap">
<span class="p-eyebrow">APACHE-2.0 · 开源项目门户</span> <span class="p-eyebrow">APACHE-2.0 · 开源运营平台</span>
<h1 class="p-hero-title">物联网与中后台<em>基础软件</em></h1> <h1 class="p-hero-title">雪羊科技物联网<em>卡与设备</em>管理平台</h1>
<p class="p-hero-sub"> <p class="p-hero-sub">
雪羊科技对外开源的项目集合。物联网卡管理、DTU 设备管理、中后台开发底座, 我们对外开源的项目集合。物联网卡管理、DTU 设备管理、中后台开发底座,
同一套工程规范,同一个许可证,clone 之后就能跑起来。 同一套工程规范,同一个许可证,clone 之后就能跑起来。
</p> </p>
<div class="p-hero-actions"> <div class="p-hero-actions">
@@ -27,7 +28,12 @@ import {
<path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" /> <path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" />
</svg> </svg>
</a> </a>
<a class="p-btn p-btn--ghost" href="#docs">官方文档</a> <a
class="p-btn p-btn--ghost"
:href="DOCS_HOME"
target="_blank"
rel="noopener"
>官方文档</a>
</div> </div>
<div class="p-stats"> <div class="p-stats">
@@ -214,7 +220,7 @@ import {
</div> </div>
<p class="doc-note"> <p class="doc-note">
文档站地址:<a :href="'http://open.5iot.com:5051/docs/'" target="_blank" rel="noopener">http://open.5iot.com:5051/docs/</a> 文档站地址:<a :href="DOCS_HOME" target="_blank" rel="noopener">{{ DOCS_HOME }}</a>
</p> </p>
</div> </div>
</section> </section>
+84 -6
View File
@@ -12,14 +12,92 @@ import ProjectCard from './ProjectCard.vue'
<style scoped> <style scoped>
.proj-list { .proj-list {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); grid-template-columns: 1fr;
gap: 20px; gap: 0;
margin: 32px 0 56px; margin: 24px 0 48px;
} }
@media (max-width: 720px) { :deep(.p-proj) {
.proj-list { display: grid;
grid-template-columns: 1fr; grid-template-columns: minmax(0, 1fr) auto;
gap: 0 16px;
padding: 14px 6px;
background: transparent;
border: 0;
border-bottom: 1px solid var(--p-line);
border-radius: 0;
box-shadow: none;
transition: background-color 0.18s ease;
}
:deep(.p-proj:first-child) {
border-top: 1px solid var(--p-line);
}
:deep(.p-proj:hover) {
transform: none;
border-color: var(--p-line);
background: var(--p-surface-alt);
box-shadow: none;
}
:deep(.p-proj-top),
:deep(.p-proj-tagline),
:deep(.p-proj-summary) {
grid-column: 1 / -1;
}
:deep(.p-proj-name) {
font-size: 18px;
}
:deep(.p-proj-tagline) {
margin-top: 3px;
font-size: 13px;
}
:deep(.p-proj-summary) {
margin-top: 7px;
font-size: 13px;
line-height: 1.65;
}
:deep(.p-tags) {
grid-column: 1;
margin-top: 9px;
gap: 5px;
}
:deep(.p-tags li) {
padding: 2px 7px;
font-size: 11px;
}
:deep(.p-proj-foot) {
grid-column: 2;
grid-row: 4;
align-self: center;
gap: 10px;
margin-top: 9px;
padding-top: 0;
border-top: 0;
font-size: 12px;
}
@media (max-width: 560px) {
:deep(.p-proj) {
gap: 0 8px;
padding: 13px 4px;
}
:deep(.p-proj-name) {
font-size: 16px;
}
:deep(.p-proj-foot) {
flex-direction: column;
align-items: flex-end;
gap: 4px;
} }
} }
</style> </style>
+25
View File
@@ -1050,3 +1050,28 @@ html.portal-nav-home .VPNavBarMenuLink.active:not([data-anchor-active]) {
color: var(--vp-c-brand-1); color: var(--vp-c-brand-1);
} }
/* ============================================================
左上角站点标题两行排版
第一行:雪羊科技(主标题)
第二行:物联网卡与设备管理平台(副标题,更弱)
副标题用 display:block 自然换行,无需 <br>
============================================================ */
.VPNavBarTitle .title-text {
line-height: 1.2;
}
.VPNavBarTitle .title-text .site-subtitle {
display: block;
margin-top: 2px;
font-size: 11.5px;
font-weight: 500;
letter-spacing: 0.02em;
color: var(--p-ink-3);
}
@media (max-width: 860px) {
.VPNavBarTitle .title-text .site-subtitle {
font-size: 10.5px;
}
}
+8 -2
View File
@@ -488,9 +488,15 @@ export interface DocEntry {
/** /**
* 文档站是随 iotLCM 发布的独立站点(VitePress),按手册分册。 * 文档站是随 iotLCM 发布的独立站点(VitePress),按手册分册。
* 地址可用 DOCS_BASE 环境变量在构建时覆盖,见 .vitepress/config.mts。 * 换域名或换端口时只改这一处;也可用环境变量 DOCS_BASE 在构建时覆盖
* (与 .vitepress/config.mts 里的 nav 配置保持同一个来源)。
*/ */
const DOCS_BASE = 'http://open.5iot.com:5051/docs' export const DOCS_BASE =
(typeof process !== 'undefined' && process.env?.DOCS_BASE) ||
'http://open.5iot.com:5051/docs'
/** 文档站首页,供 hero 按钮与区块底部注释复用 */
export const DOCS_HOME = `${DOCS_BASE.replace(/\/+$/, '')}/`
export const docs: DocEntry[] = [ export const docs: DocEntry[] = [
{ {
+1 -1
View File
@@ -6,7 +6,7 @@ outline: deep
# 关于 # 关于
雪羊科技开源项目门户汇集公司对外发布的开源项目。当前收录物联网卡管理平台(iotLCM)、DTU 设备管理平台(秀杰 DTU)与中后台开发框架(XiuAdmin)。 雪羊科技对外开源的物联网卡与设备管理平台,汇集公司发布的开源项目。当前收录物联网卡管理平台(iotLCM)、DTU 设备管理平台(秀杰 DTU)与中后台开发框架(XiuAdmin)。
## 许可证 ## 许可证
+1 -1
View File
@@ -1,7 +1,7 @@
--- ---
layout: page layout: page
title: 雪羊科技开源 title: 雪羊科技开源
description: 雪羊科技开源项目门户:物联网卡管理、DTU 设备管理、中后台开发框架 description: 雪羊科技开源的物联网卡与设备管理平台:物联网卡管理、DTU 设备管理、中后台开发框架
sidebar: false sidebar: false
aside: false aside: false
--- ---
+1 -1
View File
@@ -6,7 +6,7 @@ outline: deep
# 全部项目 # 全部项目
雪羊科技对外开源的项目集合。三个项目覆盖物联网卡管理、硬件设备管理与中后台开发底座,全部以 Apache-2.0 发布。 雪羊科技对外开源的物联网卡与设备管理平台。三个项目覆盖物联网卡管理、硬件设备管理与中后台开发底座,全部以 Apache-2.0 发布。
<ProjectList /> <ProjectList />