作者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)