zoukankan      html  css  js  c++  java
  • 为博客园添加目录的方法总结

    手动设置锚点和超链接的方法

    将你要跳转的标题插入设置书签,之后在标签中插入超链接。链接地址为    #书签名    。

    例如:

    1、Struts2是什么玩意?核心?主要的功能?

    2、Struts2的核心知识;

    一  、Struts2是什么玩意?核心?主要的功能?

    我插入标签: w1

    在   1、Struts2是什么玩意?核心?主要的功能?中插入链接:

    超链接地址 #w1

     目标:在目前窗口打开超链接,这样就可以了。

    自动设置第一种:在正文上方直接添加目录

    1. 申请开通js权限

    默认是不支持,需要打开博客园后台,进入“设置”标签页,点击“申请开通js权限”,并注明用途
    Paste_Image.png
    如果想加快申请速度,也可以再向官方发个邮件(邮箱是contact@cnblogs.com),邮件也需要注明用途,快的话1小时就能搞定了

    2. 添加js脚本到“页脚Html代码”

    打开博客园后台,进入“设置”标签页,在最下面的“页脚Html代码”对应的编辑框粘贴下面的js代码,然后点“保存”按钮保存。
    (如果没有开通js权限,此处无法添加)
    Paste_Image.png

    Paste_Image.png

    <script language="javascript" type="text/javascript">
    // 生成目录索引列表
    // ref: http://www.cnblogs.com/wangqiguo/p/4355032.html
    // modified by: zzq
    function GenerateContentList()
    {
        var mainContent = $('#cnblogs_post_body');
        var h2_list = $('#cnblogs_post_body h2');//如果你的章节标题不是h2,只需要将这里的h2换掉即可
    
        if(mainContent.length < 1)
            return;
     
        if(h2_list.length>0)
        {
            var content = '<a name="_labelTop"></a>';
            content += '<div id="navCategory" style="color:#152e97;">';
            content += '<p style="font-size:18px;"><b>目录</b></p>';
            content += '<ul>';
            for(var i=0; i<h2_list.length; i++)
            {
                var go_to_top = '<div style="text-align: right;"><a href="#_labelTop" style="color:#f68a33">回到顶部</a><a name="_label' + i + '"></a></div>';
                $(h2_list[i]).before(go_to_top);
                
                var h3_list = $(h2_list[i]).nextAll("h3");
                var li3_content = '';
                for(var j=0; j<h3_list.length; j++)
                {
                    var tmp = $(h3_list[j]).prevAll('h2').first();
                    if(!tmp.is(h2_list[i]))
                        break;
                    var li3_anchor = '<a name="_label' + i + '_' + j + '"></a>';
                    $(h3_list[j]).before(li3_anchor);
                    li3_content += '<li><a href="#_label' + i + '_' + j + '">' + $(h3_list[j]).text() + '</a></li>';
                }
                
                var li2_content = '';
                if(li3_content.length > 0)
                    li2_content = '<li><a href="#_label' + i + '">' + $(h2_list[i]).text() + '</a><ul>' + li3_content + '</ul></li>';
                else
                    li2_content = '<li><a href="#_label' + i + '">' + $(h2_list[i]).text() + '</a></li>';
                content += li2_content;
            }
            content += '</ul>';
            content += '</div><p>&nbsp;</p>';
            content += '<hr style="height:1px;border:none;border-top:1px dashed #0066CC;"/>';
            if($('#cnblogs_post_body').length != 0 )
            {
                $($('#cnblogs_post_body')[0]).prepend(content);
            }
        }   
    }
    
    GenerateContentList();
    </script>

    3. 按格式写文章

    在写新博文的时候,注意按照你js脚本里设定的格式来划分章节(这里只设定了h2,h3,对应普通编辑器中的二级标题和三级标题,对应markdown中的##和###)。当然,以前发布的文章如果有h2,h3,也会自动生成目录索引。


    (注:不要将这里的目录设置和上面的手动添加搞混啦,不需要两个超链接和锚点,只需要目录一个)

    效果如下:
    Paste_Image.png

    自动设置第二种:在文章右上角添加目录导航

    1. 申请开通js权限

    同上

    2. 添加css代码到“页面定制CSS代码”

    Paste_Image.png

    /*生成博客目录的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;
         auto;
        height: auto; 
    }
    #sideBarTab{
        float:left;
        30px; 
        border:1px solid #e5e5e5;
        border-right:none;
        text-align:center;
        background:#ffffff;
    }
    
    #sideBarContents{
        float:left;
        overflow:auto; 
        overflow-x:hidden;!important;
        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;
    }

    3. 添加js脚本到“页首Html代码”

    Paste_Image.png

    <script type="text/javascript">
    /*
        功能:生成博客目录的JS工具
        测试:IE8,火狐,google测试通过
        孤傲苍狼
        2014-5-11
    */
    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","h3",20);
    }
    </script>

    4. 按格式写文章

    同上


    效果如下:
    Paste_Image.png

  • 相关阅读:
    SD卡测试
    测试人员可能会遇到的问题
    HDU 1024 Max Sum Plus Plus
    HDU 1176 免费馅饼
    HDU 1257 最少拦截系统
    HDU 1087 Super Jumping! Jumping! Jumping!
    poj 1328 Radar Installation
    poj 1753 Flip Game
    HDU 1003 Max Sum
    HDU 5592 ZYB's Premutation(BestCoder Round #65 C)
  • 原文地址:https://www.cnblogs.com/mike-mei/p/11935840.html
Copyright © 2011-2022 走看看