如何在另一个要点中引用要点样式表？

Question

我创建了一个具有html页面和css文件的要点。如何在html页面中引用css文件？

我尝试了几种方法，但似乎都没有用。 html页面位于：https://gist.github.com/yuipcheng/943286be35fd690f499d59534281a6c5

查看页面：https://gistpreview.github.io/?943286be35fd690f499d59534281a6c5

Answer 1

gistpreview.github.io通过使用Github Gist API使用Javascript加载html。从the source code开始，它仅写入html内容。因此，它不处理可能链接到其他CSS文件的相对链接。

您需要：

• 分叉gistpreview项目
• 在html呈现（document.write）之后，迭代link标记并检查它们是否出现在API结果的files字段中
• 如果匹配，则动态加载CSS内容

我已经在上面使用this fork测试了此方法。

要点示例：https://bertrandmartel.github.io/gistpreview.github.io/?943286be35fd690f499d59534281a6c5

之前的代码：

var content = info.files[fileName].content;
document.write(content);

之后的代码：

var content = info.files[fileName].content;
document.write(content);

//load links
var links = document.querySelectorAll("link");
for (let [key, value] of Object.entries(info.files)) {
  for (var i = 0; i < links.length; i++) {
    var href = links[i].getAttribute("href").replace(/^\/|\/$/g, '');
    if (value.filename === href && value.type === "text/css") {
      console.log("load file " + value.filename);
      var style = document.createElement('style');
      style.type = 'text/css';
      style.innerHTML = value.content;
      document.getElementsByTagName('head')[0].appendChild(style);
    }
  }
}