主要参考博客与问题
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> </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