返回主页
今天修改了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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIuDUEqkWv5azVwZ4z0hVLY6FfMnF8vIabgKgrjutYZQisIqIw7_5zO8L19xJ5GAYpsnDFXKddf6UMCxQr8m8HlAcq_dfrL0CYMT_LDj2L2QKUWZF4hULED5sGkhYUAZ6dj9I2yg/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIuDUEqkWv5azVwZ4z0hVLY6FfMnF8vIabgKgrjutYZQisIqIw7_5zO8L19xJ5GAYpsnDFXKddf6UMCxQr8m8HlAcq_dfrL0CYMT_LDj2L2QKUWZF4hULED5sGkhYUAZ6dj9I2yg/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 可以更改为任意网络上的图片。
Zoundry 网志编辑器™ 是一款全功能的编辑器，它将使您的网志发布过程更简单，更快捷，使用它就像使用文字处理器一样简单。此外还提供了额外的工具，使链接，标签，照片，音乐和视频文件等资源的添加更简单。
