在Gatsby MD文件中注入HTML代码，以便显示。

Question

我已经建立了一个Gatsby博客，使用md文件为每篇博客文章创建页面。我想用Narrative.so（照片布局）来制作每篇博客的内容。使用他们的软件，它可以生成HTML，让你粘贴到你网站的页面中。

这在Gatsby中能实现吗？以下是它给我的HTML作为例子。

<div class='nar-root' data-post-id='9ab2885d-f0e8-4d00-9c59-135ab04fc384' style='p {text-align:center;opacity: 0.0;animation: nara 0s ease-in 2s forwards;}@keyframes nara {to {opacity: 1.0;}}' >
  <img style="width:100%;" src="https://content1.getnarrativeapp.com/static/9ab2885d-f0e8-4d00-9c59-135ab04fc384/featured.jpg">
  <noscript><p>Your Narrative blog will appear here, click preview to see it live.<br>For any issues click <a href="https://help.narrative.so/i/j">here</a></p></noscript>
  <script type="text/javascript" src="https://service.getnarrativeapp.com/core/embed/r/9ab2885d-f0e8-4d00-9c59-135ab04fc384.js"></script>
</div>

Answer 1

是的，这是可能的。这里有一个可能性。

1. 添加 MDX支持 到您的博客
2. 通过MDX，你可以将React组件嵌入到你的markdown文件中。

// markdown file
import { NarrativePhotoLayout } from '../components/NarrativePhotoLayout'

# Here’s a NarrativePhotoLayout

The NarrativePhotoLayout is rendered inside our MDX document.

<NarrativePhotoLayout/>

3. 构建一个包含HTML的React组件。这个答案 告诉你怎么做。
4. 在你的博客文章中嵌入你的React组件。