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里面,每次新建文章时自动套用模板):
- <span class="partofarticle">这里是显示在首页的摘要......
- <div class="yyshowallarticlediv"><a href="" class="yyshowallarticle"
- onmouseover="yycopylink(this);">查看全文!</a></div>
- </span>
- <span class="fullarticle" style="display: none;">这里是完整的文章</span>
在<span class=”partofarticle”>的标签里放一段摘要,完整的文章放在<span class=”fullarticle”>里(默认是隐藏的),“查看全文!”的链接上有一个onmouseover事件,这是为了自动获取该文章静态页面的链接地址,因为我是通过逐级查找DOM节点的方式来获取链接地址的,如果BLOG POST模块的排列方式跟我的不一样,就不能用这段代码(比如作者名字在时间日期后面)……如果你不懂DOM,那就干脆把“查看全文!”这个层删掉罢,反正也不是必须的。
- function yycopylink(src) {
- if(window.ActiveXObject)
- {
- var yyy=src.parentNode.parentNode.parentNode.parentNode.previousSibling.previousSibling.childNodes[0].href
- }else{
- var yyy=src.parentNode.parentNode.parentNode.parentNode.previousSibling.previousSibling.previousSibling.previousSibling.childNodes[1].href;
- }
- src.href=yyy;
- }
然后,就要利用一段JS程序来判断当前页面是BLOG的首页,还是属于单独一篇文章的页面,由于文章页面的底部会有评论模块,而首页没有,因此可以利用这个来做判断。
- var yyhascomment=document.getElementById('comments-block');
- //alert(yyhascomment);
- if(yyhascomment!=null)
- {
- var yyspanobj=document.getElementsByTagName('span');
- //alert(yyspanobj);
- for(var i = 0; i < yyspanobj.length; i++)
- {
- var yyclass=yyspanobj.item(i).className;
- if (yyclass == "partofarticle")
- {
- yyspanobj.item(i).style.display="none";
- } else if (yyclass == "fullarticle")
- {
- yyspanobj.item(i).style.display="";
- }
- }
- yyhascomment=null;yyspanobj=null;
- }
就是找一个id=”comments-block”的div,如果页面里存在这个div,就遍历所有的span,隐藏<span class=”partofarticle”>里的所有内容,显示<span class=”fullarticle”>里的内容……(更新:我修正一些语法,原先的程序在firefox里有一些地方不兼容,无法显示全文,感谢nAODI的提醒)
- 最终的JS脚本
注意:链接JS的代码必须放在<b:widget id=’Blog1′ locked=’false’ title=’Blog’ type=’Blog’>的下面
至于最后的效果……请看我的BLOG……
博主能不能写的简单些,看不懂啊
具体怎么用啊??
Link | December 19th, 2008 at 11:05 pm