Gridsome + Wordpress 源插件 - 如何按月和年添加存档路由

问题描述

我必须向基于 Gridsome(Wordpress 作为数据源)的博客添加一个存档小部件.像这样的标准功能:

I have to add an archive widget to a blog based on Gridsome (Wordpress as data source). Standard feature like this one:

我使用静态查询获取帖子:

I fetched posts with static query:

query Home($page: Int) {
  allWordPressPost(page: $page) {
    pageInfo {
      totalPages
      currentPage
    }
    edges {
      node {
        date(format: "YYYY-MM-DD")
        id
        title
        path

      }
    }
  }
}

接下来在月钩上，我按年份和月份将数据分组到这样的输出:

Next on monthed hook, i grouped data by year and month to such output:

 {
  "2019": {
    "10": [
      {
        "date": "2019-10-29",
        "node": {
          "date": "2019-10-29",
          "id": "145",
          "title": "Aspernatur ipsam est omnis praesentium rerum autem",
          "path": "/2019/10/29/aspernatur-ipsam-est-omnis-praesentium-rerum-autem/"
        }
      },
      {
        "date": "2019-10-29",
        "node": {
          "date": "2019-10-29",
          "id": "121",
          "title": "Libero voluptatibus facere aspernatur",
          "path": "/2019/10/29/libero-voluptatibus-facere-aspernatur/"
        }
      }

    ],
    "09": [
      {
        "date": "2019-09-25",
        "node": {
          "date": "2019-09-25",
          "id": "1",
          "title": "Hello world!",
          "path": "/2019/09/25/hello-world/"
        }
      }
    ]
  }
}

我使用标准的 v-for 循环语法生成了小部件链接结构，但示例路由如:http://localhost:8080/blog/2018", "http://localhost:8080/blog/2018/19"转到404页面.我尝试通过添加以下内容来修改 gridsome.config.js:

I generated widget links structure using and standard v-for loop syntax, but sample routes such as: "http://localhost:8080/blog/2018", "http://localhost:8080/blog/2018/19" go to the 404 page. I tried to modify gridsome.config.js by adding:

  templates: {
    WordPressArchive: [
      {
        path: "/blog/:year",
        component: "./src/templates/WordPressArchive.vue"
      }
    ]

  },

导致错误:

 "Error: A content type for the WordPressArchive template does not exist"

如何在 Gridsome 中启用存档路由以按年和年/月过滤博客文章?

How can i enable archive routes in Gridsome to filter blog posts by year and year/month ?

"/blog/:year",
"/blog/:year/:month"

是否可以直接从 graphQL 查询中按日期和年份对帖子进行分组，而无需进一步的 js 操作?

Is there a possibility to group posts by date and year directly from graphQL query, without further js manipulations?

推荐答案

您的 GraphQL 中有一个 WordPressPost 类型，并且您正尝试使用 WordPressArchive 作为模板名称.这些需要匹配，要么改变GraphQL中的typeName，要么改变gridsome.config.js中的模板名称.

You have a WordPressPost type in your GraphQL and you are trying to use WordPressArchive as the template name. These need to match, either change the typeName in GraphQL or change the template name in gridsome.config.js.

这篇关于Gridsome + Wordpress 源插件 - 如何按月和年添加存档路由的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！