将HTML代码注入Gatsby MD文件以进行显示

Question

我建立了一个Gatsby博客，它使用md文件为每个博客文章创建页面。我想对每个博客的内容使用Narrative.so(照片布局(。使用他们的软件，它会生成HTML供您粘贴到网站的页面中。

这在盖茨比可能吗？以下是它给我的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 file
import { NarrativePhotoLayout } from '../components/NarrativePhotoLayout'
# Here’s a NarrativePhotoLayout
The NarrativePhotoLayout is rendered inside our MDX document.
<NarrativePhotoLayout/>

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