静态网站怎么更新数据

今天看到个问题

我不是行业从业者，但目前遇到一个问题
我公司网站为纯静态，除了直接从html里修改文字外能不能这样
建立一个xml或者txt文档，其中有很多信息，例如网站名称，电话，备案号等，一行一行的
我从html里通过什么代码能读取这个xml里指定的内容显示到相应的位置，例如title里等；
这样后期有其他需求，我直接修改这个xml即可，求帮助

这种对于数据安全性不是特别高的纯静态网站中，使用JavaScript来读取JSON文件并在HTML页面中动态显示数据是比较常见做法。这种方法允许你将数据和表示层分离，使得维护和更新变得更为简单。下面举一个简单的例子，来看看怎么在HTML中使用JavaScript读取JSON文件并显示数据，达到动态更新的目的。

首先，创建一个JSON文件（例如data.json），内容如下：

{"siteName": "我的公司","phone": "123-456-7890","recordNumber": "ICP备12345678号"
}

然后，在你的HTML文件中，可以使用以下JavaScript代码来读取JSON文件并显示数据：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>window.onload = function() {fetch('data.json').then(response => response.json()).then(data => {document.title = data.siteName;document.getElementById('site-name').textContent = data.siteName;document.getElementById('phone').textContent = data.phone;document.getElementById('record-number').textContent = data.recordNumber;}).catch(error => console.error('Error:', error));}</script>
</head>
<body><h1 id="site-name"></h1><p>电话: <span id="phone"></span></p><p>备案号: <span id="record-number"></span></p>
</body>
</html>

在这个例子中，我们使用了fetch API来异步获取JSON数据。当数据被成功解析后，我们使用DOM操作将数据插入到相应的HTML元素中。

如果是数组的话，可以按照下面的代码来参考

{"siteName": "我的公司","phone": "123-456-7890","recordNumber": "ICP备12345678号","news": [{"title": "新闻标题一","date": "2023-07-18","summary": "这是新闻一的摘要描述..."},{"title": "新闻标题二","date": "2023-07-17","summary": "这是新闻二的摘要描述..."}]
}

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title><span id="site-name"></span></title><style>#news-list li {margin-bottom: 1em;}</style><script>window.onload = function() {fetch('data.json').then(response => response.json()).then(data => {document.title = data.siteName;document.getElementById('site-name').textContent = data.siteName;const newsList = document.getElementById('news-list');data.news.forEach(news => {const item = document.createElement('li');item.innerHTML = `<h2>${news.title}</h2><span>${news.date}</span><p>${news.summary}</p>`;newsList.appendChild(item);});}).catch(error => console.error('Error:', error));}</script>
</head>
<body><h1 id="site-name"></h1><ul id="news-list"><!-- 新闻列表将在这里动态生成 --></ul>
</body>
</html>