什么是使用我自己的数据生成html的最佳方式？

问题描述：

我有一个静态网站的项目列表，其中每个项目是相同的风格，只是一个新的ID或类似的东西。我现在只是在列表中复制并粘贴一个旧项目并更改它的内容以添加项目，但是手动执行某些操作是件很古老的事情。是否有某种框架允许使用我想要的项目创建文件，并为每个项目指定html，然后生成它，然后获取我的静态网站的index.html？我可以编写一个我知道的python脚本，但是我觉得现在已经存在一些我不知道的东西。什么是使用我自己的数据生成html的最佳方式？

因为它不是编码相关的问题，https://softwarerecs.stackexchange.com/可能是一个更适合它。 – rsm

大致的问题是，您可以创建一个jQuery函数来为您完成繁重的工作，并将对象数据加载到对象中（类似于JSON数据），这是否会让您考虑或根本不想涉及任何代码？ – Syden

谢谢，你们俩。 @Syden，我认为这样做会浪费客户资源来做到每页加载。在推送网站之前，我自己可以自己生成它，但我有兴趣阅读你的建议，因为我实际上没有jQuery的这种体验 –

答

jQuery动态生成HTML项目列表的一般示例（请评论如果不合适，我将删除）。

将项目数据放在对象中（可以是标题，链接，img，描述等）。
将每个新项目添加到项目数组。
循环通过项目数组动态生成HTML。

$(document).ready(function() { 
 
    //initialize function 
 
    showItems(); 
 
}) 
 

 
//add data to object 
 
var item1 = { 
 
    img: 'https://placehold.it/100x100', 
 
    id: '#img' 
 
}; 
 
var item2 = { 
 
    img: 'https://placehold.it/100x100', 
 
    id: '#img2' 
 
}; 
 
var item3 = { 
 
    img: 'https://placehold.it/100x100', 
 
    id: '#img3' 
 
}; 
 
var item4 = { 
 
    img: 'https://placehold.it/100x100', 
 
    id: '#img4' 
 
}; 
 

 
//add objects to array 
 
var items = [item1, item2, item3, item4]; 
 

 
//loop through array and generate html 
 
function showItems() { 
 
    for (var i = 0; i < items.length; i++) { 
 
    $('.flex-container').append('<li><img src="' + items[i].img + '"><h3>' + items[i].id + '</h3></li>'); 
 
    } 
 
}

.flex-container { 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
    justify-content: center; 
 
    padding: 0; 
 
} 
 

 
.flex-container li { 
 
    margin: 20px; 
 
    text-align: center; 
 
    list-style: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="flex-container"></ul>

什么是使用我自己的数据生成html的最佳方式？

相关推荐