处理网页上数百张图片的聪明方法是什么？

Question

我有一个包含数百张图片的简单网页。像这样...

<img src="img/photo00001.jpg">
<img src="img/photo00002.jpg">
<img src="img/photo00003.jpg">
... and so on

我不想花几个小时复制粘贴和编辑数字，然后才意识到我忘记了它们的锚标记。我知道 Wordpress 会这样做，但这应该是一个 简单项目 并且所有布局和设计都已经完成，主题化将是一个完全矫枉过正。

聪明的做法是什么？

自定义自动构建 CMS？ 听说过，但了解不多
生成 HTML? 不要以为它写了img路径
还有其他想法吗？

请注意，我是一名前端人员。

Answer 1

我不知道这是最好的方法，但我过去曾使用 php 做过类似的事情（别害怕！）。

<body>
 <div class="img-container>
  <?php
  define('N_IMAGES', 20);
  $class = 'image';
  for ($i=0;$i<N_IMAGES;$i++) {
    echo "<img src = \"img/photo"+$i+"\" class=\"$class\">";
  }
?>
</div>
</body>

细分：

您根据拥有的图片数量使用常量N_IMAGES。
使用 for 循环 "echo" 语句。这是 return 一个每个图像路径的图像标签。
您可以将 class 关联到每个图像以及任何属性你可能需要。

小心。您需要一个本地或远程服务器才能使 php 工作，并保存为 .php，而不是 html.

如果您不介意加入一些基本的东西，这是一种快速、干净的方法 php。

Answer 2

它真的很丑，但我认为它会做你想要的:

<!DOCTYPE html>
<html>
<head>
 <title>Test</title>
</head>
<body>

<head>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<script type="text/javascript">

function addZero(number){
 var zeros;
 switch(number.toString().length) {
    case 1:
        zeros= "0000";
        break;
    case 2:
        zeros= "000";
        break;
    case 3:
        zeros= "00";
        break;
    case 4:
        zeros= "0";
        break;
 }

 return zeros;
}

for(var i=0;i<1030; i++){
 $("body").append("<img src='img/photo"+ addZero(i) + i +".jpg'/>");
}
</script>
</body>
</html>

Copy/Paste 将其放入 .html 文件并运行它，然后复制生成页面的源代码...

祝你好运！

处理网页上数百张图片的聪明方法是什么？

What's the smart way to handle hundreds of images on a web page?

html

javascript

css

content-management-system