Netlify CMS和Gatsby循环

时间:2019-01-01 03:38:27

标签: loops gatsby netlify yaml-front-matter netlify-cms

我正在尝试遍历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
      }
    }
  }
`;

0 个答案:

没有答案