Question

我正在建立我的第一个博客，我希望能够将这些帖子以文本文件的形式写在Microsoft Word之类的字处理器上，以便我可以进行拼写检查和检查错误，然后将这些文件的内容包含到我的博客中使用CSS自定义格式的网站（例如，向HTML添加样式属性，例如style='font-family: sans-serif;'）。

我已经尝试过在网上搜索，并且找到了该网站blog.teamtreehouse.com，但是它不符合我的需求，因为它需要用户单击按钮来包含文件。我还提出了一些依赖于FileReader API的测试代码，但是由于我不了解File对象的bits参数（我将其留为空白），因此测试页面仅显示未定义。这是代码：

    <!DOCTYPE html>
    <html>
	<head>
		<title>Test Webpage</title>
	</head>
	<body>
		<p id='output'></p><!--p tag will have styles applied to it-->
	</body>
	<script>
		var reader = new FileReader();

		reader.onload = function(e) {
			var text = reader.result;
		}
		//What does the first parameter do? What am I supposed to put here?
		//                   |
		//                   |
		var file = new File([ ],'test.txt');
		var txt = reader.readAsText(file);
		var out = document.getElementById('output');
		out.innerHTML = txt+'';
	</script>
    </html>

Answer 1

请勿在Web浏览器中读取js文件。您可以使用node.js创建API，然后发出http请求以获取此数据。

创建服务器后，只需执行以下操作：

const fs = require('fs');
var content;
// First I want to read the file
fs.readFile('./Index.html', function read(err, data) {
    if (err) {
        throw err;
    }
    content = data;

    // Invoke the next step here however you like
    console.log(content);   // Put all of the code here (not the best solution)
    processFile();          // Or put the next step in a function and invoke it
});

function processFile() {
    console.log(content);
}

如果您想知道如何做一个api，这里是：https://dev.to/tailomateus/creating-an-express-api--7hc

希望它对您有帮助。

Answer 2

如果服务器上有*.txt个文件，则可以使用Javascript在浏览器中显示内容，如下所示：

fetch('/path/to/file.txt')
  .then(r => r.text())
  .then(txt => document.querySelector('<a selector>').innerHTML = txt);

这种方法有缺点：

JavaScript必须知道网址/文件名
普通txt文件不包含任何格式，因此文本块不会带有标题或类似内容。

但总而言之：没有任何服务器端处理，这是重复性的事情，因为来自客户端的JS甚至无法触发目录列表来获取所有应加载的文件，因此对于您创建的每个新文件，您还必须在Javascript中添加一个条目。这是一个非常普遍的问题，已经可以通过各种内容管理系统（Wordpress，Joomla，Drupal等）解决，因此我建议仅使用其中的一种。顺便说一句。 Grav是纯基于文件的CMS，它也没有后端接口，因此对于您的问题而言是非常简单的解决方案。

Answer 3

最后，我使用 HTTP 请求从文件中检索文本。

function includeText() {
  var xmlhttp, allElements, element, file;
  allElements = document.getElementsByTagName("*");
  for (let i = 0; i < z.length; i++) {
    element = allElements[i];
    file = element.getAttribute("insert-text-from-file");
    if (file) {
      xmlhttp = new XMLHttpRequest();
      xmlhttp.onreadystatechange = function() {
        if (this.readyState == 4) {
          if (this.status == 200) {element.innerText = this.responseText;}
          if (this.status == 404) {element.innerText = "Contents not found";}
          elmnt.removeAttribute("insert-text-from-file");
          includeText();
        }
      }
      xmlhttp.open("GET", file, true);
      xmlhttp.send();
      return;
    }
  }
}

如何将文本文件的内容包含到我的网站中？

3 个答案: