0602更新

1. 博客列表页面能够有更好的SSR优化
2. 调整了一下OG图片的渲染

Author: CSBigCaptain

components/subpage/blog/RandomSentence.vue

@@ -12,41 +12,56 @@
   </div>
 </template>
 
-<script lang="ts" setup>
-let sentence = ref()
-let displayText = ref('')
-let fullText = ref('')
-let isTyping = ref(false)  // 添加打字状态控制
+<script setup>
+const sentence = ref()
+const displayText = ref("")
+const fullText = ref("")
+const isTyping = ref(false)
 
-// 改进的打字效果函数
+// 打字效果函数
 const typeText = async () => {
   isTyping.value = true
-  displayText.value = ''
-  
-  // 为每个字符设置随机的打字间隔，模拟真实打字效果
+  displayText.value = ""
+
   for (let i = 0; i < fullText.value.length; i++) {
-    if (!isTyping.value) break  // 允许中断打字
+    if (!isTyping.value) break
     displayText.value += fullText.value[i]
-    // 根据标点符号调整停顿时间
     const delay = fullText.value[i].match(/[，。！？、]/) ? 300 : 50
-    await new Promise(resolve => setTimeout(resolve, delay))
+    await new Promise((resolve) => setTimeout(resolve, delay))
   }
-  
+
   isTyping.value = false
 }
 
-const getSentence = async () => {
-  const res = await fetch("https://open.saintic.com/api/sentence/", {
-    method: "GET",
-  })
-  const data = await res.json()
-  sentence.value = data.data
-  fullText.value = data.data.sentence
-  await typeText()
-}
+// 获取随机句子
+const { data } = await useAsyncData(
+  `sentence-${Math.floor(Date.now() / 60000)}`,
+  async () => {
+    const res = await $fetch("https://open.saintic.com/api/sentence/")
+    return {
+      sentence: res?.data?.sentence || "",
+      author: res?.data?.author || "",
+      name: res?.data?.name || "",
+    }
+  },
+  {
+    default: () => null,
+    server: false
+  }
+)
 
-onMounted(() => {
-  getSentence()
+// 监听数据变化并执行打字效果
+watch(data, async (newData) => {
+  if (newData?.sentence) {
+    sentence.value = newData
+    fullText.value = newData.sentence
+    await typeText()
+  }
+}, { immediate: true })
+
+// 组件卸载时停止打字
+onBeforeUnmount(() => {
+  isTyping.value = false
 })
 </script>
 
@@ -59,6 +74,7 @@ onMounted(() => {
   height: 45vh;
   background: rgb(var(--mdui-color-surface-container-highest));
   transform: translateY(calc(-1 * var(--inline-padding)));
+  
   .inner {
     width: 70%;
     min-width: 370px;
@@ -68,28 +84,32 @@ onMounted(() => {
     flex-direction: column;
     align-items: center;
     box-sizing: border-box;
+    
     .sentence {
       font-size: 1.5rem;
-      font-weight: 500;
+      line-height: 1.6;
+      margin-bottom: 1rem;
+      min-height: 2em;
+      cursor: pointer;
       text-align: center;
-      margin-bottom: 10px;
-      transform: translateX(7px);
+      font-weight: bold;
     }
+    
     .source {
-      width: 100%;
       font-size: 1rem;
-      font-weight: 400;
+      opacity: 0.7;
       text-align: center;
-      margin-top: 10px;
+    }
+    
+    .cursor {
+      animation: blink 1s infinite;
+      color: var(--mdui-color-primary);
     }
   }
 }
-.cursor {
-  animation: blink 0.8s infinite;
-}
 
 @keyframes blink {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0; }
+  0%, 50% { opacity: 1; }
+  51%, 100% { opacity: 0; }
 }
 </style>

content.config.ts

@@ -1,6 +1,7 @@
 import { defineCollection, defineContentConfig, z } from "@nuxt/content"
 import { asSeoCollection } from "@nuxtjs/seo/content"
 
+
 export default defineContentConfig({
   collections: {
     blog: defineCollection(
@@ -12,12 +13,6 @@ export default defineContentConfig({
         }),
       }),
     ),
-    content: defineCollection(
-      asSeoCollection({
-        type: 'page',
-        source: '**/*.md',
-      }),
-    ),
     indexActions: defineCollection({
       type: "data",
       source: "data/index/actions.yml",

layouts/Default.vue

@@ -24,6 +24,23 @@
 
 <script setup lang="ts">
 const [drawerStatus, toggleDrawer] = useToggle(false)
+
+useHead({
+  htmlAttrs: {
+    lang: "zh-CN",
+  },
+  link: [
+    {
+      rel: "icon",
+      type: "image/png",
+      href: "/favicon.png",
+    },
+  ],
+})
+
+useSeoMeta({
+  ogImage: "/__og-image__/static/og.png",
+})
 </script>
 
 <style lang="less" scoped>

nuxt.config.ts

@@ -58,19 +58,16 @@ export default defineNuxtConfig({
     prerender: {
       failOnError: true,
       crawlLinks: true,
-      routes:[
-        "/",
-        "/blog/",
-        "/search",
-        "/rss",
-      ]
+      routes: ["/", "/blog/", "/search", "/rss"],
     },
   },
   app: {
     baseURL: "/",
     // cdnURL: "https://cdn.shaly.sdutacm.cn/csbig/",
     buildAssetsDir: "nuxt_assets",
     head: {
+      htmlAttrs: { lang: "zh-CN" },
+      link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" }],
       noscript: [{ innerHTML: "JavaScript is required" }],
     },
   },
@@ -89,9 +86,10 @@ export default defineNuxtConfig({
     typeCheck: true,
   },
   site: {
-    url: process.env.NODE_ENV === 'production' 
-      ? 'https://csbigcaptain.github.io' 
-      : 'http://localhost:3000',
+    url:
+      process.env.NODE_ENV === "production"
+        ? "https://csbigcaptain.github.io"
+        : "http://localhost:3000",
     name: "CSBigCaptain Blog",
   },
   ssr: true,
@@ -104,7 +102,6 @@ export default defineNuxtConfig({
   ogImage: {
     // zeroRuntime: true,
     googleFontMirror: true,
-    fonts: ["Noto+Sans+SC"],
   },
   robots: {
     enabled: false,

pages/Search.vue

@@ -72,7 +72,7 @@
 import { useFuse } from "@vueuse/integrations/useFuse";
 import "@mdui/icons/chevron-right";
 
-useHead({
+useSeoMeta({
   title: "搜索 - CSBigCaptain Blog",
 });
 

pages/blog/[...slug].vue

@@ -1,21 +1,17 @@
 <script setup lang="ts">
-const route = useRoute();
+const route = useRoute()
 
 const { data: post } = await useAsyncData(`blog-${route.path}`, () => {
-  return queryCollection("blog").path(route.path).first();
-});
+  return queryCollection("blog").path(route.path).first()
+})
 
-useHead({
-  title: post.value?.title || "CSBigCaptain Blog",
-  meta: [
-    { name: "description", content: post.value?.description || "" },
-    {
-      name: "og:title",
-      content: post.value?.title + "-- CSBigCaptain Blog",
-    },
-    { name: "og:type", content: "article" },
-  ],
-});
+useSeoMeta({
+  title: (post.value?.title || "Blog") + " - CSBigCaptain Blog",
+  ogTitle: (post.value?.title || "Blog") + " - CSBigCaptain Blog",
+  description: "The introduction to CSBigCaptain Blog.",
+  ogDescription: "The introduction to  CSBigCaptain Blog.",
+  ogUrl: "https://csbigcaptain.github.io" + route.path,
+})
 </script>
 
 <template>

pages/blog/index.vue

@@ -5,7 +5,6 @@ useSeoMeta({
   description: "CSBigCaptain Blog list.",
   ogDescription: "CSBigCaptain Blog List.",
   ogUrl: 'https://csbigcaptain.github.io/blog', 
-  ogImage: "/__og-image__/static/og.png",
 });
 defineOgImageComponent('Nuxt',{
   title: "Blog List",

pages/index.vue

@@ -5,11 +5,11 @@ useSeoMeta({
   description: "The introduction to CSBigCaptain Blog.",
   ogDescription: "The introduction to  CSBigCaptain Blog.",
   ogUrl: 'https://csbigcaptain.github.io/',
-  ogImage: "/__og-image__/static/og.png",
 });
 defineOgImageComponent('Nuxt',{
-  title: "首页",
-  headline: "CSBigCaptain Blog",
+  title: "CSBigCaptain Blog",
+  headline: "WELCOME TO",
+  description: "A open-source Git-CMS blog system driven by Nuxt 3.",
 })
 
 const {data: main} = await useAsyncData('indexMain', () => {
@@ -40,15 +40,18 @@ const data = {
             <span class="text">{{ data.main.text }}</span>
           </h1>
           <div class="actions">
-            <mdui-button
+            <NuxtLink
               v-for="item in data.actions"
               :key="item.text"
               :href="item.link"
-              :variant="item.variant"
-              :icon="item.icon"
-              :end-icon="item.endIcon"
-              >{{ item.text }}</mdui-button
             >
+              <mdui-button
+                :variant="item.variant"
+                :icon="item.icon"
+                :end-icon="item.endIcon"
+                >{{ item.text }}
+              </mdui-button>
+            </NuxtLink>
           </div>
         </div>
       </div>