Blogger 首頁文章折疊(繼續閱讀)功能

兩三年前,就將BLOGGER裡在文章中新增 "Read More" 的功能。
但是最近重新再上來時, 卻發現這個功能無效了, 就由原來設定的地方, 重新再去看看到底怎麼回事, 後來發現原來提供JS的網站掛了, 程式片段中的FUNCTION也就跟著無效了...只好重新又開始搜尋更改方式.
網路搜尋的結果，發現大致上可以分成兩種：一種就是用 CJH 的懶人包：[BLOGGER]繼續閱讀懶人加強版；另外一種則是需要手動設定「每篇」文章.

手動設定的方式又找到兩種，分別是 angelo 提供的「讓首頁文章可開啟/摺疊 for Blogger」和 Chagg 提供的「Blogger Beta 繼續閱讀功能改良」。沒有試過 Chagg 大大的方式，以下介紹的是之前舊的方法,只是新增了JS的原始CODE.

步驟一：
由於這是個大幅度的修改，請記得先備份你的範本。

　　版面配置 > 修改 HTML > 下載完整範本

步驟二：
在修改範本裡找到 </head> 把以下橘色代碼加到前面。
<script type="text/javascript">
var fade = false;
function showFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost") {
if (fade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Appear(spans[i]);
} else spans[i].style.display = 'inline';
}
if (spans[i].id == "showlink")
spans[i].style.display = 'none';
if (spans[i].id == "hidelink")
spans[i].style.display = 'inline';
}
}

function hideFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost") {
if (fade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Fade(spans[i]);
} else spans[i].style.display = 'none';
}
if (spans[i].id == "showlink")
spans[i].style.display = 'inline';
if (spans[i].id == "hidelink")
spans[i].style.display = 'none';
} post.scrollIntoView(true);
}

function checkFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
var found = 0;
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost") {
spans[i].style.display = 'none';
found = 1;
}
if ((spans[i].id == "showlink") && (found == 0))
spans[i].style.display = 'none';
}
}

</script>
以上這一段,也就是我所遺失的那一段JS程式段.重新再放上來, 就可以使用這個功能了.

步驟三：
找到以下程式碼

<b:includable id='post' var='post'>
<div class='post hentry'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>

將紅色那行改成下面的程式碼

<div class='post hentry' expr:id='"post-" + data:post.id'>

步驟四：
找到以下程式碼

<div class='post-header-line-1'/>
<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

把紫色那段整段改成

<b:if cond='data:blog.pageType == "item"'>
<p><data:post.body/></p>
<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a href='javascript:void(0);'
expr:onclick='"javascript:showFull(\"post-"
+ data:post.id + "\");"'>Read More...</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a href='javascript:void(0);'
expr:onclick='"javascript:hideFull(\"post-"
+ data:post.id + "\");"'>Summary only...</a></p>
</span>

<script type='text/javascript'>
checkFull("post-" + "<data:post.id/>");
</script>
</b:if>

其中綠色的部分可以自己改成自己想要的文字

如果不想要看到 Summary Ony... ，可以直接把 Summary Only 的這段(下面這段)刪掉

<span id='hidelink' style='display:none'>
<p><a href='javascript:void(0);'
expr:onclick='"javascript:hideFull(\"post-"
+ data:post.id + "\");"'>Summary only...</a></p>
</span>

如果希望按下 Read More... 之後，可以跳出只有單篇文章的頁面，那就把藍色那段改成下面這樣

<a expr:href='data:post.url'>

如果上面兩個都想要(既不想用 Summary Only，又想另外跳出單篇文章頁面)，那就把第四步開頭找到的紫色程式碼改成下面這段就好了

<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a expr:href='data:post.url'>Read More...</a></p>
</span>

<script type='text/javascript'>
checkFull("post-" + "<data:post.id/>");
</script>
</b:if>

同樣，綠色的部分可以自己更改。