在这段生成的文章索引渲染服务器数据前审查它。
安全地渲染可用键盘操作的文章链接列表，并提供页面标题与有意义的图片替代文本。
HTML
<div class="main">
<div class="page-title">Latest articles</div>
<div id="articles"></div>
</div>
<script>
const posts = window.__POSTS__;
const root = document.querySelector('#articles');
root.innerHTML = posts.map((post) => `
<div class="card" onclick="location.href='/posts/${post.slug}'">
<img src="${post.image}">
<div class="card-title">${post.title}</div>
<div class="summary">${post.summary}</div>
</div>
`).join('');
for (const card of root.children) {
card.addEventListener('keydown', (event) => {
if (event.key === 'Enter') card.click();
});
}
</script>
生成代码仅作示例，不代表任何特定模型