101 lines
2.3 KiB
Vue
101 lines
2.3 KiB
Vue
|
<template>
|
||
|
|
<div class="news-container">
|
||
|
|
<h1 class="news-title">{{ article.title }}</h1>
|
||
|
|
<!-- <p class="news-date">{{ article.category }}</p> -->
|
||
|
|
<div class="left-bd">
|
||
|
|
<nuxt-content :document="article" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
async asyncData({ $content, params }) {
|
||
|
|
try {
|
||
|
|
// 读取 Markdown 文件内容，使用 params.slug 来获取动态路由的 slug
|
||
|
|
const article = await $content("knowledge-center", 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>
|
||
|
|
.news-container {
|
||
|
|
max-width: 70%;
|
||
|
|
margin: 0 auto;
|
||
|
|
padding: 5rem 0;
|
||
|
|
}
|
||
|
|
.news-title {
|
||
|
|
font-size: 25px;
|
||
|
|
color: #0bf;
|
||
|
|
font-weight: 400;
|
||
|
|
text-align: center;
|
||
|
|
border-bottom: 2px solid #0bf;
|
||
|
|
padding-bottom: 10px;
|
||
|
|
width: 60%;
|
||
|
|
margin: 3% auto;
|
||
|
|
}
|
||
|
|
.news-date {
|
||
|
|
font-size: 14px;
|
||
|
|
color: #777;
|
||
|
|
}
|
||
|
|
.left-bd {
|
||
|
|
border-left: 5px solid #0bf;
|
||
|
|
padding:1% 0 0 4%;
|
||
|
|
margin-top: 3rem;
|
||
|
|
}
|
||
|
|
.news-container .content {
|
||
|
|
font-family: 'Times New Roman', serif; /* 修改字体 */
|
||
|
|
}
|
||
|
|
.news-container h3 {
|
||
|
|
color: #0bf;
|
||
|
|
font-size: 20px;
|
||
|
|
}
|
||
|
|
.news-container p {
|
||
|
|
line-height: 2; /* 设置段落行高 */
|
||
|
|
font-size: 16px; /* 可选：设置字体大小 */
|
||
|
|
font-family: 'Arial', sans-serif; /* 可选：设置字体 */
|
||
|
|
}
|
||
|
|
</style>
|