大踏步走

今天遇到一个问题：如何在blog首页为每篇文章增加一张摘要图片？

WordPress下，我知道是有插件支持的，可俺一直用的是Z-BLOG程序。在ZBlogger论坛搜索，还真有方案，是月光博客提供的《Z-Blog摘要实现自动TAG图片的方法》，欣喜若狂！真佩服他的专研精神！！

仔细查看，发现这种方法虽然可以实现该效果，但也存在一些小隐患，比如：

1、每篇文章只能定义一个Tag，这样对SEO不利；

2、修改TEMPLATE/b_article_tag.html文件后，标签只能以图片的形式显示，且对于所有显示标签的地方都如此，页面可能不是很美观，更新起来也不方便；

3、我只希望在首页或者其他列表页显示该摘要图片，正文不显示还是以Tag形式，这样似乎也不满足。。。

顺着他的思路想下去，能不能用其他方法实现呢？在该帖最后，版主补充了些内容，“Z-Blog 1.7中增加了两个实用标签,如你用的是最新的版本,可加以利用”。这下提醒了俺，于是翻开最新的标签列表，意外找到了一个标签“<#article/firsttagintro#>”意为“第一个tag摘要，将摘要设置图片链接，可做自动图文混排”，这不是我要找的吗？结合月光提供的方法，很快搞定。具体操作如下：

第一步：在b_article-multi.html中要显示摘要图片的位置增加一个图片标签<img src="<#ZC_BLOG_HOST#>themes/<#ZC_BLOG_THEME#>/tag/<#article/firsttagintro#>.gif" alt="<#article/tag/name#>"  />，图片的alt值和链接均可自由定义，通过class="tagImg"来进行样式定义；

第二步：进入系统后台Tags管理，为每篇文章的第一个Tag增加摘要，最好是英文或者拼音，作为图片名称使用，当然你也可以为每个Tag都增加摘要，方便以后使用；

第三步：在该主题目录下增加一个文件夹tag用来存放摘要图片，文件夹建在主题目录下主要是考虑到迁移方便，与之相对应，也可在其他目录下新建，只要定义的图片路径与之相对应即可；每张图片名称要与Tag摘要相对应，且图片后缀为gif格式。

完成以上操作后，在后台进行文件重建；再刷新首页，摘要图片即可显示，就这么简单。

接下来，需要进行进一步优化。如果Blog之前有发过文章，但还没有设置Tag摘要图片，那就无法正常显示图片，所以遇到这种情况，可以显示一张预先设定好的图片，这样整个blog就更加完美。

找一张合适的.gif格式的图片放在主题目录下tag文件夹中，命名为temp.gif。然后在调用该图片的文件（一般为template目录中default.html、catalog.html和search.html）中写一段js脚本来判断是否有Tag摘要命名的图片，如果有，原样输出，否则显示默认图片。

代码如下：

<script type="text/javascript">
    +function(){
        var temp="temp";//temp为默认显示图片的名称
        var imgs=document.getElementsByTagName("img");
        for(var i=0,l=imgs.length;i<l;i++){
            var strSrc=imgs[i].getAttribute("src");
            if(strSrc.match("/.")){
            strSrc=strSrc.replace("/.","/"+temp+".");//转行摘要图片显示的图片路径
            imgs[i].setAttribute("src",strSrc);
        }
       
    }
    }();//判断摘要图片显示
</script>

因为不同页面都要用到这个js文件，所以可以采用外调的方式。

整个过程到此结束，如果你有更好的方法，欢迎赐教。。。