在没有 CMS 或 php 的情况下向 html 网站添加动态功能的最佳方法？

Question

我负责一家大型公司网站，该网站完全基于 .html/css 构建，并且可能会保持这种状态一段时间。我很乐意通过以下方式构建一些动态功能......

1.) 我们的四个页面有一个“特色报告”部分，显示我们发布的三份最新报告以及摘要。如果这可以从主列表中提取，那就太好了。

2.) 同样，这四个页面各自链接到一个页面，该页面包含该类别中发布的每个报告的完整列表。如果可能的话，我想从同一个主列表填充此页面。

这个想法是，主列表（无论是所有四个类别的一个还是四个列表）都可以以 html、纯文本或富文本格式进行更新，并且特色报告和完整报告部分都可以自动更新。这是我可以用 xml 做的事情吗？还有其他选择吗？我希望避免使用 CMS 或任何类型的数据库 - 只是定期手动更新的列表。

Answer 1

1. 我假设您可以通过 URL 访问这些报告，例如“http://yoursite.com/reports/report1”或其他内容。我还将假设您的问题是什么，但没有具体说明，此特色报告列表是应该可重用的代码。这是我的做法（还假设由于您在问题中标记了 jquery，因此您可以在网站上使用 jquery）：

const reports = [
  {name:"Report 1", url:"https://yoursite.com/reports/reports1"},
  {name:"Report 2", url:"https://yoursite.com/reports/reports2"},
  {name:"Report 3", url:"https://yoursite.com/reports/reports3"}
]
$(document).ready(function(){
  $('#reports').html(reports.map(report => `
    <button onclick='alert("${report.url}")'>${report.name}</button>
  `))
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div id="reports"></div>