===============页面定制CSS代码

/*

使用了Monokai Sublime的黑色主题皮肤，但是还存在样式冲突，需要自己修改

这个样式只适合使用makedown编写的博客

Monokai Sublime style. Derived from Monokai by noformnocontent https://nn.mit-license.org/

*/


pre {

    /*控制代码不换行*/

    white-space: pre;

    word-wrap: normal;

}


.cnblogs-markdown .hljs {

    display: block;

    overflow: auto;

    padding: 1.3em 2em !important;

    font-size: 16px !important;

    background: #272822 !important;

    color: #FFF;

    max-height: 700px;

}


.hljs,

.hljs-tag,

.hljs-subst {

    color: #f8f8f2;

}


.hljs-strong,

.hljs-emphasis {

    color: #a8a8a2;

}


.hljs-bullet,

.hljs-quote,

.hljs-number,

.hljs-regexp,

.hljs-literal,

.hljs-link {

    color: #ae81ff;

}


.hljs-code,

.hljs-title,

.hljs-section,

.hljs-selector-class {

    color: #a6e22e;

}


.hljs-strong {

    font-weight: bold;

}


.hljs-emphasis {

    font-style: italic;

}


.hljs-keyword,

.hljs-selector-tag,

.hljs-name,

.hljs-attr {

    color: #f92672;

}


.hljs-symbol,

.hljs-attribute {

    color: #66d9ef;

}


.hljs-params,

.hljs-class .hljs-title {

    color: #f8f8f2;

}


.hljs-string,

.hljs-type,

.hljs-built_in,

.hljs-builtin-name,

.hljs-selector-id,

.hljs-selector-attr,

.hljs-selector-pseudo,

.hljs-addition,

.hljs-variable,

.hljs-template-variable {

    color: #e6db74;

}


.hljs-comment,

.hljs-deletion,

.hljs-meta {

    color: #75715e;

}

/*makedown行间代码样式 */

.cnblogs-markdown code {

    color: #c7254e;

    border: none !important;

    font-size: 1em !important;

    background-color: #f9f2f4 !important;

    font-family: sans-serif !important;

}

.cnblogs_code

{

　　 background-color: #000;

}


/* 黑色主题makedown代码结束 */



=======博客侧边栏公告（支持HTML代码）（支持JS代码）============

<!-- 小老鼠游戏控件 -->

<div className="sidebarMouse"><object type="application/x-shockwave-flash" style="outline:none;"          data="https://cdn.abowman.com/widgets/hamster/hamster.swf?up_bodyColor=f0e9cc&amp;up_feetColor=D4C898&amp;up_eyeColor=000567&amp;up_wheelSpokeColor=DEDEDE&amp;up_wheelColor=FFFFFF&amp;up_waterColor=E0EFFF&amp;up_earColor=b0c4de&amp;up_wheelOuterColor=FF4D4D&amp;up_snoutColor=F7F4E9&amp;up_bgColor=F0E4E4&amp;up_foodColor=cba920&amp;up_wheelCenterColor=E4EB2F&amp;up_tailColor=E6DEBE&amp;"          width="240" height="160"><param name="movie"           value="https://cdn.abowman.com/widgets/hamster/hamster.swf?up_bodyColor=f0e9cc&amp;up_feetColor=D4C898&amp;up_eyeColor=000567&amp;up_wheelSpokeColor=DEDEDE&amp;up_wheelColor=FFFFFF&amp;up_waterColor=E0EFFF&amp;up_earColor=b0c4de&amp;up_wheelOuterColor=FF4D4D&amp;up_snoutColor=F7F4E9&amp;up_bgColor=F0E4E4&amp;up_foodColor=cba920&amp;up_wheelCenterColor=E4EB2E&amp;up_tailColor=E6DEBE&amp;"><param name="AllowScriptAccess" value="always"><param name="wmode" value="opaque"></object></div>


<!-- 公告栏时钟控件 -->

<embed wmode="transparent" src="https://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_tr.swf" quality="high" bgcolor="#FDF6E3" width="240" height="110" name="honehoneclock" align="middle" allowscriptaccess="always" type="application/x-shockwave-flash" pluginspage="https://www.macromedia.com/go/getflashplayer">


<!-- 百度分享栏控件 -->

<script>

window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"16"},"slide":{"type":"slide","bdImg":"3","bdPos":"right","bdTop":"105.5"},"image":{"viewList":["qzone","tsina","tqq","renren","weixin"],"viewText":"分享到：","viewSize":"16"},"selectShare":{"bdContainerClass":null,"bdSelectMiniList":["qzone","tsina","tqq","renren","weixin"]}};with(document){0[(getElementsByTagName("head")[0]||body).appendChild(createElement("script")).src="https://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion="+~(-new Date()/3600000)]};

</script>




=============页首Html代码===================

<a href="https://github.com/dunwu" class="github-corner"></a><style>.github-corner:hover .octo-arm { }</style>




<link rel="stylesheet" href="https://files.cnblogs.com/files/jingmoxukong/cnblog.min.css">

<style>


 h2 {

    background: #2B6695;

    border-radius: 6px 6px 6px 6px;

    box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);

    color: #FFFFFF;

    font-family:"微软雅黑", "宋体", "黑体", Arial;

    font-size: 18px;

    font-weight: bold;

    height: 25px;

    line-height: 25px;

    margin: 18px 0 !important;

    padding: 8px 0 5px 5px;

    text-shadow: 2px 2px 3px #222222;

}

h3 {

    background: #5B9600;

    border-radius: 6px 6px 6px 6px;

    box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);

    color: #FFFFFF;

    font-family:"微软雅黑", "宋体", "黑体", Arial;

    font-size: 13px;

    font-weight: bold;

    height: 24px;

    line-height: 20px;

    margin: 12px 0 !important;

    padding: 5px 0 5px 10px;

    text-shadow: 2px 2px 3px #222222;

}


/*生成博客目录的CSS*/

#uprightsideBar{

    font-size:12px;

    font-family:Arial, Helvetica, sans-serif;

    text-align:left;

    position:fixed;/*将div的位置固定到距离top:50px，right:0px的位置，这样div就会处在最右边的位置，距离顶部50px*/

    top:50px;

    right:0px;

    width: auto;

    height: auto;

}

#sideBarTab{

    float:left;

    width:30px;

    border:1px solid #e5e5e5;

    border-right:none;

    text-align:center;

    background:#ffffff;

}


#sideBarContents{

    float:left;

    overflow:auto;

    overflow-x:hidden;!important;

    width:200px;

    min-height:108px;

    max-height:460px;

    border:1px solid #e5e5e5;

    border-right:none;

    background:#ffffff;

}

#sideBarContents dl{

    margin:0;

    padding:0;

}


#sideBarContents dt{

    margin-top:5px;

    margin-left:5px;

}


#sideBarContents dd, dt {

    cursor: pointer;

}


#sideBarContents dd:hover, dt:hover {

    color:#A7995A;

}

#sideBarContents dd{

    margin-left:20px;

}

</style>


=========页脚Html代码=============

<script type="text/javascript">

/*

    功能：生成博客目录的JS工具

    测试：IE8，火狐，google测试通过

*/

var BlogDirectory = {

    /*

        获取元素位置，距浏览器左边界的距离（left）和距浏览器上边界的距离（top）

    */

    getElementPosition:function (ele) {        

        var topPosition = 0;

        var leftPosition = 0;

        while (ele){              

            topPosition += ele.offsetTop;

            leftPosition += ele.offsetLeft;        

            ele = ele.offsetParent;    

        }  

        return {top:topPosition, left:leftPosition};

    },


    /*

    获取滚动条当前位置

    */

    getScrollBarPosition:function () {

        var scrollBarPosition = document.body.scrollTop || document.documentElement.scrollTop;

        return  scrollBarPosition;

    },

   

    /*

    移动滚动条，finalPos 为目的位置，internal 为移动速度

    */

    moveScrollBar:function(finalpos, interval) {


        //若不支持此方法，则退出

        if(!window.scrollTo) {

            return false;

        }


        //窗体滚动时，禁用鼠标滚轮

        window.onmousewheel = function(){

            return false;

        };

         

        //清除计时

        if (document.body.movement) {

            clearTimeout(document.body.movement);

        }


        var currentpos =BlogDirectory.getScrollBarPosition();//获取滚动条当前位置


        var dist = 0;

        if (currentpos == finalpos) {//到达预定位置，则解禁鼠标滚轮，并退出

            window.onmousewheel = function(){

                return true;

            }

            return true;

        }

        if (currentpos < finalpos) {//未到达，则计算下一步所要移动的距离

            dist = Math.ceil((finalpos - currentpos)/10);

            currentpos += dist;

        }

        if (currentpos > finalpos) {

            dist = Math.ceil((currentpos - finalpos)/10);

            currentpos -= dist;

        }

       

        var scrTop = BlogDirectory.getScrollBarPosition();//获取滚动条当前位置

        window.scrollTo(0, currentpos);//移动窗口

        if(BlogDirectory.getScrollBarPosition() == scrTop)//若已到底部，则解禁鼠标滚轮，并退出

        {

            window.onmousewheel = function(){

                return true;

            }

            return true;

        }

       

        //进行下一步移动

        var repeat = "BlogDirectory.moveScrollBar(" + finalpos + "," + interval + ")";

        document.body.movement = setTimeout(repeat, interval);

    },

   

    htmlDecode:function (text){

        var temp = document.createElement("div");

        temp.innerHTML = text;

        var output = temp.innerText || temp.textContent;

        temp = null;

        return output;

    },


    /*

    创建博客目录，

    id表示包含博文正文的 div 容器的 id，

    mt 和 st 分别表示主标题和次级标题的标签名称（如 H2、H3，大写或小写都可以！），

    interval 表示移动的速度

    */

    createBlogDirectory:function (id, mt, st, interval){

         //获取博文正文div容器

        var elem = document.getElementById(id);

        if(!elem) return false;

        //获取div中所有元素结点

        var nodes = elem.getElementsByTagName("*");

        //创建博客目录的div容器

        var divSideBar = document.createElement('DIV');

        divSideBar.className = 'uprightsideBar';

        divSideBar.setAttribute('id', 'uprightsideBar');

        var divSideBarTab = document.createElement('DIV');

        divSideBarTab.setAttribute('id', 'sideBarTab');

        divSideBar.appendChild(divSideBarTab);

        var h2 = document.createElement('H2');

        divSideBarTab.appendChild(h2);

        var txt = document.createTextNode('目录导航');

        h2.appendChild(txt);

        var divSideBarContents = document.createElement('DIV');

        divSideBarContents.style.display = 'none';

        divSideBarContents.setAttribute('id', 'sideBarContents');

        divSideBar.appendChild(divSideBarContents);

        //创建自定义列表

        var dlist = document.createElement("dl");

        divSideBarContents.appendChild(dlist);

        var num = 0;//统计找到的mt和st

        mt = mt.toUpperCase();//转化成大写

        st = st.toUpperCase();//转化成大写

        //遍历所有元素结点

        for(var i=0; i<nodes.length; i++)

        {

            if(nodes[i].nodeName == mt|| nodes[i].nodeName == st)    

            {

                //获取标题文本

                var nodetext = nodes[i].innerHTML.replace(/<\/?[^>]+>/g,"");//innerHTML里面的内容可能有HTML标签，所以用正则表达式去除HTML的标签

                nodetext = nodetext.replace(/ /ig, "");//替换掉所有的

                nodetext = BlogDirectory.htmlDecode(nodetext);

                //插入锚        

                nodes[i].setAttribute("id", "blogTitle" + num);

                var item;

                switch(nodes[i].nodeName)

                {

                    case mt:    //若为主标题

                        item = document.createElement("dt");

                        break;

                    case st:    //若为子标题

                        item = document.createElement("dd");

                        break;

                }

               

                //创建锚链接

                var itemtext = document.createTextNode(nodetext);

                item.appendChild(itemtext);

                item.setAttribute("name", num);

                item.onclick = function(){        //添加鼠标点击触发函数

                    var pos = BlogDirectory.getElementPosition(document.getElementById("blogTitle" + this.getAttribute("name")));

                    if(!BlogDirectory.moveScrollBar(pos.top, interval)) return false;

                };            

               

                //将自定义表项加入自定义列表中

                dlist.appendChild(item);

                num++;

            }

        }

       

        if(num == 0) return false;

        /*鼠标进入时的事件处理*/

        divSideBarTab.onmouseenter = function(){

            divSideBarContents.style.display = 'block';

        }

        /*鼠标离开时的事件处理*/

        divSideBar.onmouseleave = function() {

            divSideBarContents.style.display = 'none';

        }


        document.body.appendChild(divSideBar);

    }

   

};


window.onload=function(){

    /*页面加载完成之后生成博客目录*/

    BlogDirectory.createBlogDirectory("cnblogs_post_body","h2","h4",20);

}

</script>

