模板/Post.tsx
import React from 'react'
import Helmet from 'react-helmet'
import { graphql } from 'gatsby'
import styled from 'styled-components'
import { MDXRenderer } from 'gatsby-plugin-mdx'
import {
Wrapper,
Header,
SEO,
PrevNext,
SectionTitle,
SectionSubTitle,
Narrow,
Wide
} from 'components'
import { Layout } from 'layouts'
import { Content } from 'layouts/components'
import config from 'config/siteConfig'
import 'utils/prismjs-theme.css'
import Post from 'models/Post'
import { MDXProvider } from '@mdx-js/react'
import { ReactResponsiveEmbed } from 'components/ReactResponsiveEmbed'
import {
YouTube,
Video,
SpeakerDeck,
SoundCloud,
Spotify,
Toot,
Tweet
} from 'components/Embeds'
import { theme } from 'config/theme'
import PageContext from 'models/PageContext'
import sendEmail from 'layouts/components/sendEmail'
const ShortCodes = {
Narrow,
Wide,
ReactResponsiveEmbed,
YouTube,
Video,
SpeakerDeck,
Tweet,
SoundCloud,
Spotify,
Toot
}
const PostContent = styled.div`
margin-top: 1rem;
`
const TypoLink = styled.a`
color: ${theme.colors.grey.default};
margin: 0.5rem auto;
display: block;
font-size: 0.75rem;
font-style: italic;
&:hover {
color: ${theme.colors.primary};
text-decoration: underline;
}
`
interface Props {
data: {
mdx: Post
}
pageContext: PageContext
}
const PostPage = (props: Props) => {
const { prev, next } = props.pageContext
const post = props.data.mdx
return (
<Layout>
{post ? (
<>
<SEO path={post.fields.path} data={post} />
<Helmet title={`${post.frontmatter.title} | ${config.siteTitle}`} />
<Header
banner={
post.frontmatter.banner && post.frontmatter.banner.publicURL
}
bannerAttribution={post.frontmatter.bannerAttribution}
left
>
<SectionTitle left>
{post.frontmatter.title}
<Line />
<SectionSubTitle left>
<Date dateTime={post.frontmatter.standardDate}>
{post.frontmatter.date}
</Date>
</SectionSubTitle>
</SectionTitle>
</Header>
<Wrapper>
<Content>
<PostContent>
<MDXProvider components={ShortCodes}>
<MDXRenderer>{post.body}</MDXRenderer>
</MDXProvider>
</PostContent>
<hr style={{ margin: '0' }} />
<TypoLink onClick={sendEmail}>
Please submit corrections on email by pressing here. Or
</TypoLink>
<TypoLink>
Email me at [email protected] using Subject: Blog(Suggestion/Corrections)
</TypoLink>
<PrevNext prev={prev} next={next} />
</Content>
</Wrapper>
</>
) : null}
</Layout>
)
}
// Gatsby needs this default export to work.
// eslint-disable-next-line import/no-default-export
export default PostPage
const Line = styled.hr`
color: white;
width: 5rem;
margin: 0.5rem 0;
height: 3px;
`
const Date = styled.time`
color: white;
clear: both;
font-family: ${config.headerFontFamily};
`
export const postQuery = graphql`
query ($id: String!) {
mdx(id: { eq: $id }) {
id
body
fields {
path
githubLink
}
frontmatter {
title
date(formatString: "MMMM D, YYYY")
standardDate: date(formatString: "YYYY-MM-DD")
banner {
publicURL
}
bannerAttribution
}
excerpt(pruneLength: 320)
timeToRead
}
}
`
出版物.mdx
---
title: Publications
banner: /assets/bg/publications.jpg
bannerAttribution:
socialImage:
---
Some text
我在 asset/bg/publications.jpg 中有一张图片。
如果我删除这里的横幅标签。它编译得很好。 Components/Header.tsx 代码：
import React from 'react'
import styled from 'styled-components'
import rgba from 'polished/lib/color/rgba'
import { media } from 'utils/media'
import config from 'config/siteConfig'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faImage } from '@fortawesome/free-solid-svg-icons'
const HeaderWrapper: any = styled.header<{
banner: string
left?: boolean
}>`
display: block;
clear: both;
position: relative;
/* Abusing linear-gradient for a constant dim effect. */
background: linear-gradient(
${() => rgba(0, 0, 0, 0.2)},
${() => rgba(0, 0, 0, 0.2)}
),
url(${({ banner }) => banner}) no-repeat black;
background-size: cover;
text-align: ${({ left }) => (left ? 'left' : 'center')};
z-index: 5;
padding-top: 4rem;
padding-bottom: 4rem;
@media ${media.tablet} {
padding-top: 3rem;
padding-bottom: 3rem;
}
@media ${media.phone} {
padding-top: 3rem;
padding-bottom: 3rem;
}
`
const ContentWrapper = styled.div<{ left?: boolean }>`
margin: 0 auto;
width: 66.6%;
@media ${media.tablet} {
width: 83.3%;
}
@media ${media.phone} {
width: initial;
}
`
const Content = styled.div<{ left?: boolean }>`
position: relative;
a {
color: white;
&:hover {
opacity: 0.85;
color: white;
}
}
margin: 3rem 4rem;
@media ${media.tablet} {
margin: 2rem 2rem;
}
@media ${media.phone} {
margin: 0rem 1rem;
}
`
const AttributionLink = styled.a`
text-decoration: none;
position: absolute;
bottom: 0;
right: env(safe-area-inset-right);
color: rgba(255, 255, 255, 0.5);
padding-right: 1.25em;
padding-bottom: 1.25em;
`
interface Props {
children: any
banner?: string
bannerAttribution?: string
left?: boolean
}
export const Header = ({
banner,
bannerAttribution,
left,
children
}: Props) => {
return (
<HeaderWrapper banner={banner || config.defaultBg} left={left}>
{bannerAttribution && (
<AttributionLink href={bannerAttribution}>
<FontAwesomeIcon icon={faImage} />
</AttributionLink>
)}
<ContentWrapper left={left}>
<Content left={left}>{children}</Content>
</ContentWrapper>
</HeaderWrapper>
)
}
错误如下：
ERROR #85922 GRAPHQL
There was an error in your GraphQL query:
Field "banner" must not have a selection since type "String" has no subfields.
This can happen if you e.g. accidentally added { } to the field "banner". If you didn't expect "banner" to be of type "String" make sure
that your input source and/or plugin is correct.
However, if you expect "value" to exist, the field might be accessible in another subfield. Please try your query in GraphiQL and use
the GraphiQL explorer to see which fields you can query and what shape they have.
It is recommended to explicitly type your GraphQL schema if you want to use optional fields. This way you don't have to add the
mentioned
"dummy content". Visit our docs to learn how you can define the schema for "undefined":
https://www.gatsbyjs.com/docs/reference/graphql-data-layer/schema-customization#creating-type-definitions
File: src/templates/Post.tsx:150:16
failed extract queries from components - 0.829s
我对这个错误有点困惑。我不想删除横幅标签。相反，我希望横幅出现在网站出版物页面的后面。
这很可能是您的 Graphql 查询的问题。
query ($id: String!) {
mdx(id: { eq: $id }) {
id
body
fields {
path
githubLink
}
frontmatter {
title
date(formatString: "MMMM D, YYYY")
standardDate: date(formatString: "YYYY-MM-DD")
banner {
publicURL // <--- this part
}
bannerAttribution
}
excerpt(pruneLength: 320)
timeToRead
}
}
该错误表示字段 banner 被定义为
String在后端检查此查询的实现，看看banner将返回一个字符串或对象。然后基于此，您可以更新后端代码中的 graphql 类型（如果该字段显示为字符串），或者更新您的前端查询（如果该字段显示为字符串）。