当前位置：首页 > news >正文

网站的配色技巧网址大全导航

news 2025/11/4 1:43:27

网站的配色技巧,网址大全导航,网站主题模板,asp动态网站开发实例序言别因今天的懒惰，让明天的您后悔。输出文章的本意并不是为了得到赞美，而是为了让自己能够学会总结思考；当然，如果有幸能够给到你一点点灵感或者思考，那么我这篇文章的意义将无限放大。背景随着AI的发展市面上…

序言

别因今天的懒惰，让明天的您后悔。输出文章的本意并不是为了得到赞美，而是为了让自己能够学会总结思考；当然，如果有幸能够给到你一点点灵感或者思考，那么我这篇文章的意义将无限放大。

背景

随着AI的发展市面上的AI网站或者软件也是越来越多了，但是我们知道的网站可能只有那么比较出名的那么几个，但是实际上好用的AI网站起码都得几百上千了（也有不少套壳的），我有时候需要用AI软件的时候都是百度各种找，实在是不太方便，然后我想反正自己也要用原来的服务器空置到的，何不废物利用呢？所以久有了这个网站的诞生吉云工具箱；代码库 dream-utools 有兴趣的朋友可以去看一下，我将数据都转为了js数据，可以直接部署你私有网站；当然如果你觉得有用就收藏哈。

在这里插入图片描述

代码库

我自己本身想自己去搭建这么一个网站，但是我觉得太麻烦了；还不如直接找一些开源的代码直接复制使用，我在GitHub上找了好几个开源库以后发现这个库比较符合我的需求，而且界面看起来也是比较简单好看的 gengyun-nav

数据来源

由于开源库的数据来源的通过接口返回的，所有没有现成的数据；所以就想到去爬取一些数据（本来是准备一个一个的去写的）；我查看了这类网站的一个特性都是返回的html；我就将爬取到的html数据保存到一个txt文件中。一下代码就是解析html中的数据。

以下的代码都是爬取数据的示例代码，如果你们在爬取数据的时候请根据自己的实际情况进行修改即可。

获取每一个分类


// 导航栏
async function menus() {const data = await fs.readFile("./index.txt");const html = data.toString();// 解析class=content的divconst $ = cheerio.load(html);const content = $(".content").html();// 解析class=align-items-center的div=> 是class=content的div的子元素=>获取所有多个class=align-items-center的divconst alignItemsCenter = $(".content").find(".d-flex.flex-fill.flex-tab.align-items-center").map((i, el) => {return $(el).html();}).get();// console.log(alignItemsCenter);let arr = [];// 循环获取所有多个class=align-items-center的divfor (let i = 0; i < alignItemsCenter.length; i++) {const element = alignItemsCenter[i];// 获取navItem a标签的内容const a = $(element).find(".nav-item").find("a").map((i, el) => {return $(el).html();}).get();arr.push({id: uuid(),name: "办公工具",pid: 0,ind: i,icon: "CashOutline",children: a.map((v) => {return {id: uuid(),name: v,icon: "CashOutline",};}),});}//   将arr写入json文件await fs.writeFile("./menus.json", JSON.stringify(arr, null, 2));
}menus();

获取每个分类的内容（每一个AI网站）

// 工具类
async function index() {const data = await fs.readFile("./index.txt");const html = data.toString();// 解析class=content的divconst $ = cheerio.load(html);const alignItemsCenter = $(".content-layout").find(".tab-content .mt-4").map((i, el) => {return $(el).html();}).get();let obj = {};//   console.log(99999, alignItemsCenter);const dataJson = await fs.readFile("./index.json");for (let i = 0; i < alignItemsCenter.length; i++) {const element = alignItemsCenter[i];// 获取navItem a标签的内容// const a = $(element).find(".url-body .default").find("a").map((i, el) => {//   return $(el).html();// })// .get();const itemsList = $(element).map((i, el) => {return $(el).html();}).get();// console.log(99999999999, itemsList);let arr = [];for (const item of itemsList) {// item里面有两个a标签，第一个是图片，第二个是链接；获取第二个a标签的链接和titleconst a = $(item).find("a").eq(1);const href = a.attr("href"); // 获取a标签的href属性// 获取第一个a标签font-weight-normal的内容const text = $(item).find(".text-xs").text();const title = $(item).find(".font-weight-normal").text();const img = $(item).find("a").find("img").attr("data-src");// console.log(777, href, text, title);// 获取a标签的链接和title// const img = $(item).find("a").find("img").attr("data-src");// const text = $(item).find("a").find(".text-xs").text();// const title = $(item).find("a").find(".font-weight-normal").text();// 获取a标签的href属性// const a = $(item).find(".togo");// console.log(777, a);arr.push({id: uuid(),icon:img,name: title,description:text,href: href,});}obj[i] = arr;}// await fs.writeFile("./index.json", JSON.stringify(obj, null, 2));// console.log(99,alignItemsCenter);
}// index();