Отображение HTML-содержимого в форматированном тексте — Contentful + Next.js
Я создаю веб-сайт, используя Next.js и Contentful. Теперь я хочу визуализировать HTML-контент примерно так: <span style = "font-size: 18px">View</span> в формате Contentful Rich Text. Я даже не уверен, возможно ли это.
Можете ли вы дать мне решение, как это сделать? Заранее спасибо.
Ответы 1
Я сделал аналогичное решение, используя пакет @contentful/rich-text-react-renderer.
Я попытался отобразить контент, подобный следующему HTML, для отображения кнопок и подсказок на моем веб-сайте.
<div>
<div style = "width: 100%; text-align: center; font-size: 18px; font-weight: 700;">This is your journey guide!</div>
</div>
Подробности можно посмотреть здесь
В моем контенте у CodeBlock есть поле «код», и оно отображается следующим образом: <div dangerouslySetInnerHTML = {{ __html: content.fields.code! }} />
Для лучшего понимания вы можете сослаться на следующее options в documentToReactComponents. renderEmbeddedEntry — это рендеринг CodeBlock. const options = { renderNode: { [BLOCKS.EMBEDDED_ENTRY]: (node: Node) => ( <div> { renderEmbeddedEntry(node.data.target) } </div> ), }, };
О, спасибо за быстрый ответ! Можете ли вы помочь мне подробно отобразить CodeBlock?