Blog 标签下显示文章题目的方法

加州大学论坛博客 blog.ucbbs.org

版主： chunhua

Blog 标签下显示文章题目的方法

	发表文章发起投票 \| 关闭窗口
Blog > DingMD Blog--www.dingmd.ucbbs.org Blog 标签下显示文章题目的方法

作者

正文： Blog 标签下显示文章题目的方法

回复:0 点数:1000 1 楼

dingmd

分区管理员
积分：1657
总数第：460 贴
来自：USA-旧金山

奖惩

   Blog 标签下显示文章题目的方法
   摘自加州大学论坛旧版 (Universities in California Bulletin Board System)  dingmd  2008-01-20 13:30
今天修改了Blog的模板，使得点击分类标签可以显示文章的标题。参考的是GG派的帖子。但是这个帖子中用的箭头是他网上，我更改代码将箭头改为＋号，精简一点操作。简便步骤如下：

第一步：首先把下面的代码复制到你的xml模板里 ]]<>/b:skin> 和 </head> 之间。

<script>
//<![CDATA[

/* Belongs to Aditya Mukherjee (www.aditya-mukherjee.com)
It is licensed under a Attribution/Non-commercial/No derivative CC 2.5 license
http://creativecommons.org/licenses/by-nc-nd/2.5/
*/

function $(){
for( var i = 0, node; i < arguments.length; i++ )
if( node = document.getElementById( arguments[i] ) )
return node;
}

var _id = '';
pic1= new Image(); //preload image
pic1.src="http://bp2.blogger.com/_D5yNUtQ-H5A/Rch72IlMiEI/AAAAAAAAAEA/HXHcUYaLQYg/s320/loading_ani2.gif";
function showLabel(name){
_id = name;
if($(name+'-expanded')) {
$(name+'-expanded').parentNode.removeChild($(name+'-expanded'));
$(name).style.textDecoration = 'none';//removes underline from closed label
$(name+'-tog').innerHTML = '+ ';//the expanding image
}
else {
$(name).style.textDecoration = 'underline';//adds underline to opened label
$(name+'-tog').innerHTML = '- ';//the contracting image
var script = document.createElement('script');
script.src = 'http://<blogname>.blogspot.com/feeds/posts/summary/-/'+name+'?alt=json-in-script&callback=makeList';
script.type = 'text/javascript';

document.getElementsByTagName('head')[0].appendChild(script);
}
}

function makeList(json){
var d = document.getElementById('Label1');
var i=0, j=json.feed.entry[i];
var list = document.createElement('ul');
list.id = _id+'-expanded';
list.setAttribute('class','postList');
$(_id).parentNode.insertBefore(list, $(_id).nextSibling);

var imag = document.createElement('img');
imag.src='http://bp2.blogger.com/_D5yNUtQ-H5A/Rch72IlMiEI/AAAAAAAAAEA/HXHcUYaLQYg/s320/loading_ani2.gif';
$(_id+'-expanded').appendChild(imag);

var frag = document.createDocumentFragment();

while(i<json.feed.entry.length){
j=json.feed.entry[i];
var t_link = document.createElement('a');
t_link.href = j.link[0].href;
t_link.title = j.summary.$t;
if(j.title.$t.length>37)
t_link.appendChild(document.createTextNode((j.title.$t).slice(0,37)+'...'));
else
t_link.appendChild(document.createTextNode(j.title.$t));

var title = document.createElement('span');
title.setAttribute('class','postTitle');
title.appendChild(t_link);

var li = document.createElement('li');
li.appendChild(document.createTextNode('- '));
li.appendChild(title);
frag.appendChild(li);
i++;
}
$(_id+'-expanded').innerHTML = '';
$(_id+'-expanded').appendChild(frag);
}

//]]>
</script>

第二步：将上述代码中script.src = 'http://<blogname>.blogspot.com/feeds/posts/summary/-/'+name+'?alt=json-in-script&callback=makeList'; 里的<blogname>换成你自己的blog 名字。保存模板。
第三步：切换到模版，页面元素的选项，添加一个标签页面元素，放到你觉得好看的位置。保存模板。
第四步：切换回模板编辑的修改 HTML项目，然后勾选扩展窗口小部件模板（Expand widget template），找到你刚刚添加的标签页面元素项目。用下面的代码完整替换之，保存模板就可以了。
<b:widget id='Label1' locked='false' title='Label[分类文章列表]' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul class='elegantList'>
<b:loop values='data:labels' var='label'>
<li expr:id='data:label.name'>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<span expr:id='data:label.name + "-tog"'>+</span><a href='#category' onclick='javascript:showLabel(this.innerHTML)'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>

<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
第五步：调整：（非必需）：
1. 如果你的单一标签的文章数超过25个，而且你又希望把标题都显示出来，那么你需要像我一样在第一步的代码里修改以下定义代码：
还是修改第一步中blog名字的那个语句：
'http://ggpi.blogspot.com/feeds/posts/summary/-/'+name+'?max-results=999&alt=json-in-script&callback=makeList';
添加的代码"?max-results=999&"的数字999就是定义最多能显示的文章标题是999篇，你也改成你自己想显示的数字。
2.默认设置显示的标题文字数超过37个字就会以"..."代替后面的字数，如果你要显示更长的标题名称，就要修改上面代码的这个位置:

if(j.title.$t.length>37)
t_link.appendChild(document.createTextNode((j.title.$t).slice(0,37)+'...'));
把两个"37"都改成你要显示的字数即可。
3.你也可以改成图片的样式，例如上面代码$(name+'-tog').innerHTML = '+ ';//the expanding image的"+ "号，整体替换为<img src="http://gggpie.googlepages.com/arrow_066.gif"/>就可以变成跟我一样的图片了。
同理，$(name+'-tog').innerHTML = '- ';//the contracting image的"- "号也能改成<img src="http://gggpie.googlepages.com/arrow_279.gif"/>
代码里的图片http://gggpie.googlepages.com/arrow_279.gif 你可以随意替换~
4.第四步代码中的<span expr:id='data:label.name + "-tog"'>+</span><a href='#category' onclick='javascript:showLabel(this.innerHTML)'><data:label.name/></a> 语句是用来控制默认刚刚打开博客时候每个标签题目前方显示的图片，如果用下面的语句可以自定义任何网络上的图片：

<span expr:id='data:label.name + "-tog"'><img src='http://gggpie.googlepages.com/arrow_066.gif'/></span><a href='#category' onclick='javascript:showLabel(this.innerHTML)'><data:label.name/></a>
其中的http://gggpie.googlepages.com/arrow_066.gif 可以更改为任意网络上的图片。
   摘自加州大学论坛旧版 (Universities in California Bulletin Board System)  dingmd  2008-01-20 13:30