1

我在 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/

前物质图像路径

我按照这个例子。

---
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.*/}/>
4

1 回答 1

1

看到一个赞成票并提出了这个老问题。所以，这里是解决方案。

Frontmatter 图像路径和组件

https://www.gatsbyjs.com/plugins/gatsby-remark-normalize-paths/解决了这个问题。

仅组件

使用简码，我们可以完全消除在 MDX 文件中显式导入组件的需要。

假设您有一个“围绕”您的 MDX 内容的模板。

...
<MDXRenderer>{body}</MDXRenderer>
...

假设您<BlueBox />在 MDX 内容文件中使用了自定义组件。在模板中导入这个组件并<MDXRenderer>用<MDXProvider>

...
import BlueBox from "../components/mdx/blue-box"
import AnotherComponent from "../components/mdx/another-component"
...
<MDXProvider components={{BlueBox, AnotherComponent}}><MDXRenderer>{body}</MDXRenderer></MDXProvider>
...
于 2021-02-27T12:56:18.500 回答