我正在尝试遍历Netlify CMS列表小部件,并在构建时收到针对我为支持workTags
添加的更改所特有的graphQL错误。
config.yml:
fields:
- {label: "Tags", name: "workTags", widget: list, required: false}
页面渲染js:
import React from "react";
import Link from "gatsby-link";
import PropTypes from "prop-types";
import Content, { HTMLContent } from "../components/Content";
import { DemoAndRepo } from "../components/Work";
import styles from "../components/Work/styles/WorkPage.module.css";
export const WorkPageTemplate = ({
title,
description,
demo,
repo,
content,
contentComponent,
image,
workTags
}) => {
const PageContent = contentComponent || Content;
return (
<section className={"scene_element--fadein "}>
<h1>{title}</h1>
<div className={styles.content}>{description}</div>
<DemoAndRepo demo={demo} repo={repo} />
<div style={{ marginTop: '25px'}}>
<PageContent className="content" content={content} />
{workTags && workTags.length ? (
<div style={{ marginTop: `4rem` }}>
<h4>Tags</h4>
<ul className="taglist">
{workTags.map(tag => (
<li key={tag + `tag`}>
{tag}
</li>
))}
</ul>
</div>
) : null}
</div>
</section>
);
};
WorkPageTemplate.propTypes = {
title: PropTypes.string.isRequired,
description: PropTypes.string.isRequired,
demo: PropTypes.string,
repo: PropTypes.string,
image: PropTypes.string,
content: PropTypes.string,
contentComponent: PropTypes.func,
workTags: PropTypes.string
};
const WorkPage = ({ data }) => {
const { markdownRemark: work } = data;
return (
<WorkPageTemplate
contentComponent={HTMLContent}
title={work.frontmatter.title}
description={work.frontmatter.description}
demo={work.frontmatter.demoUrl}
repo={work.frontmatter.repoUrl}
content={work.html}
image={work.frontmatter.image},
workTags={work.frontmatter.workTags}
/>
);
};
WorkPage.propTypes = {
data: PropTypes.object.isRequired
};
export default WorkPage;
export const workPageQuery = graphql`
query WorkPage($id: String!) {
markdownRemark(id: { eq: $id }) {
html
fields {
slug
}
frontmatter {
title
description
image
repoUrl
demoUrl
workTags
}
}
}
`;