AI智能摘要
light-navi 是一款纯静态实现的超轻量级导航小工具，支持中英文名称检索，适用于企业或团队内部系统导航，尤其适合运维、开发和测试人员。该工具通过编辑 ln.data.json 文件即可快速配置项目信息，支持 Nginx、Apache 等多种 Web 容器部署。其核心功能包括环境筛选和关键词搜索，通过集成 jquery、elasticlunr.js 和 pinyinjs 实现了高效的页面操作与检索。
— 此摘要由AI分析文章内容生成，仅供参考。
一个纯静态实现的，支持中英文名称检索的超轻量级导航小工具。主要可应用于企业 / 团队内部系统导航，尤其适合运维、开发、测试等技术同学在日常工作中使用。
一、代码结构
light-navi
├── data
│ └── ln.data.json
├── img
├── static
├── index.html
└── README.md
- index.html ： 用户操作的主窗口页面；
- img目录 ：存放导航项目的logo图片；
- static目录 ：存放
light-navi本身其它css、img、js等静态资源文件，以及所依赖的js包； - ln.data.json ：存放需要导航的项目配置数据，需要增加/减少导航应用时，编辑该文件即可。
二 、安装部署
a. Nginx部署（推荐）
1. 将下载下来的代码包，放到 Nginx 的 html 目录下;
2. 执行命令unzip light-navi-{version}.zip解压代码包即可。
解压后，在浏览器中直接输入 http://{nginx地址}/light-navi 就可以访问到主页面了。
b. 其它方式
因为light-navi是通过纯静态文件实现的，所以理论上，可将其部署在任何web容器下使用，如Apache、Tomcat、Jetty等。
当然，如果你愿意，你也可以直接在本地直接用浏览器打开代码根目录下的index.html使用。
三、使用简介
进入light-navi主页面后：
在主页面中，默认将根据不同的部署环境，全量展示所有的项目列表信息：
- 直接点击项目小方块，就会在新窗口中打开对应的系统；
- 点击左侧环境菜单选项，就会筛选出对应环境的全部项目列表；
- 在搜索框中输入关键词，点搜索，就会筛选出所有包含关键词的项目列表；
四、编辑导航数据
light-navi 小工具默认有一些示例项目配置数据，实际使用时，你需要将其中的数据修改为自己实际的项目信息，而这些改动，
你只需要编辑 /data 文件夹下的 ln.data.json 文件即可。ln.data.json 文件数据结构示例如下：
lightNaviData = {
"config":{
"envs":[
"开发环境",
"测试环境",
"生产环境"
],
"showFooter":true,
"defalutEnv":"all"
},
"data":[
{
"name":"Grafana",
"logo":"grafana.png",
"desc":"一个跨平台的开源的度量分析和可视化工具，可以通过将采集的数据查询然后可视化的展示，并及时通知。",
"urls":[
"http://grafana-dev.dgchong.cn",
"http://grafana-test.dgchong.cn",
"http://grafana-pro.dgchong.cn"
]
},
{
"name":"GitLab",
"logo":"gitlab.png",
"desc":"一个用于仓库管理系统的开源项目，使用Git作为代码管理工具，并在此基础上搭建起来的Web服务。",
"urls":[
"http://gitlab.dgchong.cn"
]
},
{
"name":"Confluence",
"logo":"wiki.png",
"desc":"一个专业的企业知识管理与协同软件，也可以用于构建企业wiki。",
"urls":[
"",
"http://confluence.dgchong.cn"
]
}
]
}
各参数字段含义简要说明如下：
| 参数 | 参数项 | 说明 |
|---|---|---|
| config | envs | 数组。即开发、测试、生产等各个环境的名称数组，左侧菜单将根据该配置展示；后续也可根据该配置筛选。 |
| showFooter | 是否显示light-navi主页面下方的foot信息。不想显示改为false即可。 | |
| defalutEnv | 默认选中的左侧菜单项。默认值为”all“，即不选中；如果需要默认选中某一项，则改为对应菜单项的值即可。（也就是envs数组中的一个值） | |
| data | name | 项目名称。 |
| logo | 项目logo图片名称。填写后，需将对应名称的图片放在 /img 目录下；如不填值，则会默认填充展示light-Navi的logo图片。 | |
| desc | 项目描述。 | |
| urls | 数组。即开发、测试、生产等各个环境的项目URL地址。该数组的值与envs数组参数中的值，依次一一对应。如果某个环境没有该项目的地址，则以””占位，light-Navi将跳过处理。 |
如果你需要增加 / 减少 / 调整需要导航的项目，直接编辑 data 参数数据节点并保存即可。然后直接刷新浏览器页面，就可以看到最新的导航列表。
其它
light-navi是一个只有3、4百行代码的纯静态导航小工具，用于满足特定的场景需求，不要期望解决太多问题。light-navi之所以能以较少的代码，达到相对可用的状态，是因为站在了前人的肩膀上。共引入了以下3个JS库。- jquery ( 用于页面基本dom操作 )
- elasticlunr.js （ 用于支持英文全文检索 ）
- pinyinjs （ 用于支持中文全文检索。众所周知，因为中文的博大精深，
中文的全文检索，分词是一个很复杂的问题，而通过纯js实现就更难了【词库太大不适和】，所以，此处笔者取了个巧，通过该库将中文转成拼音，然后
再通过英文分词检索工具，变相实现对中文的全文检索。所以，通过中文关键词搜索时，尽量多输入几个关键字，以提高检索准确度。）
