经常在其他博客上看到首页每篇日志的右上角都会有图片,感觉效果不错,那么怎么实现这种日志图文混排的呢?

搜集了为PJblog的UBB编辑器添加日志图文混排效果的方法,在这里留作归档备份,方便以后使用。

带图片标签的使用方法在UBB编辑模式里打上[tag]Pjblog[/tag] 就会在日志右上角显示pjblog的图标了。

在blog目录下建taglogo文件夹,把使用到的标签都做成*.png格式,放在里面。再按下面方法修改。

1.在ubbcode.asp加入以下代码

            
re.Pattern = "[tag]([^
]*?)[/tag]"
strContent = re.Replace(strContent, "<div id=""taglogo"">$1</div>")


2.打开header.asp,在头部加入以下样式:
<style>
#taglogo{float: right; margin: 4px 4px 4px 4px; padding: 0px; border: 0px; padding: 0px; max-width: 500px; max-height:500px; overflow:hidden; clear:both;}
#taglogo img{}
</style>

3.增加全静态模式下使用UBB编辑器日志图文混排效果
修改Templatestatic.htm
在<head>…</head>之间插入
<style>
#taglogo{float: right; margin: 4px 4px 4px 4px; padding: 0px; border: 0px; padding: 0px; max-width: 500px; max-height:500px; overflow:hidden; clear:both;}
#taglogo img{}
</style>