博客园美化

标签：cnblogs color 博客园 list li content top 美化

主要参考博客与问题

https://www.cnblogs.com/anan-java/p/12196061.html

https://www.cnblogs.com/WhiteTears/p/8824544.html

博客园会将上传文件与历史上传文件名进行比对，文件名相同，博客园保留历史版本而不会保留更改，上传的文件是改变了的，但是在设置里面如果链接相同因为历史版本所以不会改动，还是运行之前的。

1.博客侧边栏公告

1.1不同状态标签页标题设置

<script>
document.addEventListener("visibilitychange", function () {
        if (document.hidden) {
            document.title="于离别之朝";
        } else  {
            document.title="束起约定之花";
            setTimeout(function(){
                document.title= "凤舞的博客";
            }, 2000);
        }
    }, false);
</script>

公告处图片

<div align="center" style="postion">
  <a href="https://www.cnblogs.com/Clannad21/">
    <img style="position: relative ;"
      src="https://images.cnblogs.com/cnblogs_com/blogs/749030/galleries/2333951/o_230808104908_128551397dd7762968eeef9af822ab85.jpg">
  </a>
</div>

看板娘

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Live2D</title>
     
    <link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/kousak/waifu.css"/>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/kousak/waifu.css">
    <div class="waifu" id="waifu">
        <div class="waifu-tips" style="opacity: 1;"></div>
        <canvas id="live2d" width="280" height="250" class="live2d"></canvas>
        <div class="waifu-tool">
            <span class="fui-home"></span>
            <span class="fui-chat"></span>
            <span class="fui-eye"></span>
            <span class="fui-user"></span>
            <span class="fui-photo"></span>
            <span class="fui-cross"></span>
        </div>
    </div>
    <script src="https://files.cnblogs.com/files/kousak/live2d.js"></script>
    <script src="https://files.cnblogs.com/files/blogs/749030/waifu-tips-test2.js"></script>
    <script type="text/javascript">initModel()</script>
    <link rel="stylesheet" type="text/css" href="https://files.cnblogs.com/files/yjlblog/flat-ui.min.css"/>

页面定制css代码

背景图片

body {
    color: #000;
    background: url(https://images.cnblogs.com/cnblogs_com/blogs/749030/galleries/2333951/o_230809030020_o_230808104826_%E6%B8%9A.jpg) fixed;
    background-size: cover;
    /* background-repeat: round; */
    background-repeat: no-repeat;
    font-family: "Helvetica Neue",Helvetica,Verdana,Arial,sans-serif;
    font-size: 12px;
    min-height: 101%;
}
#home {
    opacity: 0.8;
    margin: 0px auto;
    width: 70%;
    min-width: 950px;
    background-color: #fff;
    padding: 30px;
    margin-top: 50px;
    margin-bottom: 50px;
    box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
}

下雪特效（未启用）

/* #Snow{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    background: rgba(125,137,95,0.1);
    pointer-events: none;
} */

代码美化（和页脚的代码美化一起使用）

/*! Color themes for Google Code Prettify | MIT License | github.com/jmblog/color-themes-for-google-code-prettify */
.pln{color:#4d4d4c}ol.linenums{margin-top:0;margin-bottom:0;color:#8e908c}li.L0,li.L1,li.L2,li.L3,li.L4,li.L5,li.L6,li.L7,li.L8,li.L9{padding-left:1em;background-color:#fff;list-style-type:decimal!important;}@media screen{.str{color:#718c00}.kwd{color:#8959a8}.com{color:#8e908c}.typ{color:#4271ae}.lit{color:#f5871f}.pun{color:#4d4d4c}.opn{color:#4d4d4c}.clo{color:#4d4d4c}.tag{color:#c82829}.atn{color:#f5871f}.atv{color:#3e999f}.dec{color:#f5871f}.var{color:#c82829}.fun{color:#4271ae}}
/*下面是我设置背景色，字体大小和字体*/
.cnblogs-markdown code{
background:#fff!important;
}
.cnblogs_code,.cnblogs_code span,.cnblogs-markdown .hljs{
    font-size:16px!important;
}

.syntaxhighlighter a, .syntaxhighlighter div, .syntaxhighlighter code, .syntaxhighlighter table, .syntaxhighlighter table td, .syntaxhighlighter table tr, .syntaxhighlighter table tbody, .syntaxhighlighter table thead, .syntaxhighlighter table caption, .syntaxhighlighter textarea {
    font-size: 16px!important;
}

.cnblogs_code, .cnblogs_code span, .cnblogs-markdown .hljs{
font-family:consolas, "Source Code Pro", monaco, monospace !important;
}

页首HTML代码

返回顶部

<!-- 返回顶部 -->
<style>
#back-top {
     position: fixed;
     bottom: 10px;
     right: 21px;
     z-index: 99;
}
#back-top span {
     width: 70px;
     height: 97px;
     display: block;
     background:url(https://images.cnblogs.com/cnblogs_com/blogs/749030/galleries/2333951/o_230809032628_%E4%BA%94%E6%9B%B4%E7%90%89%E7%92%83%20.png)round;
}
#back-top a{outline:none}
</style>
<script type="text/javascript">
$(function() {
    // hide #back-top first
    $("#back-top").hide();
    // fade in #back-top
    $(window).scroll(function() {
        if ($(this).scrollTop() > 400) {
            $('#back-top').fadeIn();
        } else {
            $('#back-top').fadeOut();
        }
    });
    // scroll body to 0px on click
    $('#back-top a').click(function() {
        $('body,html').animate({
            scrollTop: 0
        }, 500);
        return false;
    });
});
</script>
<p id="back-top" style="display:none"><a href="#top"><span></span></a></p>

页脚HTML代码

代码美化（和页面定制中的代码美化一起使用）

<!-- 代码美化 -->
<script src="http://files.cnblogs.com/files/flipped/prettify.js"></script>
<script type="text/javascript">
(function() {
     $("pre").addClass("prettyprint");
     prettyPrint();
})();
</script>

烟花点击特效（未启用）

<!-- <script src="https://blog-static.cnblogs.com/files/yjlblog/cursor-effects.js"></script>
<canvas width="1366" height="662" style="position: fixed; left: 0px; top: 0px; z-index: 2147483647; pointer-events: none;"></canvas> -->

开始多级目录

<script language="javascript" type="text/javascript">
// 生成目录索引列表
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>

右下角目录

<script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="https://files.cnblogs.com/files/blogs/749030/marvin.nav.my1502.css" rel="stylesheet">
<script type="text/javascript" src="https://files.cnblogs.com/files/blogs/749030/marvin.cnblogs.js"></script>
<script type="text/javascript" src="https://files.cnblogs.com/files/blogs/749030/marvin.nav.my1502.WhiteTears.js"></script>

网易云音乐

注释掉的为第二种，未启用

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/APlayer.min.css">
<script src="https://blog-static.cnblogs.com/files/zouwangblog/APlayer.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/Meting.min.js"></script>
<div id="player" class="aplayer aplayer-withlist aplayer-fixed" data-id="2222292422" data-server="netease" data-type="playlist" data-order="random" data-fixed="true" data-autoplay="true" data-listfolded="false" data-theme="orange"></div>

<!--网易云音乐-->
<!-- <link rel="stylesheet" href="https://blog-static.cnblogs.com/files/blogs/693306/APlayer.min.css">
<script src="https://blog-static.cnblogs.com/files/blogs/693306/APlayer.min.js"></script>
<div id="aplayer" class="aplayer" data-order="random" data-id="2222292422" data-server="netease" data-type="playlist" data-fixed="true" data-autoplay="true" data-volume="0.6"></div>
<script src="https://blog-static.cnblogs.com/files/blogs/693306/Meting.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/kaygb/kaygb@master/js/v3.js"></script>
<script src="https://blog-static.cnblogs.com/files/blogs/693306/jquery.min.js"></script>
<script src="https://blog-static.cnblogs.com/files/blogs/693306/layer.js"></script> -->

标签：cnblogs,color,博客园,list,li,content,top,美化
From： https://www.cnblogs.com/Clannad21/p/17622121.html