zoukankan      html  css  js  c++  java
  • 让博客园博客自动生成章节目录索引

    (1)目录

    进入博客园: 在 “设置”->“页脚Html代码” 中增加以下代码:

    <script language="javascript" type="text/javascript">
    //生成目录索引列表
    function GenerateContentList()
    {
        var jquery_h3_list = $('#cnblogs_post_body h3');//如果你的章节标题不是h3,只需要将这里的h3换掉即可
        if(jquery_h3_list.length>0)
        {
            var content = '<a name="_labelTop"></a>';
            content    += '<div id="navCategory">';
            content    += '<p style="font-size:18px"><b>阅读目录</b></p>';
            content    += '<ul>';
            for(var i =0;i<jquery_h3_list.length;i++)
            {
                var go_to_top = '<div style="text-align: right"><a href="#_labelTop">回到顶部</a><a name="_label' + i + '"></a></div>';
                $(jquery_h3_list[i]).before(go_to_top);
                var li_content = '<li><a href="#_label' + i + '">' + $(jquery_h3_list[i]).text() + '</a></li>';
                content += li_content;
            }
            content    += '</ul>';
            content    += '</div>';
            if($('#cnblogs_post_body').length != 0 )
            {
                $($('#cnblogs_post_body')[0]).prepend(content);
            }
        }    
    }
    GenerateContentList();
    </script>

    设置好之后,对 章节标题设为 “标题3”,即可自动生成目录。

    (2) CSS 格式

    同时可以在: “设置” -> “页面定制CSS代码” 中增加以下代码,会美化目录及链接。

    #cnblogs_post_body h3{
        background: #2B6695 !important;
        border-radius: 6px 6px 6px 6px !important;
        box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
        color: #FFFFFF;
        font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;
        font-size: 17px;
        font-weight: bold;
        height: 25px;
        line-height: 25px;
        margin: 15px 0 !important;
        padding: 5px 0 5px 20px;
        text-shadow: 2px 2px 3px #222222
    }
    
    #cnblogs_post_body a{
        border-bottom-style: dashed;
        border-bottom-width: 1px;
        color:#3d81ee;
        text-decoration: none;
    }
    
    /*灰色背景内联样式*/
    #cnblogs_post_body code.base{
        display: inline;
        background-color: #f5f5f5 !important;
        border: 1px solid #ccc !important;
        border-radius: 3px !important;
        font-family: "Courier New",sans-serif !important;
        font-size: 12px !important;
        line-height: 1.8;
        padding: 2px 5px !important;
    }

    参考:  http://www.cnblogs.com/wangqiguo/p/4355032.html

  • 相关阅读:
    CodeForces 785D Anton and School
    CodeForces 785C Anton and Fairy Tale
    CodeForces 785B Anton and Classes
    CodeForces 785A Anton and Polyhedrons
    爱奇艺全国高校算法大赛初赛C
    爱奇艺全国高校算法大赛初赛B
    爱奇艺全国高校算法大赛初赛A
    EOJ 3265 七巧板
    EOJ 3256 拼音魔法
    EOJ 3262 黑心啤酒厂
  • 原文地址:https://www.cnblogs.com/pinganzi/p/6657145.html
Copyright © 2011-2022 走看看