在blogger模板中显示帖子缩略图的方法傻瓜版  

The english version of this article is here.

这篇文章的目的是在blogger首页中实现用横向排列缩略图的方式显示帖子索引。
与传统的纵向排列完整内容的方式比较，这种只显示缩略图并且横向排列方式更适合以照片为主的博客。
我希望这篇文章叙述的步骤足够傻瓜以便让不太懂html和blogger模板的人也能实现这个功能，如果你希望了解更多，可以看我的另外一篇比较详细的说明。

1. 为每个帖子创建缩略图。
   blogger模板脚本虽然有一定的编程能力，但是并不足以自动为你创建缩略图，所以这一步要你自己来做。当然偷懒的话你直接使用帖子中的某一幅图作为缩略图也是可以的，但由于缩略图的尺寸通常比较小，如果让浏览器为你缩小图片，通常效果是比较差的。如果你是一个追求完美的人，最好还是自己做一幅小图的好。
   缩略图准备好了之后需要上传，你可以用自己的空间也可以上传到帖子中，本文介绍的方法并不要求缩略图一定要出现在帖子中，所以你只要确定缩略图能够在网上被访问到就行了。
2. 把缩略图的网址加入到帖子的link字段内。
   在默认情况下，blogger的link字段是没有使用的，你需要在设置->格式中开启连接字段。这里是blogger帮助中介绍的开启连接字段方法。
   开启了link字段后，创建帖子或者编辑帖子的时候，在标题下面会出现连接字段的输入框。对每一个你希望显示缩略图的帖子，你需要进行编辑并在连接字段内输入缩略图的网址。
3. 给希望显示缩略图的帖子一个合适的标签作为标识。
   本文介绍的方法是通过标签来识别一个帖子是否应该显示为缩略图的，如果你的博客中所有帖子都要显示缩略图，你可以忽略这一步。但这样的话编辑模板时的代码会与下面介绍的稍有不同，请留意。
   本文的例子中，假设你希望显示缩略图的帖子都带有标签“照片”。
4. 编辑模板。
   请遵循以下步骤
1. 打开模板设置， 点击“修改HTML”。
2. 查找
3. 把上面一行替换成以下代码：
   
   <b:widget id='Blog1' locked='true' title='博客文章'
    type='Blog'>
  <b:includable id='main' var='thisdata'>
    <b:if cond='data:blog.pageType != "item"'>
      <div style='margin:0px;padding:3px;'>
      <center>
        <b:loop values='data:posts' var='post'>
          <b:loop values='data:post.labels' var='lb'>
            <b:if cond='data:lb.name == "照片"'>
              <a expr:href='data:post.url'>
                <img expr:alt='data:post.timestamp'
                  expr:src='data:post.link'
                  expr:title='data:post.title'
                  height='100'/>
              </a>
            </b:if>
          </b:loop>
        </b:loop>
        </center>
      </div>
    </b:if>
  </b:includable>
</b:widget>
4. 上面代码中，我把图片高度固定为100，这样方便横向排版的整齐，如果你已经建立好合适的缩略图文件或者觉得高度不妥，可以改为别的数字，或者删除height='100'。图片上有连接连到对应的帖子，图片的样式我写在img标签内，如果你想修改并且懂css，应该很容易可以改到。
   如果你想所有帖子都显示为缩略图，而不是只有标签有“照片”的帖子显示，需要删除以下代码

   相应的，后面的结束tag也要删除

5. 如果你希望除了显示缩略图外，还要显示原来的所有帖子，在上面的代码后面加上：
6. 保存模板。
5. done. :D

2007年2月25日 补充：
修改之后有个问题，就是帖子标题的连接会连到link字段的地址，这是因为默认的模版中有一个判断，如果link字段存在的话会自动把连接指向link字段。
要解决这个问题需要再修改一下模版。
找到这里