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

Question

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

Answer 1

分步指南

如果您不是 JavaScript 专家，那么您可能需要逐步遵循使用方法。

嵌入式 JavaScript

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

这里您需要记住的主要事情是 JavaScript 代码必须位于最后，因此在执行它时 DOM 已准备就绪。否则 JavaScript 代码将找不到 HTML 元素。

示例/github/js.md

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

从外部文件加载 jQuery

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

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

示例/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 相同。）

示例/github/demo.js

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

从服务器加载 JSON 数据

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

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

示例/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 对象后的内容传递给它。

控制台.log(数据); 仅添加用于调试。

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

示例/github/json.js

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

这是data.json

示例/github/data.json

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

希望这有帮助！