有没有办法在Docusaurus的降价帖子中呈现html文件？

问题描述

我正在尝试将博客从 Jekyll 转换为 Docusaurus，但在弄清楚如何从 Markdown 帖子中呈现 HTML 文件时遇到问题。

在 Jekyll 中，我可以这样做：

{% include [filename].html %}

我似乎不知道如何在 Docusaurus 中做类似的事情。

如果相关，html 文件是通过 Python Plotly 图创建的。

感谢任何帮助或提示。

解决方法

好消息？ 这是可能的。

坏消息？您可能需要编辑 HTML 以符合 mdx 规则……或者使用 iframe。

示例 1（使用 iframe）

在您的文档文件夹中...

创建一个包含所有 html 的 HTML 文件，例如 page.html。
创建一个扩展名为 .mdx 的文件，例如 intro.mdx。

intro.mdx

# Rendering HTML

Some important information.

<iframe src='page.html' width='100%'></iframe>

page.html

<html>
<head>
    <style>
        .myDiv {border: 5px outset red; background-color: lightblue; text-align: center;}
    </style>
</head>
<body>
<div class="myDiv">
  <h2>This is a heading in a div element</h2>
  <p>This is some text in a div element.</p>
</div>
</body>
</html>

示例 2（编辑 HTML）

在您的 .mdx 文件夹中创建一个扩展名为 docs 的文件，例如 intro.mdx，然后插入以下内容进行检查。

注意 {{，并且属性 background-color 已更改为 backgroundColor。

intro.mdx

# Rendering HTML

Some important information.

<div style={{ padding: '20px',backgroundColor: 'tomato' }}>
    <h3>This is JSX</h3>
</div>

请参阅 the docs of docusaurus 和 the docs of MDX 以更好地理解它。

docusaurus plotly