update public config

app.vue

@@ -8,17 +8,17 @@
   </div>
 </template>
 <script setup>
-import { onMounted } from 'vue'
-import { useSupabaseClient, useSupabaseUser } from '#imports'
+// import { onMounted } from 'vue'
+// import { useSupabaseClient, useSupabaseUser } from '#imports'
 
-const supabase = useSupabaseClient()
-const user = useSupabaseUser()
+// const supabase = useSupabaseClient()
+// const user = useSupabaseUser()
 
 onMounted(async () => {
   // console.log('Supabase client:', supabase)
   // console.log('Initial user state:', user.value)
 
-  const { data, error } = await supabase.auth.getSession()
+  // const { data, error } = await supabase.auth.getSession()
   // console.log('Session data:', data)
   // console.log('Session error:', error)
 })

components/PostLabels.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="flex flex-wrap text-sm font-medium ">
-        <NuxtLink v-for="label in labels" :key="label.name" :to="`/tag/${encodeURIComponent(label.name)}`" class="card-label inline-block text-white dark:text-slate-800  transition-all duration-300 hover:scale-110" :style="{ color: `#${label.color}` }"> #{{ label.name }} </NuxtLink>
+        <NuxtLink v-for="label in labels" :key="label.name" :to="`/tag/${encodeURIComponent(label.name)}`" class="card-label inline-block mx-1 dark:text-slate-800  transition-all duration-300 hover:scale-110" :style="{ color: `#${label.color}` }"> #{{ label.name }} </NuxtLink>
     </div>
 </template>
 <script setup lang="ts">

layouts/default.vue

@@ -3,14 +3,14 @@
     <header class="bg-primary dark:bg-secondary">
       <nav class="max-w-content mx-auto px-4 py-2 flex justify-between items-center">
         <div class="flex items-center cursor-pointer" @click="navigateToHome">
-          <img class="w-8 h-8 rounded-full mr-2" src="https://avatars.githubusercontent.com/u/1282277?v=4" alt="Avatar" />
+          <img class="w-8 h-8 rounded-full mr-2" src="https://avatars.githubusercontent.com/u/1282277?v=4" alt="古思乱讲 Avatar" />
           <div class="text-white dark:text-white text-xl font-bold">古思乱讲</div>
         </div>
-        <button class="text-primary dark:text-white text-2xl" @click="toggleNightMode">{{ nightModeIcon }}</button>
+        <button class="text-primary dark:text-white text-2xl" @click="toggleNightMode" aria-label="Toggle night mode">{{ nightModeIcon }}</button>
       </nav>
     </header>
     <div class="relative h-64 overflow-hidden">
-      <img class="w-full h-full object-cover" src="/banner2.jpeg" alt="Banner" />
+      <img class="w-full h-full object-cover" src="/banner2.jpeg" alt="Site Banner" />
       <div class="absolute inset-0 flex items-center justify-center dark:bg-black dark:bg-opacity-50">
         <div v-html="bannerContent"></div>
       </div>
@@ -32,7 +32,7 @@
   </div>
 </template>
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, useHead } from '#imports'
 import { useRouter } from 'vue-router'
 
 const router = useRouter()
@@ -91,4 +91,27 @@ onMounted(() => {
   initializeNightMode()
   addScrollEventListener()
 })
+
+// SEO优化
+useHead({
+  titleTemplate: (titleChunk) => {
+    return titleChunk ? `${titleChunk} - 古思乱讲` : '古思乱讲'
+  },
+  meta: [
+    { charset: 'utf-8' },
+    { name: 'viewport', content: 'width=device-width, initial-scale=1' },
+    { name: 'description', content: '古思乱讲 - 一个关于技术、生活和思考的博客' },
+    { name: 'format-detection', content: 'telephone=no' },
+    // Open Graph
+    { property: 'og:site_name', content: '古思乱讲' },
+    { property: 'og:type', content: 'website' },
+    // Twitter Card
+    { name: 'twitter:card', content: 'summary_large_image' },
+    { name: 'twitter:site', content: '@yourtwitterhandle' },
+  ],
+  link: [
+    { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
+    { rel: 'canonical', href: 'https://momo.gusibi.mobi' }
+  ],
+})
 </script>

nuxt.config.ts

@@ -13,6 +13,7 @@ export default defineNuxtConfig({
     '@stefanobartoletti/nuxt-social-share',
     '@nuxtjs/sitemap',
     '@nuxtjs/supabase',
+    'nuxt-gtag',
   ],
 
   // configuration options
@@ -52,14 +53,13 @@ export default defineNuxtConfig({
   },
   runtimeConfig: {
     public: {
-      supabase: {
-        url: process.env.SUPABASE_URL,
-        key: process.env.SUPABASE_KEY,
-      },
       apiBaseUrl: process.env.API_BASE_URL || 'https://path-memo-api.gusibi.mobi',
       siteUrl: process.env.SITE_URL || 'https://momo.gusibi.mobi'
     }
   },
+  gtag: {
+    id: 'G-N7EW8Y4SEF'
+  },
   supabase: {
     // Options
     url: process.env.SUPABASE_URL,

package.json

@@ -20,6 +20,7 @@
     "html-to-image": "^1.11.11",
     "marked": "^14.1.2",
     "nuxt": "^3.13.2",
+    "nuxt-gtag": "^3.0.1",
     "qrcode.vue": "^3.5.0",
     "twemoji": "^14.0.2",
     "vue": "latest",

pages/blog/[id].vue

@@ -49,6 +49,27 @@ const { data: post } = await useAsyncData('post', () =>
     $fetch(`/api/blog-posts/${route.params.id}`)
 )
 
+
+// SEO优化
+useHead(() => ({
+    title: post.value?.title,
+    meta: [
+        { name: 'description', content: post.value?.body.substring(0, 160) + '...' },
+        { name: 'keywords', content: post.value?.labels.map(label => label.name).join(', ') },
+        // Open Graph
+        { property: 'og:title', content: post.value?.title },
+        { property: 'og:description', content: post.value?.body.substring(0, 160) + '...' },
+        { property: 'og:type', content: 'article' },
+        { property: 'og:url', content: `https://momo.gusibi.mobi/blog/${route.params.id}` },
+        // Twitter Card
+        { name: 'twitter:title', content: post.value?.title },
+        { name: 'twitter:description', content: post.value?.body.substring(0, 160) + '...' },
+    ],
+    link: [
+        { rel: 'canonical', href: `https://momo.gusibi.mobi/blog/${route.params.id}` }
+    ],
+}))
+
 const formatDate = (dateString: string, showYear = false) => {
     const date = new Date(dateString)
     const options: Intl.DateTimeFormatOptions = {