如何避免HTML中重复的​​代码？

Question

假设我有一个如下课程，它显示了我想在我的网站上销售的可用项目。当我向我的网站添加新产品时，我应该如何避免一次又一次地编写相同的代码。每次我添加一个新产品时，只有它的图像和它所指向的页面会发生变化。有没有办法有效地管理这个？提前致谢

<div class="sale">
        <div class="img-container"><a href="#"><img src="1.png">Product1</a></div>
        <div class="img-container"><a href="#"><img src="2.png">Product2</a></div>
        <div class="img-container"><a href="#"><img src="3.png">Product3</a></div>
        <div class="img-container"><a href="#"><img src="4.png">Product4</a></div>
</div>

Answer 1

基本上首先你必须学习任何服务器端技术（例如，Asp，NodeJS，PHP等）和数据库（例如，mysql，MS Sql server）然后，我相信你会得到你的答案。更重要的是，还要学习 Javascript 或其库Jquery或最好是 AngularJS 。 要创建动态html，您必须在Javascript 至少

上进行命令

Answer 2

实现DHTML有很多选择。 使用JavaScript的基本示例：

＆＃13;

＆＃13;

var details = [{
  'img': "http://simpleicon.com/wp-content/uploads/light-bulb-6.svg",
  'lbl': "Product 1"
}, {
  'img': "http://images.clipartpanda.com/light-bulb-vector-png-9czEXKbbi.svg",
  'lbl': "Product 2"
}, {
  'img': "http://images.clipartpanda.com/light-bulb-vector-png-light-bulb-7.svg",
  'lbl': "Product 3"
}];

var html = "";
for (var i = 0, l = details.length; l > i; i++) {
  html += "<div class=\"img-container\">";
  html += "<a href=\"#\">";
  html += "<img src=\"" + details[i].img + "\">" + details[i].lbl + "</a>";
  html += "</div>";
}

document.getElementsByClassName('sale')[0].innerHTML = html;

＆＃13;

.sale {
  border: 1px ridge grey;
}
.img-container {
  border: 1px dashed grey;
  margin: 3px;
  display: inline-block;
  padding: 3px;
}
.img-container img {
  width: 100px;
}

＆＃13;

<div class="sale">
  <div class="img-container">
    <a href="#">
      <img src="1.png">Product1</a>
  </div>
  <div class="img-container">
    <a href="#">
      <img src="2.png">Product2</a>
  </div>
  <div class="img-container">
    <a href="#">
      <img src="3.png">Product3</a>
  </div>
  <div class="img-container">
    <a href="#">
      <img src="4.png">Product4</a>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

在几乎所有的后端技术（如Node.js）中，Django都有一个名为 模板。如果您知道或学习模板，则可以避免重复html代码。并且可以在另一个html文件中重复使用html代码。

对于Node.js template

对于Django template