作者winiAH (廢人)
看板Blog
標題[分享] 純 CSS 的 Blogger 繼續閱讀功能
時間Mon Dec 8 06:06:20 2008
（註：「純 CSS」只是說沒用到 javascript 而已）
繼續看下去前，請先注意以下幾點：
一、要比較新的瀏覽器才能起作用，純文字瀏覽器當然也不行。
二、使用上很麻煩，你只能參考而已，有時複製了也不一定能用。
三、每頁第一篇「一定」會顯示全文，而後面有弄繼續閱讀的「一定」會隱藏一部分。
四、真的看不懂也不會用的，可以不必勉強學這個，好用的還有很多的。
----
首先在模版裡幫 CSS 加上這堆規則（為好看而加的行開頭的空格並無影響）：
/* 很挑瀏覽器的純 CSS 「繼續閱讀」功能 */
.GoBackTop
{
display:none
}
.hentry + .hentry .content-show-and-hide + .GoBackTop ,
.hentry + * + .hentry .content-show-and-hide + .GoBackTop
{
display:block
}
.hentry + .hentry .content-show-and-hide * ,
.hentry + * + .hentry .content-show-and-hide *
{
display:none
}
.hentry + .hentry .content-show-and-hide + .GoBackTop ,
.hentry + * + .hentry .content-show-and-hide + .GoBackTop
{
text-align:right
;
margin: 1.8em 1em 0 0 !important
}
.hentry + .hentry .content-show-and-hide + .GoBackTop a:after ,
.hentry + * + .hentry .content-show-and-hide + .GoBackTop a:after
{
content:".....後續完整文章請點此"
}
然後進各篇文章的原始碼編輯模式，
照下面這方式為內文寫入 HTML 來隱藏文章：
用 [ 跟 ] 包住的是說明文字，修改時得連 [] 一起拿掉，
然後 GoBackTop 那裡要跟下行接的，記得要接緊 # 別參空格。
<p>要顯示的文，這裡用 p 元素包著當說明例。</p>
<!-- 開關內文 --><div class="content-show-and-hide"
id="
[注意這裡要使用獨一無二的 id 名稱(一定要英文字開頭)]">
<p>被隱藏的文，這裡用 p 元素包著當說明例。</p>
<!-- 開關內文 --></div>
<p class="GoBackTop"><a href="
[該文章的獨立頁面網址，跟下行接起來。]
#
[對應前面 class="content-show-and-hide" 那段的 id 名稱]"></a></p>
以上的 CSS 跟 HTML 部分，都可以視使用情況，
自行改用適當的元素、id、class、頁內書籤的名稱，
CSS 規則跟 HTML 內容也能隨需要修改，
本文只是當個範例而已，不太適合無腦使用。
----
想看展示效果，或有其它意見的，可以來以下頁面，PTT 我比較少上的。
http://atelier-wini.blogspot.com/2008/12/blog-post_07.html
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 118.168.100.116
※ 編輯: winiAH 來自: 118.168.100.116 (12/08 06:24)