raylinx/pages/knowledge-center/index.vue

<template>
  <div>
    <div class="KnowledgeCenter_view">
      <div class="KnowledgeCenter_view_title">知识中心</div>
      <div class="KnowledgeCenter_view_bar"></div>
      <div class="KnowledgeCenter_view_content">
        <div class="content_banner">
          <img src="@/assets/KnowledgeCenter/banner1.jpg" alt="" />
        </div>
        <div class="content_item">
          <div
            v-for="(item, index) in KnowledgeCenterList"
            :key="index"
            class="item"
          >
            <div class="item_desc">
              <div class="item_title">
                <a :href="`/knowledge-center/${item.slug}`">{{ item.title }}</a>
              </div>
              <div class="item_text">{{ item.desc }}</div>
              <div class="item_text" v-if="item.desc2">{{ item.desc2 }}</div>
              <div class="item_text" v-if="item.desc3">{{ item.desc3 }}</div>
            </div>
            <div class="item_text_link">
              <a :href="`/knowledge-center/${item.slug}`">详情 <i class="el-icon-d-arrow-right"></i></a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  async asyncData({ $content }) {
    try {
      // 读取 `KnowledgeBase` 目录下的所有 Markdown 文件
      const knowledgeList = await $content("knowledge-center")
        .only(["title", "category", "order", "slug"]) // 确保获取 slug 字段
        .sortBy("order", "asc")
        .fetch();

      // 将数据存入 `KnowledgeCenterList`
      const KnowledgeCenterList = knowledgeList.map(item => ({
        title: item.title || "Untitled",
        desc: item.category || "Uncategorized",
        slug: item.slug || item.title?.toLowerCase().replace(/\s+/g, '-') || 'default-slug', // 确保 slug 存在
        index: item.order || 0
      }));

      return { KnowledgeCenterList };
    } catch (error) {
      console.error("Error fetching knowledge base articles:", error);
      return { KnowledgeCenterList: [] };
    }
  }
};
</script>


<style lang="scss" scoped>
@media screen and (max-width: 800px) {
  a {
    text-decoration: none;
    color: rgb(40, 40, 40);
  }
  a:hover {
    color: rgb(94, 94, 94);
  }
  .KnowledgeCenter_view {
    width: 100%;
    min-height: 1000px;
    padding-top: 30%;

    &_title {
      font-size: 30px;
      text-align: center;
      line-height: 2;
      display: none;
    }

    .item_text_link {
      color: #00bbff;
      float: right;
      height: 20px;

      a {
        color: #00bbff;
      }
    }

    &_bar {
      background: rgb(0, 157, 255);
      width: 40%;
      height: 3px;
      margin: 0 auto 2% auto;
      display: none;
    }

    &_content {
      display: flex;
      width: 90%;
      margin: 0 auto;
    }

    .content_banner {
      width: 30%;
      height: 700px;
      display: none;

      img {
        width: 90%;
        height: 100%;
      }
    }

    .content_item {
      width: 100%;
      margin: 0 auto;

      .item {
        box-shadow: 0px 4px 10px rgba(79, 79, 79, 0.726);
        padding: 24px 24px 30px 24px;
        width: 90%;
        min-height: 120px;
        line-height: 1.5;
        margin: 0 auto 5% auto;
        overflow: visible;
        &_desc {
          border-left: 2px solid rgb(0, 157, 255);
          padding-left: 20px;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 6; /* 限制在5行 */
          overflow: hidden;
          text-overflow: ellipsis;
        }

        &_title {
          color: rgb(0, 157, 255);
          font-size: 20px;
          margin-bottom: 10px;
        }

        &_text {
          font-size: 14px;
        }
      }
    }
  }
}

@media screen and (min-width: 800px) {
  a {
    text-decoration: none;
    color: rgb(40, 40, 40);
  }
  a:hover {
    color: rgb(94, 94, 94);
  }

  .KnowledgeCenter_view {
    width: 100%;
    min-height: 1000px;
    padding-top: 7%;

    .item_text_link {
      display: none;
    }

    &_title {
      font-size: 30px;
      text-align: center;
      margin-bottom: 1%;
    }

    &_bar {
      background: rgb(0, 157, 255);
      width: 40%;
      height: 3px;
      margin: 0 auto 2% auto;
    }

    &_content {
      display: flex;
      width: 60%;
      margin: 0 auto;
    }

    .content_banner {
      width: 30%;
      height: 700px;

      img {
        width: 100%;
        height: 90%;
      }
    }

    .content_item {
      width: 100%;
      margin: 0 50px;

      .item {
        box-shadow: 0px 4px 10px rgba(79, 79, 79, 0.726);
        padding: 24px;
        width: 100%;
        min-height: 120px;
        margin-bottom: 5%;
        line-height: 1.5;

        &_desc {
          border-left: 2px solid rgb(0, 157, 255);
          padding-left: 20px;
        }

        &_title {
          color: rgb(0, 157, 255);
          font-size: 20px;
          margin-bottom: 10px;
        }

        &_text {
          font-size: 14px;
        }
      }
    }
  }
}
</style>
../../utils/content.js