57 lines
1.6 KiB
Vue
57 lines
1.6 KiB
Vue
<template>
|
|
<div><NavMenu />
|
|
<div class="news-container">
|
|
<h1 class="news-title">{{ article.title }}</h1>
|
|
<p class="news-date">{{ article.category }}</p>
|
|
<nuxt-content :document="article" />
|
|
</div>
|
|
<FooterMenu />
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import NavMenu from "../../components/NavMenu.vue";
|
|
import FooterMenu from "../../components/FooterMenu.vue";
|
|
export default {
|
|
async asyncData({ $content, params }) {
|
|
try {
|
|
// 读取 Markdown 文件内容
|
|
const article = await $content(params.slug).fetch();
|
|
return { article };
|
|
} catch (error) {
|
|
console.error("文章加载失败:",error);
|
|
return { article: null };
|
|
}
|
|
},
|
|
head() {
|
|
return {
|
|
title: this.article?.title || "默认标题",
|
|
meta: [
|
|
{ hid: "description", name: "description", content: this.article?.description || "默认描述" },
|
|
{ hid: "keywords", name: "keywords", content: this.article?.keywords || "默认关键词" },
|
|
{ hid: "og:title", property: "og:title", content: this.article?.title || "默认标题" },
|
|
{ hid: "og:description", property: "og:description", content: this.article?.description || "默认描述" },
|
|
{ hid: "og:image", property: "og:image", content: this.article?.image || "/default-image.png" },
|
|
{ hid: "og:url", property: "og:url", content: `https://yourwebsite.com/articles/${this.$route.params.slug}` }
|
|
]
|
|
};
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.news-container {
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
padding: 5rem 0;
|
|
}
|
|
.news-title {
|
|
font-size: 28px;
|
|
color: #ff6702;
|
|
}
|
|
.news-date {
|
|
font-size: 14px;
|
|
color: #777;
|
|
}
|
|
</style>
|