美化效果图

步骤

此美化仅适用于Handsome主题

第一步:

下载下方JS文件或复制代码新建JS文件,并放到网站文件夹目录下用以引用。

$(document).ready(function () {
    //页脚版权信息
    var copyrightInfo =
        '<div class="github-badge">\n' +
        '    <a href="https://idc.3123.ws" target="_blank" title="由乐云提供云计算服务">\n' +
        '        <span class="badge-subject">服务器</span>\n' +
        '        <span class="badge-value bg-blue">乐云</span>\n' +
        '    </a>\n' +
        '</div>' +
        '&nbsp;|&nbsp;\n' +
        '<div class="github-badge">\n' +
        '    <a href="http://typecho.org/" target="_blank" title="小言u博客基于Typecho搭建">\n' +
        '        <span class="badge-subject">程序</span>' +
        '        <span class="badge-value bg-orange">Typecho</span>\n' +
        '    </a>\n' +
        '</div>'
    //备案号信息
    var recodeInfo =
        '<div class="github-badge">\n' +
        '    <a href="" target="_blank" title="">\n' +
        '        <span class="badge-subject">Copyright</span>' +
        '        <span class="badge-value bg-blue">©2020-2021</span>\n' +
        '    </a>\n' +
        '</div>'
        '</div>' +
        '&nbsp;|&nbsp;\n' +
        '<div class="github-badge">\n' +
        '    <a href="http://www.beian.miit.gov.cn" target="_blank" title="">\n' +
        '        <span class="badge-subject">VPS</span>' +
        '        <span class="badge-value bg-brightgreen">HongKong</span>\n' +
        '    </a>\n' +
        '</div>';
        
    $('#footer span.pull-right').html(copyrightInfo);
    $('#footer span.text-ellipsis').last().html(recodeInfo);

})

第二步:

后台管理->外观->设置外观->开发者设置->自定义CSS
并复制以下代码粘贴到上面

点击展开 查看代码

.github-badge {
    display: inline-block;
    border-radius: 4px;
    text-shadow: none;
    font-size: 12px;
    color: #fff;
    line-height: 15px;
    background-color: #4D4D4D;
    margin-bottom: 5px;
}
.github-badge .badge-subject {
    display: inline-block;
    background-color: #4D4D4D;
    padding: 4px 2px 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: #4c1 !important;
}
.github-badge .bg-green {
    background-color: #97CA00 !important;
}
.github-badge .bg-yellow {
    background-color: #dfb317 !important;
}
.github-badge .bg-yellowgreen {
    background-color: #a4a61d !important;
}
.github-badge .bg-orange {
    background-color: #fe7d37 !important;
}
.github-badge .bg-red {
    background-color: #ff2900 !important;
}
.github-badge .bg-blue {
    /* background-color: #007ec6 !important; */
    background-color: #39f !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;
}

第三步:

找到自定义Javascript(在自定义CSS下面)
并引用上方JS文件

<script type="text/javascript" src="https://zxz.ee/usr/plugins/yejiaostyle/footer.js"></script>
然后就可以查看效果啦~

最后修改:2024 年 07 月 14 日
如果觉得我的文章对你有用,请随意赞赏