Limbo: 混沌位面 ———— 这里既空虚又充实,没有规则,没有约束,创造来自思考,生存依赖想像,现实源自梦想。
首页 给我发Email! 订阅

在beta版Blogger的首页显示文章摘要

beta版的Blogger已经能实现大部分我想要的功能了,但是与wordpress这类专业的BLOG系统比起来,还是有两个很明显的缺陷:

1. 首页只有全文显示模式,有些blogger发表的文章可能比较长,也可能更新频率比较快,多数人都会希望首页只显示摘要。
2. 发表评论需要跳转到新页面,提交之后默认显示评论的页面也是一个与BLOG模板无关的新页面,这种设计不符合用户的习惯。

针对这两个问题,网上可以搜到很多解决方法,尤其是Yee’s Blog,里面介绍了很多有用的BLOG工具和HACK技巧。但这些都是针对旧版的Blogger,beta版的HTML代码跟以前有很大的不同,所有功能模块的代码都封装到了“<b:widget>”这样的标签里(更新:感谢柠檬杀手提供的网址……原来Widget可以展开……以前居然没发现-___-b),虽然还是可以看到静态页面的源代码,查到各个元素的ID和CLASS,进而通过CSS改变页面外观。但无法直接修改模块的HTML代码,就有很多局限性……(更新:我试了一下,Widget展开之后,虽然可以移动一些标签的位置,添加一些属性,但还是有很多限制,比如不能加入隐藏的INPUT……

幸好还可以在HTML里插入JS代码(似乎只能用链接形式,直接在模板里写入比较复杂的JS,会出现XML错误),我刚刚写了一段脚本,可以实现首页显示文章摘要的功能:

这个方法类似,发表每篇文章时,都要套用一段HTML模板(可以把它放到Settings/Formatting/Post Template里面,每次新建文章时自动套用模板):

  1. <span class="partofarticle">这里是显示在首页的摘要......
  2.  
  3. <div class="yyshowallarticlediv"><a href="" class="yyshowallarticle"
  4. onmouseover="yycopylink(this);">查看全文!</a></div>
  5.  
  6. </span>
  7.  
  8. <span class="fullarticle" style="display: none;">这里是完整的文章</span>

在<span class=”partofarticle”>的标签里放一段摘要,完整的文章放在<span class=”fullarticle”>里(默认是隐藏的),“查看全文!”的链接上有一个onmouseover事件,这是为了自动获取该文章静态页面的链接地址,因为我是通过逐级查找DOM节点的方式来获取链接地址的,如果BLOG POST模块的排列方式跟我的不一样,就不能用这段代码(比如作者名字在时间日期后面)……如果你不懂DOM,那就干脆把“查看全文!”这个层删掉罢,反正也不是必须的。

  1. function yycopylink(src) {
  2. if(window.ActiveXObject)
  3. {
  4. var yyy=src.parentNode.parentNode.parentNode.parentNode.previousSibling.previousSibling.childNodes[0].href
  5. }else{
  6. var yyy=src.parentNode.parentNode.parentNode.parentNode.previousSibling.previousSibling.previousSibling.previousSibling.childNodes[1].href;
  7. }
  8. src.href=yyy;
  9. }

然后,就要利用一段JS程序来判断当前页面是BLOG的首页,还是属于单独一篇文章的页面,由于文章页面的底部会有评论模块,而首页没有,因此可以利用这个来做判断。

  1. var yyhascomment=document.getElementById('comments-block');
  2. //alert(yyhascomment);
  3. if(yyhascomment!=null)
  4. {
  5. var yyspanobj=document.getElementsByTagName('span');
  6. //alert(yyspanobj);
  7. for(var i = 0; i  &lt; yyspanobj.length; i++)
  8. {
  9. var yyclass=yyspanobj.item(i).className;
  10. if (yyclass == "partofarticle")
  11. {
  12. yyspanobj.item(i).style.display="none";
  13. } else if (yyclass == "fullarticle")
  14. {
  15. yyspanobj.item(i).style.display="";
  16. }
  17. }
  18. yyhascomment=null;yyspanobj=null;
  19. }

就是找一个id=”comments-block”的div,如果页面里存在这个div,就遍历所有的span,隐藏<span class=”partofarticle”>里的所有内容,显示<span class=”fullarticle”>里的内容……(更新:我修正一些语法,原先的程序在firefox里有一些地方不兼容,无法显示全文,感谢nAODI的提醒

  1. 最终的JS脚本

注意:链接JS的代码必须放在<b:widget id=’Blog1′ locked=’false’ title=’Blog’ type=’Blog’>的下面

至于最后的效果……请看我的BLOG……

- 分类: JavaScript, Blogger

    发表评论

(一定要填写)

(一定要填写, 不会公开喔!)

GOSPEL OF YY

    在BIG的我面前,感到自己的渺小了吧,我理解你的感受,我也曾敬畏自己的伟大,不敢站在镜子前。

    -- Blackstar
    Soul Eater