0

我正在为一个项目制作一个类似博客的页面。当用户点击标题时，会显示一个 div 和帖子。目前，我的 html 文件中有第一篇文章的文本。但是，有很多帖子，我不希望所有帖子都在我的 html 中。有没有办法插入文本文件而不是输入所有文本？

我一直在研究它，我发现了很多关于使用 PHP 的信息。但是，我对它不是很熟悉，所以如果有人能详细解释这个过程，如果它是最好的选择，将不胜感激。

    <!-- I have this div with the text and I would like to replace it with a text file. -->
    <div id="b1">
     <span class="closebtn">x</span>
     <h2> Integrating Informational Technology with Operational Technology </h2>
        <h3> What Are the Challenges? </h3>
        <p> The common challenge manufacturers face when integrating new technology to drive efficiencies is most often having a “connected” system. Three usual issues prevent manufacturing companies from pursuing a connected system including human barriers, rising costs, and a lack...</p>
    </div>

    <!-- More text here -->
4

2 回答 2

0

这里有两个挑战。首先是检索内容本身。第二个是显示您想要显示的内容。

如果可以通过 HTTP 下载文本文件，那么第一部分就很容易了。以下是使用fetchAPI的方法：

fetch('/static/blog-posts/2019-08-12-blog-title.txt')
  .then(res => res.text())
  .then(text => {
    const insertAt = document.querySelector('#some-element-selector');
    insertAt.textContent = text;
  });

但是，应该注意的是，插入到HTML中的纯文本可能不会像您预期的那样显示。例如，在 HTML 中，空格会折叠并被统一视为空格。例如，插入的文本不会在文本中有换行符的地方显示 HTML 换行符。您可以通过确保您的目标元素使用与您想要的匹配的样式或其他一些空白选项来解决此问题：white-space: pre

#some-element-selector {
  white-space: pre;
}

如果这仍然没有按您的预期显示，您可能需要研究将.md文件转换为 HTML 的降价处理器，因为它们允许更多的格式化选项而没有 HTML 的笨重。

于 2019-10-14T16:29:09.023 回答
0

您可以使用 http 请求（mdn fetch API， mdn Body.text()）获取文本，并通过分配给textContent属性来更新 div 文本。

在一起，这看起来像

fetch('your-text-resource').then(response => 
  document.querySelector('my-div') = response.text());
于 2019-10-14T16:10:36.910 回答