子比主题用户中心扩展入口

演示图片

教程介绍

前段时间有人在问用户中心的扩展入口是如何添加的，我也稍微研究了一下并且仿出来一个插件，不过只有这一个功能还不值得发在社区里面进行分享，等我完善更全面的时候再给各位进行分享，下面教大家如何使用jq在用户中心侧边栏添加这个扩展中心

只需要将上述代码放置于后台的自定义javascript代码内即可实现在用户中心侧边栏插入一个扩展入口

实现原理：

具体来说，这段代码的功能是在具有 .col-sm-3 .sidebar-user 类的元素内部添加一些链接（<a> 标签）

每个链接都有一个描述性的图标和文本

1. $(function(){ ... });：这是一个 jQuery 的文档就绪函数，意味着当 HTML 文档完全加载和解析完成后，里面的函数就会被执行。
2. $('.col-sm-3 .sidebar-user').prepend('<div class="zib-widget padding-6">... </div>');：这一行使用 jQuery 的 prepend 方法在具有 .col-sm-3 .sidebar-user 类的元素内部的最开始处添加一段 HTML 代码。
3. 在添加的 HTML 代码中，有几个 <a> 标签，每个都包含一个图标和一段描述性的文本。这些链接被添加到一个名为 .zib-widget 的 div 中，添加zib-widget的目的是调用子比主题小工具的css

值得一提的是，在很久之前我所发布的头像框代码教程也是使用这种方式在头像之前添加一个头像框进行覆盖

也就是说只要你能够准确的表明需要插入内容的css，这段代码就能够将你所编写的html插入其中

代码内的prepend也是支持更改的，prepend的含义是在选中的div内部插入

你也可以修改为after、before、hover等

其中after为在区块后面插入

而before则是在区块前面插入

hover这个更是老演员了，悬浮时显示