问题标签 [gatsby-plugin-mdx]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
reactjs - Gatsby 在从 markdown 文件生成页面时出错
我正在尝试从两类 .md 文件 [projects/posts] 生成页面，我在gatsby-node.js 中将与这两个文件夹相关的查询组合在一起，如下所示：
查询正在获取响应，已从 GraphiQL 验证：
但gatsby develop在创建页面时出错：
导出的查询仅对页面组件执行。您可能正在尝试在 gatsby-node.js 中创建页面，但由于某种原因失败了。
无法找到错误的确切原因。
请让我知道我在这里缺少什么，谢谢。
reactjs - 将通用道具传递给 MDX 文件中的所有组件，而不将道具添加到每个组件
我有 mdx 文件，其中包含需要了解区域设置的组件。
很多组件。而且他们都需要了解区域设置。
在 .mdx 文件中，我可以更改它们：
对此：
但是我需要为每个 .mdx 文件中的每个组件都这样做。
有没有办法让 mdx 中使用的所有组件都可以使用道具？
我想将它传递给 MDXRenderer，如下所示：
或者从组件访问frontmatter。
但是这两种方法都没有记录，也没有给出任何结果。
更好的想法？
每个请求，相关依赖项列表：
gatsby - 不能要求 gatsby-plugin-mdx 的 remark 和 rehype 插件
我试图遵循有关包括 gatsby-plugin-mdx 的 rehype 插件的文档。具体来说，我试图使用该rehype-slug插件。我安装了 npm 打包并将我的gatsby.config.js文件设置为
gatsby develop我遇到以下错误：
Error: [ERR_REQUIRE_ESM]: Must use import to load ES Module: C:\Users\User\Documents\test-site\node_modules\rehype-slug\index.js require() of ES modules is not supported.
我在尝试使用remark-math和rehype-katex插件时遇到了类似的问题。我正在使用 Gatsby CLI 的 3.13.0 版本。即使使用全新的网站，问题仍然存在。对此问题的任何帮助将不胜感激。
reactjs - Gatsby：如何将 frontmatter（Mdx 文件）中的数据插入到组件中
我有一系列包含相同信息但位于不同站点的 .mdx 文件（例如：title="aswan"; title="rome" 等）。这些文件位于名为“元数据”的文件夹中。
我需要将 mdx 信息插入到构成站点主页 (index.js) 的组件 (OurSites.js) 中。
这是 OurSites.js 组件的内容：
有文字的地方，比如CardText，我想插入mdx文件的内容。
在 Graphql 上查询数据给出了这样的结果：
这是 index.js 页面的内容，其中也存在 OurSite.js 组件：
这是组件的样子：
javascript - 如何格式化 graphql mdx - 从文档流中删除，除非使用溢出 - 并且不希望溢出
我是 mdx 的新手，并且已经构建了一个使用 graphql 查询动态生成页面的站点，我从 mdx 文档的 frontmatter 和 body 中提取字段。
（我不认为我违反了这篇文章中的任何规则 - 但如果我有，请有人打我的头并帮助我了解我做了什么。我会立即修复它......）
这是我的 mdx 文件之一的示例：
这是graphql：
这是页面，在 Gatsby/React 中使用 styled-components：
这是生成的页面的链接：演示页面
我面临的挑战是我无法让 mdx 字段对 CSS 做出反应。
我不想要滚动条，但如果我从 SuccessStoryContainer 中删除溢出，那么它会切断正文。
我也很难让 div 元素响应 frontmatter.summary (DescriptionContainer) 中内容的大小。
reactjs - 用于生成布局的 Gatsby 动态路由 URL
所以我用这段代码生成条件布局：
我想更改page.path.mathch( /projects/TO ALL PROJECT SLUGS/ )但我无法为路径编写正确的语法。
有谁知道如何在/projects/之后获取所有路径？
这是完整的 gatsby.node.js
这是我的模板：
好像我遗漏了一些东西，它接受（/projects/）路径但不接受（/projects/（[^/]+$）/）。
为了更清楚，我只想禁用项目的子目录页面中的布局，而不是 /projects/ 页面中的布局。
gatsby - gatsby-plugin-mdx 找不到模块“gatsby/webpack”
我刚刚将 gatsby-plugin-mdx 添加到我的 gatsby 插件中，但是当我启动项目时，我不断收到此错误。
我确实注意到有一些版本警告，如下面的警告，但我不确定这是否是问题，因为只要 gatsby-plugin-mdx 未添加到 gatsby-config 中，它就可以工作。
我对 gatsby 很陌生，添加的大多数插件都是按照他们的教程来的，所以我真的在这里摸不着头脑。
任何想法是什么导致了这个以及如何解决它？
这是我的 package.json
还有我的 gatsby-config.js
javascript - 如何使用 gatsby 仅获取 mdx 渲染文章的一部分？例如，一篇 mdx 博客文章的前几句？
我正在使用 GatsbyJS + MDX 制作博客。对于文章列表页面，我想显示每篇文章的前几个句子/段落（就像您在普通博客中几乎总是看到的那样）。但是，我想不出在 mdx 中这样做的方法。
例如，我不能简单地截断 .mdx 文件（比如截断前 1000 个字节），否则我们最终可能会得到未闭合的标签等，从而使 mdx 感到困惑。
gatsby - 通过 Gatsby 插件 mdx 使用内联图像
我正在从 airtable 中提取数据，该数据在其相当长的降价中使用外部 URL，如下所示：
但是，当这个构建和渲染时，图像仍然指向外部链接，并没有在本地下载。有没有办法转换传入的 MDX 图像，下载它们，然后更改相应的源以像 Gatsby 的图像那样表现？如果他们能获得 Gatsby 提供的渐进式加载增强等功能，那就太好了。
MDX 中的 Gatsby Static Image(gatsby-plugin-image)此处提供的解决方案不合适，该帖子中的最后一个答案似乎不起作用，但可能暗示了一个可能的解决方案。
我还尝试使用 MDX 提供程序和渲染器来烘焙自己的自定义 MDX 渲染器。如果我希望用户使用一些特殊的反应组件，它工作正常，但显然，当我尝试使用它来拦截img标签并将其替换为 Gatsby时，它会失败StaticImage。这是因为外部 URL 作为道具进来，并且被gatsby静态分析器禁止。