Question

我有一个静态网站，其中包含一个项目列表，其中每个项目都是相同的样式，只是一个新的ID或类似的东西。我目前只是在列表中复制并粘贴一个旧项目并更改其内容以添加项目，但是手动执行某些程序感觉很古怪。是否有某种框架允许使用我想要的项目制作文件并为每个项目指定html然后生成它然后获取我的静态网站的index.html？我可以写一个我知道的python脚本，但我觉得已经存在一些我不知道的东西。

Answer 1

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

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

＆＃13;

$(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>');
  }
}

＆＃13;

.flex-container {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  padding: 0;
}

.flex-container li {
  margin: 20px;
  text-align: center;
  list-style: none;
}

＆＃13;

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

＆＃13;

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

1 个答案: