2007/06/18

在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>



其中,繼續閱讀只顯示摘要的文字, 可以自己換掉.



4. 在設定-->格式





文章範本加入這行"文章摘要的部分<span id="fullpost">這裡是要隱藏的部分</span>"





這樣,以後新增文章時, 就不用自己再輸入<span id="fullpost">及</span>了!





參考來源 Expandable posts with Peekaboo view (blogger beta)

相關文章 :

77 comments:

KEVIN 提到...

我來偷學了....XD..謝大大..

Skyvee 提到...

kevin, 不要客氣! :)

希望特快車 提到...

哈哈..用是可以用..但是如果有影片又是自動播放...縮回去好像還是會繼續播放耶@@"
看來又是要克服的地方了...

Skyvee 提到...

你好, 這個方式其實一開始就載入了全文, 只是看不到, 所以影片如果預設自動播放, 就會開始播..優點是, 如果要看全文, 點一下馬上就展開, 不用再重新載入頁面,看完, 馬上縮回,等待時間較短.

希望特快車 提到...

怪怪..出現問題了..我直接把code貼在該貼的部份裡面..可是儲存卻出現下面這些訊息
我們無法剖析您的範本,因為它的結構不完整。 請確定所有的 XML 元素均已正確關閉。
XML 錯誤訊息: The element type "div" must be terminated by the matching end-tag "
".
之前成功過一次..後來把它改回來,這次想再用就出現問題了@@"是不是哪邊沒有完成?

希望特快車 提到...

您好..我有看到你首頁右邊有簡體中文跟ENGLISH的轉換..
請問那要怎麼使用??有哪邊有教學??
因為我也想在我的部落格裡面使用.....
感謝你阿~~因為你的分享我也學到很多..哈哈

Skyvee 提到...

會不會是最後一行, 有一個 </div>, 沒有複製到? 看起來是 div的結束tag,沒加上去呢!

Skyvee 提到...

我把程式碼給您吧! 那是利用google的翻譯功能.

<div>
<a href="http://translate.google.com/translate?u=http://skyvee.blogspot.com/&langpair=zh-TW%7Czh-CN&hl=zh-TW&ie=UTF-8&oe=UTF-8&prev=%2Flanguage_tools">
<font size="4">簡体</font></a><font size="4">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</font> <a href="http://translate.google.com/translate?u=http://skyvee.blogspot.com/&langpair=zh-TW%7Cen&hl=zh-TW&ie=UTF-8&oe=UTF-8&prev=%2Flanguage_tools">
<font size="4">English</font></a></b></font></div>

其中, 請把u= 後面的網址改成您的哦

希望特快車 提到...

感謝你的幫忙...但是你說那個div是最下面那邊再加上一個</div>還是我要加入那段的最後地方??因為我是直接從貴站直接複製..也確定有把最後段的</div>複製到..但他還是不行Orz|||

至於翻譯功能使用Google是去哪邊用呢?
(翻譯出來連結的網址怎麼產生@@?)
我想學起來....謝謝

希望特快車 提到...

哈哈...看來這個blog在欺負我..現在又可以了...這樣我以後都不敢去動他說~_~..不過還是要感謝你的幫忙...謝謝喔~

Skyvee 提到...

XD, 太好了, 可以用了!

google的翻譯頁面在這裡, http://translate.google.com/translate_t

你可以在Translate a Web Page的地方, 輸入你的 blog 網址, 然後 選 Chinese(traditional) to English或簡體..等選項, 就會有一串網址產生在網址頁, copy下來就可以囉! :)

希望特快車 提到...

問題很多的我又來了~_~這次換成如果我在文章裡面加上<span id="fullpost">及</span>把要隱藏的內容選出來。。但如果隱藏的段落裡面也有用到這樣的語法的時候例如使用文字顏色等等之類的..他就會切斷文章..甚至連後面的文章都不見了...不知道是我的問題還是語法問題..因為有些可以成功,有些卻不行..好奇怪= ="

Skyvee 提到...

這是blogger的編輯文章的問題. 如果你是事先就在模板裡加入<span id="fullpost">這個tag, 在寫新文章時, 用撰寫模式, 就會因為空行, 改字體顏色, 會突然加入一堆span的tag, 建議你先把<span id="fullpost"> </SPAN>清掉, 等你文章寫好後, 再到"修改HTML"的模式下, 自行加入, 就可以避開這問題. :)

SPEAKER 提到...

大大您好

我修改的時候也是碰上了這樣的問題

我們無法剖析您的範本,因為它的結構不完整。 請確定所有的 XML 元素均已正確關閉。
XML 錯誤訊息: The element type "div" must be terminated by the matching end-tag "
".

怎麼辦呢
我也確定我每個字都有複製到耶
而且一直無法完成該怎麼辦呢

網址
http://speaker-speakup.blogspot.com/

Skyvee 提到...

我又測一次, 程式碼沒問題啊..不過如果重覆貼2次, 就會出現這個錯誤訊息.

只要確定是 在 b:includable id='post' var='post' 這列後面加上程式碼..照理說不該有什麼問題的... 還是你要先關掉視窗, 再重新copy,試看看 ?

Skyvee 提到...

還是你如果不介意的話, 將程式碼貼上後, 仍有問題, 就請你把所有的code, copy到筆記本, 然後email給我? 這樣我比較好知道什麼原因... :)

Girvan資訊邦 提到...

我為了「繼續閱讀」而苦惱很久。因為以JavaScript的方式,若文章數量一多的話,載入會很慢(就以我本人的電腦在載入某些blogspot的頁面時,文章太多會發生當機的現象),所以在我的blog中,我還是硬是把它分成兩個網站。但相繼而來的問題一大堆,最主要的影響就是,排名下降!但我覺得此法大家也可以參考看看。

SPEAKER 提到...

skyvee 您好

我已經把 所有的code 寄到這個信箱了skyvee@gmail.com 不知道您是不是用這個帳號,如您沒有收到或有其他電子郵件,跟我說一下吧,真的謝謝你願意幫我查一下原因喔!

Skyvee 提到...

謝謝 Girvan 提供的另一種方式! :D .

Skyvee 提到...

SPEAKER,
我的gmail:bioitghost@gmail.com, 再麻煩你寄一次哦. 不好意思. 最近出門二天, 現在才回信給你.

SPEAKER 提到...

skyvee 您好

我已經把 所有的code 寄到您新提供的信箱,如您沒有收到,再跟我說一下吧,真的謝謝你喔!

Skyvee 提到...

Speaker你好, 我測過您的code了, 請在最後一行


之後, 再加一個< /div>

就可以執行了!

SPEAKER 提到...

skyvee 您好
我剛剛試了一下,按照你說的在後面加了一個< /div> 還是沒有辦法,怎麼會這樣?我都快哭了,弄了兩個禮拜還是沒辦法變成繼續閱讀!

Skyvee 提到...

speaker你好,

真奇怪..別急,我們再試看看.我剛email給你了, 請你將我寄的附檔, 全選內容, 將程式碼貼到你的html, 記得先勾取 小裝置範本, 然後用預覽模式看看...如果可以預覽, 就代表沒問題了!

記得先備份你的模板哦!

SPEAKER 提到...

skyvee 您好
我剛剛試了一下,按照你傳給我的附檔也先勾取小裝置範本,還是沒有辦法!真的快昏倒了!感謝你一直幫忙!超感謝!但還是無法解決!

Skyvee 提到...

Speaker, 如果你現在加入程式碼後, 可以儲存, 沒有再出現錯誤訊息, 接下來就是要在每一篇你想要隱藏部分段落的文章內用 <span id="fullpost">想隱藏的文字 </span>包住. 如,

這是文章摘要.<span id="fullpost">我想隱藏這些文字</span>, 那麼這文章就只會出現"這是文章摘要", 按了 "繼續閱讀"後, 才會出現全文哦!

我再把您的程式碼,略做修改如,
http://blogweb20.blogspot.com/

如果你覺得OK,可參考我剛剛寄給您的程式碼, 先備分你自己的template後, 再將我給您的程式碼複製到你的blog看看吧!

cupt 提到...

skyvee 大

我的問題也是會產生XML 錯誤訊息: The element type "div" must be terminated by the matching end-tag "
不過我在最後加上-/div-之後就可以了,但是卻在我新增文章的時候,文章內外會變成二段相同的敘述,是為啥呢?!

Skyvee 提到...

Cupt, 您是不是有放funp或是hemidemi的推鈕在post 區塊中? 因為沒看到您的網頁, 只能憶測呢..

cupt 提到...

原來我沒開放簡介不能讀取阿!哈哈!

我修改html的部分都是照大大的步驟阿!

另外放funp or hemidem 的部分我沒有去動滴呢!鳴~~

Skyvee 提到...

Cupt, 貼程式碼的步驟,我改了一些, 請再參考一下囉! :)

希望特快車 提到...

我又來囉...我的繼續閱讀不能使用了= =
點下去之後沒反應..之前都成功的阿~
怪怪..就沒上去看又出問題了QQ
你可以到我的頁面點點看嗎?
是不是只有我有問題?!

Skyvee 提到...

希望特快車你好, 這不是你的問題, 是原始的script出問題了, 已更新文章內容, 請參考修正一下.

SPEAKER 提到...

Skyvee 您好
我想請問一下,為什麼我的文章都會出現兩次呢?這個問題可以解決嗎?

Skyvee 提到...

speaker,請你把 <b:includable id='post' var='post'> 到 <div style='clear: both;'/> </div> 之間的程式碼email給我好嗎?

SPEAKER 提到...

SKYVEE

我已經把程式碼都寄給你囉
謝謝

Skyvee 提到...

speaker, 好奇怪, 我沒收到email呢! 或是請你寄到這裡. skyvee886@gmail.com

Skyvee 提到...

Speaker, 已找到問題了, 我把程式碼寄給你了.. 你全選蓋住原本的code之後, 再試看看囉! 記得 小裝置的選項要先勾哦!

Birdie 提到...

大大您好:

有兩個問題需要請教您:

A.
想請教您在本篇文章中,張貼程式碼範例的部份是如何辦到的??
因為我在自己的blogger也想要張貼程式範例給同事看,都會出現一些錯誤訊息,例如:
< meta conten... > 的標籤不行
或是
< % asp程式碼 % > 的標籤也不行

B.
RSS的訂閱部份,我不清楚google blogger的feed是多少ㄟ?


另外在您的部落閣裏面學到很多好用的技巧,希望大大繼續加油,謝謝~

Birdie

Skyvee 提到...

birdie您好,
謝謝您的鼓勵.還需要大家幫忙呢!
您的2個問題, 第一個是利用div的技巧, 我會找時間介紹一下. :)
第2個, blogger的文章feed及回應, 可參考這裡.http://skyvee.blogspot.com/2007/06/blog.html

文章feed : http: //XXXXX.blogspot.com/feeds/posts/default

意見feed : http: //xxxxx.blogspot.com/feeds/comments/default

其中xxxxx.blogspot.com 這就是您blogger網址囉!

Birdie 提到...

非常感謝您的指導...
完全搞定了

期待你推出問題A的詳細解說
謝謝~

Skyvee 提到...

birdie,搞定就好啦! XD

部落格製作 提到...

如何做可以讓特定文章「置頂」呢?

skyvee 提到...

你好, 要讓特定文章置頂, 可能要改很多東西. 我目前並沒有研究呢. 不過有2種方法, 提供您參考.

1. 將 想置頂的文章, 日期改為最新.在編寫文章時的下方, 有個 張貼選項 , 點開之後, 就有"文章的 時間 和 日期 ", 你可以把日期改成"2008年"之類的.就會一直置頂了.

2. 還有一種, 就是在文章上方, 加入一個"網頁元素", 把公告或文章, 加到這裡. 也是一種方法.

柳丁媽 提到...

又學到一招XD
真是謝謝您阿
最喜歡來您的網站挖寶了(開心)

Skyvee 提到...

哈, 謝謝柳丁媽, 有幫到忙, 我也很開心啊!

SuwaN 提到...

呵呵
我会了
可是我还想学右边栏那个隐藏的
那是怎样弄的?
:P

Skyvee 提到...

Suwan, 一直無法留言, 收縮側邊欄的做法在這裡.

http://skyvee.blogspot.com/2007/07/blogspot-sidebar.html

:)

SuwaN 提到...

谢谢你呢!我的部落UPGRADE了很多!

Skyvee 提到...

Suwan,不用客氣! :)

SuwaN 提到...

想请问为什么有时VIEW了我部落'久一点'去点击COMMENT就好像LOCK住那个COMMENT这样点击不到?要我特地去按MOUSE2然后打开新一页才行?是BLOGGER现在的问题吗?
对了,你之前说你留不到言,你现在对你的comment按MOUSE2开新的一页就能留到了..
是不是那个隐藏CODE会影响到呢?
我的如果是开另一个视窗的COMMENT,也是会留不到.(目前我使用不是开另一个视窗的)

Skyvee 提到...

最近blogger的留言系統的確有問題, 不單是留言, 就算要修改文章也有時候會鎖很久.以往不會這樣的,聽了幾個網友都有相同現象.

謝謝你的方法, 我來試看看! 我的確發現, 最近blogger的開新視窗運作不正常!如果原本連結是設定開新視窗, 時常會失效..

SuwaN 提到...

我发现了
不懂你的问题和我一不一样拉
我把你那个'客來自何方?又往何處去?'的道具摘下了就没事了
可能是那个LAG到
你不仿试试

Skyvee 提到...

Suwan

哈! 果真是個大問題. 多謝你的幫忙及告知. 經由你的幫忙, 解了2個問題. 我現也把comment改成不跳新視窗, 然後把feedjit移除. 網頁速度有好一點, 不過好像還有些問題, 我得再找找.非常感謝! XD

讀書人 提到...

感謝您~~~我用好了!
謝謝您!

SuwaN 提到...

呵呵,那就好咯..
我只会研究这些东西=)
加油,嘻嘻
期待你继续教我们新的东东~
还有你那个主题后下面显示很多comment不是嘛
你的还有人的头像呢!好厉害!
下次贴出来教教我们xP

Skyvee 提到...

讀書人, 不用客氣. 您的部落格真的像個藏書庫呢!:)

Skyvee 提到...

SuwaN, 好, 等整理好這部分, 再分享大家. :)

夏娃 提到...

请问一下
如果想在每篇文章里都更改“继续阅读”和“显示摘要“的话应该怎么弄呢?

Skyvee 提到...

夏娃, 移去三行程式, b:if cond='data:blog.pageType == "item"' , b:else 及 /b:if 就可以了.

穴居獸 提到...

最近真的怪怪的, 用IE開Blog, 側邊欄及網頁最下方的部分會不會出現.將範本還原後就好了. 沒有了隱藏全文的功能真的會看的落落長啊!

Skyvee 提到...

穴居獸, 如果不使用隱藏全文的方式, 可以考慮將首頁文章篇數設定, 改成少篇一點. :)

limonadagurl 提到...

我今天為了用繼續閱讀的東西搞了快兩個多小時了(網頁設計白痴啊..>_<),剛剛試了一下你的code,結果也是不行,結果就到處找有沒有其他的code,都完全不行!
後來看到你回覆別人的,我想到我好像重複複製了最後一行,所以用貼上你的code試試看!
OH MY GOD!!!! IT WORKS!!!!!
真的!!!!超級超級超級感謝你的!!!!!(高興跳舞中)You have no idea how much you helped me!!!而且看你都好熱心助人喔!!!真感動!!!希望你以後還會有更多有關Blogger的幫助!!超級感謝!!!

limonadagurl 提到...

阿...才剛剛在那邊手舞足蹈就發現我錯了... 不知道爲什麼,剛弄完的前幾分鐘還是okay的,後來就整個首頁被切,像這樣子。
http://img475.imageshack.us/img475/337/indexat1.jpg
啊~~~~~真的快哭了...弄得超久的!!!!
不知道你知不知道出了什麼問題或是我可不可以把我的code傳給你,你可以幫我解答看看。拜託拜託...Thank you!!!!

Skyvee 提到...

把source code 寄來我看看吧! 點我的大頭, 就可看到email了. :)

Mivelz 提到...

非常謝謝你....愛你哦

Skyvee 提到...

謝謝減衛兒的熱情回應啊!

蔡凱文 提到...

不好意思, 又來煩你了..

我把blog從新換了blogger的基本款, 然後再按照你的方式..

改三欄 沒問題
加水平bar 沒問題

但用在blogger首頁只顯示文章摘要, 隱藏全文的做法- hide fullpost http://skyvee.blogspot.com/2007/06/blogger-hide-fullpost.html 這篇的方式後都沒反應耶, 不知哪裡出問題了??

Skyvee 提到...

凱文, 您真有心, 又重換版面了.辛苦了!

隱藏全文前3步驟做完後, 第4步驟,是針對每篇文章的設定的, 也就是說, 必須在每篇文章內, 選 html ==> 然後把想要隱藏的內容, 用 <sapn id="fullpost"> 及 </span> 包起來. (這裡的全形<,要記得改成<)

蔡凱文 提到...

對一個不太懂語法的人真的比較辛苦... 幸好有大大的分享, 真是感謝!!

我試了我最新的那篇從地一個段落後開使設<sapn id="fullpost"> , 然後在最後加</span> , 可是還是沒隱藏耶..

我已有把<改半型<

Skyvee 提到...

啊啊..對不起呀!是span, 我打錯字了..<span id="fullpost"> >__<

蔡凱文 提到...

呵呵, 是我沒看清楚就直接copy, 不過有你耐心的幫忙, 終於搞定囉.. 太感謝了!!

indigo 提到...

您好,想請問如果想要在繼續閱讀的文字做一些樣式要該怎麼設定呢?像是置右或是有外框之類的。

Skyvee 提到...

凱文, 感謝你的諒解!也恭喜你搞定啦! :)

indigo, 可以針對 繼續閱讀 下一些html語法(網路資料很多),

如 <div align="right" style="border-style: solid; border-width: 1; width: 8%">繼續閱讀</div>, style之內再自行加工吧!(全形<, 要改成半形<)

indigo 提到...

原來只要針對繼續閱讀下語法就好啦,之前還想說要怎麼用css去設樣式,真是太感謝了^^

另外再請問一下,不是首頁的話,不管有沒有設fullpost,文章都會出現『繼續閱讀』的樣子?

Skyvee 提到...

indigo, 這個語法是針對首頁設計的, 所以只有首頁的文章有此效果. :)

大阪王 提到...

你好
你的教學真的很棒
很成功

不過我有個問題想請教
就是我的部落格在Firefox上開
效果都有出來

可以我用IE開
側欄完全出不來
而文章也只有兩篇
下面的張貼意見那些也都不見
不知道是為什麼噎
好奇怪

網址
http://osakaking.blogspot.com

Skyvee 提到...

看起來是你的第二篇文章出了問題, 在第二篇文章, 請點選 html 頁面, 把"他跟我炫耀說 span style="font-size:130%;"><span style="font-size:100%;">"這段話的 <span style="font-size:100%;"> 移除看看, 其中全形 <先換成半形<