Day 9：07. 基于Nuxt开发博客项目-工具箱整理

申阳2025-11-12 9:51

一、前言

相信大家在网络冲浪的时候都碰到过一些好的工具站，可能当时添加了书签或者收藏了，但是长时间不用，或者更换设备导致后面被遗忘了，等到想要找出来用的时候已经无从考究了。

而我这里的工具模块就是帮忙整理归纳这些站点的。便于日常生活工作中需要处理一些问题的时候能够快速找到对应的小工具。

这个是我的示例站点，在这里可以看到我目前的进度，www.csyblog.cn/

二、页面开发

逻辑简单，就是把我们日常收集的站点归类，展示出来，并且提供一个可快捷搜索的搜索框。

当然每个人的审美都不一样，如果你实在不知道怎么做，可以参考我的站点。

页面很简单，整理网站数据倒是花了不少时间。😓

三、数据格式

less 复制代码

 {
    name: 'JSON格式化',
    description: '在线格式化、验证和美化JSON数据',
    icon: 'logos:json',
    color: 'bg-green-50',
    category: '开发工具',
    link: 'https://www.json.cn/',
  },

这里还有一个小问题就是，每个网站都配一个svg按钮，有的可以在网站直接获取，有的其实它用的是png, 这个时候就有点尴尬，我的做法是，先去iconfont和icones里找一下，如果没有就用png去生成一个。生成的工具地址：www.bejson.com/convert/ima...

四、总结

正如我在这个项目启动时说的，这个博客将不仅仅是一个展示窗口，更是我的技术游乐场，任何想法都可以在这里落地，这也是完全"手搓"博客的乐趣所在。

千里之行，始于足下。你的"个人公司"从这第一个2小时开始。欢迎在评论区分享你的进展或遇到的卡点，我会逐一查看，尽可能的帮助解决。我们下一篇文章见！