14935dfbf4
- 移除 pages/news.vue,改为 pages/news/index.vue (列表) + [slug].vue (详情)
- 列表卡片包 NuxtLink 跳 /news/{slug},正文编辑器内容现在能渲染
- 详情页含面包屑/侧栏/上下篇导航/JSON-LD NewsArticle schema
513 行
13 KiB
Vue
513 行
13 KiB
Vue
<template>
|
||
<div v-if="article" class="page-news-detail">
|
||
<LayoutPageHero
|
||
:title="article.title"
|
||
:subtitle="article.summary"
|
||
:breadcrumbs="[{ text: '品牌资讯', to: '/news' }, { text: article.category }]"
|
||
/>
|
||
|
||
<section class="section">
|
||
<div class="container">
|
||
<div class="news-layout">
|
||
<!-- 主内容区 -->
|
||
<main class="news-main">
|
||
<!-- 文章元信息 -->
|
||
<div class="article-meta">
|
||
<span :class="['article-category', `article-category--${article.category}`]">{{ article.category }}</span>
|
||
<span class="article-date">{{ formatDate(article.date || article.createdAt) }}</span>
|
||
<span v-if="article.author" class="article-author">作者：{{ article.author }}</span>
|
||
</div>
|
||
|
||
<!-- 封面图 -->
|
||
<div v-if="article.coverImage" class="article-cover">
|
||
<img
|
||
:src="article.coverImage"
|
||
:alt="article.title"
|
||
class="article-cover__img"
|
||
referrerpolicy="no-referrer"
|
||
/>
|
||
</div>
|
||
|
||
<!-- 摘要 -->
|
||
<div v-if="article.summary" class="article-summary">
|
||
<p>{{ article.summary }}</p>
|
||
</div>
|
||
|
||
<!-- 正文 -->
|
||
<div class="article-content" v-html="article.content" />
|
||
|
||
<!-- 标签 -->
|
||
<div v-if="article.tags?.length" class="article-tags">
|
||
<span class="tags-label">标签：</span>
|
||
<span v-for="tag in article.tags" :key="tag" class="article-tag">{{ tag }}</span>
|
||
</div>
|
||
|
||
<!-- 文章导航 -->
|
||
<div v-if="prevArticle || nextArticle" class="article-nav">
|
||
<NuxtLink v-if="prevArticle" :to="`/news/${prevArticle.id}`" class="article-nav__item article-nav__item--prev">
|
||
<span class="article-nav__label">上一篇</span>
|
||
<span class="article-nav__title">{{ prevArticle.title }}</span>
|
||
</NuxtLink>
|
||
<span v-else />
|
||
<NuxtLink v-if="nextArticle" :to="`/news/${nextArticle.id}`" class="article-nav__item article-nav__item--next">
|
||
<span class="article-nav__label">下一篇</span>
|
||
<span class="article-nav__title">{{ nextArticle.title }}</span>
|
||
</NuxtLink>
|
||
</div>
|
||
</main>
|
||
|
||
<!-- 侧边栏 -->
|
||
<aside class="news-sidebar">
|
||
<div class="sidebar-card sidebar-card--cta">
|
||
<h3 class="sidebar-card__title">想了解更多产品？</h3>
|
||
<p class="sidebar-card__desc">扫码添加定制师微信，一对一沟通行程需求</p>
|
||
<CommonInternalLink to="/contact" text="联系定制师" />
|
||
</div>
|
||
|
||
<div class="sidebar-card">
|
||
<h3 class="sidebar-card__title">更多动态</h3>
|
||
<ul class="sidebar-articles">
|
||
<li
|
||
v-for="art in otherArticles"
|
||
:key="art.id"
|
||
class="sidebar-article"
|
||
:class="{ 'sidebar-article--active': art.id === article.id }"
|
||
>
|
||
<NuxtLink :to="`/news/${art.id}`" class="sidebar-article__link">
|
||
<span class="sidebar-article__category">{{ art.category }}</span>
|
||
<span class="sidebar-article__title">{{ art.title }}</span>
|
||
</NuxtLink>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="sidebar-card">
|
||
<h3 class="sidebar-card__title">快速入口</h3>
|
||
<div class="sidebar-links">
|
||
<CommonInternalLink to="/products" text="查看旅行产品" />
|
||
<CommonInternalLink to="/summer-camp" text="小蒙马亲子游学营" />
|
||
<CommonInternalLink to="/faq" text="常见问答" />
|
||
<CommonInternalLink to="/news" text="返回资讯列表" />
|
||
</div>
|
||
</div>
|
||
</aside>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
|
||
<!-- 404 -->
|
||
<div v-else class="page-not-found">
|
||
<div class="container">
|
||
<h1>动态不存在</h1>
|
||
<NuxtLink to="/news">返回品牌资讯</NuxtLink>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { useBreadcrumbSchema } from '~/composables/useJsonLd'
|
||
|
||
const { data: newsData } = await usePublicApi('news')
|
||
|
||
const route = useRoute()
|
||
const allArticles = computed(() => newsData.value?.articles || [])
|
||
const article = computed(() => allArticles.value.find(a => a.id === route.params.slug))
|
||
|
||
if (!article.value) {
|
||
throw createError({ statusCode: 404, statusMessage: '动态不存在' })
|
||
}
|
||
|
||
// SEO
|
||
useHead({
|
||
title: article.value?.title,
|
||
meta: [
|
||
{ name: 'description', content: article.value?.summary || '' },
|
||
{ name: 'keywords', content: (article.value?.tags || []).join(',') },
|
||
{ name: 'author', content: article.value?.author || '呼籁旅行' },
|
||
{ name: 'article:published_time', content: (article.value?.date || '') + 'T00:00:00+08:00' },
|
||
{ name: 'article:modified_time', content: (article.value?.date || '') + 'T00:00:00+08:00' },
|
||
{ name: 'geo.region', content: 'CN-NM' },
|
||
{ name: 'geo.placename', content: '呼伦贝尔' },
|
||
{ property: 'og:title', content: article.value?.title },
|
||
{ property: 'og:description', content: article.value?.summary || '' },
|
||
{ property: 'og:type', content: 'article' },
|
||
{ property: 'og:url', content: `https://1814.love/news/${article.value?.id}` },
|
||
{ property: 'og:site_name', content: '呼籁旅行' },
|
||
{ property: 'og:locale', content: 'zh_CN' },
|
||
],
|
||
link: [
|
||
{ rel: 'canonical', href: `https://1814.love/news/${article.value?.id}` },
|
||
],
|
||
})
|
||
|
||
useBreadcrumbSchema([
|
||
{ text: '首页', to: '/' },
|
||
{ text: '品牌资讯', to: '/news' },
|
||
{ text: article.value?.title },
|
||
])
|
||
|
||
// JSON-LD NewsArticle schema
|
||
useHead({
|
||
script: [{
|
||
type: 'application/ld+json',
|
||
children: JSON.stringify({
|
||
'@context': 'https://schema.org',
|
||
'@type': 'NewsArticle',
|
||
'@id': `https://1814.love/news/${article.value?.id}#article`,
|
||
headline: article.value?.title,
|
||
description: article.value?.summary,
|
||
articleBody: article.value?.content,
|
||
image: article.value?.coverImage ? `https://1814.love${article.value.coverImage}` : 'https://1814.love/images/logo.png',
|
||
author: {
|
||
'@type': 'Organization',
|
||
'@id': 'https://1814.love/#organization',
|
||
name: article.value?.author || '呼籁旅行',
|
||
url: 'https://1814.love',
|
||
},
|
||
publisher: {
|
||
'@type': 'Organization',
|
||
'@id': 'https://1814.love/#organization',
|
||
name: '呼籁旅行',
|
||
url: 'https://1814.love',
|
||
logo: {
|
||
'@type': 'ImageObject',
|
||
url: 'https://1814.love/images/logo.png',
|
||
width: 200,
|
||
height: 200,
|
||
},
|
||
},
|
||
datePublished: (article.value?.date || '') + 'T00:00:00+08:00',
|
||
dateModified: (article.value?.date || '') + 'T00:00:00+08:00',
|
||
articleSection: article.value?.category,
|
||
mainEntityOfPage: {
|
||
'@type': 'WebPage',
|
||
'@id': `https://1814.love/news/${article.value?.id}`,
|
||
},
|
||
inLanguage: 'zh-CN',
|
||
keywords: (article.value?.tags || []).join(','),
|
||
}),
|
||
}],
|
||
})
|
||
|
||
const currentIndex = computed(() => allArticles.value.findIndex(a => a.id === article.value?.id))
|
||
const prevArticle = computed(() => currentIndex.value > 0 ? allArticles.value[currentIndex.value - 1] : null)
|
||
const nextArticle = computed(() => currentIndex.value >= 0 && currentIndex.value < allArticles.value.length - 1 ? allArticles.value[currentIndex.value + 1] : null)
|
||
|
||
const otherArticles = computed(() => allArticles.value.filter(a => a.id !== article.value?.id).slice(0, 8))
|
||
|
||
function formatDate(dateStr) {
|
||
if (!dateStr) return ''
|
||
const d = new Date(dateStr.includes('T') ? dateStr : dateStr + 'T00:00:00')
|
||
if (isNaN(d.getTime())) return ''
|
||
return `${d.getFullYear()}年${d.getMonth() + 1}月${d.getDate()}日`
|
||
}
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.news-layout {
|
||
display: grid;
|
||
grid-template-columns: 1fr;
|
||
gap: @space-2xl;
|
||
|
||
.respond-lg({
|
||
grid-template-columns: 1fr 300px;
|
||
align-items: start;
|
||
});
|
||
}
|
||
|
||
.news-main {
|
||
min-width: 0;
|
||
}
|
||
|
||
.article-meta {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
gap: @space-md;
|
||
margin-bottom: @space-lg;
|
||
font-size: @font-size-sm;
|
||
color: @color-text-muted;
|
||
}
|
||
|
||
.article-category {
|
||
padding: 3px @space-sm;
|
||
border-radius: @border-radius-sm;
|
||
font-size: @font-size-xs;
|
||
font-weight: @font-weight-medium;
|
||
|
||
&--产品 {
|
||
background: @color-primary;
|
||
color: #fff;
|
||
}
|
||
|
||
&--活动 {
|
||
background: @color-accent;
|
||
color: #fff;
|
||
}
|
||
|
||
&--公告 {
|
||
background: @color-text-secondary;
|
||
color: #fff;
|
||
}
|
||
}
|
||
|
||
.article-cover {
|
||
margin-bottom: @space-xl;
|
||
border-radius: @border-radius-lg;
|
||
overflow: hidden;
|
||
background: @color-primary-bg;
|
||
|
||
&__img {
|
||
width: 100%;
|
||
height: auto;
|
||
display: block;
|
||
}
|
||
}
|
||
|
||
.article-summary {
|
||
padding: @space-lg;
|
||
background: @color-primary-bg;
|
||
border-left: 4px solid @color-primary;
|
||
border-radius: 0 @border-radius-md @border-radius-md 0;
|
||
margin-bottom: @space-xl;
|
||
|
||
p {
|
||
margin: 0;
|
||
font-size: @font-size-md;
|
||
color: @color-text-secondary;
|
||
line-height: @line-height-base;
|
||
}
|
||
}
|
||
|
||
.article-content {
|
||
color: @color-text-secondary;
|
||
line-height: @line-height-base;
|
||
font-size: @font-size-base;
|
||
|
||
:deep(h2) {
|
||
font-size: @font-size-xl;
|
||
font-weight: @font-weight-bold;
|
||
color: @color-text-primary;
|
||
margin: @space-2xl 0 @space-lg;
|
||
padding-bottom: @space-sm;
|
||
border-bottom: 2px solid @color-primary-bg;
|
||
|
||
&:first-child {
|
||
margin-top: 0;
|
||
}
|
||
}
|
||
|
||
:deep(h3) {
|
||
font-size: @font-size-lg;
|
||
font-weight: @font-weight-bold;
|
||
color: @color-text-primary;
|
||
margin: @space-xl 0 @space-md;
|
||
}
|
||
|
||
:deep(p) {
|
||
margin: 0 0 @space-lg;
|
||
}
|
||
|
||
:deep(ul), :deep(ol) {
|
||
margin: 0 0 @space-lg;
|
||
padding-left: @space-xl;
|
||
}
|
||
|
||
:deep(li) {
|
||
margin-bottom: @space-sm;
|
||
line-height: @line-height-base;
|
||
}
|
||
|
||
:deep(strong) {
|
||
color: @color-text-primary;
|
||
font-weight: @font-weight-bold;
|
||
}
|
||
|
||
:deep(blockquote) {
|
||
margin: @space-lg 0;
|
||
padding: @space-md @space-lg;
|
||
border-left: 4px solid @color-primary;
|
||
background: @color-primary-bg;
|
||
color: @color-text-secondary;
|
||
}
|
||
|
||
:deep(a) {
|
||
color: @color-primary;
|
||
text-decoration: underline;
|
||
|
||
&:hover {
|
||
color: @color-primary-dark;
|
||
}
|
||
}
|
||
|
||
:deep(img) {
|
||
max-width: 100%;
|
||
height: auto;
|
||
border-radius: @border-radius-lg;
|
||
display: block;
|
||
margin: @space-md auto;
|
||
}
|
||
}
|
||
|
||
.article-tags {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
gap: @space-sm;
|
||
margin-top: @space-2xl;
|
||
padding-top: @space-lg;
|
||
border-top: 1px solid @color-border;
|
||
}
|
||
|
||
.tags-label {
|
||
font-size: @font-size-sm;
|
||
color: @color-text-muted;
|
||
}
|
||
|
||
.article-tag {
|
||
padding: 3px @space-sm;
|
||
background: @color-primary-bg;
|
||
color: @color-primary;
|
||
border-radius: @border-radius-sm;
|
||
font-size: @font-size-xs;
|
||
}
|
||
|
||
.article-nav {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: @space-md;
|
||
margin-top: @space-2xl;
|
||
padding-top: @space-lg;
|
||
border-top: 1px solid @color-border;
|
||
|
||
&__item {
|
||
padding: @space-md;
|
||
background: @color-bg-white;
|
||
border: 1px solid @color-border;
|
||
border-radius: @border-radius-md;
|
||
text-decoration: none;
|
||
transition: all @transition-base;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: @space-xs;
|
||
|
||
&:hover {
|
||
border-color: @color-primary;
|
||
background: @color-primary-bg;
|
||
}
|
||
|
||
&--next {
|
||
text-align: right;
|
||
}
|
||
}
|
||
|
||
&__label {
|
||
font-size: @font-size-xs;
|
||
color: @color-text-muted;
|
||
}
|
||
|
||
&__title {
|
||
font-size: @font-size-sm;
|
||
color: @color-text-primary;
|
||
line-height: @line-height-tight;
|
||
.text-clamp(2);
|
||
}
|
||
}
|
||
|
||
.news-sidebar {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: @space-lg;
|
||
position: sticky;
|
||
top: 90px;
|
||
}
|
||
|
||
.sidebar-card {
|
||
background: @color-bg-white;
|
||
border: 1px solid @color-border;
|
||
border-radius: @border-radius-lg;
|
||
padding: @space-lg;
|
||
|
||
&--cta {
|
||
background: @color-primary-bg;
|
||
border-color: @color-primary-lighter;
|
||
}
|
||
|
||
&__title {
|
||
font-size: @font-size-base;
|
||
font-weight: @font-weight-bold;
|
||
color: @color-text-primary;
|
||
margin: 0 0 @space-sm;
|
||
}
|
||
|
||
&__desc {
|
||
font-size: @font-size-sm;
|
||
color: @color-text-secondary;
|
||
line-height: @line-height-base;
|
||
margin: 0 0 @space-md;
|
||
}
|
||
}
|
||
|
||
.sidebar-articles {
|
||
list-style: none;
|
||
margin: 0;
|
||
padding: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 2px;
|
||
}
|
||
|
||
.sidebar-article {
|
||
&--active .sidebar-article__link {
|
||
background: @color-primary-bg;
|
||
color: @color-primary;
|
||
}
|
||
|
||
&__link {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 2px;
|
||
padding: @space-sm;
|
||
border-radius: @border-radius-sm;
|
||
text-decoration: none;
|
||
transition: background @transition-fast;
|
||
|
||
&:hover {
|
||
background: @color-primary-bg;
|
||
}
|
||
}
|
||
|
||
&__category {
|
||
font-size: @font-size-xs;
|
||
color: @color-primary;
|
||
}
|
||
|
||
&__title {
|
||
font-size: @font-size-sm;
|
||
color: @color-text-secondary;
|
||
line-height: @line-height-tight;
|
||
.text-clamp(2);
|
||
}
|
||
}
|
||
|
||
.sidebar-links {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: @space-sm;
|
||
}
|
||
|
||
.page-not-found {
|
||
text-align: center;
|
||
padding: @space-3xl 0;
|
||
|
||
h1 {
|
||
margin-bottom: @space-lg;
|
||
}
|
||
|
||
a {
|
||
color: @color-primary;
|
||
}
|
||
}
|
||
</style>
|