作者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)