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

标签 javascript html css content-management-system

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

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

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

聪明的做法是什么?

  • 自定义自动构建 CMS? 听说过,但不是很了解
  • 生成 HTML 的 Sublime 插件? 不要认为它写了 img 路径
  • 还有其他想法吗?

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

最佳答案

我不知道这是最好的方法,但我过去使用 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>

分割:

  1. 根据您拥有的图片数量使用常量 N_IMAGES。
  2. 使用 for 循环“echo”语句。它的作用是返回一个 每个图像路径的图像标签。
  3. 您可以将一个类与每个图像以及任何属性相关联 你可能需要。

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

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

关于javascript - 处理网页上数百张图片的聪明方法是什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29850027/

相关文章:

jquery - 通过id在另一个div中添加一个div?

javascript - HTML 文本输入大小

html - 打开文件而不是链接而不是下载

html - 在 Bootstrap 中检查响应时,图标向右对齐与居中对齐的标签重叠

javascript - 设置定时器为slidedown,按钮在slideup后改变

javascript - 在 Javascript 中插入 Jinja2 变量

Javascript - 返回数组中最大的数字

javascript - "./bin/www"在 Express 4.x 中有什么作用?

jquery - 一个好看的导航菜单,只剩下一个任务

javascript - 滚动条不工作