讓blogger文章在首頁顯示等比例縮圖 - 部落格

網誌版：
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/

--