作者barkleyc (嘎瓜)
看板Blog
标题[Blogger] 让blogger文章在首页显示等比例缩图
时间Mon Apr 26 15:59:27 2010
网志版：
http://barkleyc.blogspot.com/2010/04/blogger_26.html
其实我用的这个template本来就有内建这功能，在blogger的首页中，它可以将每篇文
章的第一张图片缩小放在里头，且内建撷取字数的自动阅读。老实说我不太确定作者是从
何处取用这功能的，我就以这篇来做说明，另外在後半段分享我遇到的问题。
1. 进入「版面配置」，选取「修改HTML」，勾选「展开小装置范本」
2. 找到 </head>，将以下贴到 </head> 之前：
<script type='text/javascript'>var thumbnail_mode = "no-float" ;
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 150;
img_thumb_width = 200;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img
src="'+img[0].src+'" width="'+img_thumb_width+'px"
height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>
3. 找到 <data:post.body/> ，并且用以下取代：
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script
type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");
</script> <span class='rmlink' style='float:right;padding-top:20px;'><a
expr:href='data:post.url'> read more </a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
如果已经有自己的read more，请把：
<span class='rmlink' style='float:right;padding-top:20px;'><a
expr:href='data:post.url'> read more </a></span>
这段删除
4. 存档收工！
------------------------------------------------------
说明一下上面红字可修改的部份：
summary_noimg = 430;
没有图片的文章所显示在首页的字元数。
例如430就代表，该篇文章若没有图片，则会在首页显示430字元的摘要。
当然如果你有用内建的继续阅读，则会以字数少的设定来显示。
summary_img = 340;
有图片的文章所显示在首页的字元数。 通常会比上面那个少。（因为还有图片占空间XD)
img_thumb_height = 150;
首页显示缩图的高度。
img_thumb_width = 200;
首页显示缩图的高度。
----------------------
BUT……!!!! 打开网志後你可能会发现一个大问题！！
哇哩勒，怎麽缩图都变形了！
後来发现这是因为，原本的内建的写法是让所有缩图都转换成一样的大小，不管你是长是
扁，都把你压的一摸摸一样样，不会照原比例缩小。於是我开始google有没有办法修改，
但找到的一堆老外的方法都没用，中文的更是找不到相关文章。
想了好久，总算找到解决的方法：
width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"
这是我们加入的其中一段语法，後来想到，只要把其中一行去掉就能解决问题啦！
例如：
删掉 width="'+img_thumb_width+'px" 这行，只留下height，它就会照你设定的高度缩
图，所有的图片都缩成一样高！
反之，删掉 height="'+img_thumb_height+'px" 这行，只留下width，它就会照你设定的
宽度缩图，所有的图片都缩成一样宽！
个人是比较建议删掉width 留下height，
让图片一样高，避免有些图片太高，造成版面难看…
当然如果你喜欢缩图都长得一样方方正正的，那就可以不用理会这篇文章的後半段啦
--
█ █ ███
█ █ █ ████ ████ ████ ████
█ █ █ █ █ █ █ █ █ █
█ █ █ █ █ ████ █ █ █ █
█ █ ██ █████ █ █████ █ █
█ Ｘ Japan THE LAST LIVE ▉▊▋▌▍▎▏ http://barkleyc.blogspot.com/
--
※ 发信站: 批踢踢实业坊(ptt.cc)
◆ From: 118.161.77.165
※ 编辑: barkleyc 来自: 114.24.152.69 (07/11 19:53)