如果你希望了解我的博客首页顶端的缩略图是如何实现的，请先看看这篇操作性比较强的文章，如果看过之后你还希望了解实现的原理并做更深入的挖掘，请再往下看。
本文假设读者对html和简单的编程思想有一定的了解。

如今人人都在搞博客，个人网站这个词已经不再被人提起了。
博客是很方便，但却少了多样性，大家选来选去就是那几种模板，每个人的博客看起来都差不太多。。。
好在还有自定义模板，只要花点功夫同样可以让你的博客与众不同。

在博客中，有些贴子是照片，有些贴子是文章，虽然发照片和文章一样方便，但是这两种贴子毕竟是不同的类别，图片用缩略图浏览比较方便，而文章则适合传统博客那种纵向的排列方式。

通过模版编程，我们可以把所有贴子中图片类型的贴子找出来，在首页上方显示它们的缩略图，点击缩略图的时候就会连接到相应的贴子那去。而在下方，则是所有其它类型的贴子的文字。这样既不会占用大太地方，又可以让图片的内容很突出。如果你的博客以圖片爲主，甚至可以考慮只用缩略图的方式浏览。

编程中必不可少的是循环和逻辑运算，在blogger模板中，这两样是通过b:loop和b:if来实现的。
关于这两个必不可少的工具，blogger帮助里有详细说明，这里就不重复了。往下看之前，最好了解一下这两个工具。

要实现自动的缩略图的功能，常规的做法通常是通过分析正文来取得缩略图的信息，但是blogger模板不具备自定义变量和操作字符串的能力，所以这条是行不通的。我们只能利用blogger数据库中某个字段来存储缩略图的信息。还好blogger的帖子数据库确实有一个不常被用到的字段，那就是link字段，我们可以利用它来存储图片的路径，这样缩略图的存储问题就解决了。

有了工具，有了数据，就算万事具备了
实现步骤是这样的：

1. 把需要显示缩略图的帖子打上一个固定的标签，例如“照片”，以便筛选
2. 为帖子创建缩略图并把缩略图的路径写在link字段内
3. 为缩略图显示创建一个新的“博客文章”widget
4. 在新的博客文章widget内通过循环遍历所有帖子，再对每个帖子遍历所有标签，如果找到有“照片”这个标签，就显示link字段内的图片，并加上相应的连接、说明等

模板代码如下
<b:loop values="data:posts" var="post">
<!--遍历帖子 -->
<b:loop values="data:post.labels" var="lb">
<!--遍历标签 -->
<b:if cond="data:lb.name == "照片"">
<!--当标签名称是“照片”时 -->
<a href="data:post.url"><img alt="data:post.title" src="data:post.link" border="0" height="100" /></a>
<!--显示缩略图和连接 -->
</b:if>
</b:loop>
</b:loop>