我使用的盖茨比/ Netlify CMS栈和一直试图在主页上显示的降价文件的内容。例如,我在SRC /页目录/经验显示所有的经验降价文件。
因此,使用graphql,我有实际工作的查询:
{
allMarkdownRemark(
limit: 3,
sort: { order: DESC, fields: [frontmatter___date] },
filter: { fileAbsolutePath: { regex: "/(experience)/" } }
) {
edges {
node {
id
frontmatter {
title
company_role
location
work_from
work_to
tags
}
excerpt
}
}
}
}
然而,我的组件页上运行时,它显示×类型错误:无法读取属性未定义“allMarkdownRemark”
但是回来之前进入这个后:
if (!data) { return null };
该错误消失,但整个部分消失。这是如下:
const Experience = ({data}) => {
return (
<div id="experience" className="section accent">
<div className="w-container">
<div className="section-title-group">
<Link to="#experience"><h2 className="section-heading centered">Experience</h2></Link>
</div>
<div className="columns w-row">
{data.allMarkdownRemark.edges.map(({node}) => (
<div className="column-2 w-col w-col-4 w-col-stack" key={node.id}>
<div className="text-block"><strong>{node.frontmatter.title}</strong></div>
<div className="text-block-4">{node.frontmatter.company_role}</div>
<div className="text-block-4">{node.frontmatter.location}</div>
<div className="text-block-3">{node.frontmatter.work_from} – {node.frontmatter.work_to}</div>
<p className="paragraph">{node.frontmatter.excerpt}</p>
<div className="skill-div">{node.frontmatter.tags}</div>
</div>
))}
</div>
</div>
</div>
)}
export default Experience
在盖茨比-配置-JS,我已经添加了盖茨比源文件系统的决心从/ src目录/员额/ src目录/页分开,其中的经验目录为src /页/经验。
更新日期:2019年2月7日这里是盖茨比,配置-js文件:
module.exports = {
siteMetadata: {
title: `Howard Tibbs Portfolio`,
description: `This is a barebones template for my portfolio site`,
author: `Howard Tibbs III`,
createdAt: 2019
},
plugins: [
`gatsby-plugin-react-helmet`,
{
resolve: `gatsby-source-filesystem`,
options: {
name: `images`,
path: `${__dirname}/src/images`,
},
},
{
resolve: 'gatsby-transformer-remark',
options: {
plugins: [
{
resolve: 'gatsby-remark-images',
},
],
},
},
{
resolve: `gatsby-source-filesystem`,
options: {
name: `posts`,
path: `${__dirname}/src/posts`,
},
},
{
resolve: `gatsby-source-filesystem`,
options: {
name: `pages`,
path: `${__dirname}/src/pages`,
},
},
`gatsby-plugin-netlify-cms`,
`gatsby-plugin-sharp`,
{
resolve: `gatsby-plugin-manifest`,
options: {
name: `gatsby-starter-default`,
short_name: `starter`,
start_url: `/`,
background_color: `#663399`,
theme_color: `#663399`,
display: `minimal-ui`,
icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
},
},
`gatsby-transformer-sharp`
],
}
我的感觉是在盖茨比节点-JS在某个地方,我没有创建一个实例是与该类型的查询的东西。
const path = require('path')
const { createFilePath } = require('gatsby-source-filesystem')
const PostTemplate = path.resolve('./src/templates/post-template.js')
const BlogTemplate = path.resolve('./src/templates/blog-template.js')
exports.onCreateNode = ({ node, getNode, actions }) => {
const { createNodeField } = actions
if (node.internal.type === 'MarkdownRemark') {
const slug = createFilePath({ node, getNode, basePath: 'posts' })
createNodeField({
node,
name: 'slug',
value: slug,
})
}
}
exports.createPages = async ({ graphql, actions }) => {
const { createPage } = actions
const result = await graphql(`
{
allMarkdownRemark (limit: 1000) {
edges {
node {
fields {
slug
}
}
}
}
}
`)
const posts = result.data.allMarkdownRemark.edges
posts.forEach(({ node: post }) => {
createPage({
path: `posts${post.fields.slug}`,
component: PostTemplate,
context: {
slug: post.fields.slug,
},
})
})
const postsPerPage = 2
const totalPages = Math.ceil(posts.length / postsPerPage)
Array.from({ length: totalPages }).forEach((_, index) => {
const currentPage = index + 1
const isFirstPage = index === 0
const isLastPage = currentPage === totalPages
createPage({
path: isFirstPage ? '/blog' : `/blog/${currentPage}`,
component: BlogTemplate,
context: {
limit: postsPerPage,
skip: index * postsPerPage,
isFirstPage,
isLastPage,
currentPage,
totalPages,
},
})
})
}
想知道如果任何人能得到类似工作的东西吗?非常感谢您的帮助。
所以做了一些改变,以我的代码从pageQuery到StaticQuery和遗憾的是它仍然无法正常工作,但我相信它会朝着正确的方向:
export default() => (
<div id="experience" className="section accent">
<div className="w-container">
<div className="section-title-group">
<Link to="#experience"><h2 className="section-heading centered">Experience</h2></Link>
</div>
<div className="columns w-row">
<StaticQuery
query={graphql`
query ExperienceQuery {
allMarkdownRemark(
limit: 2,
sort: { order: DESC, fields: [frontmatter___date]},
filter: {fileAbsolutePath: {regex: "/(experience)/"}}
) {
edges {
node {
id
frontmatter {
title
company_role
location
work_from
work_to
tags
}
excerpt
}
}
}
}
`}
render={data => (
<div className="column-2 w-col w-col-4 w-col-stack" key={data.allMarkdownRemark.id}>
<div className="text-block"><strong>{data.allMarkdownRemark.frontmatter.title}</strong></div>
<div className="text-block-4">{data.allMarkdownRemark.frontmatter.company_role}</div>
<div className="text-block-4">{data.allMarkdownRemark.frontmatter.location}</div>
<div className="text-block-3">{data.allMarkdownRemark.frontmatter.work_from} – {data.allMarkdownRemark.frontmatter.work_to}</div>
<p className="paragraph">{data.allMarkdownRemark.frontmatter.excerpt}</p>
<div className="skill-div">{data.allMarkdownRemark.frontmatter.tags}</div>
</div>
)}
/>
</div>
</div>
</div>
);
我得到这个错误类型错误:无法读取的未定义的属性“标题”
所以,我想要做到的是这种情况下整个这一节。当然,这是一个占位符,但我期待每降价的内容替换该占位符。 Experience snip
因此,没有变化,但今天想后几场得到的是什么,我试图做一个更好的角度。这是从那里显示收藏NetlifyCMS的config.yml文件。这是我完成的事情(注:测试回购只是看到实际的CMS,我会改变):
backend:
name: test-repo
branch: master
media_folder: static/images
public_folder: /images
display_url: https://gatsby-netlify-cms-example.netlify.com/
# This line should *not* be indented
publish_mode: editorial_workflow
collections:
- name: "experience"
label: "Experience"
folder: "experience"
create: true
fields:
- { name: "title", label: "Company Title", widget: "string" }
- { name: "company_role", label: "Position Title", widget: "string" }
- { name: "location", label: "Location", widget: "string" }
- { name: "work_from", label: "From", widget: "date", format: "MMM YYYY" }
- { name: "work_to", label: "To", default: "Present", widget: "date", format: "MMM YYYY" }
- { name: "description", label: "Description", widget: "text" }
- { name: "tags", label: "Skills Tags", widget: "select", multiple: "true",
options: ["ReactJS", "NodeJS", "HTML", "CSS", "Sass", "PHP", "Typescript", "Joomla", "CMS Made Simple"] }
- name: "blog"
label: "Blog"
folder: "blog"
create: true
slug: "{{year}}-{{month}}-{{day}}_{{slug}}"
fields:
- { name: path, label: Path }
- { label: "Image", name: "image", widget: "image" }
- { name: title, label: Title }
- { label: "Publish Date", name: "date", widget: "datetime" }
- {label: "Category", name: "category", widget: "string"}
- { name: "body", label: "body", widget: markdown }
- { name: tags, label: Tags, widget: list }
- name: "projects"
label: "Projects"
folder: "projects"
create: true
fields:
- { name: date, label: Date, widget: date }
- {label: "Category", name: "category", widget: "string"}
- { name: title, label: Title }
- { label: "Image", name: "image", widget: "image" }
- { label: "Description", name: "description", widget: "text" }
- { name: body, label: "Details", widget: markdown }
- { name: tags, label: Tags, widget: list}
- name: "about"
label: "About"
folder: "src/pages/about"
create: false
slug: "{{slug}}"
fields:
- {
label: "Content Type",
name: "contentType",
widget: "hidden",
default: "about",
}
- { label: "Path", name: "path", widget: "hidden", default: "/about" }
- { label: "Title", name: "title", widget: "string" }
- { label: "Body", name: "body", widget: "markdown" }
而对于减价页面的一个例子,这将是在体验节看的格式,因为当你在它显示整个容器的图片中看到:
---
title: Test Company
company_role: Test Role
location: Anytown, USA
work_from: January, 2020
work_to: January, 2020
tags: Test, Customer Service
---
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
我有下面提供的一些代码更新,但在此之前,我得到了进去,这里是什么,我希望完成一些图片。这些是我在寻找替换为真实数据的占位符。这是每个部分:
我已经跑了,是由@staypuftman在下面的答案提供的代码,并用此错误想出了:
您网站的“盖茨比 - node.js的”创建了一个页面不存在的组件。
我已经添加除了什么已经在那里的代码,它处理的错误。这就是我本来以为会发生,究其原因,我想单独使用StaticQuery。这实际上是主要的问题,我曾与文件和启动回购,没有人真正创造了node.js中多个变量
我也试着从@DerekNguyen看起来像本次的改版:
import React from "react"
import { Link, graphql, StaticQuery } from "gatsby"
export default(data) => (
<div id="experience" className="section accent">
<div className="w-container">
<div className="section-title-group">
<Link to="#experience"><h2 className="section-heading centered">Experience</h2></Link>
</div>
<div className="columns w-row">
<StaticQuery
query={graphql`
query ExperienceQuery {
allMarkdownRemark(
limit: 2,
sort: { order: DESC, fields: [frontmatter___date]},
filter: {fileAbsolutePath: {regex: "/(experience)/"}}
) {
edges {
node {
id
frontmatter {
title
company_role
location
work_from
work_to
tags
}
excerpt
}
}
}
}
`}
render={data.allMarkdownRemark.edges.map(({ node }) => (
<div className="column-2 w-col w-col-4 w-col-stack" key={node.id}>
<div className="text-block"><strong>{node.frontmatter.title}</strong></div>
<div className="text-block-4">{node.frontmatter.company_role}</div>
<div className="text-block-4">{node.frontmatter.location}</div>
<div className="text-block-3">{node.frontmatter.work_from} – {node.frontmatter.work_to}</div>
<p className="paragraph">{node.frontmatter.excerpt}</p>
<div className="skill-div">{node.frontmatter.tags}</div>
</div>
))}
/>
</div>
</div>
</div>
);
不过也有错误来也:
类型错误:无法读取属性“边缘”的未定义
仍在努力,但我认为这是越来越接近解决。请记住,我也必须创建它的其他变量。
对于那些谁希望看到我是如何使用的盖茨比起动构建的网站,在这里它是下面:
当你有一大堆的需要是在gastby-node.js
页/pages/{variable-here}/
使用。盖茨比使用gatsby-node.js
运行针对您的数据源(Netlify CMS在这种情况下)一个GraphQL查询,并抓住一切根据您的具体GraphQL查询所需的内容。
然后,它动态地构建出在项目中使用的组件页面数。多少页就建立依赖于它发现在远程数据源。他们怎么看要看你指定的组件。了解更多有关此内容的Gatsby tutorial。
Staticquery
用于获取一次数据到组件,不产生从数据源页。这是非常有用的,但不是我想你想要做的事。了解更多关于它的Gatsby site。
基于这一切,你在前面已经提供了什么,我想你gatsby-node.js
应该是这样的:
// Give Node access to path
const path = require('path')
// Leverages node's createPages capabilities
exports.createPages = async ({ graphql, actions }) => {
// Destructures createPage from redux actions, you'll use this in a minute
const { createPage } = actions
// Make your query
const allExperiencePages = await graphql(`
{
allMarkdownRemark(limit: 1000) {
edges {
node {
id
frontmatter {
title
company_role
location
work_from
work_to
tags
}
excerpt
}
}
}
}
`)
// gatsby structures allExperiencePages into an object you can loop through
// The documentation isn't great but the 'data' property contains what you're looking for
// Run a forEach with a callback parameter that contains each page's data
allExperiencePages.data.allMarkdownRemark.edges.forEach( page => {
// Make individual pages with createPage variable you made earlier
// The 'path' needs to match where you want the pages to be when your site builds
// 'conponent' is what Gatsby will use to build the page
// 'context' is the data that the component will receive when you `gatsby build`
createPage({
path: `/pages/${page.node.title}/`,
component: path.resolve('src/components/Experience'),
context: {
id: page.node.id,
title: page.node.frontmatter.title,
company_role: page.node.frontmatter.company_role,
location: page.node.frontmatter.location,
work_from: page.node.frontmatter.work_from,
work_to: page.node.frontmatter.work_to,
tags: page.node.frontmatter.tags,
excerpt: page.node.excerpt
}
})
})
}
仅此可能不足以生成页面!这一切都取决于发生了什么事情与你在createPage
文件的gatsby-node.js
组成部分指定组件。