Внедрение кода HTML в MD-файл Gatsby для отображения

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

Создайте компонент React, содержащий ваш HTML. Этот ответ расскажет вам, как. Добавьте ваш компонент React в ваш блог.