<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>
