Я использую gridsome, есть ли лучший способ создать страницу для каждой категории? - PullRequest
Новая
       58

Я использую gridsome, есть ли лучший способ создать страницу для каждой категории?

1 голос
/ 05 апреля 2020

Я использую плагин 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>

Все они одинаковы, за исключением разных названий категорий.

Есть ли лучший способ создать страницу для каждой категории?

Спасибо!

1 Ответ

0 голосов
/ 12 апреля 2020

Вы можете использовать Pages API для динамического создания Category страниц.

Вам понадобится только 1 CategoryPage.vue файл в каталоге 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
          }
        });
    });
  }
}

templates / CategoryPage. vue: 

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

Надеюсь, это поможет!

...