前言

每一个公司或者团队有会有相关的项目网址，考虑到团队共用的东西，所以计划是开发一个静态导航页，这样就不需要每个人自己维护了，使用同一套即可，当时在Github上面找了一些开源的静态导航页项目，使用的是开源库static-nav，它是使用HTML+CSS+JQ简单实现的，代码里面网址都是直接写死的，我只要将其替换就可以。

1. 遇到问题

static-nav虽然可以正常应对当前的需求，但是使用一段时间之后发现，如果我要替换或者新增一些网址，每次都需要在.html文件中修改，然后再重新部署。一两次还好，次数多了，就有点受不了了，再加上一个模块的网址多了之后，好几个模块所占用的空间不一致的话，那布局就容易错乱，为了解决这个问题，我每次都需要使用占位符解决。

2. 解决方案

考虑到维护、后期拓展难的问题，就打算重构这个项目，并命名为dst-static-nav，基于vue next + vite + element-plus实现，通过一个navLists.ts文件动态配置，后期只需要将这个文件存放在服务器，如有任何需求，只需要改动这个navLists.ts文件即可，不需要改动项目界面，然后又要重新部署一遍，因为最近百度捣鼓了一个开发者搜索，所以也加了一下，项目效果图，如下所示：

功能主要是以下几点，分别是：

1. 左边菜单栏快速定位，右边静态导航页动态渲染

2. 通过navList.ts配置，无需改动前端页面

3. 支持百度开发者搜索

当前只是这些功能，后期可能考虑部署线上，然后怎么可以做到通用一点。

3. 技术要点

项目虽然很小，但是有一些细节点还是可以梳理记录一下的，技术没有高低之分，只要能解决了问题就是好技术。

3.1 基于 el-scrollbar 实现左右联动定位到标题栏

项目开发过程中，主要解决的问题是，左侧菜单栏和右边导航布局页面的联动，需求就是左侧菜单栏选中，右边导航页对应的标题栏滚动到顶部显示，在实现中主要使用document.getElementsByName()这个函数，当<div></div>上定义了name属性，就可以通过这个函数获取到它与顶部的距离offsetTop，以此可以将滚动条滚动到指定的位置，如下所示：

 const handleSelect = (key: string, keyPath: string[]) => {     let offsetTop = document.getElementsByName(key)[0].offsetTop     scrollbarRef.value!.setScrollTop(offsetTop - 20) }

3.2 实现左侧菜单栏最后几个菜单的标题置顶

在项目使用过程中，发现左侧菜单栏最后几个菜单，来回切换，导航标题没有置顶，原因很简单，因为布局不够，为了解决这个问题，就需要在最后一个导航模块增加布局，但是应该要增加多少呢？每个导航模块的高度都是不定的，所以要新增的布局高度只能通过计算，动态设置。

首先，需要知道最后一个导航模块的名称，如下所示：

 // 获取左侧菜单最后一项，基于它加上需补充的空间高度(浏览器内高度-卡片整个高度) let lastNavName = navLists.at(-1)?.chindren.at(-1)?.label

然后，需要获取当前浏览器页面的高度，减去这个导航模块的高度，就可以知道需要新增多高的布局了，如下所示：

 onMounted(() => {     let lastClientHeight = document.getElementsByName(`${lastNavName}-card`)[0]         .clientHeight     let needSpaceHeight = window.innerHeight - lastClientHeight - 40     needSpaceStyle.value.height = `${needSpaceHeight}px` })

总结

dst-static-nav项目还有蛮多东西需要完善的，也是在逐步新增需求，虽然不是什么了不起的项目，但是项目开发整个流程规范是一样的，争取培养起来用心做事情的感觉，从中体验到丝丝成就感。