如何DIY有个性的博客园主题（一）
契机
看到很多人的博客园用了自己的主题，很是羡慕，但是又不想用跟别人一样的主题，就想着能不能DIY博客园的主题呢？
想法
已知如下几个条件：
- 博客园侧边栏申请JS权限后可以写JS代码
- JS技术允许浏览器修改页面元素的样式
- 博客园侧边栏支持HTML代码
那是否可以通过js来修改博客园原本的样式呢？
前置条件
- 侧边栏申请了js权限
- 谷歌或火狐浏览器
- 对前端技术有些了解
实验
首先尝试利用js修改博客园的顶端导航栏的css属性display为none来隐藏博客园自带的顶端导航栏。
但是js获取dom元素太麻烦了。如果有jquery就好了。如果博客园本身已经引入了jquery，我就可以使用jquery来操作页面元素了。
博客园引入jquery了吗？
进入博客园。F12打开浏览器开发者工具，查看博客园网页源码。发现如下：
博客园的源码中已经引入了jquery。看来可以直接使用jquery来控制页面元素了。
在侧边栏里写的js代码能对侧边栏以外的页面元素生效吗？
首先F12打开浏览器开发者工具，寻找博客园自带的导航栏元素
找到了顶部导航栏元素，对应的页面部分是包含头像和搜索框的部分
在博客园后台编辑侧边栏代码，使用jquery隐藏顶部导航栏
保存后回到前台查看效果
可以看到顶部导航栏被隐藏了。
做法
对于自己想要替代的组件，利用jquery将其隐藏。之后利用jquery直接生成页面元素，新元素的内容利用jquery从博客园对应的元素中获取。
而样式文件决定使用bootstrap框架的样式进行控制。
示例
首先引入bootstrap4框架，这部分需要放在最前方
然后利用id获取原本导航栏的jquery对象，并将其隐藏
使用jquery按序创建自己需要的组件
使用循环获取原本博客园导航栏的内容和链接
在循环中加入筛选，只添加自己想要的内容
按父子顺序插入元素
代码
<link href="https://v4.bootcss.com/docs/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://v4.bootcss.com/docs/dist/js/bootstrap.bundle.min.js"></script>
<script>
function addNavChild(parent,title,href){
var nav_label = $('<li class="nav-item"><a class="nav-link" href="#"></a></li>');
var nav_link = nav_label.find('a');
nav_link.text(title);
nav_link.attr({'href':href});
parent.append(nav_label);
}
$('#top_nav').removeClass();
$('#top_nav').css('display','none');
var def_head = $('<nav></nav>');
def_head.addClass('navbar navbar-expand-lg navbar-dark bg-dark fixed-top');
var def_head_null = $('<nav></nav>');
def_head_null.addClass('navbar navbar-expand-lg navbar-dark bg-dark');
var def_nav_brand_null = $('<a class="navbar-brand">博客园</a>');
var def_nav_brand = $('<a>博客园</a>');
var def_navbar_button = $('<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>');
var def_navbar = $('<div class="collapse navbar-collapse" id="navbarNav"><ul class="navbar-nav"></ul></div>');
var def_search = $('<form class="form-inline my-2 my-lg-0" id="navSearch" action="https://zzk.cnblogs.com/s"><input name="w" class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"><button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button></form>');
def_nav_brand.addClass('navbar-brand');
def_head.append(def_nav_brand);
def_nav_brand.after(def_navbar_button);
def_navbar_button.after(def_navbar);
$('#top_nav').after(def_head);
def_head_null.append(def_nav_brand_null);
$('#top_nav').after(def_head_null);
for(var i=0;i<$($('#top_nav nav').children('ul').get(0)).children('li').length;i++){
if(i<2){
continue;
}
var href = $($($($('#top_nav nav').children('ul').get(0)).children('li').get(i) ).children('a').get(0)).attr('href');
var title = $( $($('#top_nav nav').children('ul').get(0)).children('li').get(i) ).text();
var parent = $( def_navbar.children('ul').get(0) );
addNavChild(parent,title,href);
}
for(var i=0;i<$($('#navigator').children('ul').get(0)).children('li').length;i++){
if(i<3){
continue;
}
var href = $($($($('#navigator').children('ul').get(0)).children('li').get(i) ).children('a').get(0)).attr('href');
var title = $( $($('#navigator').children('ul').get(0)).children('li').get(i) ).text();
var parent = $( def_navbar.children('ul').get(0) );
addNavChild(parent,title,href);
}
def_navbar.append(def_search );
$('#navigator').css('display','none');
</script>
