您现在的位置是:网站首页> 内容页

一次博客园美化经历

  • 11222宝马线上娱乐成
  • 2019-05-14
  • 380人已阅读
简介前言作为一个前端仅仅是入门的程序员,通过面向baidu编程美化博客园真是痛不欲生。借用运维的话:对着破电脑,一调一下午。在使用博客园的时候,默认使用的custom模板虽然简单直观,但是

前言

作为一个前端仅仅是入门的程序员,通过面向baidu编程美化博客园真是痛不欲生。借用运维的话:

对着破电脑,一调一下午。

在使用博客园的时候,默认使用的custom模板虽然简单直观,但是不足以方便阅读和使用,比如没有目录,因此我进行了为期一天(总体是三天)的博客园界面美化,这里介绍一下具体内容和遇到的问题。

通过参考博客园等平台的相关文章,我添加了显示目录功能、新增一列导航栏菜单、GitHub地址、回到顶部按钮。参考的博文未记录地址,因此这里我仅介绍一下自己参与修改的(绝大多数)前两项内容,其他的功能请自己去搜一搜。

浮动显示目录功能

    总体效果在页面固定位置显示目录控制按钮,当鼠标移入时显示目录,鼠标移出时隐藏目录,鼠标移入目录列表可以选择点击目录。效果图如下:具体实现思路目录控制按钮和目录显示部分都是创建的一块div区域,遍历目录并动态添加超链接,将每条目录依次添加进目录容器indexs_container内,然后将目录容器添加进div区域中。最后添加鼠标移入移出事件。需要自定义的地方我使用的目录为三级标题,修改的话修改var hs = $("#cnblogs_post_body h3");这里。其他的颜色、位置可以自己修改。实现js

<!-- 目录js --><div style="position: fixed;left: 1px;top: 110px;display: none"></div><div style="position: fixed;left: 32px;top: 110px;display: none"></div><script language="javascript" type="text/javascript"> var indexsController=$(".indexsController"); var fixedIndexs=$(".fixedIndexs"); var hs = $("#cnblogs_post_body h3"); function createIndexs(){ var indexs_controller=$("<div id="catelog" style="border:solid 2px #ccc; background:#8B2323;width:9px;padding:4px 10px;"></div>"); var indexs_container=$("<div id="container" style="border:solid 3px #ccc; background:#FFFFFF;width:220px;padding:4px 10px;"></div>"); var controller=$("<p style="cursor: pointer"><font color="white">目 录</font></p>"); var indexs=$("<ol id="indexs" style="margin-left: 14px; padding-left: 14px; line-height: 160%; display: block;"></ol>"); indexs_controller.append(controller); indexs_container.append(indexs); $.each(hs,function(i,h){ $(h).before("<a name="index_"+i+""></a>"); indexs.append("<li style="list-style:decimal"><a href="#index_"+i+"">"+$(h).text()+"</a></li>"); }); if(hs.length!=0){ indexsController.append(indexs_controller); fixedIndexs.append(indexs_container); //get home div right offset fixedIndexs.css("right",$("#home").offset().left+32+"px"); } } createIndexs(); indexsController.show(); $("#catelog").mouseover( function(){ fixedIndexs.show(); //$(fixedIndexs).animate({width:"toggle"},80); } ); $("#catelog").mouseout( function(){ fixedIndexs.hide(); } ); $("#container").mouseover( function(){ fixedIndexs.show(); } ); $("#container").mouseout( function(){ fixedIndexs.hide(); } );</script>

添加导航栏菜单

    总体效果我新增了一个菜单项--随笔分类,鼠标移入时会下拉显示所有的分类,选择分类进入对应页面。效果图如下:具体实现思路首先添加菜单项,我是将【随笔分类】添加到【联系】之前,因此先获取【联系】的DOM节点,然后创建一个同级节点【随笔分类】,使用insertBefore方法插入新节点。然后是创建下拉列表,先定义一个div区域,获取随笔分类的个数,然后一个循环动态地添加分类项到分类容器category_container中,然后将分类容器添加到div区域中。其中div区域的位置是动态添加的,即获取【随笔分类】的位置,然后通过fixedCategories.css("left", newCategory.getBoundingClientRect().left);动态添加css样式。遇到的问题由于新添加的菜单项的分类列表是写死的,我们只能通过给定的id调用,通过document.getElementById("sidebar_postcategory").getElementsByTagName("ul")[0];来获取分类列表的集合,我至今没调试出来这句话获得了什么,只是简单的用它获得了分类的个数len。本来想接着添加一个【标签】的菜单项,结果给定的标签控制器没有id,DOM技术学的不够多,不知道如何获取什么都没有的元素,因此就不折腾了。由于博客园侧边栏脚本总是最后加载,因此document.getElementById("sidebar_postcategory")有时会获取空值导致不显示列表项,虽然此脚本添加了onload延迟加载,但是还是有问题,刷新页面直到显示便是。两个脚本都是添加在页尾html代码中,需要申请js权限。手机浏览页面的话,点击目录或者【随笔分类】显示内容,点击空白隐藏内容。实现js

<div style="position: fixed;left: 155px;top: 103px;display: none"></div><!-- 添加新导航 分类js --><script type="text/javascript">$(function() { var curNode = document.getElementById("blog_nav_contact"); var newCategory = document.createElement("li"); newCategory.innerHTML="<li><a id="blog_nav_category" href="#" click="showCategories()">随笔分类</a></li>"; curNode.parentNode.insertBefore(newCategory, curNode); fixedCategories.css("left", newCategory.getBoundingClientRect().left);});</script><!-- 分类生成下拉列表 --><script type="text/javascript"> var fixedCategories=$(".fixedCategories"); function showCategories(){ fixedCategories.show(); //$(fixedCategories).slideToggle("fast"); }; $(window).load(function() { var cgs = document.getElementById("sidebar_postcategory").getElementsByTagName("ul")[0]; var len = cgs.children.length; function createCategories(){ var category_container=$("<div id="cgcontainer" style="border:solid 3px #CAFF70; background:#FFFFFF;width:200px;padding:4px 10px;"></div>"); var categories=$("<ol id="indexs" style="margin-left: 14px; padding-left: 14px; line-height: 160%; display: block;"></ol>"); category_container.append(categories); fixedCategories.append(category_container); for(var i = 0; i < len; i++){ var cgid = "CatList_LinkList_0_Link_" + i; categories.append("<li style="list-style:decimal"><a href="" + document.getElementById(cgid).href + "">" + document.getElementById(cgid).innerHTML + "</a> </li>"); } }; createCategories(); $("#blog_nav_category").mouseover( function(){ fixedCategories.show(); } ); $("#blog_nav_category").mouseout( function(){ fixedCategories.hide(); } ); $("#cgcontainer").mouseover( function(){ fixedCategories.show(); } ); $("#cgcontainer").mouseout( function(){ fixedCategories.hide(); } );});</script>, 1, 0, 9);

文章评论

Top