【製作】BLOGGER中的『隱藏全文』
機乎所有的BLOG服務都有自動附上隱藏全文的功能
按下『繼續閱讀』之類的連結之後才可以看到完整的文章
這種做法很有效率，也很合乎邏輯
大部分人在閱讀BLOG時，除非是認識的好友的BLOG
否則不會每篇都閱讀內文，大多是先看看標題是否吸引注意
因此，若不是標題吸引到讀者的文章，也沒有必要全部顯示
換言之，讀者不會去按自己不感興趣的文章
這樣一來，隱藏全文功能把大部分無趣的內文蓋住了
節省很多讀取頁面的時間，也可以讓版面看來清潔
用了沒有這種功能的BLOGGER才知道它的好處ＸＤ…
其實也不是完全沒有辦法的
BLOGGER的優點之一就是沒有的功能幾乎都可以自己做
那麼，要怎麼實現這種功能呢？
首先，定義隱藏文章的標籤以及方法
（沒信心的人先儲存範本唷）
在<head>與</head>中間加入以下的語法<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 < 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 < 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>
接著，要改變原來文章的顯示方式
找到以下這兩行程式碼<div class='post-header-line-1'/>
.
.
.
.
<div style='clear: both;'/> </div>
用以下的程式碼完全取代<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("post-" + "<data:post.id/>");
</script>
</b:if>
<div style='clear: both;'/> </div>
當然，『繼續閱讀』與『顯示摘要』的文字可以自己更改
這樣一來就完成了所有的設定部份
使用的方法就是將想要隱藏的部分以<span>包夾
如以下程式碼<span id="fullpost">隱藏的部份</span>
2 則留言:
I should email my friend about it.
I'm glad that you like it , just take it if you want!
For fear that you might not quite understand it : There are 4 part of script , insert the 1st part between the head tag , replace the 2nd part into 3rd part and it done !
You only need to do is put the 4th part into your writing , and replace the word 隱藏的部份 into the part of writing that you want to hide .
張貼留言