2006年10月25日 星期三

讓首頁文章可開啟/摺疊 for Blogger

新建立的Blogger建議使用[BLOGGER]繼續閱讀懶人加強版 最新版本

update:2008-0724 程式碼更新
update:2007-0715 程式碼更新
update:2007-0119 刪除多餘代碼造成的錯誤

把首頁文章改為可以摺疊,就是開啟摺疊文章時不用重讀頁面,也再可以摺疊起來,感謝Ramani 提供程式修改方法,接下來就講解一下如何改範本

第一步:
當然就是進入控制主頁 > 版面配置 > 修改 HTML > 把
展開小裝置範本 打勾

然後要先把範本備份起來

update:2008-0724
第二步:在修改範本裡找到 </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 &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>

第三步:找到以下的代碼段落,接著把紅色部份的代碼插入,而綠色的代碼可以改為自己想要的中文字,最後儲存範本。(有些範本會沒有uncustomized-post-template,正常情況)
<b:includable id='post' var='post'>
<div class='post uncustomized-post-template'
 expr:id='"post-" + data:post.id'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title'>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h3>
</b:if>

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

<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
第四步:
到設定 > 格式 裡把下面藍色的代碼放到最下面的文章範本裡,到這裡就全部完成,當新增文章時,自己調整要顯示文章的部份,如果文章比較短,可以在新增文章時把下面這2行刪掉,就會直接顯示全文 。
<span id="fullpost">
</span>

顯示文章的部份
<span id="fullpost">
隱藏文章的部份
</span>

72 則留言 :

Confabulation 提到...

您好~
小弟的BLOG現在就是用這個方式來做文章摺疊的
很好用的

Angelo 提到...

謝謝推薦! 教學相長囉..

James 提到...

站長,謝謝你這個方法。請問一下,如果使用<span class="fullpost">的人,能否直接套用?

以前用這個方法在許多文章下了這個指令,怕動一髮牽全身。

辛苦的網工 提到...

站長請問
我修改完後儲存範本時
系統告知錯誤訊息如下
---------------------------------
我們無法剖析您的範本,因為它的結構不完整。 請確定所有的 XML 元素均已正確關閉。
XML 錯誤訊息: Element type "div" must be followed by either attribute specifications, ">" or "/>".
---------------------------------
請教一下我遺漏些時麼了嗎????謝謝!!

Angelo 提到...

有可能是藍色代碼那一行的最後一個(>),沒有加入,或許你可以把你的範本email給我看看,我可以幫你修改後再回傳給你

貝姬 提到...

DEAR ANGELO 我也有跟網工遇到一樣的問題ㄟ,那麼是不是可以比照同樣方式辦理?昨晚突然想起來要來弄一下這功能,結果時鐘從12點開始...就在神不知鬼不覺之下熊熊跑到1點多....剛剛又再試了一下,實在不知原因何在啊...(所以,又來麻煩你了,真不好意思)

Angelo 提到...

那妳偷偷email給我看看好了,最好是用txt檔的附件,不要直接貼在email裡

提到...

您好 想請教您一個問題~

因為這篇文章很實用,所以我想把這個功能發佈成一篇教學文章...
不過在發表文章時,我將代碼加入
可是編輯器無法顯示代碼,頻頻顯示錯誤訊息,修改html及撰寫兩個選項我都試過,還是不行,請問該如何解決~讓代碼以正常文字方式出現在文章裡,又不出現錯誤訊息...還請您不吝指導~~謝謝

Angelo 提到...

要寫教學代碼的話,代碼 < 要用&lt;代替,> 要用&gt;代替,如果你用FireFox建議你安裝Performancing
把文章寫好後,再把html貼到blogger裡

提到...

angelo~
謝謝你的幫忙,雖然一開始我看不太懂
,不過後來我了解意思了,問題解決了,謝謝你~

Jenever 提到...

感謝您提供的code,十分實用,請繼續造福Blogger的使用者...

Angelo 提到...

to Jenever
謝謝你的回應,我只是盡我所知的分享出來,還有很多高手值得我們學習^^

超級初新者 提到...

Settings > Formatting 請問為何我找不到這ㄋ

Angelo 提到...

to 超級初新者
我把名詞改成中文,應該找得到吧..除非你還是舊版的

ccylpy 提到...

angelo 我可否把你這方法轉貼到我的Blog阿?
謝謝你 !!

Angelo 提到...

to ccylpy
轉貼沒問題呀,引用文章請註明本文網址與作者

J 提到...

我原本底下的</div>就只有一個
可是他還是顯示”我們無法剖析您的範本,因為它的結構不完整。 請確定所有的 XML 元素均已正確關閉。”

我還要在刪掉嗎?
還是增加?

謝謝!

Angelo 提到...

to J
你的錯誤訊息不完整,應該會帶出XML錯誤的地方,像樓上"辛苦的網工"那樣,不過在還沒看到整個範本前,我無法進一步的判斷

神秘的魔術師 提到...

謝謝你詳細的教學
可是我做到最後 我的文章 內容都會重複兩遍
不知道出了什麼問題??

Angelo 提到...

to 神秘的魔術師
你要檢查一下文章的內容部份這個</span>字串是不是有重覆,或是擺放的位置有錯

貝姬 提到...

一發現問題,就想到回來你這兒找找是否有答案,結果赫然發現update的訊息,謝謝angelo的認真,很開心問題解決了。

Angelo 提到...

to 貝姬
看起來大家都發現這個問題的嚴重性..哈

コナ君 提到...

我想要問個問題。

文章確定能夠成功折疊了,

但是每次一點SUMMARY就會跳回到同一篇文章中的第一行(但是有摺疊回去)

請問該怎麼辦咧?

謝謝你

Angelo 提到...

to コナ君
應該是你的文章裡的</span>碼有重覆,</span>只能出現在文章結尾

コナ君 提到...

不好意思再麻煩,

我將文章中所有的SPAN都置換成FONT之類的了,

可是還是會跳回第一行耶ˊˋ


THX

Angelo 提到...

to コナ君
我本來是到你的Blog看看,發現還沒po文,我可能需要看看你所說的問題文章。

コナ君 提到...

有了,

不好意思,

麻煩請您去看看了,

謝謝。

Angelo 提到...

to コナ君
我用firefox跟IE測過你的blog,看起來摺疊都很正常,沒有什麼問題呀

コナ君 提到...

真的嗎= =

我在同學家看也會這樣耶,一旦要縮回去,它還是會跳回第一行,

算了= =

總之真是勞煩您了。

謝謝啦!

Angelo 提到...

to コナ君
我是看你首頁的這篇《CLOTHING CUSTOMIZATION》,在內容第七點後的計價方式是折疊起來,按「繼續閱讀」後就出現,按「恢復摘要」就折疊,第一點到第七點一樣還在畫面上,並沒有跳回第一行,我就不太了解你說的「跳回第一行」是什麼意思?

コナ君 提到...

在我家看的時候,點下去"恢復摘要"真的就會跳回"當篇文章"的最頂端!

如果您那邊是OK的,

這樣,

看來應該是瀏覽器的問題XDDDD


是時候換火狐了:)

哈XD

謝謝你啦

Husion 提到...

請問請問我也是沒有開啟和折疊
試了很多次還是出現錯誤
請問我可以寄到哪邊給你呢
謝謝

Angelo 提到...

to Husion
請問你的錯誤訊息是什麼?可以直接寄到我在右側的gmail信箱

Teresa 提到...

謝謝教導與分享!
太好用了.
沒有搞得自己一個頭兩個大.
很快就能修改成功呢!

Angelo 提到...

to Teresa
真是太好了,沒有搞得太複雜

小束 提到...

Bingo!!又成功了,您的教學我真的很愛,謝謝你了。

菁芸 提到...

你好,因為貝姬的介紹找到這裏。雖然你解釋的非常詳細,我也按每個步驟都做了,blogger卻出現問題無法儲存我的修改。

不知道該怎麼辦才好?可以請你幫忙嗎?
(問題還出在沒有錯誤訊息,直接顯示請與網站支援聯絡並附上顯示的錯誤碼。)

Angelo 提到...

to 菁芸
有什麼問題請直接email與我聯絡吧,可以先把範本寄給我看看

菁芸 提到...

結果確實是因為旁邊的小東西太多,現在成功可以將文章折疊了,真的很感謝你。

boyeut 提到...

这段代码还是有些小问题。不用代理正常,但对某些代理就会出现问题。你可以用uniqueidentity.info这个代理试试访问你的网站。

詹姆士‧阿喃 提到...

您好,我修改成功了,不過有一個問題想要請教,就是『Read More...』後,展開的字型顏色可以修改嗎?(照範例修改好的顏色是水藍色),因為我的BLOG底色是白色的,如果想要把展開後的文字改成黑色的,要從哪邊修改,謝謝囉。

Angelo 提到...

to 詹姆士‧阿喃
字型顏色的調整應該是到後台的「版面配置」中,裡面的「字型和顏色」那裡修改

vicgurl 提到...

你好,詹姆士‧阿喃!

我的开启/折疊都没问题,但是为什么不管我还没点击还是已经点击“显示全文...”和“显示摘要...”,我的文章就会就出现[+]Read more...和[-]Summary more...觉得很多余。怎样去掉它呢?谢谢您!

Angelo 提到...

to vicgurl
妳是問我,還是問詹姆士?
[+]Read more...這些字可以改成妳想要的字

如果都不想看到的話,下面2行碼不要加入
<span id="fullpost">
</span>

vicgurl 提到...

To Angelo,
不好意思,其实问谁都无所谓啦。
我昨天研究了一阵子,原来我文章里太多span代码了,要逐一删掉。
我有一个小小的要求,你的教学指南让我受益不浅,能否把它转帖去我的部落格呢?谢谢您!^_^

Angelo 提到...

to vicgurl
轉貼沒問題,註明來源即可

小民布落 提到...

我也遇到和網工一樣的問題耶!…可以麻煩幫我看看原始碼嗎?謝謝!

Angelo 提到...

to 小民布落
沒問題呀,請把html存成txt檔email給我看看

小民布落 提到...

感謝你的火速幫忙,
讓我順利地加入了read more...的功能!
3Q~~

whimsical 提到...

你好!我也是跟菁云出现同样的问题……我可以mail给你看看吗?

Angelo 提到...

to whimsical
請用 txt檔,附件在email裡

koala 提到...

你好我看了你的文章後,有試著修改但是失敗,可否麻煩我看看。
我都沒有發現 b:includable id='post' var='post' 等字串,很奇怪!
我把我的HTML 寄給你看看好了!
可能要麻煩你!
謝謝

koala 提到...

我試成功。原來是沒有"展開小裝置範本"

林文蔚 提到...

哈囉!
我試了還是沒有搞定它,可以幫我看看嗎?

hope 提到...

hi Angelo, 我照你的方法改了之後的新文章的確是摺疊了,但它不是從第一段開始而是顯示最後一段,只有在按顯示全文後才會從頭看到文章,請問這樣是正常的嗎? 謝謝.

Angelo 提到...

to hope
你注意一下文章裡有沒有多餘的<span id="fullpost">
</span>

林文蔚 提到...

我的搞定了!
謝謝!

hope 提到...

Angelo,我從文章裡把你說的部份都去掉了,結果就是顯示全文沒有摘要了. 謝謝.

Angelo 提到...

to hope
我的意思是程式碼只能有一組存在
顯示文章的部份
<span id="fullpost">
隱藏文章的部份
</span>

hope 提到...

Hi Angelo, 謝謝你的指導與幫忙,文章終於可以正確的摺疊了. Thanks again.

Rick 提到...

看到文章摺疊起來, 差點飆淚..十分感謝!

通達人 提到...

請問一下,這個是不是有長度的限制?
因為我發現太長的文章,似乎沒有辦法收起來呢!
如果是的話,要如何修改呢?
謝謝!

Angelo 提到...

to 通達人
長度應該沒有限制,要注意的是文章中有沒有2個以上的</span>

通達人 提到...

您這麼快回覆,真讓我受寵若驚!
我確定我的文章裏面沒有2個< /span >,我把前面的Span = fullpost 的位置往下移一些,就會出現了,表示我真的只有一個< /span >。
請見http://prudentman.idv.tw的「《親愛的安德烈》讀後感」一文,這篇文章確實是有點長啦!

通達人 提到...

順便請教另一個問題,我只知道回覆的文字會變色。
但你回覆的文字卻能退縮,請問可以說一下是怎麼辦的呢?該不會是直接用空白嗎?

Angelo 提到...

to 通達人
</saan>應該是置於文章最後,不過文章中有一句
「已非寫下信當時的第一手樣貌。」後面有一個</saan>

Angelo 提到...

to 通達人
縮排的問題,我以前也沒特別注意,可能是改顏色的html多加了空白,後來也沒去修正

sora_wu 提到...

真是感謝你,這個問題我找了很久,終於有一個事成功解決的。

通達人 提到...

請問一下,要如何修改才能讓第一篇文章可以自動展開?

Angelo 提到...

to 通達人
不懂你的意思

通達人 提到...

目前是所有的文章預設都會縮起來,但我希望能設定第一篇文章展開,其他文章縮起來(維持現狀)就可以了。

Angelo 提到...

to 通達人
最下面的藍色代碼不要加就會全展開了

Related Posts Plugin for WordPress, Blogger...