Day 6：04. 基于Nuxt开发博客项目-LOGO生成以及ICON图标引入

一、前言

不知道大家是否也和我一样会在logo的设计上耗费大量时间，过去想要设计一款心仪的logo，得上某宝或者某鱼，找专业人事。花钱不说，沟通起来也很难做到心意相同，沟通成本很高。

现在有 AI 加持，我们完全可以将这些工作交给 AI。

这里我就使用免费的coze，space.coze.cn/

本文涉及的所有文档官方地址：

站点	地址
nuxt官网	nuxt.com/
扣子空间	space.coze.cn/
图标库	icones.js.org/

二、使用 coze 设计 logo

经过一番调整，最后效果

接下来我们要生成网站图标 favicon.ico

这里直接用我们的logo去生成一个就行，这里我也是网上随便找了一个在线生成地址，www.xbgjw.com/ico。

替换掉我们之前的项目创建时自带的，重启项目后即可看到效果了。

三、引入Icon图标库

官方提供了现成的模块，安装一下即可。

bash 复制代码

npx nuxi module add icon

接下来我们就可以使用这里所有的图标了，icones.js.org/

vue 复制代码

<Icon name="logos:github-icon" />

这个时候是可以正常使用的，但是控制台会有一个提示

意思就是建议你本地安装，因为在线的东西随时会发生变化。

这里我推荐几个博客系统常用的

博客站点

bash 复制代码

pnpm install -D @iconify-json/heroicons

vue 复制代码

<!-- 文章相关 -->
<Icon name="heroicons:document-text" />      <!-- 文章列表 -->
<Icon name="heroicons:pencil-square" />      <!-- 写文章 -->
<Icon name="heroicons:bookmark" />          <!-- 收藏 -->

<!-- 分类管理 -->
<Icon name="heroicons:folder" />             <!-- 分类 -->
<Icon name="heroicons:tag" />                <!-- 标签 -->
<Icon name="heroicons:archive-box" />       	 <!-- 归档 -->

<!-- 内容操作 -->
<Icon name="heroicons:eye" />                <!-- 查看 -->
<Icon name="heroicons:heart" />               <!-- 点赞 -->
<Icon name="heroicons:chat-bubble-left" />   		<!-- 评论 -->

<!-- 主导航 -->
<Icon name="heroicons:home" />               <!-- 首页 -->
<Icon name="heroicons:user" />               <!-- 关于我 -->
<Icon name="heroicons:envelope" />           <!-- 联系 -->

<!-- 功能操作 -->
<Icon name="heroicons:magnifying-glass" />   <!-- 搜索 -->
<Icon name="heroicons:bars-3" />             <!-- 菜单 -->
<Icon name="heroicons:sun" />                <!-- 亮色模式 -->
<Icon name="heroicons:moon" />               <!-- 暗色模式 -->

社交媒体

bash 复制代码

pnpm install -D @iconify-json/simple-icons

vue 复制代码

<Icon name="simple-icons:github" />          <!-- GitHub -->
<Icon name="simple-icons:twitter" />         <!-- Twitter -->
<Icon name="simple-icons:wechat" />          <!-- 微信 -->
<Icon name="simple-icons:zhihu" />          <!-- 知乎 -->
<Icon name="simple-icons:juejin" />          <!-- 掘金 -->

设置好后效果是这样的

四、完善一下细节，点击是按钮常亮

这里我大致说一下实现思路。

通常情况下我们可以自定义一个类，然后通过判断路由动态去绑定这个类。

类似这样：

javascript 复制代码

:class="{ 'router-link-active': isActive(item.path) }"

但是，我不想这么做，因为既然使用了tailwindcss，那就完全放飞自我，直接标签上来了。

所以我写成了这样

javascript 复制代码

:class="route.path === item.path ? 'bg-blue-200  font-bold rounded-sm' : 'font-medium'"

最终效果展示

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