重写 ai 对话网站
前言
前两天没事干,下午又要去练科三,上午就干脆重写对话小网站了。用的还是 nuxt,不过这次配置了 PWA。nuxt 配置 pwa 跟 vite+vue 有点不太一样。
代码放在这里,网站在这里。代码依旧很屎,如果想看的话可以看一下。
给 nuxt 应用配置 PWA
首先需要安装@vite-pwa/nuxt
pnpm add -D @vite-pwa/nuxt
然后跟 vite 一样,再 nuxt.config.ts 里加 pwa 的配置
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
// 其它配置
modules: ['@vite-pwa/nuxt'],
pwa: {
registerType: 'autoUpdate',
includeAssets: ['favicon.ico', 'robots.txt', 'apple-touch-icon.png'],
manifest: {
name: '水ai对话网站',
short_name: 'ai对话',
description: '免费的ai对话网站',
theme_color: '#000000',
icons: [
{
src: '/icon-192x192.webp',
sizes: '192x192',
type: 'image/webp',
},
{
src: '/icon-512x512.webp',
sizes: '512x512',
type: 'image/webp',
},
],
},
workbox: {
runtimeCaching: [
{
urlPattern: /\.(?:js|css|png|jpg|jpeg|svg|webp)$/,
handler: 'CacheFirst',
options: {
cacheName: 'static-resources',
expiration: {
maxEntries: 100,
maxAgeSeconds: 2592000, // 30 天
},
},
},
],
},
devOptions: {
enabled: false,
type: 'module',
},
},
});
workbox 也与 vite 一样,这里就不重复了。
然后可能会遇到一个问题,就是 service worker 跑起来了,但是 PWA 没有跑起来,会发现清单是空的,index.html 的 head 里也没有。我不知道是我的问题还是这个库确实不会自动插入,反正我是需要手动插入的。在 nuxt.config.ts 里改就可以了。
export default defineNuxtConfig({
app: {
head: {
title: '水ai对话',
link: [{ rel: 'manifest', href: '/manifest.webmanifest' }],
},
},
// 其它配置
});
这样就插入了 manifest 了。
UnoCSS 初体验
怎么说呢,之前用过 tailwindcss,之后看推荐说 UnoCSS,这次就用了 UnoCSS,感觉还是挺好的。
在类名方面 tailwindcss 和 UnoCSS 基本没什么区别,类名基本都一样。UnoCSS 有一个东西我很喜欢,一般在用 tailwindcss 的时候,经常可能会写一大坨 class,第一次写可能很清楚,之后再看大概率就会很痛苦了,一大串在那里不知道什么效果。但是如果用 UnoCSS 的话,它有个选项presetAttributify
,这个感觉相当好用,大概就是相同前缀可以写在一起。比如
<div class="px-2 py-4 mx-2 my-4 flex flex-row bg-black"></div>
可以写成
<div
p="x-2 y-4"
m="x-2 y-4"
flex="~ row"
bg="black"
></div>
这里如果是一模一样的话,可以用~来表示。flex="~ row"
相当于class="flex flex-row"
对于一些可能就一个没啥必要分的,也可以继续写成 class。这样分开来写感觉可读性比之前要高。
展开栏与收缩栏
某个特效可能挺常见的,就是鼠标放在头像或者别的什么地方上面就会出现一个框,里面就有一些选项,可以去点。鼠标移开框就会消失。这个就可以用 hover 来实现。
但是用 hover 有一个问题,就是触屏端不能很好的适配,这个就可以用 active 了。之前写学院集市的时候没想起这个,直接用 js 控制了。
<div
class="group position-relative"
m="r-2"
>
<img
class="w-16 h-16 object-fill rounded-full"
src="/head.webp"
alt="我"
/>
<div
class="z-10 hidden position-absolute -translate-x-1/2"
group-hover="block bg-dark text-gray"
group-active="block bg-dark text-gray"
w="20"
p="2"
rounded="lg"
>
<div class="my-1">
<a
href="https://www.w4ter.com"
target="_blank"
class="text-gray"
hover="text-blue"
>我的博客</a
>
</div>
<hr />
<div class="my-1">
<a
href="https://www.w4ter.com"
target="_blank"
class="text-gray"
hover="text-blue"
>支持一下</a
>
</div>
</div>
</div>
这样的话,当我鼠标悬浮在头像,或者触屏点击头像时,就会显示这个框。这里hover和active也是可以提出来的,非常方便(个人感觉)。
第一次使用图标库
之前都是用文字来描述各种东西,没多少图片。原本想着用UnoCSS的图标的,但是不知道为什么一直用不了,干脆用了nuxt-icon。这次找到一个图标网站,感觉挺全的,这里。
后续的更新
怎么说呢,这个月的话由于前十几天基本在复习/考试,中间几天在跟同学玩,后面几天在练车,今天考科三,一直没更新。也有不知道写啥的原因吧。之后的话我可能会写一个vitepress主题,感觉用别人的还是不太爽,并不是说别人的不好看,只是想用自己的而已,我只是单纯的犯贱。
大概有这么个想法,如果要取名字的话我大概会叫心语
,跟任何现实人物无关,如果不小心同音/同名纯属巧合。