Я пытаюсь внедрить теги в блог этого веб-сайта, используя этот учебник Создание страниц тегов для сообщений блога из gatsby js .org. Скопировал и вставил как /templates/tags.js, так и /pages/tags.js, редактируя только gatsby- node.js с частями кода, предложенными в руководстве. Я сделал это, потому что я уже использую другой код для программного создания страниц блога. Весь репозиторий можно найти здесь .
Дело в том, что есть страница для отображения всех тегов, собранных в GraphQL, но совсем нет страниц для отображения сообщений, отмеченных такими. Ссылки в этом первом приводят вас к 404 страницам по умолчанию. Я не уверен, что может быть не так.
/ templates / tags. js
import React from "react"
import PropTypes from "prop-types"
// Components
import { Link, graphql } from "gatsby"
const Tags = ({ pageContext, data }) => {
const { tag } = pageContext
const { edges, totalCount } = data.allMarkdownRemark
const tagHeader = `${totalCount} post${
totalCount === 1 ? "" : "s"
} tagged with "${tag}"`
return (
<div>
<h1>{tagHeader}</h1>
<ul>
{edges.map(({ node }) => {
const { slug } = node.fields
const { title } = node.frontmatter
return (
<li key={slug}>
<Link to={slug}>{title}</Link>
</li>
)
})}
</ul>
{/*
This links to a page that does not yet exist.
You'll come back to it!
*/}
<Link to="/tags">All tags</Link>
</div>
)
}
Tags.propTypes = {
pageContext: PropTypes.shape({
tag: PropTypes.string.isRequired,
}),
data: PropTypes.shape({
allMarkdownRemark: PropTypes.shape({
totalCount: PropTypes.number.isRequired,
edges: PropTypes.arrayOf(
PropTypes.shape({
node: PropTypes.shape({
frontmatter: PropTypes.shape({
title: PropTypes.string.isRequired,
}),
fields: PropTypes.shape({
slug: PropTypes.string.isRequired,
}),
}),
}).isRequired
),
}),
}),
}
export default Tags
export const pageQuery = graphql`
query($tag: String) {
allMarkdownRemark(
limit: 2000
sort: { fields: [frontmatter___date], order: DESC }
filter: { frontmatter: { tags: { in: [$tag] } } }
) {
totalCount
edges {
node {
fields {
slug
}
frontmatter {
title
}
}
}
}
}
`
Посмотрите на файл /templates/tags.js, вот это кусок кода, говорящий Это ссылка на страницу, которая еще не существует. Вы вернетесь к этому! Это заставляет меня думать, что чего-то не хватает, может быть, в другом руководстве или около того, но мне не удается найти или понять, что это такое.
Гэтсби- node.js
const path = require(`path`)
const _ = require("lodash")
exports.createPages = async ({ actions, graphql, reporter }) => {
const { createPage } = actions
const blogPostTemplate = path.resolve(`src/templates/blogPost.js`)
const tagTemplate = path.resolve(`src/templates/tags.js`)
const result = await graphql(`
{
allMarkdownRemark(
sort: { order: DESC, fields: [frontmatter___date] }
limit: 1000
) {
edges {
node {
fields {
slug
}
frontmatter {
tags
}
}
}
}
tagsGroup: allMarkdownRemark(limit: 2000) {
group(field: frontmatter___tags) {
fieldValue
}
}
}
`)
// Handle errors
if (result.errors) {
reporter.panicOnBuild(`Error while running GraphQL query.`)
return
}
// Extract blog data from query
const blogPage = result.data.allMarkdownRemark
blogPage.edges.forEach(({ node }) => {
createPage({
path: `/blog/${_.kebabCase(node.fields.slug)}`,
component: blogPostTemplate,
context: {}, // additional data can be passed via context
})
})
// Extract tag data from query
const tags = result.data.tagsGroup.tagsGroup
// Make tag pages
tags.forEach(tag => {
createPage({
path: `/tags/${_.kebabCase(tag.fieldValue)}/`,
component: tagTemplate,
context: {
tag: tag.fieldValue,
},
})
})
}
Я вызвал allMarkdownRemark.edges.node.frontmatter.tags, поскольку он вызывается в руководстве. Не уверен, куда он идет, поскольку на него нигде нет ссылок в этом коде, но я считаю, что он используется для создания страницы тегов
Будем весьма благодарны за любые комментарии, советы, просьбы и помощь по этому вопросу. Спасибо за чтение!