最近调整了下主页侧边栏，给"音乐播放器"、"标签云"和"友情链接"栏增加了"More+"更多内容的跳转快捷链接，本文简要记录下实现过程。

**需要解决的问题：**因为后台 Widget 各个小栏目的标题和内容都是用同一模板函数实现的，如果直接在模板函数上添加"More+"标签链接，会有两个问题，一是所有侧边栏小栏目都会有"More+"小尾巴，二是无法给不同小栏目的"More+"配置不同的跳转链接。

**解决思路：**给不同小栏目设置 ID，通过 jquery 脚本抓取特定 ID 名称的 <div> 标签，获取 <div> 子节点下的内容，然后改写内容，增加一个 <span> 标签用来实现靠右对齐的"More+"快捷链接。

实现步骤： //以"音乐播放器"子栏目增加"More+"更多跳转链接为例

1、后台修改"音乐播放器"子栏目类名，通过截断的方式给对应 <div> 标签巧妙的添加 ID： //默认只能设置 <div> 标签的 class 类名，可以通过 localmusic" id="localmusic 进行构造

P1.通过"区块class类"给音乐播放器子栏目父 <div> 构造 ID

P2.查看主页 html 源码，音乐播放器父 <div> 的 ID 设置成功

2、编写 jquery 代码，通过 ID 获取音乐播放器子栏目父 <div> 的内容，在获取的内容后增加 <span> 标签内容，<span> 标签内嵌 <a> 标签，用于设置跳转链接：

$(function(){
//增加span前
//console.log($('#localmusic').children("div").eq(0).html());    //调试用
var divtemp = $('#localmusic').children("div").eq(0).html();
$('#localmusic').children("div").eq(0).html(
divtemp +
"<span style='float:right;font-size:12px'><a href='/MusicLibrary/index.php' style='color:#1c60f3' target='_blank' title='更多音乐...'>More+</a></span>"
);
//增加span后
//console.log($('#localmusic').children("div").eq(0).html());    //调试用
})

3、本地测试无误后，添加到现有主题 js 文件中： //或者为了方便管理，单独建立一个 js 文件(比如本站的 append.min.js)专门用于边边角角的优化。

P3.jquery 脚本代码添加到网站主题 js 文件中

4、验证： 清除浏览器缓存，刷新网站首页，发现侧边栏音乐播放器标题右侧已增加了"More+"更多跳转链接，点击该链接，跳转到的链接正确无误。

P4.给特定侧边栏小栏目增加"More+"更多跳转链接实现效果