Blog Garden Beautification Encyclopedia

Blog Garden Beautification Encyclopedia

1.1, automatically generate a catalog

First of all, you must have js permissions

(1) Footer js code

<script type="text/javascript">
/*
    Function: JS tool to generate blog directory
    Test: IE8, Firefox, Google test passed
    zhang_derek
    2018-01-03
*/
var BlogDirectory = {
   /*
        Get the element position, the distance from the left border of the browser (left) and the distance from the upper border of the browser (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}; 
    },

   /*
    Get the current position of the scroll bar
    */
    getScrollBarPosition:function () {
        var scrollBarPosition = document.body.scrollTop || document.documentElement.scrollTop;
        return scrollBarPosition;
    },
    
   /*
    Move the scroll bar, finalPos is the destination position, internal is the moving speed
    */
    moveScrollBar:function(finalpos, interval) {

       //If this method is not supported, exit
        if(!window.scrollTo) {
            return false;
        }

       //When the form is scrolling, disable the mouse wheel
        window.onmousewheel = function(){
            return false;
        };
          
       //Clear timing
        if (document.body.movement) { 
            clearTimeout(document.body.movement); 
        } 

        var currentpos =BlogDirectory.getScrollBarPosition();//Get the current position of the scroll bar

        var dist = 0; 
        if (currentpos == finalpos) {//Return to the predetermined position, release the mouse wheel, and exit
            window.onmousewheel = function(){
                return true;
            }
            return true; 
        } 
        if (currentpos <finalpos) {//Not reached, then calculate the distance to be moved in the next step
            dist = Math.ceil((finalpos-currentpos)/10); 
            currentpos += dist; 
        } 
        if (currentpos> finalpos) { 
            dist = Math.ceil((currentpos-finalpos)/10); 
            currentpos -= dist; 
        }
        
        var scrTop = BlogDirectory.getScrollBarPosition();//Get the current position of the scroll bar
        window.scrollTo(0, currentpos);//Move the window
        if(BlogDirectory.getScrollBarPosition() == scrTop)//If it has reached the bottom, unlock the mouse wheel and exit
        {
            window.onmousewheel = function(){
                return true;
            }
            return true;
        }
        
       //Make the next move
        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;
    },

   /*
    Create a blog directory,
    id represents the id of the div container that contains the body of the blog post,
    mt and st represent the label names of the main title and the subtitle respectively (such as H2, H3, uppercase or lowercase is fine!)
    interval represents the speed of movement
    */
    createBlogDirectory:function (id, mt, st, interval){
        //Get the blog post body div container
        var elem = document.getElementById(id);
        if(!elem) return false;
       //Get all element nodes in div
        var nodes = elem.getElementsByTagName("*");
       //Create a div container for the blog directory
        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('directory navigation');
        h2.appendChild(txt);
        var divSideBarContents = document.createElement('DIV');
        divSideBarContents.style.display ='none';
        divSideBarContents.setAttribute('id','sideBarContents');
        divSideBar.appendChild(divSideBarContents);
       //Create a custom list
        var dlist = document.createElement("dl");
        divSideBarContents.appendChild(dlist);
        var num = 0;//Statistics found mt and st
        mt = mt.toUpperCase();//Convert to uppercase
        st = st.toUpperCase();//Convert to uppercase
       //Traverse all element nodes
        for(var i=0; i<nodes.length; i++)
        {
            if(nodes[i].nodeName == mt|| nodes[i].nodeName == st)    
            {
               //Get the title text
                var nodetext = nodes[i].innerHTML.replace(/<\/?[^>]+>/g,"");//The content in innerHTML may have HTML tags, so use regular expressions to remove HTML tags
                nodetext = nodetext.replace(//ig, "");//Replace all 
                nodetext = BlogDirectory.htmlDecode(nodetext);
               //Insert anchor        
                nodes[i].setAttribute("id", "blogTitle" + num);
                var item;
                switch(nodes[i].nodeName)
                {
                    case mt://If the main title 
                        item = document.createElement("dt");
                        break;
                    case st://If it is a subtitle
                        item = document.createElement("dd");
                        break;
                }
                
               //Create anchor link
                var itemtext = document.createTextNode(nodetext);
                item.appendChild(itemtext);
                item.setAttribute("name", num);
                item.onclick = function(){//Add mouse click trigger function
                    var pos = BlogDirectory.getElementPosition(document.getElementById("blogTitle" + this.getAttribute("name")));
                    if(!BlogDirectory.moveScrollBar(pos.top, interval)) return false;
                };            
                
               //Add the custom table item to the custom list
                dlist.appendChild(item);
                num++;
            }
        }
        
        if(num == 0) return false; 
       /*Event handling when the mouse enters*/
        divSideBarTab.onmouseenter = function(){
            divSideBarContents.style.display ='block';
        }
       /*Event handling when the mouse leaves*/
        divSideBar.onmouseleave = function() {
            divSideBarContents.style.display ='none';
        }

        document.body.appendChild(divSideBar);
    }
    
};

window.onload=function(){
   /*The blog directory is generated after the page is loaded*/
    BlogDirectory.createBlogDirectory("cnblogs_post_body","h2","h3",20);
}
</script>

(2) Page custom css code

/*Generate CSS for blog directory*/
#uprightsideBar{
    font-size:14px;
    font-family:Arial, Helvetica, sans-serif;
    text-align:left;
    position:fixed;/*Fix the position of the div to the top:50px, right:0px position, so that the div will be at the rightmost position, 50px from the top*/
    top:400px;
    right:53px;
    width: auto;
    height: auto; 
    
    
}
#sideBarTab{
    float:left;
    width:30px; 
    border:1px solid #e5e5e5;
    border-right:none;
    text-align:center;
    background:rgb(238, 130, 238);
}

#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;
}

1.2. Add back to top button

(1) Page custom css code

#back-to-top {
    background-color: #00CD00;
    bottom: 0;
    box-shadow: 0 0 6px #00CD00;
    color: #444444;
    padding: 10px 10px;
    position: fixed;
    right: 50px;
    cursor: pointer;
}

(2) HTML code at the top of the page

<span id="back-to-top"><a href="#top">Back to top</a></span>

1.3. Love special effects (mouse click on the page)

Copy the following code into the bulletin board

<!-- Love special effects-->
<script type="text/javascript">

(function(window,document,undefined){
        var hearts = [];
        window.requestAnimationFrame = (function(){
                return window.requestAnimationFrame || 
                           window.webkitRequestAnimationFrame ||
                           window.mozRequestAnimationFrame ||
                           window.oRequestAnimationFrame ||
                           window.msRequestAnimationFrame ||
                           function (callback){
                                   setTimeout(callback,1000/60);
                           }
        })();
        init();
        function init(){
                css(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg); }.heart:after,.heart:before{content:'';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border- radius: 50%;position: absolute;}.heart:after{top: -5px;}.heart:before{left: -5px;}");
                attachEvent();
                gameloop();
        }
        function gameloop(){
                for(var i=0;i<hearts.length;i++){
                    if(hearts[i].alpha <=0){
                            document.body.removeChild(hearts[i].el);
                            hearts.splice(i,1);
                            continue;
                    }
                    hearts[i].y--;
                    hearts[i].scale += 0.004;
                    hearts[i].alpha -= 0.013;
                    hearts[i].el.style.cssText = "left:"+hearts[i].x+"px;top:"+hearts[i].y+"px;opacity:"+hearts[i].alpha+"; transform:scale("+hearts[i].scale+","+hearts[i].scale+") rotate(45deg);background:"+hearts[i].color;
            }
            requestAnimationFrame(gameloop);
        }
        function attachEvent(){
                var old = typeof window.onclick==="function" && window.onclick;
                window.onclick = function(event){
                        old && old();
                        createHeart(event);
                }
        }
        function createHeart(event){
            var d = document.createElement("div");
            d.className = "heart";
            hearts.push({
                    el: d,
                    x: event.clientX-5,
                    y: event.clientY-5,
                    scale: 1,
                    alpha: 1,
                    color: randomColor()
            });
            document.body.appendChild(d);
    }
    function css(css){
            var style = document.createElement("style");
                style.type="text/css";
                try{
                    style.appendChild(document.createTextNode(css));
                }catch(ex){
                    style.styleSheet.cssText = css;
                }
                document.getElementsByTagName('head')[0].appendChild(style);
    }
        function randomColor(){
                return "rgb("+(~~(Math.random()*255))+","+(~~(Math.random()*255))+","+(~~(Math.random( )*255))+")";
        }
})(window,document);

</script>

1.4. Bulletin board clock

Inside the announcement

<div id="myTime">
        <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0, 0" width="160" height="70" id="honehoneclock" align="middle">
            <param name="allowScriptAccess" value="always">
            <param name="movie" value="http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_wh.swf">
            <param name="quality" value="high">
            <param name="bgcolor" value="#ffffff">
            <param name="wmode" value="transparent">
            <embed wmode="transparent" src="http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_wh.swf" quality="high" bgcolor="#ffffff" width="160" height="70 "name="honehoneclock" align="middle" allowscriptaccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer">
        </object>
    </div>

1.5. Add information in the bulletin board

Inside the announcement

  • Picture path: You can upload the picture to your blog album, and then copy the picture address.
<p class="gonggao"> <a style="color: blue;font-weight: bold;" href="http://www.cnblogs.com/derek1184405959/p/8579428.html">My blog Article (table of contents)</a></p>
<p class="qq"> Write some information you want</p>

<a style="color:red;" title="Click here to enter Django2.0 official documentation" target="_Blank" href="https://docs. djangoproject.com/en/2.0/"><img src="http://images.cnblogs.com/cnblogs_com/derek1184405959/1210823/t_django.jpg" alt="zzx" class="img_avatar" width="170px" height="80px" style="border-radius:0%"> </a>

 css code

.qq{
    color:red;
    font-size:15px;
    margin:8px;
   font-weight: 500;
}
.gonggao{
    margin:8px;
 font-size:16px;
    color:blue;
}

1.6. Add github icon

Top html code

Just replace the address in the a tag with your own

<a href="https://github.com/derek-zhang123/" title="My github address" target="_Blank" class="github-corner" aria-label="View source on Github">< svg width="80" height="80" viewBox="0 0 250 250" style="fill:#FD6C6C; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria -hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2 "fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2, 43.6 171.4, 40.1 C171.4, 40.1 176.1, 42.5 178.8, 56.2 C183.1, 58.6 187.2, 61.8 190.9, 65.4 C194.5, 69.0 197.7, 73.2 200.1, 77.6 C213.8, 80.2 216.3, 84.9 216.3, 84.9 C212. 7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out }@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>



<a href="http://www.cnblogs.com/derek1184405959/" title="My blog homepage" target="_Blank" class="github-corner" aria-label="View source on Github">< svg width="80" height="80" viewBox="0 0 250 250" style="fill:#64CEAA; color:#fff; position: absolute; top: 0; border: 0; left: 0; transform: scale(-1, 1);" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d =``M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122 .9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d=``M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7 ,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8, 80.2 216.3, 84.9 216.3, 84.9 C212.7, 93.1 206.9, 96.0 205.4, 96.6 C205.1, 102.4 203.0, 107.8 198.3, 112.5 C181.9, 128.9 168.3, 122.5 157.7, 114.1 C157.9, 116.9 156.7, 120.9 152.7, 124.9 L141.0, 136.5 C139. 8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation: octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform :rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in- out}}</style>

1.7. Expand and shrink functions

(1) HTML code at the top of the page

<div id="divExpandViewArea" onclick="$('#main_container').css({'margin-left':'-200px'});$('#leftmenu').css({'display':' none'});">Expand</div>
 
<div id="divCollapseViewArea" onclick="$('#main_container').css({'margin-left':'0px'});$('#leftmenu').css({'display':'block '});">Zoom out</div>

(2) Page custom css style

#divExpandViewArea{
    position: fixed;
    color: white;
   
    padding: 10px 10px;
    left: 0px;
    top: 547px;
    cursor: pointer;
    opacity: 0.9;
    background-color: #68228B;
}
 
#divCollapseViewArea{
    position: fixed;
    color: white;
    
    padding: 10px 10px;
    left: 0px;
    top: 586px;
    cursor: pointer;
    opacity: 0.9;
    background-color: #68228B;
}

1.8. Set the signature format

Page custom css style

/* Set signature format*/
#MySignature {
    display: none;
    background-color: #B2E866;
    border-radius: 10px;
    box-shadow: 1px 1px 1px #6B6B6B;
    padding: 10px;
    line-height: 1.5;
    text-shadow: 1px 1px 1px #FFF;
    font-size: 16px;
    font-family:'Microsoft Yahei';
}

1.9. Set essay classification spacing

Spacing between essay categories on the left

Page custom css style

/* The latest essay on the left */
#CatList_LinkList_0_Link_0{
    
}
#CatList_LinkList_0_Link_1{
   
margin-top:10px;
}
#CatList_LinkList_0_Link_2{
   
    margin-top:10px;
}
#CatList_LinkList_0_Link_3{
 
margin-top:10px;

}
#CatList_LinkList_0_Link_4{
    
margin-top:10px;

}
#CatList_LinkList_0_Link_5{
    
margin-top:10px;

}
#CatList_LinkList_0_Link_6{
    
margin-top:10px;

}
#CatList_LinkList_0_Link_7{
    
margin-top:10px;

}
#CatList_LinkList_0_Link_8{
    
margin-top:10px;

}

1.10. Add sharing function

Inside the bulletin board

<script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle ":"0","bdSize":"16"},"slide":{"type":"slide","bdImg":"6","bdPos":"right","bdTop":"400 "},"image":{"viewList":["qzone","tsina","tqq","renren","weixin"],"viewText":"Share to:","viewSize":"16 "}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>

1.11. Revolving lantern

Top html code

<div id="i1" style="color:red;font-size:13px;padding:5px;">Going east from the big river, the waves are exhausted, and the heroes of the ages. Therefore, to the west of the base, the humanity is, Zhou Lang Chibi of the 3.Kingdoms. The rocks pierced through the sky, the stormy waves hit the shore, and thousands of piles of snow were rolled up. Picturesque, a moment how many hero. Yao Xiang Gong Jin back then, Xiao Qiao got married for the first time, with a majestic appearance. Lupin and Lun towel, between talking and laughing, disappeared in ashes. My motherland wanders, loves to laugh at me, be born early. Life is like a dream. </div>
    <script>
       function func(){
           var tag = document.getElementById('i1');
           var content = tag.innerText;
           var f = content.charAt(0);
           var l = content.substring(1,content.length);
           var new_content = l + f;
           tag.innerText = new_content;
       }
       setInterval('func()',1600);
    </script>

1.12. Recommendations and objections

Page customization css

/*Recommendation and opposition*/
#div_digg {
    padding: 10px;
    position: fixed;
    _position: absolute;
    z-index: 1000;
    bottom: 20px;
    right: 0;
    _right: 17px;
    border: 1px solid #D9DBE1;
    background-color: #FFFFFF;
    filter: alpha(Opacity=80);
    -moz-opacity: 1;
    opacity: 1;
}

.icon_favorite {
    background: transparent url('http://files.cnblogs.com/files/jackson0714/kj.gif') no-repeat 0 0;
    padding-left: 16px;
}
Reference: https://cloud.tencent.com/developer/article/1139362 Blog Garden Beautification Encyclopedia-Cloud + Community-Tencent Cloud