我的網誌: 在blogger首頁只顯示文章摘要, 隱藏全文(繼續閱讀)的做法

在blogger首頁只顯示文章摘要, 隱藏全文(繼續閱讀)的做法

2007/07/14 更新 : 原始引用的script出了問題, 所以文章中有部分修改, 有~~刪除線~~者, 代表刪除,並更新新的程式碼, 請參考.

在blogger(blogspot)只顯示摘要這個功能, 應該是很多使用blogspot的人覺得需要的. 可以讓首頁呈現較多篇文章的摘要, 讓首頁載入時間快一點, 版面也可以較整齊.

在上次改版時, 參考了一些template, 也加入了一些功能, 包含閱讀全文的部分.

利用這次長假,把這個部分整理出來, 提供有需要的人參考一下.

首先要注意的是, 每次修改之前, 最好先備份一下模板.

備份說明: 按一下 "下載完整模版", 把目前的template 另存到電腦.

先選擇範本--> 修改 html --> 打勾展開小裝置範本

1.在 <head> 後面加入這行程式

<script type='text/javascript' src='http://www.anniyalogam.com/widgets/hackosphere.js' />



<script type="text/javascript">

function toggleIt(id) {

post = document.getElementById(id);

if (post.style.display != 'none') {

post.style.display = 'none';

} else {

post.style.display = '';

}

}



function showFullPost(id) {

var post = document.getElementById(id);

var spans = post.getElementsByTagName('span');

for (var i = 0; i &lt; spans.length; i++) {

if (spans[i].id == "fullpost")

spans[i].style.display = 'inline';

if (spans[i].id == "readmore")

spans[i].style.display = 'none';

}

}



var fade = false;

function showFull(id) {

var post = document.getElementById(id);

var spans = post.getElementsByTagName('span');

for (var i = 0; i &lt; 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 &lt; 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 &lt; spans.length; i++) {

if (spans[i].id == "fullpost") {

spans[i].style.display = 'none';

found = 1;

}

if ((spans[i].id == "showlink") &amp;&amp; (found == 0))

spans[i].style.display = 'none';

}

}

</script>

2.再來就是找到下列這段程式碼, 把紅字加上去

<b:includable id='post' var='post'>

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

<a expr:name='data:post.id'/>

3.再找到下列這段程式碼, 加入下述紅色程式碼.

<div class='post-header-line-1'/>

<div class='post-body'>

<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 expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"'

href='javascript:void(0);'>[+/-] 繼續閱讀...</a></p>

</span>

<span id='hidelink' style='display:none'>

<p><a expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"'

href='javascript:void(0);'>[+/-] 只顯示摘要...</a></p>

</span>

<script type='text/javascript'>

checkFull(&quot;post-&quot; + "<data:post.id/>&quot;);

</script>

</b:if><div style='clear: both;'/> </div>