静态导航页设计和实现

11 条回复

102 次浏览

经常有人进假的 DS、WPS 之类的官网，其实百度搜不到多少，都是必应和谷歌多，银狐玩的 SEO 投毒和水坑攻击。
为了避免这种情况，在内网部署一个导航还是有必要的，为什么不用现成的，主要还是不符合我的需求，我要做静态的一方面是为了便于部署，一方面是后面接手的人方便维护。

地址： https://www.mxpy.cn/nav/index.html
bootstrap5.3.3+JS（jQuery 都没用，正常应该用的，AI 没用，我也没说）

1、轻量，不需要各种依赖。
2、便于维护，不用什么工具，记事本就可以维护。
3、支持动态更新，但是数据存在用户本地，这样不需要开发服务端。
4、支持用户自定义书签。
5、支持用户配置导入导出。
6、支持焦点记忆，点击 tab 后记录位置，下次打开就在当前 tab。

之前让 AI 给我做过一个三角洲的导航页，我就拿来让 AI 给我生成了一下类似的风格，做的都是 tab。

总体设计就是

复制

logo
搜索框

分类|分类|分类|分类|分类

网站|网站|网站

为了实现实时更新，把页面做成了动态渲染，网页打开的时候请求 list.json，读取网站信息渲染成 HTML。

复制

/* =========================================================
       加载默认导航
    ========================================================= */

    async function loadNavList() {

        try {

            const response =
                await fetch(
                    "statics/navlist.json?ver=" +
                    Date.now()
                );


            if (!response.ok) {

                throw new Error(
                    "HTTP " +
                    response.status
                );

            }


            const data =
                await response.json();


            if (Array.isArray(data)) {

                navList = data;

            } else {

                navList = [];

            }

        } catch (error) {

            console.error(
                "加载 navlist.json 失败：",
                error
            );

            navList = [];

        }

    }

navlist.json 设计如下：

复制

[
	{
		"title": "墨雪飘影漏洞收集平台",
		"desc": "首家个人身份通过工信部备案的漏洞收集平台",
		"url": "https://v.mxpy.cn",
		"icon": "/favicon.ico",
		"color": "info",
		"category": "默认",
		"badge": "推荐"
	}
]

如果是 badge 为推荐，就会自动加上外部方框。

总体就是这样的