详细介绍和组织历程页面

Author: SaltyFive

app/pages/[...slug].vue

@@ -18,16 +18,11 @@ useSeoMeta(page.value?.seo || {})
 
 <template>
   <NuxtLayout :name="'article'" class="bg-white dark:bg-gray-800 ring-1 ring-gray-200 dark:ring-gray-700">
-    <div v-if="!page">
-      未找到
-    </div>
-    <div v-else>
-      <ContentRenderer
+    <ContentRenderer
       v-if="page"
       :value="page"
       class="prose dark:prose-invert prose-pre:bg-gray-100 dark:prose-pre:bg-gray-900"
     />
-    </div>
     <div class="flex justify-center">
       <Button @click="navigateTo('/')" class="bg-blue-100 text-gray-500 border border-blue-300 px-4 py-3 rounded">返回主页</Button>
     </div> 

app/pages/history.vue

@@ -0,0 +1,38 @@
+<template>
+  <div>
+    <Title>组织历程</Title>
+    <Hero />
+    <div class="flex justify-center px-4">
+      <div class="w-full max-w-4xl">
+        <ul class="space-y-6">
+          <li v-for="his in history" :key="his.id">
+            <div v-if="!his" class="text-center text-gray-500 py-8">
+              文章未找到
+            </div>
+            <div v-else class="bg-blue- rounded-lg shadow-md p-6">
+              <ContentRenderer :value="his" />
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+    <div class="flex justify-center gap-10">
+      <Button @click="navigateTo('/')" class="bg-blue-400 text-gray-500 border border-blue-300 px-4 py-3 rounded">
+        返回主页
+      </Button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const { data: history } = await useAsyncData(() => {
+  return queryCollection('history').all();
+});
+
+if (!history.value) {
+  throw createError({
+    statusCode: 404,
+    statusMessage: 'Page not found',
+  });
+}
+</script>

app/pages/introduction.vue

@@ -0,0 +1,38 @@
+<template>
+  <div>
+    <Title>详细介绍</Title>
+    <Hero />
+    <div class="flex justify-center px-4">
+      <div class="w-full max-w-4xl">
+        <ul class="space-y-6">
+          <li v-for="intro in introducions" :key="intro.id">
+            <div v-if="!intro" class="text-center text-gray-500 py-8">
+              文章未找到
+            </div>
+            <div v-else class="bg-blue- rounded-lg shadow-md p-6">
+              <ContentRenderer :value="intro" />
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+    <div class="flex justify-center gap-10">
+      <Button @click="navigateTo('/')" class="bg-blue-400 text-gray-500 border border-blue-300 px-4 py-3 rounded">
+        返回主页
+      </Button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const { data: introducions } = await useAsyncData(() => {
+  return queryCollection('introduction').all();
+});
+
+if (!introducions.value) {
+  throw createError({
+    statusCode: 404,
+    statusMessage: 'Page not found',
+  });
+}
+</script>

content.config.ts

@@ -1,13 +1,20 @@
-import { defineCollection, defineContentConfig,z } from '@nuxt/content';
+import { defineCollection, defineContentConfig, z } from '@nuxt/content';
 
 export default defineContentConfig({
   collections: {
     history: defineCollection({
       type: 'page',
       source: 'history/**/*.md',
       schema: z.object({
-        date: z.string()
+        date: z.string(),
       }),
     }),
-  }
-})
+    introduction: defineCollection({
+      type: 'page',
+      source: 'introduction/**/*.md',
+      schema: z.object({
+        date: z.string(),
+      }),
+    }),
+  },
+});

content/introduction/intro2.md

@@ -0,0 +1,5 @@
+---
+date: '2025-9-34'
+---
+
+**这里是介绍页面的测试**