feat: 初始化慧遇书院官网一期
This commit is contained in:
9
app/pages/news/[slug].vue
Normal file
9
app/pages/news/[slug].vue
Normal file
@@ -0,0 +1,9 @@
|
||||
<script setup lang="ts">
|
||||
const route = useRoute(); const { site, isPreview } = await useSiteDocument(); const absoluteUrl = useAbsoluteUrl()
|
||||
const article = computed(() => site.value.articles.find(item => item.slug === route.params.slug && (isPreview.value ? item.status !== 'offline' : item.status === 'published') && item.type !== 'statement'))
|
||||
const related = computed(() => site.value.articles.filter(item => item.slug !== route.params.slug && item.type !== 'statement' && (isPreview.value ? item.status !== 'offline' : item.status === 'published')).slice(0, 3))
|
||||
if (!article.value) throw createError({ statusCode: 404, statusMessage: '未找到该内容' })
|
||||
useSeoMeta({ title: () => `${article.value!.title}|${site.value.brand.name}`, description: () => article.value!.summary, ogTitle: () => article.value!.title, ogDescription: () => article.value!.summary, ogImage: () => absoluteUrl(article.value!.cover), articlePublishedTime: () => article.value!.publishedAt })
|
||||
useHead(() => ({ script: [{ type: 'application/ld+json', textContent: JSON.stringify({ '@context': 'https://schema.org', '@type': 'Article', headline: article.value!.title, description: article.value!.summary, datePublished: article.value!.publishedAt, image: absoluteUrl(article.value!.cover), publisher: { '@type': 'Organization', name: site.value.brand.companyName, logo: { '@type': 'ImageObject', url: absoluteUrl(site.value.brand.logo) } } }) }] }))
|
||||
</script>
|
||||
<template><PublicPageLayout :site="site"><article v-if="article" class="story-page"><NuxtLink class="detail-back" :to="{ path: '/news', query: isPreview ? { preview: 'draft' } : {} }">← 返回品牌动态</NuxtLink><header><p class="eyebrow">BRAND NEWS</p><h1>{{ article.title }}</h1><p>{{ article.publishedAt }}<span v-if="article.sourceName"> · {{ article.sourceName }}</span></p><img :src="article.cover" :alt="article.title" width="1536" height="1024" decoding="async"></header><div class="story-body"><p class="lead">{{ article.summary }}</p><p class="long-copy">{{ article.content }}</p><a v-if="article.sourceUrl" :href="article.sourceUrl" target="_blank" rel="noopener noreferrer" class="text-link">查看原文 ↗</a></div><aside v-if="related.length" class="related-content"><p class="eyebrow">RELATED</p><h2>继续阅读</h2><NuxtLink v-for="item in related" :key="item.slug" :to="{ path: `/news/${item.slug}`, query: isPreview ? { preview: 'draft' } : {} }"><span>{{ item.title }}</span><time>{{ item.publishedAt }}</time></NuxtLink></aside></article></PublicPageLayout></template>
|
||||
6
app/pages/news/index.vue
Normal file
6
app/pages/news/index.vue
Normal file
@@ -0,0 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
const { site, isPreview } = await useSiteDocument()
|
||||
const articles = computed(() => site.value.articles.filter(item => (isPreview.value ? item.status !== 'offline' : item.status === 'published') && item.type !== 'statement'))
|
||||
useSeoMeta({ title: () => `品牌动态|${site.value.brand.name}`, description: () => `${site.value.brand.name}品牌动态与媒体信息。` })
|
||||
</script>
|
||||
<template><PublicPageLayout :site="site"><section class="listing-hero"><p class="eyebrow">BRAND NEWS</p><h1>品牌动态</h1><p>记录品牌进展、课程信息与公开报道。</p></section><section class="article-list"><NuxtLink v-for="item in articles" :key="item.slug" :to="{ path: `/news/${item.slug}`, query: isPreview ? { preview: 'draft' } : {} }"><img :src="item.cover" :alt="item.title" width="1536" height="1024" loading="lazy" decoding="async"><div><time>{{ item.publishedAt }}</time><h2>{{ item.title }}</h2><p>{{ item.summary }}</p></div><span>→</span></NuxtLink></section></PublicPageLayout></template>
|
||||
Reference in New Issue
Block a user