2016年6月12日 星期日

解決Blogger預覽文章時,內容沒有換行之問題

撰寫文章時,明明有換行,但在blogger首頁預覽文章,內容卻亂成一團,如下



首先先點選「範本」->「編輯HTML」


Step1:

找到以下程式碼,若找不到請跳至step3

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+'...';
}

Step2:

將此段程式碼替代為

function removeHtmlTag(strx,chop){
        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+'...';
}



Step3:

若是找不到step1的程式碼,那麼先搜尋</head>,在其前面加上以下這段程式碼

<script type='text/javascript'>

img_thumb_width = 180; // Image Thumbnail Width

img_thumb_height = 180; // Image Thumbnail Height

summary_noimg = 500; // Length of Summary Text if no image is Used

summary_img = 400; // Length of Summary Text if post has Image Thumbnail

</script>

<script type='text/javascript'>

//<![CDATA[

function removeHtmlTag(strx,chop){

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="overflow:hidden; border: none; margin:0 15px 10px 0; float:left; max-height:'+img_thumb_height+'px;width:auto;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="auto"/></span>';

summ = summary_img;

}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';

div.innerHTML = summary;

}

//]]>

</script>



Step4:

成功!





參考資料:

                  http://petrus-think.blogspot.tw/2016/04/goggle-blogger.html
                  https://www.ptt.cc/bbs/Blog/M.1316707023.A.E62.html


0 意見:

張貼留言