使用 javascript 在 github 页面上写入文件

Question

有没有办法使用 javascript 写入 github 页面上的文件？我想将一些我想在其他地方使用的信息保存到一个 json 文件中（最好，但 txt 也可以），并且想知道这是否可能。

Answer 1

分步指南

如果你不是一个 JavaScript 专家，那么你可能想要一步一步地跟着使用。

嵌入式 JavaScript

在第一个示例中，我们创建了一个名为 js.md 的 Markdown 文件。在该 Markdown 文件中，我们放置了一个 id 为“text”的 HTML div 元素。稍后在该文件中，我们添加一个脚本标签，并在其中编写一些简单的 JavaScript 代码。此代码将定位具有 id 为“text”的元素或 div 元素，并在元素内放置出现在赋值右侧的文本。

你需要记住的主要一点是 JavaScript 代码必须在最后，所以当它被执行时，DOM 已经准备好了。否则 JavaScript 代码将找不到 HTML 元素。

examples/github/js.md

<div id="text"></div>
 
<script>
document.getElementById("text").innerHTML = "Text added by JavaScript code";
</script>

从外部文件加载的jQuery

​​>

我们的下一步是使用 jQuery 而不是 vanilla JavaScript。为此，我们只需要从其 CDN 加载 jQuery。如果我们已经在加载一个外部 JavaScript 文件，我们也可以将我们的代码移动到一个外部文件中。所以我创建了 demo.js 文件，使用另一个脚本标签加载它。

这次我们可以将脚本标签放在我们喜欢的任何地方，因为 jQuery 回调函数只会在 DOM 准备好时执行。唯一的限制是我们需要在加载 jQuery 本身之后加载我们的代码。

examples/github/jquery.md

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="/demo.js"></script>
 
<div id="text"></div>

在我们的 jQuery 代码中，我们有一个匿名回调函数，它将在 HTML 加载完毕并且 DOM 准备就绪时调用。这就是 $().ready 所做的。在函数内部，我们使用 $("#text") 表达式来定位 id 为 "text" 的元素，然后我们使用 html 方法设置元素的内容。 （与原生 JavaScript 中的 innerHTML 相同。）

examples/github/demo.js

$().ready(function() {
   $("#text").html("Text added by jQuery code.");
});

从服务器加载 JSON 数据

最后，我们想从服务器获取一些数据。由于我们无法在服务器上运行任何东西，我们无法获取动态数据，但我们可以将数据存储在 JSON 文件中并使用 jQuery 提供的 Ajax 方法加载它们。

在此示例中，标记文件实际上与我们之前的示例相同。

examples/github/json.md

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="/json.js"></script>
 
<div id="text"></div>

在 jQuery 代码中，我们使用 getJSON 方法从服务器获取 data.json 文件。这意味着，首先将加载从 Markdown 文件生成的 HTML 文件。然后浏览器将加载 jQuery，然后是我们的代码。然后，一旦一切准备就绪，我们的代码就会运行并从服务器加载 JSON 文件。

getJSON 的第一个参数是我们要加载的 JSON 文件的 URL。第二个参数是一个匿名回调函数，当我们从服务器得到响应时会执行它。然后 jQuery 将调用我们的匿名函数，并将 JSON 文件的内容转换为 JavaScript 对象后传递。

console.log(数据);只是为了调试而添加的。

在最后一个 JQuery 代码中，在 $("#text").html(data["text"]);第一部分 $("#text") 将定位 id 为 "text" 的元素。 html 方法会将元素的内容设置为我们传递给它的值，在我们的例子中是 data["text"]，即来自 JSON 文件的 "text" 键的值。

examples/github/json.js

$().ready(function(){
    $.getJSON( "/data.json", function( data ) {
    console.log(data);
    $("#text").html(data["text"]);
  });
});

这是data.json

examples/github/data.json

{
   "text" : "Text supplied in the JSON file"
}

希望这有帮助！