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

页面切换添加过渡

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

参考：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'],
})