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

9.22更新了一些内容

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

1. 首页只有全文显示模式，有些blogger发表的文章可能比较长，也可能更新频率比较快，多数人都会希望首页只显示摘要。

2. 发表评论需要跳转到新页面，提交之后默认显示评论的页面也是一个与BLOG模板无关的新页面，这种设计不符合用户的习惯。

幸好还可以在HTML里插入JS代码，我刚刚写了一段脚本，可以实现首页显示文章摘要的功能：

查看全文!

9.22更新了一些内容

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，那就干脆把“查看全文!”这个层删掉罢，反正也不是必须的。

更新：昨天写的代码不兼容FIREFOX，所以重新写了一个函数，根据不同游览器采用不同的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的首页，还是属于单独一篇文章的页面，由于文章页面的底部会有评论模块，而首页没有，因此可以利用这个来做判断。

/**
* @author Dexter_Yy
*/
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脚本
http://dexter.yy.googlepages.com/showcomments.js

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

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