批量生成带序号的html代码

Question

静态页面，几百张图片。图片列表显示七牛缩略图，点击到新窗口产生大图。以下面的方式输出：

<li><a href="http://xxx.clouddn.com/1.jpg" target="_blank"><img src="http://xxx.clouddn.com/1.jpg!list"><h3>小标题</h3></a></li>

其中1.jpg为文件名，现在想直接写在html代码中（是一次性页面，不用维护那种），请问有什么好办法能够直接生成这段html代码呢？
一个个改实在是太费事儿了。。。

Answer 1

使用编辑器内的插件：Emmet

假设你的图片列表有300个，然后输入
li*300>a[href="http://xxx.clouddn.com/$.jpg" target="_blank"]>img[src="http://xxx.clouddn.com/$.jpg!list"]+(h3>{小标题})
然后安展开的快捷键。

效果如下

Answer 2

啊咧？是要这样？

var counts = 500,
    baseUrl = "http://xxx.clouddn.com/";
    template = "<li><a href="{{url}}" target="_blank"><img src="{{url}}!list"><h3>小标题</h3></a></li>",
    output = "",
    i, url;

for(i=1;i<=counts;i++) {
    url = baseUrl+i+".jpg";
    output += template.replace(/{{url}}/g, url);
}

document.write(output);

Answer 3

也可以直接用模板语言生成html，比如jade。然后拷贝到目标页面中。
这样的好处是打开页面的时候不会因为js加载缓慢而看不到一部分内容。

jade-var all = 100 , i = 1 ;
ul
  while i <= all
    li
      a(href="http://xxx.clouddn.com/"+i+".jpg" target="_blank")
        img(src="http://xxx.clouddn.com/"+i+".jpg!list")
        h3 小标题
        -i++ ;

然后在命令行执行jade -P a.jade就可以生成这样鬼畜的结构了：

<ul>
  <li><a href="http://xxx.clouddn.com/1.jpg" target="_blank"><img src="http://xxx.clouddn.com/1.jpg!list"/>
      <h3>小标题</h3></a></li>
  <li><a href="http://xxx.clouddn.com/2.jpg" target="_blank"><img src="http://xxx.clouddn.com/2.jpg!list"/>
      <h3>小标题</h3></a></li>