注意:

教程来源至网络

自定义CSS

本站所有CSS代码

/*底部页脚*/
.github-badge {
    display: inline-block;
    border-radius: 4px;
    text-shadow: none;
    font-size: 12px;
    color: #fff;
    line-height: 15px;
    background-color: #ABBAC3;
  margin-bottom: 5px;
}
.github-badge .badge-subject {
    display: inline-block;
    background-color: #4D4D4D;
    padding: 4px 4px 4px 6px;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}
.github-badge .badge-value {
    display: inline-block;
    padding: 4px 6px 4px 4px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}
.github-badge .bg-brightgreen {
    background-color: #4DC820 !important;
}
.github-badge .bg-orange {
    background-color: #FFA500 !important;
}
.github-badge .bg-blueviolet {
    background-color: #8833D7 !important;
}
.github-badge .bg-firebrick {
    background-color: #EE2C2C !important;
}
.github-badge .bg-blue {
    background-color: #007EC6 !important;
}
.github-badge .bg-lightgrey {
    background-color: #9F9F9F !important;
}
.github-badge .bg-grey, .github-badge .bg-gray {
    background-color: #555 !important;
}
.github-badge .bg-lightgrey, .github-badge .bg-lightgray {
    background-color: #9f9f9f !important;
}

<!--代码框美化-->
#post-content pre code {
    display:block;
    overflow-x:auto;
    position:relative;
    margin:0;
    padding-left:50px;
}
pre code {
    position:relative;
    display:block;
    overflow-x:auto;
    margin:4.4px 0.px .4px 1px;
    padding:0;
    max-height:500px;
    padding-left:3.5em
}

/*文章内打赏图标跳动*/
.btn-pay {
    animation: star 0.5s ease-in-out infinite alternate;
}

@keyframes star {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.1);
    }
}

/*首页文章列表悬停上浮*/
.blog-post .panel:not(article) {
transition: all 0.3s;
}

.blog-post .panel:not(article):hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 10px rgba(73, 90, 47, 0.47);
}

/*首页头图悬停放大并超出范围*/
.index-post-img {
    overflow: hidden;
}

.item-thumb {
    transition: all 0.3s;
}

.item-thumb:hover {
    transform: scale(1.1)
}


/*文章内头图和图片悬停放大并超出范围*/
.entry-thumbnail {
    overflow: hidden;
}

#post-content img {
    border-radius: 10px;
    transition: 0.5s;
}

#post-content img:hover {
    transform: scale(1.05);
}

/*右侧导航栏图标颜色*/
.glyphicon-fire {
    color: #ff0000;
}
.nav-tabs-alt .glyphicon-comment {
    color: #495dc3;
}
.glyphicon-transfer {
    color: #0e5458;
}

/*文章标题居中*/
.panel h2{
    text-align: center; 
}
.post-item-foot-icon{
    text-align: center;
}

/*标签云*/
#tag_cloud-2 a {
border-radius: 5px;
width: 32%;
}

自定义JavaScript

自定义JavaScript

/*彩色标签云*/
let tags = document.querySelectorAll("#tag_cloud-2 a");
let infos = document.querySelectorAll(".badge");
let colorArr = ["#428BCA", "#AEDCAE", "#ECA9A7", "#DA99FF", "#FFB380", "#D9B999"];
tags.forEach(tag => {
    tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
    tag.style.backgroundColor = tagsColor;
});
infos.forEach(info => {
    infosColor = colorArr[Math.floor(Math.random() * colorArr.length)];
    info.style.backgroundColor = infosColor;
});

<!--自定义音乐播放器音量-->
setTimeout(function (){    document.querySelector(".skPlayer-source").volume=0.3;}, 3000);

自定义输出body 尾部的HTML代码

自定义输出body 尾部的HTML代码

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>
        <style type="text/css">
            a {text-decoration: none;}
            div.usercm{background-repeat:no-repeat;background-position:center center;background-size:cover;background-color:#fff;font-size:13px!important;width:130px;-moz-box-shadow:1px 1px 3px rgba
        (0,0,0,.3);box-shadow:0px 0px 15px #333;position:absolute;display:none;z-index:10000;opacity:0.9; border-radius: 8px;}
            div.usercm ul{list-style-type:none;list-style-position:outside;margin:0px;padding:0px;display:block}
            div.usercm ul li{margin:0px;padding:0px;line-height:35px;}
            div.usercm ul li a{color:#666;padding:0 15px;display:block}
            div.usercm ul li a:hover{color:#fff;background:rgba(170,222,18,0.88)}
            div.usercm ul li a i{margin-right:10px}
            a.disabled{color:#c8c8c8!important;cursor:not-allowed}
            a.disabled:hover{background-color:rgba(255,11,11,0)!important}
            div.usercm{background:#fff !important;}
            </style>
        <div class="usercm" style="left: 199px; top: 5px; display: none;">
            <ul>
                <li><span class="external-link"><a class="no-external-link" href="https://blog.imvsl.top" target="_blank"><i class="fa fa-home fa-fw"></i><span>首页</span><i data-feather='external-link'></i></a></span></li>
                <li><a href="javascript:void(0);" onclick="getSelect();"><i class="fa fa-copy fa-fw"></i><span>复制</span></a></li>
                <li><a href="javascript:void(0);" onclick="baiduSearch();"><i class="fa fa-search fa-fw"></i><span>搜索</span></a></li>
                <li><a href="javascript:history.go(1);"><i class="fa fa-arrow-right fa-fw"></i><span>前进</span></a></li>
                <li><a href="javascript:history.go(-1);"><i class="fa fa-arrow-left fa-fw"></i><span>后退</span></a></li>
                <li style="border-bottom:1px solid gray"><a href="javascript:window.location.reload();"><i class="fa fa-refresh fa-fw"></i><span>重载网页</span></a></li>
                <li><span class="external-link"><a class="no-external-link" href="https://blog.imvsl.top/index.php/link.html" target="_blank"><i class="fa fa-meh-o fa-fw"></i><span>和我当邻居</span><i data-feather='external-link'></i></a></span></li>  
                   <li><span class="external-link"><a class="no-external-link" href="https://blog.imvsl.top/index.php/talk.html" target="_blank"><i class="fa fa-pencil-square-o fa-fw"></i><span>给我留言吧</span><i data-feather='external-link'></i></a></span></li>
            </ul>
        </div>
        <script type="text/javascript">
            (function(a) {
                a.extend({
                    mouseMoveShow: function(b) {
                        var d = 0,
                            c = 0,
                            h = 0,
                            k = 0,
                            e = 0,
                            f = 0;
                        a(window).mousemove(function(g) {
                            d = a(window).width();
                            c = a(window).height();
                            h = g.clientX;
                            k = g.clientY;
                            e = g.pageX;
                            f = g.pageY;
                            h + a(b).width() >= d && (e = e - a(b).width() - 5);
                            k + a(b).height() >= c && (f = f - a(b).height() - 5);
                            a("html").on({
                                contextmenu: function(c) {
                                    3 == c.which && a(b).css({
                                        left: e,
                                        top: f
                                    }).show()
                                },
                                click: function() {
                                    a(b).hide()
                                }
                            })
                        })
                    },
                    disabledContextMenu: function() {
                        window.oncontextmenu = function() {
                            return !1
                        }
                    }
                })
            })(jQuery);

            function getSelect() {
                "" == (window.getSelection ? window.getSelection() : document.selection.createRange().text) ? layer.msg("啊噢...你没还没选择文字呢!") : document.execCommand("Copy")
            }
            function baiduSearch() {
                var a = window.getSelection ? window.getSelection() : document.selection.createRange().text;
                "" == a ? layer.msg("啊噢...你没还没选择文字呢!") : window.open("https://www.baidu.com/s?wd=" + a)
            }
            $(function() {
                for (var a = navigator.userAgent, b = "Android;iPhone;SymbianOS;Windows Phone;iPad;iPod".split(";"), d = !0, c = 0; c < b.length; c++) if (0 < a.indexOf(b[c])) {
                    d = !1;
                    break
                }
                d && ($.mouseMoveShow(".usercm"), $.disabledContextMenu())
            });
            </script>

首页列表最前方广告位

首页列表最前方广告位

<!--倒计时开始--> <center><div class="gn_box"> <h1><font color=#E80017>2</font><font color=#D1002E>0</font><font color=#BA0045>2</font><font color=#A3005C>1</font><font color=#8C0073>年</font><font color=#75008A>-</font><font color=#5E00A1>新</font><font color=#4700B8>年</font><font color=#3000CF>倒</font><font color=#1900E6>计</font><font color=#0200FD>时</font> </h1> <center> <div id="CountMsg" class="HotDate"> <span id="t_d">157 天</span> <span id="t_h">9 时</span> <span id="t_m">7 分</span> <span id="t_s">42 秒</span> </div> </center> <script type="text/javascript"> function getRTime() { var EndTime = new Date('2021/02/12 00:00:00'); var NowTime = new Date(); var t = EndTime.getTime() - NowTime.getTime(); var d = Math.floor(t / 1000 / 60 / 60 / 24); var h = Math.floor(t / 1000 / 60 / 60 % 24); var m = Math.floor(t / 1000 / 60 % 60); var s = Math.floor(t / 1000 % 60); document.getElementById("t_d").innerHTML = d + " 天"; document.getElementById("t_h").innerHTML = h + " 时"; document.getElementById("t_m").innerHTML = m + " 分"; document.getElementById("t_s").innerHTML = s + " 秒"; } setInterval(getRTime, 1000); </script> </div> <!--倒计时结束-->

博客底部左侧信息

博客底部左侧信息

<!-- 左侧底部 -->
    <div class="github-badge">
     <a href="./" title="©2021 守兰の博客">
      <span class="badge-subject">Copyright</span><span class="badge-value bg-blue">©2021 守兰の博客</span>
       </a>
      </div>
 | 
     <div class="github-badge">
    <a href="https://beian.miit.gov.cn/" target="_blank" title="晋ICP备2020008631号" style="pointer;">
   <span class="badge-subject"><img src="usr/themes/bj/beian.png" style="height: 1em;"> 晋ICP备</span><span class="badge-value bg-green">2020008631号</span>
</a>
</div>

博客底部右侧信息

博客底部右侧信息

<!-- 右侧底部 -->
     <span class="pull-right hidden-xs text-ellipsis">
      <?php $this->
       <div class="github-badge">
        <a href="http://www.typecho.org" target="_blank" title="由 Typecho 强力驱动" style="pointer;">
         <span class="badge-subject">Theme</span><span class="badge-value bg-blue">Typecho</span>
          </a>
         </div>
 |  
        <div class="github-badge">
       <a href="https://www.ihewro.com/archives/489/" target="_blank" title="Theme by Handsome" style="pointer;">
      <span class="badge-subject">Theme</span><span class="badge-value bg-orange">Handsome</span>
</a>
</div>
</span>

PJAX回调函数

PJAX回调函数

/*代码框*/
if (typeof Prism !== 'undefined') {
var pres = document.getElementsByTagName('pre');
                for (var i = 0; i < pres.length; i++){
                    if (pres[i].getElementsByTagName('code').length > 0)
                        pres[i].className  = 'line-numbers';}
Prism.highlightAll(true,null);}
/*彩色标签云*/
let tags = document.querySelectorAll("#tag_cloud-2 a");
let infos = document.querySelectorAll(".badge");
let colorArr = ["#428BCA", "#AEDCAE", "#ECA9A7", "#DA99FF", "#FFB380", "#D9B999"];
tags.forEach(tag => {
    tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
    tag.style.backgroundColor = tagsColor;
});
infos.forEach(info => {
    infosColor = colorArr[Math.floor(Math.random() * colorArr.length)];
    info.style.backgroundColor = infosColor;
});

施舍一下可怜的守兰吧~