Gatsby MDX 和根相对路径
Gatsby MDX and root relative paths
我有两次在 MDX 文件中想使用根相对路径而不是相对路径。 MDX 页面是深度嵌套的。所以我最终得到了很多 ../../..
文件夹示例是:
/content/products/
/content/products/brands/some-brand/index.mdx
/content/products/brands/some-brand/some-feature/first-product.mdx
/content/images/brand-images/some-brand.png
/content/images/brand-images/other-brand.png
/src/components/products/
Frontmatter 图片路径
我关注了this example。
---
title: Some title
brand-image: ../../../images/brand-images/some-brand.png
---
组件
import Products from '../../../../src/components/products';
这样的事情可能吗?
---
title: Some title
brand-image: ${PROJECT_ROOT}/content/images/brand-images/some-brand.png
---
import Products from '${PROJECT_ROOT}/src/components/products';
Hi, I'm a page with many products. It's just to show, how I use the MDX pages.
<Products pkey="some-brand" tags={/.*Corp.*Gov.*/}/>
看到一个赞成票并提出了这个老问题。所以,这是解决方案。
Frontmatter 图像路径和组件
https://www.gatsbyjs.com/plugins/gatsby-remark-normalize-paths/ 解决了这个问题。
仅组件
使用shortcodes我们可以完全消除显式组件的需要
导入 MDX 文件。
假设您有一个“围绕”您的 MDX 内容的模板。
...
<MDXRenderer>{body}</MDXRenderer>
...
假设您在 MDX 内容文件中使用自定义组件 <BlueBox />
。在模板中导入此组件,并用 <MDXProvider>
包裹 <MDXRenderer>
...
import BlueBox from "../components/mdx/blue-box"
import AnotherComponent from "../components/mdx/another-component"
...
<MDXProvider components={{BlueBox, AnotherComponent}}><MDXRenderer>{body}</MDXRenderer></MDXProvider>
...
我有两次在 MDX 文件中想使用根相对路径而不是相对路径。 MDX 页面是深度嵌套的。所以我最终得到了很多 ../../..
文件夹示例是:
/content/products/
/content/products/brands/some-brand/index.mdx
/content/products/brands/some-brand/some-feature/first-product.mdx
/content/images/brand-images/some-brand.png
/content/images/brand-images/other-brand.png
/src/components/products/
Frontmatter 图片路径
我关注了this example。
---
title: Some title
brand-image: ../../../images/brand-images/some-brand.png
---
组件
import Products from '../../../../src/components/products';
这样的事情可能吗?
---
title: Some title
brand-image: ${PROJECT_ROOT}/content/images/brand-images/some-brand.png
---
import Products from '${PROJECT_ROOT}/src/components/products';
Hi, I'm a page with many products. It's just to show, how I use the MDX pages.
<Products pkey="some-brand" tags={/.*Corp.*Gov.*/}/>
看到一个赞成票并提出了这个老问题。所以,这是解决方案。
Frontmatter 图像路径和组件
https://www.gatsbyjs.com/plugins/gatsby-remark-normalize-paths/ 解决了这个问题。
仅组件
使用shortcodes我们可以完全消除显式组件的需要 导入 MDX 文件。
假设您有一个“围绕”您的 MDX 内容的模板。
...
<MDXRenderer>{body}</MDXRenderer>
...
假设您在 MDX 内容文件中使用自定义组件 <BlueBox />
。在模板中导入此组件,并用 <MDXProvider>
<MDXRenderer>
...
import BlueBox from "../components/mdx/blue-box"
import AnotherComponent from "../components/mdx/another-component"
...
<MDXProvider components={{BlueBox, AnotherComponent}}><MDXRenderer>{body}</MDXRenderer></MDXProvider>
...