Blog外挂之：热门文章与导航栏

winzenghua

Blog外挂之：热门文章与导航栏

By 刘未鹏

C++的罗浮宫(http://blog.csdn.net/pongba)

还是看图说话:-)



图一：导航栏

<shapetype id="_x0000_t75" stroked="f" filled="f" path="m@4@5l@4@11@9@11@9@5xe" o:preferrelative="t" o:spt="75" coordsize="21600,21600"><stroke joinstyle="miter"></stroke><formulas><f eqn="if lineDrawn pixelLineWidth 0"></f><f eqn="sum @0 1 0"></f><f eqn="sum 0 0 @1"></f><f eqn="prod @2 1 2"></f><f eqn="prod @3 21600 pixelWidth"></f><f eqn="prod @3 21600 pixelHeight"></f><f eqn="sum @0 0 1"></f><f eqn="prod @6 1 2"></f><f eqn="prod @7 21600 pixelWidth"></f><f eqn="sum @8 21600 0"></f><f eqn="prod @7 21600 pixelHeight"></f><f eqn="sum @10 21600 0"></f></formulas><path o:connecttype="rect" gradientshapeok="t" o:extrusionok="f"></path><lock aspectratio="t" v:ext="edit"></lock></shapetype><shape id="_x0000_i1025" style="WIDTH: 415.5pt; HEIGHT: 64.5pt" type="#_x0000_t75"><imagedata o:title="navigator_demo1" src="file:///C:%5CDOCUME~1%5Cpongba%5CLOCALS~1%5CTemp%5Cmsohtml1%5C01%5Cclip_image001.jpg"></imagedata></shape>



图二：热门文章

<shape id="_x0000_i1026" style="WIDTH: 370.5pt; HEIGHT: 264pt" type="#_x0000_t75"><imagedata o:title="hotposts_demo1" src="file:///C:%5CDOCUME~1%5Cpongba%5CLOCALS~1%5CTemp%5Cmsohtml1%5C01%5Cclip_image003.jpg"></imagedata></shape>



导航栏的实现很容易：往main和header之间塞入一个div，往div里面写入所有的分类链接即可。



分类的获取有几个办法，一是把分类链接也收藏到del.icio.us上，这样就可以用JSON协议获取到所有分类（见上篇文章——《Blog外挂之：妙用del.icio.us实现“站内相关文章”》）。二是直接获取侧边栏上的分类列表。dodo的blog上用的就是这个办法，但这个办法太脆弱，因为分类的那个ul没有id，所以用getElementById就行不通了。只能依赖于对那个ul的顺序的掌握，先getElementById(‘rightmenu’)获得rightmenu的引用，然后再对后者getElementsByTagName(‘ul’)获得其中所有的ul容器的数组，然后基于对页面代码的观察从这个数组中取出对应于分类菜单的ul。这个办法的问题在于如果我们不小心在公告栏加入了新的ul，或者能生成ul的js代码，就会破坏分类那个ul所在的序号。另一方面，把分类链接收藏到del.icio.us上是个较好的选择，但del.icio.us帐号的空间有限，目前你最多能获取100个post，还是别浪费在分类上的好。用另一个del.icio.us帐号的办法又会增加一个http请求。想想还是不要杀鸡用牛刀了。于是结果使用的是brute force，直接把分类链接及标题硬编码到代码中了:-)反正分类的修改也并不频繁。比如我的分类之前都快一年没改动了。



导航栏实现的主要代码如下：



<div style="border-right: teal 1pt solid; padding-right: 4pt; border-top: teal 1pt solid; padding-left: 4pt; padding-bottom: 1pt; border-left: teal 1pt solid; padding-top: 1pt; border-bottom: teal 1pt solid;">function insertTopMenuDiv()

{

var topMenuDiv = document.createElement('div');

topMenuDiv.setAttribute('id', 'topMenu');



var main = document.getElementById('main');

main.parentNode.insertBefore(topMenuDiv, main);



return topMenuDiv;

}



function appendNavigatorBar()

{

var topMenuDiv = insertTopMenuDiv();



var categoryList = getCategoryList();



var html = '';

for(var i = 0; i < categoryList.length; ++i){

html += '<a href = "' + categoryList.url + '" class = "tab ';

if(GetThisURL() != categoryList.url)

html += 'tabUnselected">';

else

html += 'tabSelected">';

html += categoryList.title;

html += '</a>';

}

document.getElementById('topMenu').innerHTML = html;

}