设为首页收藏本站

IT技术擎 - 最棒的IT web技术交流社区

 找回密码
 注册为IT技术擎人

QQ登录

只需一步,快速开始

搜索
热搜: php h5 jquery
查看: 10|回复: 0

[未分类] 一次博客园美化经历

[复制链接]
发表于 2018-8-10 21:10:24 | 显示全部楼层 |阅读模式
前言

  • 作为一个前端仅仅是入门的程序员,通过面向baidu编程美化博客园真是痛不欲生。借用运维的话:
    对着破电脑,一调一下午。
  • 在使用博客园的时候,默认使用的custom模板虽然简单直观,但是不足以方便阅读和使用,比如没有目录,因此我进行了为期一天(总体是三天)的博客园界面美化,这里介绍一下具体内容和遇到的问题。
  • 通过参考博客园等平台的相关文章,我添加了显示目录功能、新增一列导航栏菜单、GitHub地址、回到顶部按钮。参考的博文未记录地址,因此这里我仅介绍一下自己参与修改的(绝大多数)前两项内容,其他的功能请自己去搜一搜。

浮动显示目录功能

  • 总体效果

    • 在页面固定位置显示目录控制按钮,当鼠标移入时显示目录,鼠标移出时隐藏目录,鼠标移入目录列表可以选择点击目录。
    • 效果图如下:


  • 具体实现思路

    • 目录控制按钮和目录显示部分都是创建的一块div区域,遍历目录并动态添加超链接,将每条目录依次添加进目录容器indexs_container内,然后将目录容器添加进div区域中。
    • 最后添加鼠标移入移出事件。

  • 需要自定义的地方

    • 我使用的目录为三级标题,修改的话修改
      1. var hs = $('#cnblogs_post_body h3');
      复制代码
      这里。
    • 其他的颜色、位置可以自己修改。

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

  • 总体效果

    • 我新增了一个菜单项--随笔分类,鼠标移入时会下拉显示所有的分类,选择分类进入对应页面。
    • 效果图如下:


  • 具体实现思路

    • 首先添加菜单项,我是将【随笔分类】添加到【联系】之前,因此先获取【联系】的DOM节点,然后创建一个同级节点【随笔分类】,使用insertBefore方法插入新节点。
    • 然后是创建下拉列表,先定义一个div区域,获取随笔分类的个数,然后一个循环动态地添加分类项到分类容器category_container中,然后将分类容器添加到div区域中。
    • 其中div区域的位置是动态添加的,即获取【随笔分类】的位置,然后通过
      1. fixedCategories.css( "left ", newCategory.getBoundingClientRect().left);
      复制代码
      动态添加css样式。

  • 遇到的问题

    • 由于新添加的菜单项的分类列表是写死的,我们只能通过给定的id调用,通过
      1. document.getElementById( "sidebar_postcategory ").getElementsByTagName( "ul ")[0];
      复制代码
      来获取分类列表的集合,我至今没调试出来这句话获得了什么,只是简单的用它获得了分类的个数len。
    • 本来想接着添加一个【标签】的菜单项,结果给定的标签控制器没有id,DOM技术学的不够多,不知道如何获取什么都没有的元素,因此就不折腾了。
    • 由于博客园侧边栏脚本总是最后加载,因此
      1. document.getElementById( "sidebar_postcategory ")
      复制代码
      有时会获取空值导致不显示列表项,虽然此脚本添加了onload延迟加载,但是还是有问题,刷新页面直到显示便是。
    • 两个脚本都是添加在页尾html代码中,需要申请js权限。
    • 手机浏览页面的话,点击目录或者【随笔分类】显示内容,点击空白隐藏内容。

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



上一篇:Nginx location配置详解
下一篇:省市县级联
该用户未在地球留下任何的痕迹

本版积分规则

QQ|小黑屋|帮助|IT技术擎 ( 沪ICP备15054863号  

GMT+8, 2018-8-22 15:50

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表