我是 mdx 的新手，并且已经构建了一个使用 graphql 查询动态生成页面的站点，我从 mdx 文档的 frontmatter 和 body 中提取字段。
（我不认为我违反了这篇文章中的任何规则 - 但如果我有，请有人打我的头并帮助我了解我做了什么。我会立即修复它......）
这是我的 mdx 文件之一的示例：
---
title: "Drew Hall Success Story"
date: "2021-07-23"
name: "Drew Hall"
first_name: "Drew"
image: "./drew-hall.jpg"
image_alt: "Drew Hall"
youtube_id: "dbFaHwf6lnE"
youtube_title: "Drew Hall Says It's Time To Think Bigger As A Filmmaker"
rating: 5
level: 5
niche: "Filmmaker"
city: "Mobile"
state: "AL"
country: "USA"
headline: "How Drew Hall Took CraftShow From $8k/Month To $30k/Month"
summary: "Drew Hall explains how the Next Level Creators program helped push him beyond what he thought his business was capable of being. The strategies and principles he learned and implemented helped him adjust to a new standard of living for the better."
---
So this is my 2006 Xterra. It’s a beast of a vehicle. It has been the bedrock in which my company was built upon, right?
So this bad boy hauled all of our gear. You know, we'd stack it from floor to ceiling with all of our equipment and it did what it was supposed to do. Now, we were modifying it. It wasn't efficient, it wasn't always effective but it did exactly what we needed it to do which was take our gear from Point A to Point B.
But this is our brand new 2019 Ford F-150. Now, this is probably going to sound a little bit like a car commercial for the moment but it's all really just a giant metaphor to talk to you about Next Level Creators (NLC).
So here's the thing. I was driving that old truck, right? And it did everything it needed to do. It had the proper operations, I knew exactly what it was going to do. It didn't have any cool features like a back-up camera or Bluetooth, none of that stuff. It was all analog but I knew that it would work.
But was it really making my life better? Was it making my life more efficient? Was it helping me with client relationships? So a vehicle's just a vehicle, right?
It's not necessarily that driving this truck got me any of these things. It has streamlined the process so, as you can see, now I can break apart my entire identity into two cabins. So I have grip gear and I have camera gear.
Why is that important? Because now I've streamlined my process. I can show up and perform jobs faster, quicker and am better as a filmmaker, as an advertiser.
This is how Next Level Creators connects to that, and it's very important you understand: Paul and Next Level Creators did not buy me this truck. I bought this truck, but NLC helped me and here's how it helped me.
First off, it got my mindset to stop thinking about just living in my analog days. The reason I loved that truck so much is because it was paid for and I knew exactly what I would get out of it.
This one is also now paid for, and because of that I now have a tremendous better workflow because I changed my mindset to think, instead of just scraping along and making just enough money and forcing myself to drive the old truck, I pushed myself further to get something new that has now made my production life better.
Grip gear in the back, camera gear in the cab. It makes life so much easier. I only have to pull one or two things.
So NLC helped me refocus my mindset. It got me to think differently about my business. Instead of just being a production company, I started thinking like an agency, I started thinking about distribution, I started thinking about how I can better serve my clients.
Instead of just showing up with a camera and shooting something, I was thinking more so about the end result. Of what result was I going to get for that client at the end of the day, and that's what NLC truly helped me with in that capacity.
Additionally, NLC got me thinking about how to approach creative projects with that value-added mindset tied into it. Meaning, how I'm going to approach how to not just necessarily upsell but bring more value to my clients by providing them more tools, more access, and in turn, it's allowed me more creativity.
Now, how does that relate to the trucks?
Well, simply just shifting the mindset alone took me from driving a 2006 Xterra to now driving a 2019 Ford. This one's completely paid for and the reason why is because once we adopted the NLC program, I'm telling you first hand I put in the work, I had a guide but I put in the work and, by putting in that work, last year we went from making roughly $8,000 to $9,000 a month and now we are generating close to $31,000, $32,000 a month in revenue simply by just putting in the effort to make it happen.
Additionally, the mindset's a big component but then being able to dive into these tools and understand how to use Facebook more effectively for advertising; how to use Google more effectively for advertising; that I couldn't go out and find all those pieces. I've been studying courses but nothing was comprehensive. Nothing gave it to me in a language that I understood, and that's again a major bonus from the NLC Program.
And I know it seems kind of odd to talk about the trucks but I'm really proud of that fact, that we were able to save up enough money last year to buy a brand new vehicle for the company and in turn also save up enough to have our salary covered for the next year. So now we're just in pure profit mode. That's a huge change from where I was.
Whether you're still project to project or you've got ongoing retainers, it doesn't really matter. It's all the same at the end of the day. Take the value, add the value to your clients and watch the work roll in beyond your wildest dreams.
So the last thing I just want to share is that it really is all about the work. You're going to have to do the work. Paul's going to give you the tools. NLC is going to give you the tools, I should say, but you have to do the work.
And if you truly want to see yourself grow and maybe you want a new 2019 F-150 like me, but if you want to get to that point, buy the program, put in the work and then send me a picture of your Ford!
这是graphql：
export const query = graphql`
query ($id: String = "") {
mdx(id: { eq: $id }) {
frontmatter {
city
country
date
headline
level
name
niche
rating
state
summary
title
youtube_id
youtube_title
image {
childImageSharp {
gatsbyImageData
}
}
image_alt
}
body
slug
}
}
`
这是页面，在 Gatsby/React 中使用 styled-components：
import React, { useState } from "react"
import { Link } from "gatsby"
import { Helmet } from "react-helmet"
import { NavigationBar } from "../main/NavigationBar"
import Dropdown from "../main/Dropdown"
import { MDXRenderer } from "gatsby-plugin-mdx"
import styled from "styled-components"
import NestedSuccessStories from "./NestedSuccessStories"
import { AiFillStar } from "react-icons/ai"
import favicon from "../../assets/images/nlc-favicon.png"
export default function SuccessStory({ data }) {
const [isOpen, setIsOpen] = useState(false)
const toggle = () => {
setIsOpen(!isOpen)
}
const title = "Success Story | " + data.mdx.slug
return (
<>
<Helmet
title={title}
meta={[
{
name: "description",
content:
"The Best Online Courses For Learning Content Creation. Commit to daily growth by enrolling in immersive, online classes with the worlds best instructors. Unlock your creative potential.",
},
{ name: "keywords", content: "...." },
]}
link={[{ rel: "shortcut icon", type: "image/png", href: `${favicon}` }]}
/>
<Dropdown isOpen={isOpen} toggle={toggle} />
<NavigationBar toggle={toggle} />
<section className="themes__panel-light">
<SeparationWrapper>
<SuccessStoryWrapper>
<SuccessStoryContainer>
<ClientlVideoContainer>
<ClientVideoInnerSmall>
<iframe
width="460"
height="249"
className="success-story-modal__video"
src={
"https://www.youtube.com/embed/" +
data.mdx.frontmatter.youtube_id
}
title={data.mdx.frontmatter.youtube_title}
style={{ border: "0" }}
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowFullScreen
></iframe>
</ClientVideoInnerSmall>
<ClientVideoInnerLarge>
<div className="iframe-container">
<iframe
width="560"
height="315"
className="success-story-modal__video"
src={
"https://www.youtube.com/embed/" +
data.mdx.frontmatter.youtube_id
}
title={data.mdx.frontmatter.youtube_title}
style={{ border: "0" }}
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowFullScreen
></iframe>
</div>
</ClientVideoInnerLarge>
</ClientlVideoContainer>
<CtaButtonContainer>
<Link to="/case-study1" style={{ textDecoration: "none" }}>
<CtaButtonInner>
<span>Watch Free Training</span>
</CtaButtonInner>
</Link>
</CtaButtonContainer>
<HeadlineContainer>
<Title>{data.mdx.frontmatter.headline}</Title>
</HeadlineContainer>
<RatingContainer>
<span className="success-story-modal__label">Rating:</span>
<ClientRating>
<StarIcon />
<StarIcon />
<StarIcon />
<StarIcon />
<StarIcon />
</ClientRating>
</RatingContainer>
<NameLevelContainer>
<NameLevelInnerContainer>
<div>
<span className="success-story-modal__label">Name:</span>
<span>{data.mdx.frontmatter.name}</span>
</div>
</NameLevelInnerContainer>
</NameLevelContainer>
<NicheContainer>
<div>
<span className="success-story-modal__label">Niche:</span>
<span>{data.mdx.frontmatter.niche}</span>
</div>
</NicheContainer>
<LocationContainer>
<div>
<span className="success-story-modal__label">Location:</span>
<span>
{data.mdx.frontmatter.city},
{data.mdx.frontmatter.state},
{data.mdx.frontmatter.country}
</span>
</div>
</LocationContainer>
<DescriptionContainer>
<div className="success-story-modal__label">Description:</div>
<div>{data.mdx.frontmatter.summary}</div>
</DescriptionContainer>
<TranscriptContainer>
<div className="success-story-modal__label">Transcript:</div>
<div>{<MDXRenderer>{data.mdx.body}</MDXRenderer>}</div>
</TranscriptContainer>
</SuccessStoryContainer>
</SuccessStoryWrapper>
<NestedSuccessStories />
</SeparationWrapper>
</section>
</>
)
}
const SeparationWrapper = styled.div`
display: grid;
grid-template-columns: 1fr;
grid-template-rows: minmax(auto, auto);
`
const SuccessStoryWrapper = styled.div`
display: grid;
justify-content: center;
justify-items: center;
grid-template-columns: 1fr;
grid-auto-rows: minmax(auto, auto);
`
const SuccessStoryContainer = styled.div`
max-height: calc(100vh - 50px);
overflow-y: auto;
padding: 20px;
padding-top: 125px;
display: grid;
grid-template-columns: 1fr, 1fr;
grid-auto-rows: minmax(auto, auto);
grid-template-areas:
"close close"
"video title"
"video rating"
"video nameLevel"
"video niche"
"video location"
"cta description"
"link description"
"transcript transcript";
max-width: 1060px;
min-width: 952;
background-color: #fff;
@media (max-width: 1030px) {
grid-template-columns: 1fr;
grid-auto-rows: minmax(auto, auto);
grid-template-areas:
"close "
"title"
"video"
"cta"
"link"
"rating"
"nameLevel"
"niche"
"location"
"description"
"transcript";
height: auto;
width: 90%;
margin: 5px;
padding: 20px;
padding-top: 100px;
padding-bottom: 40px;
}
@media (max-width: 550px) {
width: 100%;
padding: 3px;
padding-top: 100px;
padding-bottom: 30px;
}
`
const ClientlVideoContainer = styled.div`
padding-bottom: 40px;
width: 100%;
grid-area: video;
`
const ClientVideoInnerSmall = styled.div`
display: none;
@media (max-width: 1030px) {
display: none;
}
`
const ClientVideoInnerLarge = styled.div`
@media (max-width: 1030px) {
display: flex;
justify-content: center;
display: block;
width: auto;
}
`
const CtaButtonContainer = styled.div`
margin: 0;
padding: 0;
grid-area: cta;
`
const CtaButtonInner = styled.div`
display: flex;
justify-content: center;
align-items: center;
background-color: hsl(123, 46%, 34%);
border-color: hsl(123, 46%, 14%);
color: white;
height: 50px;
margin: 0;
padding: 0;
font-size: 16px;
font-weight: 400;
&:hover {
background-color: hsl(123, 46%, 34%);
box-shadow: 0 0 5px 0 hsl(123, 46%, 24%);
}
`
const TestimominalLinkContainer = styled.div`
display: flex;
justify-content: center;
align-items: center;
margin-top: 10px;
grid-area: link;
@media (max-width: 550px) {
margin-bottom: 30px;
}
`
const HeadlineContainer = styled.div`
padding: 0 20px;
grid-column-start: 1;
grid-column-end: -1;
grid-area: title;
@media (max-width: 1030px) {
padding-bottom: 20px;
}
`
const Title = styled.h1`
text-align: left;
font-size: 26px;
font-weight: 700;
@media (max-width: 1030px) {
text-align: center;
}
`
const RatingContainer = styled.div`
display: flex;
align-items: center;
padding: 10px 0 30px 20px;
grid-area: rating;
@media (max-width: 550px) {
padding-bottom: 20px;
}
`
const ClientRating = styled.span``
const NameLevelContainer = styled.div`
grid-area: nameLevel;
`
const NameLevelInnerContainer = styled.div`
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
@media (max-width: 1030px) {
display: block;
}
`
const NicheContainer = styled.div`
padding-left: 20px;
grid-area: niche;
`
const LocationContainer = styled.div`
padding-left: 20px;
grid-area: location;
`
const DescriptionContainer = styled.div`
padding: 0 20px;
width: 100%;
grid-area: description;
`
const TranscriptContainer = styled.div`
grid-area: transcript;
padding-bottom: 40px;
@media (max-width: 550px) {
padding: 20px;
}
`
const StarIcon = styled(AiFillStar)`
font-size: 20px;
color: #ffc15b;
`
这是生成的页面的链接：演示页面
我面临的挑战是我无法让 mdx 字段对 CSS 做出反应。
我不想要滚动条，但如果我从 SuccessStoryContainer 中删除溢出，那么它会切断正文。
我也很难让 div 元素响应 frontmatter.summary (DescriptionContainer) 中内容的大小。