AI驱动的自动化：如何一键部署BMM项目到Vercel并生成标签与书签前言上期 BMM开源项目上云：Vercel部署全

前言

我将BMM项目部署到Vercel上面之后，发现没有任何标签页面，所以我就想能不能通过AI来生成标签和书签，然后格式化成我们想要的数据，这样就可以直接使用了，所以我就写了一个脚本，通过AI来生成标签和书签，然后通过csv导出再导入到supabase上面，这样我们的BMM就有书签和tag数据，下面是具体的步骤：

部署完成之后就要登录我们之前申请的GitHub Auth App的GitHub账号

登录之后就可以设置左边的标签和主区域的书签了，如果你有之前通过AI获取到的书签，也可以直接导入，导入之后就可以直接使用了，但是可能你的json和所需要的书签的key不一样，所以需要修改一下，修改完成之后就可以直接使用了

// json格式
[  {    "name": "前端框架",    "list": [      {        "title": "vuejs",        "description": "一款用于构建 Web 界面，易学易用，性能出色且功能丰富的框架。",        "link": "https://cn.vuejs.org/"      },      {        "title": "nuxtjs",        "description": "使用 Vue 3 构建您的下一个应用，体验混合渲染、强大的数据获取和新功能。 Nuxt 3 是一个开源框架，使 Web 开发变得简单而强大。",        "link": "https://www.nuxtjs.org/"      }    ]
  },]

nodejs脚本

这里通过nodejs简单的写了一个脚本，可以自动修改json文件，然后自动导入书签，导入完成之后就可以直接使用了，代码如下：

批量处理书签,将书签的link去掉https://，然后添加icon,icon的格式https://www.google.com/s2/favicons?domain=link&sz=256

这里主要是避免icon过于模糊，所以使用了256的尺寸,默认的是16*16的尺寸，在手机端看起来比较模糊

function transformData(data) {
  let list = []
  data.forEach(item => {
    item.list.forEach(ele => {
      // ele.link去掉https://
      const icon = 'https://www.google.com/s2/favicons?domain=' + ele.link.replace('https://', '') + '&sz=256'
      list.push({
        id: index++,
        name: ele.title,
        url: ele.link,
        icon: icon, // 你的 JSON 数据中没有 icon 字段，所以这里留空或者根据需要添加
        pinyin: '', // 你的 JSON 数据中没有 pinyin 字段，所以这里留空或者根据需要添加
        description: ele.description,
        createdAt: new Date().toISOString(),
        updatedAt: new Date().toISOString(),
      })
    })
  })
  return list
}

导出tag标签,这里的tag没有icon，后续自己根据自己的喜好重新添加即可~

function transformData(data) {
  let list = []
  data.forEach(item => {
    list.push({
      id: index++,
      name: item.name,
      isMain: true,
      createdAt: new Date().toISOString(),
      updatedAt: new Date().toISOString(),
    })
  })
  return list
}

导出书签和tag关系的代码

function transformData(data) {
  let list = []
    data.forEach(item => {
      // 绑定标签
        item.list.forEach(subItem => {
          list.push({
            bId: index++,
            tId: tagIndex,
          })
        })
        tagIndex++
  })
  return list
}

这里要安装对应的csv依赖，安装命令如下：

npm init
npm install csv-writer

最后，我们导出数据，这里我们导出csv文件，导出命令如下：

async function main() {
  const transformedData = transformData(webDataList);
  console.log("🚀 ~ main ~ transformedData:", transformedData)
  const parser = new Parser();
  const csv = parser.parse(transformedData);

  // 写入 CSV 文件
  fs.writeFile('output-bindTag.csv', csv, err => {
    if (err) {
      console.error('Error writing file:', err);
    } else {
      console.log('File written successfully');
    }
  });
}

main();

实现的效果

导出的文件如下：

登录supabase平台

把刚刚导出的拖拽到该区域即可，然后点击导入即可

重新刷新我们的BMM网站，即可看到