vue.js - 我正在使用 gridsome，有没有更好的方法为每个类别创建一个页面？

Question

我使用gridsome-source-mysql插件从 MySQL 获取数据。

文章有50多个类别，我想为每个类别创建一个页面。

现在我的代码如下所示：

• ./src/components/Category01.vue文件：

<template>
  ...
  ...
</template>

<static-query>
query {
  allPosts(filter: { Category: { in: ["Category01"] }})  {
    edges {
      node {
        id
        Category
        Title
      }
    }
  }
}
</static-query>

<script>
export default {
    name: "Category01",
};
</script>

• ./src/components/Category02.vue文件：

<template>
  ...
  ...
</template>

<static-query>
query {
  allPosts(filter: { Category: { in: ["Category02"] }})  {
    edges {
      node {
        id
        Category
        Title
      }
    }
  }
}
</static-query>

<script>
export default {
    name: "Category02",
};
</script>

除了类别名称不同之外，所有内容都相同。

有没有更好的方法为每个类别创建一个页面？

谢谢！

Answer 1

您可以使用Pages API动态创建Category页面。

您只需要目录中CategoryPage.vue的 1 个文件templates，在模板文件中按类别名称过滤当前类别：

gridesome.server.js

module.exports = function(api) {
  api.createPages(async ({ graphql, createPage }) => {
    const { data } = await graphql(`
      {
        allPosts {
          edges {
            node {
              id
              Category
              Title
            }
          }
        }
      }
    `);

    data.allPosts.edges.forEach(({ node }) => {
        createPage({
          path: `/PATH-TO-POSTS/${node.id}`,
          component: "./src/templates/CategoryPage.vue",
          context: {
            categoryName: node.Category // this will be used as a query variable in CategoryPage.vue
          }
        });
    });
  }
}

模板/CategoryPage.vue：

<page-query>
 query Vid ($categoryName: String!){
 videos: allPosts (filter: {Category: {eq: $categoryName}}) {
    edges {
      node {
        Category
      }
    }
  }
}
 </page-query>

希望这可以帮助！