feat: infer content path from route path in CommonContent

Author: SkyBird233

assets/index.scss

@@ -36,7 +36,7 @@ $common-margin: 24px;
   margin-bottom: $common-margin;
 
   h2 {
-    margin-bottom: $common-margin;
+    margin-block: $common-margin;
   }
 
   h2,

components/CommonContent.vue

@@ -1,27 +1,41 @@
 <script lang="ts" setup>
-const props = defineProps<{ category: string }>();
+const props = defineProps<{ path?: string }>();
 
 const route = useRoute();
 const { locale } = useI18n();
 
-const { data: page } = await useAsyncData(
-  computed(() => `${locale.value}:${props.category}:${route.params.slug}`),
-  () => {
-    return queryCollection(locale.value)
-      .path(`/${props.category}/${route.params.slug}`)
-      .first();
-  }
+const contentPath = computed(() => {
+  if (props.path) return props.path;
+
+  // For `prefix_except_default`
+  const prefix = `/${locale.value}`;
+  return route.path.startsWith(prefix)
+    ? route.path.substring(prefix.length) || '/'
+    : route.path;
+});
+
+const { data: page, error } = await useAsyncData(
+  computed(() => `${locale.value}:${contentPath.value}`),
+  () => queryCollection(locale.value).path(contentPath.value).first()
 );
 useHead({ title: page.value?.title });
+
+if (error.value || !page.value) {
+  throw createError({
+    statusCode: 404,
+    statusMessage: 'Page Not Found',
+    fatal: true
+  });
+}
 </script>
 
 <template>
   <article v-if="page">
     <category-second
-      v-if="page?.body.value[0][0] !== 'h2'"
-      :id="page?.title"
-      :title="page?.title"
-      :right-text="page?.date.substring(0, 10)"
+      v-if="page.body.value[0][0] !== 'h2'"
+      :id="page.title"
+      :title="page.title"
+      :right-text="page.date?.substring(0, 10)"
       :title-url="`${route.path}#${page.title}`" />
     <ContentRenderer :value="page" class="heti" />
   </article>

nuxt.config.ts

@@ -32,6 +32,12 @@ export default defineNuxtConfig({
     '@nuxt/icon'
   ],
 
+  router: {
+    options: {
+      scrollBehaviorType: 'smooth'
+    }
+  },
+
   icon: {
     mode: 'css',
     cssLayer: 'base'

pages/aoscc/[slug].vue

@@ -1,3 +1,3 @@
 <template>
-  <common-content category="aoscc" />
+  <common-content />
 </template>

pages/crowdsourcing/[slug].vue

@@ -1,3 +1,3 @@
 <template>
-  <common-content category="crowdsourcing" />
+  <common-content />
 </template>

pages/news/[slug].vue

@@ -1,3 +1,3 @@
 <template>
-  <common-content category="news" />
+  <common-content />
 </template>