笑死~我的博客美化脚本分享

前置提醒

本页面使用魔法代码，与其他页面的代码块不同，本页所有代码块不自动换行。

使用如下代码实现：

<style>
.cnblogs-markdown pre code, .blogpost-body pre code { white-space: nowrap !important; }
</style>

基本设置

博客皮肤：facebook
JS权限：已开通

渲染引擎：highlight.js
显示行号，取消 Mac 风格
代码字体：默认
系统浅色模式时主题：stackoverflow-light

侧边栏

My Skills 使用：https://skillicons.dev

页面定制 CSS 代码

全面去广告 + 美化。

/* base */
@keyframes spin3D{from{transform:rotate3d(0.5,0.5,0.5,360deg)}to{transform:rotate3d(0deg)}}#loading{height:100%;background-color:#1d2630;display:flex;justify-content:center;align-items:center;position:fixed;top:0;left:0;right:0;overflow:hidden;z-index:99999999}.spinner-box{width:300px;height:300px;display:flex;justify-content:center;align-items:center;background-color:transparent}.leo{position:absolute;display:flex;justify-content:center;align-items:center;border-radius:50%}.blue-orbit{width:165px;height:165px;border:1px solid #91daffa5;animation:spin3D 3s linear .2s infinite}.green-orbit{width:120px;height:120px;border:1px solid #91ffbfa5;animation:spin3D 2s linear 0s infinite}.red-orbit{width:90px;height:90px;border:1px solid #ffca91a5;animation:spin3D 1s linear 0s infinite}.white-orbit{width:60px;height:60px;border:2px solid #fff;animation:spin3D 10s linear 0s infinite}.w1{transform:rotate3D(1,1,1,90deg)}.w2{transform:rotate3D(1,2,0.5,90deg)}.w3{transform:rotate3D(0.5,1,2,90deg)}
/* font */
html, body { font-feature-settings: "liga", "kern"; }
h1, h2, h3 { font-feature-settings: "kern", "dlig"; }
/* body */
body, text, code { font-family: Consolas, 'LXGW WenKai GB' !important; }
#blogTitle { left: -148px; top: 20px; }
/* ads */
#top_nav, #bannerbar { display: none !important; }
#ad_t1, #ad_t2 { display: none !important; }
#green_channel, #post_next_prev { display: none !important; }
#commentform_title { display: none !important; }
#under_post_card1, #under_post_card2, #cnblogs_ch, .under-post-card, #cnblogs_c1, #cnblogs_c2 { display: none !important; }
.bannerbar forpc { display: none !important; }
.bannerbar { display: none !important; }
#blog_post_info, .comment-nav-left { display: none !important; }
/* list */
#pprcontent { font-size: 14px; line-height: 22px; }
#blog_post_info_block { margin-top: 20px; border: none; border-top: 1px solid #ccc; }
#BlogCollection { margin-top: 10px; }
.comment-nav-right { margin-left: none; margin: 0 auto; }
.current-collection, .commentbox_main, .comment_textarea, .title-link, .div_my_zzk, #commentbox_opt, img, #comment_form_container { margin: 0 auto; text-align: center; }
.entrylistItem { margin-left: 20px; margin-top: 10px; margin-right: 20px; }
.entrylistItemTitle { font-size: 13px; }
.share-button { width: 20%; padding: 0.25em 1em; text-align: center; }
.share-fb { color: #fff; background-color: #1877F2; border-color: #1877F2; }
.share-tg { color: #fff; background-color: #2481cc; border-color: #2481cc; }
.share-wb { color: #fff; background-color: #b31616; border-color: #b31616; }
.share-em { color: #fff; background-color: #7f7f7f; border-color: #7f7f7f; }
/* code */
.MathJax span { line-height: 0; }
.MathJax { overflow: hidden !important; width: auto !important; }
.menu  { font-size: 12px; }
#EntryTag { color: #000; }
.postTitle { text-align: center; }
code[class*="language-"], pre[class*="language-"] { white-space: pre-wrap; }
/* post */
#cnblogs_post_body p { font-size: 16px; }
#cnblogs_post_body ul, #cnblogs_post_body ol, #cnblogs_post_body table, #cnblogs_post_body summary:not(pre), #cnblogs_post_body center { font-size: 15px; }
#cnblogs_post_body .toc-container-header { font-size: 16px; font-weight: bold; margin-left: 29px; }
#cnblogs_post_body h1 { font-size: 32px; text-align: center; }
#cnblogs_post_body h2 { text-align: center; font-size: 25px; text-decoration: underline #bbb; }
#cnblogs_post_body h3 { text-align: center; font-size: 18px; }
#cnblogs_post_body h4 { font-size: 18px; }
#cnblogs_post_body h5 { font-size: 14px; }
#cnblogs_post_body .table-wrapper { overflow-y: hidden; }
/* print */
@media print {
    body { min-height: auto !important; }
    .inline, .table-wrapper, .display, summary { page-break-inside: avoid !important; }
    .no-print, .cnblogs-toc-button, .postDesc, #scroll-page-top, .cnb-code-toolbar, .CtxtMenu_MenuFrame, .nbnhhsh-box, .nbnhhsh-box-pop, #blog-comments-placeholder, #MyShare { display: none !important; }
}
/* back */
html { scroll-behavior: smooth; }

页首 HTML 代码

主要是一些框架和 CDN 上的 JS。

<div id="loading">
    <div class="spinner-box">
        <div class="blue-orbit leo"></div>
        <div class="green-orbit leo"></div>
        <div class="red-orbit leo"></div>
        <div class="white-orbit w1 leo"></div>
        <div class="white-orbit w2 leo"></div>
        <div class="white-orbit w3 leo"></div>
    </div>
</div>

<div id="scroll-page-top" style="display: block; position: fixed; bottom: 20px; right: 20px; padding: 6px; color: #FFF; background-color: #AAA; opacity: 0.7; border-radius: 20px; cursor: pointer; z-index: 999;"><span class="icon-circle-arrow-up" aria-hidden="true"></span> Page Top</div>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize-opentype.css/0.2.4/normalize-opentype.min.css" integrity="sha512-C7dUXX4Gjv3oOFwuIJ2bMn+ZDvAlCLKH5JKzHMYVQUecTEVkHzu/SL5N6hkyOWyUdV13EIZDukiFcAl9LU/hAg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lxgw-wenkai-webfont/1.7.0/style.min.css" integrity="sha512-YZW7jSV4QrwpPzFxB77lAW4qNIeS6RaipaStONrpmbJsyh3zxM/3VoeQrrGlYkNS5nIjsKFURRHnsKhmE/vWmg==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.15.6/contrib/mathtex-script-type.min.js" integrity="sha512-MBhOGY4yRA2eATtRGTcrDJCRqcnLai5+uu47GA2ueVr1MPzirC/iogLWRA8CXTlOTK09VI4fdTe4qE4LBfjsHw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.15.6/contrib/mhchem.min.js" integrity="sha512-V1hl0fnOXW6Cdqe5ZVqtw8TBpJVpu3XRDRQti96j/04+tMarPrCdXEUE3UdfvfKYTpOn9DV4zEZBVr0HhDiuiQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.1/css/font-awesome.min.css" integrity="sha512-IJ+BZHGlT4K43sqBGUzJ90pcxfkREDVZPZxeexRigVL8rzdw/gyJIflDahMdNzBww4k0WxpyaWpC2PLQUWmMUQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/sharer.js/0.5.1/sharer.min.js" integrity="sha512-lMc8cG0mpFInehBNaFfAywToFq1hxBY7TgoTVCandnIR4KJ8lS6oXj3yWuyUE3TiEFPbD554Iq+KL5xKipPE4w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/heti/0.9.4/heti-addon.min.js" integrity="sha512-GChf2qekcjrSoPicCypQLPqkaZkEnkcsJr85AmkczY0HG5SkfbxOmZY6RoFJLdoeKTGk8EZvkRBaF7BIqV1Ipw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/heti/0.9.4/heti.min.css" integrity="sha512-/My2cHBMxofuHmAIIK29zje0pIqA2iCC9HDMa76E1jzK5u+wudGzJMMnTsdA5FmVGsoXB1xoJM7fKhniOhz+HA==" crossorigin="anonymous" referrerpolicy="no-referrer" />

页脚 HTML 代码

主要是 JS 脚本和触发一类的。

<script defer>
function todetails() {
    const details = document.querySelectorAll("details"); details.forEach((detail) => { detail.setAttribute("open", true); });
} function toprint() {
    todetails(); document.body.style.zoom = '100%';
    const eles = ['#header', '#footer', '#sideBar', '#comment_form', '.cnblogs-toc-button', '.postDesc', '#scroll-page-top', '#blog-comments-placeholder', '#MyShare']; eles.forEach((ele) => { $(ele).hide(); });
    document.getElementById('home').style.overflow = 'hidden'; document.getElementById('main').style.overflow = 'hidden';
    document.getElementById('home').style.width = '100%'; document.getElementById('main').style.width = '100%';
    var ele = document.getElementById('mainContent'); ele.style.border = 'none'; ele.style.float = 'none'; ele.style.width = '100%'; ele.style.left = '-10px'; ele.style.top = '0';
} function rdprint() {
    toprint(); setTimeout(function () { if (confirm("请等待网页公式加载完毕...")) window.print(); }, 100);
}

window.onload = function () {
    $("#loader-inner").fadeOut(300);
    $("#loading").fadeOut(300);
    var parent = document.getElementById("MySignature");
    var div = document.createElement("div");
    div.setAttribute("id", "MyShare");
    div.setAttribute("style", "margin: 0 auto; text-align:right;");
    div.innerHTML = "<br><button class=\"button share-button share-fb\" data-sharer=\"facebook\" data-hashtag=\"RainPPR\" data-url=\"" + window.location.href + "\">Share on Facebook</button>&emsp;<button class=\"button share-button share-tg\" data-sharer=\"telegram\" data-title=\"Hey! Check out that URL\" data-url=\"" + window.location.href + "\">Share on Telegram</button>&emsp;<button class=\"button share-button share-wb\" data-sharer=\"weibo\" data-title=\"Hey! Check out that URL\" data-url=\"" + window.location.href + "\">Share on Weibo</button>&emsp;<button class=\"button share-button share-em\" data-sharer=\"email\" data-title=\"Awesome Url\" data-subject=\"Hey! Check out that URL\" data-to=\"[email protected]\" data-url=\"" + window.location.href + "\">Share via Email</button>";
    parent.appendChild(div);
};

$(document).ready( function () {
    $(window).scroll ( function () {
        if ($ (this).scrollTop () > 200) {  $('#scroll-page-top, #scroll-page-top-new').fadeIn(); }
        else { $('#scroll-page-top, #scroll-page-top-new').fadeOut(); }
    }); $('#scroll-page-top, #scroll-page-top-new').click( function() { $('html,body').animate({scrollTop: 0}, 500); return false; });
    $('#scroll-page-top, #scroll-page-top-new').hover( function () {
        $(this).animate({'opacity':'1'}).css({'background-color':'#e7ebf0','color':'#6a86a4'});
    }, function () {
        $(this).animate({'opacity':'0.7'}).css({'background':'#AAA','color':'#FFF'});;
    });
});
</script>