javascript - 如何更新所有 html 页面中的 href 链接？

Question

解释一下，我有一个博客网站，它包含一个索引页面，其中列出了要阅读的博客，如果我单击一个博客，它会将我带到该博客页面。索引页面在导航栏中还有一个最近的帖子选项卡，可以将我带到最近的博客。现在，我有大约 20 个博客，它们存储在不同的 html 页面中，这些页面在导航栏中也有最近的帖子选项卡。现在，如何将所有 20 个博客 html 页面上的最近帖子的“href”更新为最近的博客。在所有 20 个 html 文档中手动更新和保存它们需要时间。

我知道这个问题与 html 特定的东西无关，我想是代码管理。所有帮助将不胜感激。

提前谢谢你。

Answer 1

最好的解决方案可能是选择一些 static site generator学习。

如果您想使用 javascript 来实现，一种解决方案是创建一个生成链接的 javascript 文件，然后将其包含在每个页面上。

最新的帖子.js:

(function () {
  var recentPosts = [
    {
      title: 'post title',
      href: '/posts/title.html',
    }
  ];

  var containerElement = document.getElementById('most-recent-posts');

  containerElement.innerHTML = recentPosts
    .map(function (post) {
      return '<li><a href="'+post.href+'">'+post.title+'</a></li>'
    })
    .join('');
})();

然后将类似这样的内容添加到要显示列表的所有页面:

<ul id="most-recent-posts"></ul>
<script src="most-recent-posts.js"></script>