在 Blogger 的文章中加入 "隐藏内文/继续阅读" 功能
Blogger 中的文章因为没有 “隐藏内文” 及 “继续阅读” 的功能,所以就会把整个网页拉得很长,较不利于阅读。并且,如果文章内有很多图片的话,那加载的时间就会变得很长。
以下的内容是我参考其它 Blogger 的做法所做的改良,主要的不同,就是我觉得其它 Blogger 在加载时会先显示全文,再做隐藏,视觉上的效果比较不好,我把它改成一开始就会隐藏内文了,也可以避免自动加载内文的图片。
安装步骤
- 编辑样版,搜寻 “</head>”,在其上方加入:
<b:if cond='data:blog.pageType != "item"'> <style> #fullpost { clear:both; display:none; } #read-more { float:left; color:#FFFFFF; background-color:#00FF00; border:1px outset; padding:2px; text-decoration:none; font-weight:bold; font-family:Arial; } </style> </b:if>
- 继续搜寻 “<body>”,在标签内的 onload 事件加入:
if(window.readMore){readMore();}
继续在下一行加入:
<b:if cond='data:blog.pageType != "item"'> <script type='text/javascript'> var tagSpan = document.getElementsByTagName('span'); var more1 = new Array(); var more2 = new Array(); function readMore(){ var x = 0; for(var i=0; i<tagSpan.length; i++){ if(tagSpan[i].id == 'fullpost'){ more1[x] = tagSpan[i]; var readMore = document.createElement('a'); readMore.setAttribute('id','read-more'); readMore.setAttribute('href','javascript:toggleMore('+x+')'); readMore.setAttribute('onclick','toggleMore('+x+');return false;'); readMore.appendChild(document.createTextNode('Read more >>')); more2[x] = more1[x].parentNode.insertBefore(readMore,more1[x]); x++; } } } function toggleMore(theElement,theStatus){ if(theStatus == true || more1[theElement].style.display=='' || more1[theElement].style.display=='none'){ more1[theElement].style.display = 'block'; more2[theElement].innerHTML = '<< Less'; // more2[theElement].parentNode.removeChild(more2[theElement]); }else{ more1[theElement].style.display = 'none'; more2[theElement].innerHTML = 'Read more >>'; } } function expandAll(theStatus){ for(var i=0; i<more1.length; i++){ toggleMore(i,theStatus); } } </script> </b:if>
请注意一下程式码的第 25 行,如果将前面的注解拿掉,则访客展开内文之后,”Read more” 的连结就会自动消失了。
- 储存即可
使用方式
- 你必需在 Blogger 编辑文章时使用 “修改 HTML” 模式,在要显示/隐藏内文的部份用下列标签包起来:
前文 <span id="fullpost"> 欲隐藏的内文 </span>
全部展开/隐藏全文
- 你如果想要增加一个的控件,可以用来展开或隐藏所有文章的内文,则请自行新增一个 “HTML/Javascript” 网页元素,内容:
<input id="expand-all" onclick="if (window.expandAll){expandAll(this.checked)}" type="checkbox"> <label for="expand-all">Expand All</label>
解决 “隐藏内文/继续阅读” 失效的问题
- 一切看来似乎都很完美?!那可不,当你把 Blogger 拉到网页的最下方,点选较新或较旧的文章连结,切到到新的内容时,你会发现 “隐藏内文/继续阅读” 的功能根本没有作用,这个问题因为适用大部份相同功能的 Blogger,所以另外写了一篇文章,请参考:
- 解决当 Blogger 的 “隐藏全文/继续阅读” 功能因为点选较新或较旧的文章而失效的状况
你好,我照你的方法成功隐藏内文,但请问能将readMore...改成“继续阅读”中文显示吗?...:)
可以的,请在第二个安装步骤的第二个程式码区段,将所有的: 'Read more >>' 以及 '<< Less' 改成你要的中文即可。
可以了,谢谢....:)
请问一下 我照您的做法的确做出隐藏内文的效果了
但是首页里面每一篇文章却都没有Read More的连结
只能靠点标题进去内文
泥好,从搜寻引擎找到版大的专业文,我最近为了部落格搬家的事在烦恼
到底要选择痞客邦或是Blogger好…
基本上,痞客只有一个“鼠标移向图片会缩放”的问题困扰着我而已
而Blogger只要有“文章分类”及“隐藏内文继续阅读”的功能我就可以开始使用
但是我按照版大上述的作法,还是不能够成功,就从标签内的“onload”事件开始就无法找到了,希望能够寻求版大的帮助,指引在下一条明路,感激不尽。
附上我的二个部落格网址给版大参考:
痞客邦:http://pilishinchan.pixnet.net/blog
Blogger:http://pilishinchan.blogspot.com/
期望能得到指点的新。