自制本地单机的定制化导航页面

一、前言

在浏览网页时，如果我们想要收藏该网址或者页面，可以直接使用浏览器或者其他搜索引擎的收藏的收藏功能，但是一旦随着收藏的网址逐渐增多，浏览器自带的收藏功能或者其他搜索引擎的收藏就显得捉襟见肘

• 收藏数量增多后无法快速定位并点击想要查阅的收藏网址
• 个人认为浏览器自带的收藏夹美观性有待提高
• 添加链接的时候，不是提示链接无效，就是提示超出标签数量，无法继续添加
• 隐私安全没办法百分百保证

因此，经过一番探索，功夫不负有心人，我终于找到了@jijiucheng大佬在Github上上传的本地单机的定制化导航---苜蓿导航！

二、使用方式

2.1 方法1

1. 将大佬的项目下载到本地；并解压到指定的文件目录；
2. 将根目录下的 html 文件通过浏览器打开，在浏览器的地址栏会获取到绝对地址；
3. 可以将这个地址保存到浏览器的标签栏，亦或者可以给浏览器设置默认打开页面也行，这样的话，以后浏览器每次启动都可以快捷到进入到该导航页面

2.2 方法2

如果大家不想下载管理过多的文件，亦或者担心文件可能会丢失，那就只下载 global-navigation.html 文件即可；其数据的增删改详见下一章。

三、数据的增删改方式

3.1 美化修改

在 navigation.js 文件中的顶部有一个 list 的属性，展开后就是当下的所有导航数据；可以参考当下的数据结构，自定义添加和删除、更改；

• 导航名称在 navigation.html 文件中更改；

• selectSubIndex：代表默认打开的时候二级导航页面的选中；

• 如果想调整整个页面显示的宽度，在 navigation.css 中的 .container 中调整 width 即可；

• 如果想调整单行链接个数，在 navigation.css 中的 .link-item 中调整 width 即可；

• 如果想添加占位空链接，只需要将对应数据结构中的所有值全部清空，但仍保留空数据结构即可。

3.2 内容修改

如果要添加新的连接或者网页，只需要对html文件进行编辑，接着按照下方格式填入具体信息，其中title和url为必填项，填写完后保存即可。

{
  "title": example",
  "icon": "example",
  "url": "example",
  "desc": "example"
}

四、本文参考

JJC_Navigation（苜蓿导航）