有什么方法可以使用 Docusaurus 在降价 post 中呈现 html 文件？

Question

我正在尝试将博客从 Jekyll 转换为 Docusaurus，但在弄清楚如何从 markdown post.

中呈现 HTML 文件时遇到了问题

在 Jekyll 中，我可以这样做：

{% include [filename].html %}

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

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

感谢任何帮助或提示。

Answer 1

好消息？ 有可能。

坏消息？您可能需要编辑 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）

在您的 docs 文件夹中创建一个扩展名为 .mdx 的文件，例如 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 and the docs of MDX 以更好地理解它。

有什么方法可以使用 Docusaurus 在降价 post 中呈现 html 文件？

Is there any way to render a html file in a markdown post with Docusaurus?

plotly

docusaurus