buddyscloud/pages/news/_slug.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>