pc_nuxt/app/pages/info/course/index.vue

<template>
  <ArticleListView
    :col-id="2"
    :heading="heading"
    subtitle="AI 工具使用教程与实操指南，从入门到进阶，手把手带你用好各类 AI 能力。"
    base-path="/info/course"
    :page="page"
    :page-size="PAGE_SIZE"
    :list="data?.list || []"
    :total="data?.total || 0"
    :hot-list="data?.hotList || []"
    :tag-list="data?.tagList || []"
    :pending="pending"
  />
</template>

<script setup>
import { useArticleData } from '~/composables/useArticle'
import {
  LEGACY_DEFAULT_DESCRIPTION,
  LEGACY_DEFAULT_KEYWORDS,
  legacyPageTitle,
} from '~/composables/useLegacySeo'

const PAGE_SIZE = 10
const route = useRoute()
const page = computed(() => Number(route.params.page || route.query.page || 1))

const { data, pending } = await useArticleData({
  key: computed(() => `info-course-${page.value}`),
  colId: 2,
  page,
  pageSize: PAGE_SIZE,
})

const heading = computed(() => (page.value > 1 ? `使用教程（第 ${page.value} 页）` : '使用教程'))

const title = computed(() =>
  legacyPageTitle(page.value > 1 ? `使用教程-第${page.value}页` : '使用教程'))

useSeoMeta({
  title,
  description: LEGACY_DEFAULT_DESCRIPTION,
  keywords: LEGACY_DEFAULT_KEYWORDS,
  ogTitle: title,
  ogType: 'website',
})
useHead({
  link: [{ rel: 'canonical', href: () => `https://tool.aionline.cc${page.value > 1 ? `/info/course${page.value}` : '/info/course'}` }],
})
</script>