44 lines
895 B
Vue
44 lines
895 B
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 };
|
||
|
|
}
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</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>
|