BlogRefactor: 优化与改进 | episode 2

在这集中,我们将继续讨论博客重构的过程,主要是各种优化与改进。

页面切换添加过渡

为了让页面切换更加流畅美观,我们需要对页面切换时的加载进行优化,添加加载指示器以及页面切换时的动画。

参考:https://nuxt.com/docs/getting-started/transitions

<!-- app.vue --> <template> <!-- 加载指示器 --> <NuxtLoadingIndicator /> <NuxtLayout> <NuxtPage /> </NuxtLayout> </template> <!-- 过渡 --> <style> .page-enter-active, .page-leave-active { transition: all 0.4s; } .page-enter-from, .page-leave-to { opacity: 0; filter: blur(1rem); } .layout-enter-active, .layout-leave-active { transition: all 0.4s; } .layout-enter-from, .layout-leave-to { opacity: 0; filter: blur(1rem); } html.dark{ color-scheme: dark; } </style>

Emoji移动

为了让博客更加生动,我在博客首页添加了一个Emoji移动效果。实现方式是通过@formkit/auto-animate以及nuxt-swiper实现的。

pnpm add @formkit/auto-animate pnpm add nuxt-swiper
// nuxt.config.ts export default defineNuxtConfig({ // ... modules: ['@formkit/auto-animate/nuxt', 'nuxt-swiper'], })
<!-- pages/index.vue --> <script> import { ref } from 'vue' const items = ref(["😏","😐","😑","😒","😕"]) function moveItem(toRemove) { items.value = items.value.filter((item) => item !== toRemove) if (Math.random() < 0.5) { items.value.unshift(toRemove); } else { items.value.push(toRemove); } } // ... </script> <template> <swiper class="max-w-screen-md"> <ul v-auto-animate class="container flex flex-row text-2xl justify-center space-x-0.5"> <li v-for="item in items" :key="item" @click="moveItem(item)" > {{ item }} </li> </ul> </swiper> <!-- ... --> </template>

网页SEO

添加meta

参考:https://nuxt.com/docs/getting-started/seo-meta

// nuxt.config.ts export default defineNuxtConfig({ // ... app: { head: { charset: 'utf-8', viewport: 'width=device-width,initial-scale=1', title: 'CUNOE&DIARY', meta: [{name: 'description', content: 'CUNOE&DIARY'}], }, }, })

添加sitemap

pnpm add @nuxtjs/sitemap
// nuxt.config.ts export default defineNuxtConfig({ // ... modules: ['@nuxtjs/sitemap'], })