需要创建在 Plunker 或其他网站中打开网站模板的链接？答案

【问题标题】：Need to create link that opens website template in Plunker or another site?需要创建在 Plunker 或其他网站中打开网站模板的链接？
【发布时间】：2020-09-14 23:23:53
【问题描述】：

我想在我的网站上创建一个按钮链接，该链接可以在类似 Visual Studio Code 的在线工具中打开一个代码文件夹，并带有一个侧边栏。我找到了 Plunker，它看起来很棒。

我有一个简单的网站模板，它是一个包含典型文件的文件夹，例如 index.html、css 和 javascript。我希望人们能够通过单击按钮从模板创建站点，登录并保存他们的更改，并与他人协作。跟踪更改也很棒。

最终我想将它内化到我自己的网站中，但我想我会从一个成熟的在线工具开始。

如果有什么特别的地方涉及到 web 地图，我会使用 MapBox GL。

有人知道吗？

【问题讨论】：

标签： visual-studio-code jsfiddle mapbox-gl codepen plunker

【解决方案1】：

Plunker 的嵌入式版本可以接受POST-ed 表单，以便您可以使用自定义文件动态设置编辑器。这方面的一个例子可以在here找到。

另外，我为 Plunker 创建了一个迷你“SDK”，以帮助创建在 npm 上发布的动态嵌入，其来源为 on GitHub。

<script src="https://cdn.jsdelivr.net/npm/@plnkr/sdk@1.0.0-pre.1/dist/index.js"></script>
<div id="embed"></div>
<script>
  const { showDynamicEmbed } = window['@plnkr/sdk'];
  
  // Generate the files for the dynamic plunk. This could easily
  // be generated on the fly by your application.
  const files = [
      {
          pathname: 'index.html',
          content: '<h1>Hello world</h1>',
      },
  ];

  showDynamicEmbed(
    {
        files,
        title: 'Hello world example',
        tags: ['hello', 'world'],
    },
    {
        deferRun: true, // Don't immediately run the preview
        show: ['index.html', 'preview'], // Open the index file and preview panes
        parentEl: document.getElementById('embed'), // Mount the embed in the #embed element
    }
  );
</script>

【讨论】：

【解决方案2】：

至少想出了一些东西：

创建一个新页面，或者在 plunker 中“Plunk”，然后保存它，并使用它的链接。如果人们想使用该模板，他们可以点击“fork”按钮，并将其保存到他们的帐户中。虽然不太了解如何查看版本历史记录。

【讨论】：