如何在11ty/Eleventy网站中嵌入或托管Jupyter Notebooks？

方案1：修复HTML Include的转义问题 #

你用{% include "notebook.html" %}输出原始代码，是因为11ty默认会转义HTML内容。解决方法很简单，给include加上| safe过滤器，让11ty直接渲染HTML：

{% include "notebook.html" | safe %}

额外注意事项：

• 把Jupyter导出的HTML里的内置css、js等相对资源，复制到11ty的静态资源目录（比如./static/），或者修改导出HTML里的资源路径为绝对路径，确保加载正常。
• 导出Notebook时建议用命令jupyter nbconvert --to html --template full notebook.ipynb，生成包含所有依赖的独立HTML，避免资源缺失。

方案2：解决iframe的CSP报错问题 #

首先补全你的iframe短码闭合标签，再调整内容安全策略（CSP）：

1. 修正短码：

eleventyConfig.addShortcode('getNotebook', (arg) => 
  `<iframe src="${arg}" width="100%" height="800" frameborder="0"></iframe>`
);

2. 调整CSP设置：
   如果项目用了eleventy-plugin-csp这类插件，在配置里添加允许同域iframe加载的规则：

// 示例配置
eleventyConfig.addPlugin(eleventyCsp, {
  directives: {
    defaultSrc: ["'self'"],
    frameSrc: ["'self'"], // 允许加载同域iframe
    scriptSrc: ["'self'", "'unsafe-inline'"], // 若Notebook HTML含内联脚本需添加（优先用外部脚本替代）
    styleSrc: ["'self'", "'unsafe-inline'"] // 内联样式同理
  }
});

同时把导出的Notebook HTML放到11ty的静态目录（比如./static/notebooks/），iframe的src写为/notebooks/notebook.html即可保证路径正确。

方案3：优化Markdown转换以保留格式与交互 #

如果想转成Markdown但改善格式和交互问题：

• 执行命令jupyter nbconvert --to markdown --execute --allow-errors notebook.ipynb，先执行Notebook再导出Markdown，能保留代码块和静态图表的正常格式。
• 对于Plotly这类交互式图表，导出时选择保留HTML元素，然后在11ty的Markdown页面里用{{ content | safe }}确保渲染，同时在CSP里允许加载对应CDN资源。不过这种方式对复杂交互支持有限，优先推荐前两个方案。

内容的提问来源于stack exchange，提问作者amunnelly