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