完成Nuxt基本迁移

components/card/ArticleCard.vue

@@ -8,7 +8,7 @@ const props = defineProps<{
 const thumbUrl = computed(() => {
   // 如果文章缩略图为空，则从本地随机获取默认缩略图
   props.post.fields.thumb.value = props.post.fields.thumb.value ? props.post.fields.thumb.value : getAssetURL(
-      `/common/${Math.floor(Math.random() * (7 - 1 + 1)) + 1}.jpg`
+      `common/${Math.floor(Math.random() * (7 - 1 + 1)) + 1}.jpg`
   )
   return props.post.fields.thumb.value
 })

components/card/FullScreenIntroCard.vue

@@ -4,6 +4,7 @@ import {computed, ref} from "vue";
 // 使用 ref 跟踪鼠标的 x 和 y 坐标
 const mouseX = ref(0)
 const mouseY = ref(0)
+const characterUrl = ref("")
 
 const typedString = ['Hello, Welcome to this site!^1000', '欢迎访问本网站！^1000']
 const littleWidget = [
@@ -29,8 +30,6 @@ const littleWidget = [
   }
 ]
 
-// const characterUrl = "~/assets/images/common/hoshino.png"
-
 // 监听鼠标移动
 const handleMouseMove = (event: MouseEvent) => {
   // 根据窗口大小计算鼠标相对于中心位置的偏移比例
@@ -44,6 +43,10 @@ const debouncedMouseMove = debounce(handleMouseMove, 5)
 const backgroundStyle = computed(() => ({
   backgroundPosition: `${mouseX.value}px ${mouseY.value}px`
 }))
+
+onMounted(() => {
+  characterUrl.value = getAssetURL('common/hoshino.png')
+})
 </script>
 
 <template>
@@ -89,7 +92,7 @@ const backgroundStyle = computed(() => ({
       <div class="invisible absolute top-0 -right-6 -bottom-6 opacity-0 transition-all
                   sm:visible sm:opacity-100 lg:-top-28 lg:-right-28 lg:-bottom-10"
       >
-        <img src="~/assets/images/common/hoshino.png" alt="" class="float-right h-full" draggable="false"/>
+        <img :src="characterUrl" alt="" class="float-right h-full" draggable="false"/>
       </div>
     </div>
     <!-- 下箭头 -->

components/nav/NavBar.vue

@@ -37,7 +37,7 @@ const entry = [
     title: '主页',
     icon: ['fas', 'home'],
     entry: [],
-    to: 'home'
+    to: 'index'
   },
   {
     title: '文章',
@@ -153,6 +153,9 @@ onUnmounted(() => {
       </div>
     </div>
   </nav>
+
+  <!-- 用于隔开元素 -->
+  <div class="h-16 w-full" v-if="alwaysBlueBackground"></div>
 </template>
 
 <style scoped>

composables/function.ts

@@ -1,7 +1,7 @@
 export const getAssetURL = (image: string) => {
   // 参数一: 相对路径
   // 参数二: 当前路径的URL
-  return new URL(`~/assets/images/${image}`, import.meta.url).href
+  return new URL(`../assets/images/${image}`, import.meta.url).href
 }
 
 export const debounce = (fn: Function, delay: number) => {

middleware/maintenance.global.ts

@@ -0,0 +1,5 @@
+export default defineNuxtRouteMiddleware((to, from) =>{
+  if (to.meta.maintenance === true && !import.meta.env.DEV)
+    return navigateTo('/error/maintenance')
+  return true
+})

nuxt.config.ts

@@ -3,6 +3,17 @@
 export default defineNuxtConfig({
   compatibilityDate: '2024-04-03',
   devtools: { enabled: true },
+  app: {
+    head: {
+      title: 'CANTYONION.SITE',
+      meta: [
+        {name: 'viewport', content: 'width=device-width, initial-scale=1'},
+        {name: 'charset', content: 'utf-8'},
+        {name: 'keywords', content: 'cantyonion, onion, 洋葱, 博客, 学习, 主页, index'},
+        {name: 'description', content: 'cantyonion的超级基地，进来看看吧！'},
+      ]
+    }
+  },
   components: true,
   css: [
     '@fortawesome/fontawesome-svg-core/styles.css',

pages/blog.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+definePageMeta({
+  maintenance: true
+})
+</script>
+
+<template>
+  <NuxtWelcome/>
+</template>
+
+<style scoped>
+
+</style>

pages/diary.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+definePageMeta({
+  maintenance: true
+})
+</script>
+
+<template>
+  <NuxtWelcome/>
+</template>
+
+<style scoped>
+
+</style>

pages/error/maintenance.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+onMounted(() => {
+  emitter.emit("startLoading", false)
+})
+</script>
+
+<template>
+<alert icon="🚧" title="建设中" message="此页面正在建设中，请稍后再来查看更新。"/>
+</template>
+
+<style scoped>
+
+</style>

pages/soft.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+definePageMeta({
+  maintenance: true
+})
+</script>
+
+<template>
+  <NuxtWelcome/>
+</template>
+
+<style scoped>
+
+</style>

pages/talk.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+definePageMeta({
+  maintenance: true
+})
+</script>
+
+<template>
+  <NuxtWelcome/>
+</template>
+
+<style scoped>
+
+</style>