Notebook版的博客园美化,一次博客园美化经历

作者:计算机知识

Jupyter ~ 像写作品般的 Coding:

正文介绍本博客的美化

前言

  • 作为二个前端仅仅是入门的程序猿,通过面向baidu编程美化和讯真是欲哭无泪。借用运营的话:

    对着破计算机,壹调一中午。

  • 在应用新浪的时候,暗中同意使用的custom模板就算轻巧直观,可是不足以方便阅读和选拔,比方未有目录,由此小编进行了定期一天(总体是三日)的新浪分界面美化,这里介绍一下具体内容和碰着的标题。

  • 由此参照他事他说加以考查今日头条等楼台的连锁小说,笔者增多了彰显目录功用、新添一列导航栏菜单、GitHub地址、回到顶端开关。参谋的博文未记录地址,因而这里自个儿仅介绍一下团结参加修改的(绝大大多)前两项内容,其余的遵循请自个儿去搜1搜。

本文介绍本博客的吹捧

style="color: #ff0000;">更新:针对win版,八个样式统一一齐了实际能够看: style="color: #ff0000;">https://www.cnblogs.com/dotnetcrazy/p/9210075.html

美化模块

  1. 新浪模板
  2. 侧边栏
  3. Notebook版的博客园美化,一次博客园美化经历。文章索引目录

扭转展现目录功用

  1. 总体效益
    • 在页面固定地点展现目录调整按键,当鼠标移入时彰显目录,鼠标移出时隐藏目录,鼠标移入目录列表可以选拔点击目录。
    • 功能图如下:
      图片 1
  2. 切实落到实处思路
    • 目录调整开关和目录展现部分都以开创的1块div区域,遍历目录并动态拉长超链接,将每条款录依次增多进目录容器indexs_container内,然后将引得容器增添进div区域中。
    • 末尾增加鼠标移入移出事件。
  3. 须要自定义的地方
    • 自小编动用的目录为三级标题,修改的话修改var hs = $('#cnblogs_post_body h3');这里。
    • 别的的水彩、地点能够团结修改。
  4. 实现js
<!-- 目录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>

<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>

鼓吹模块

  1. 和讯模板
  2. 侧边栏
  3. 小说索引目录

作用超过预览:http://github.lesschina.com/python/base/oop/1.封装.html

模板美化

本博客的体裁仿照Leanote模板修改而来
网易模板的本来面目CSS代码注释中国建工总公司议大家只修改CSS来改动博客的样式
吹牛暗中认可模板前请先在后台禁止使用暗许模板CSS

那是自己的蚂蚁笔记博客

夸口后的新浪样式都是从那那来的,具体修改了何等样式就不做过多的讲述
复制上面链接页面中的CSS粘贴到博客处理-设置-页面定制CSS代码

增添导航栏菜单

  1. 完整效益
    • 本身新扩充了1个菜单项--小说分类,鼠标移入时会下拉展现全数的分类,采用分类进入对应页面。
    • 作用图如下:
      图片 2
  2. 具体贯彻思路
    • 首先增多菜单项,俺是将【随笔分类】增多到【联系】在此之前,由此先获得【联系】的DOM节点,然后创造三个同级节点【随笔分类】,使用insertBefore方法插入新节点。
    • 下一场是创制下拉列表,先定义1个div区域,获取小说分类的个数,然后三个巡回动态地足够分类项到分类容器category_container中,然后将分类容器增加到div区域中。
    • 中间div区域的任务是动态拉长的,即取得【随笔分类】的地点,然后经过fixedCategories.css({"left": newCategory.getBoundingClientRect().left, "top": newCategory.getBoundingClientRect().bottom});动态增多css样式。
  3. 相遇的标题
    • 出于新加上的菜单项的归类列表是写死的,我们不得不通过给定的id调用,通过document.getElementById("sidebar_postcategory").getElementsByTagName("ul")[0];来收获分类列表的会面,笔者现今没调节和测试出来这句话赢得了怎么,只是简短的用它赢得了分类的个数len。
    • 自然想接着增多二个【标签】的菜单项,结果给定的价签调整器未有id,DOM本领学的非常不够多,不了然怎么得到什么都尚未的成分,由此就不折腾了。
    • 是因为天涯论坛侧边栏脚本总是最后加载,因而document.getElementById("sidebar_postcategory")奇迹会猎取空值导致不显得列表项,纵然此脚本增加了onload延迟加载,不过edge浏览器有时还是有标题,谷歌(Google)浏览器就异常少出现难题,刷新页面直到展现正是。
    • 三个剧本都以加多在页尾html代码中,必要提请js权限。
    • 手提式有线电话机浏览页面包车型大巴话,点击目录只怕【随笔分类】显示内容,点击空白隐藏内容。
  4. 实现js
<div class="fixedCategories" style="position: absolute;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 class="menu" id="blog_nav_category" href="#" click="showCategories()">随笔分类</a></li>";
    curNode.parentNode.insertBefore(newCategory, curNode);
    fixedCategories.css({"left": newCategory.getBoundingClientRect().left, "top": newCategory.getBoundingClientRect().bottom});
});
</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>

模板美化

本博客的样式仿照Leanote模板修改而来
微博模板的原始CSS代码注释中国建工业总会公司议我们只修改CSS来改动博客的体制
鼓吹暗中认可模板前请先在后台禁止使用暗中认可模板CSS

这是自身的蚂蚁笔记博客

吹捧后的新浪样式都以从那这来的,具体修改了何等样式就不做过多的叙述
复制上边链接页面中的CSS粘贴到博客管理-设置-页面定制CSS代码

明日清晨4起把乐乎样式稍微弄了下,那样Jupyter-Notebook 通过NBConvert随后,你粘贴到博客园编辑器就足以平昔突显了

侧面栏加多头像

签到搜狐后台
翻看本身的个人头像并复制图片地址
图片 3

修改上面代码中的图片地址为你个人头像的图纸地址

<div class="head_img"><img width="120" height="120" alt="我的头像" src="//pic.cnblogs.com/avatar/1014286/20160824172911.png" class="img_avatar"><div>

增加到博客管理-设置-博客侧边栏布告地点处就可以

侧面栏增多头像

签到搜狐后台
翻看本身的个人头像并复制图片地址
图片 4

修改上面代码中的图片地址为你个人头像的图片地址

<div class="head_img"><img width="120" height="120" alt="我的头像" src="//pic.cnblogs.com/avatar/1014286/20160824172911.png" class="img_avatar"><div>

丰硕到博客管理-设置-博客侧边栏布告地方处就可以

稍加优化了下,基本上对如今的至极尚可,贴下优化代码:

给小说加多索引目录

其壹功效的兑现是依附jQuery的,查看cnblogs的页面源码
察觉天涯论坛的暗中同意模板已经引进了jQuery
以此意义供给报名开展js权限

图片 5
其一美化进程比较复杂,美化的灵感来自下边包车型地铁多少个网址:

  1. CSDN博客:CSDN的博文子禽自动创造索引目录,作者利用了它的目录目录样式
  2. 百度通晓:浏览百度领会会在滚动到一屏以上时出现索引目录

小编还在这么些目录目录中到场了回来顶端和滚动到有些题目下的剧情时高亮对应的目录索引

给小说增添索引目录

本条意义的落到实处是依照jQuery的,查看cnblogs的页面源码
发掘新浪的暗中同意模板已经引进了jQuery
那一个效果须要申请开始展览js权限

图片 6
本条美化进程相比复杂,美化的灵感来源上边包车型地铁多少个网址:

  1. CSDN博客:CSDN的博文仲自动创造索引目录,笔者使用了它的目录目录样式
  2. 百度掌握:浏览百度知道会在滚动到壹屏以上时出现索引目录

自己还在那些目录目录中投入了回到顶上部分和滚动到有些标题下的内容时高亮对应的目录索引

别忘了JS的引用(若是您也在用Jupyter写文章,上传七个样式文件,然后引用就能够

增添索引目录的来得区域

<div class="fixedIndexs" style="position: fixed;bottom: 40px;display: none"></div>

运用position: fixed将以此目录目录锁定在底层

增多索引目录的突显区域

<div class="fixedIndexs" style="position: fixed;bottom: 40px;display: none"></div>

应用position: fixed将那么些目录目录锁定在后面部分

本文由bwin必赢发布,转载请注明来源

关键词: Web前端 jQuery 必嬴亚洲 Other