两分钟搞定博客园自定义样式

Posted 2022-03-20 lvonve

整体皮肤样式

选用的是在 SimpleMemory 基础上进行改造。所以注意：引用模板css样式取药取消勾选

将以下样式复制到 页面定制CSS代码 中：

#home h1
    font-size:45px;

body
// background-image: url("https://www.cnblogs.com/images/cnblogs_com/lvonve/1497718/o_%e5%be%ae%e4%bf%a1%e5%9b%be%e7%89%87_20190706122237.jpg"); 
background-position: initial; background-size: cover; background-repeat: no-repeat; background-attachment: fixed; background-origin: initial; background-clip: initial;
height:100%;
width:100%;

#home
    opacity:0.7;

.wall
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;

div#midground
    background: url("https://i.postimg.cc/PP5GtGtM/midground.png");
    z-index: -1;
    -webkit-animation: cc 200s linear infinite;
    -moz-animation: cc 200s linear infinite;
    -o-animation: cc 200s linear infinite;
    animation: cc 200s linear infinite;

div#foreground
    background: url("https://i.postimg.cc/z3jZZD1B/foreground.png");
    z-index: -2;
    -webkit-animation: cc 253s linear infinite;
    -o-animation: cc 253s linear infinite;
    -moz-animation: cc 253s linear infinite;
    animation: cc 253s linear infinite;

div#top
    background: url("https://i.postimg.cc/PP5GtGtM/midground.png");
    z-index: -4;
    -webkit-animation: da 200s linear infinite;
    -o-animation: da 200s linear infinite;
    animation: da 200s linear infinite;

@-webkit-keyframes cc 
    from
        background-position: 0 0;
        transform: translateY(10px);
    
    to
        background-position: 600% 0;
    

@-o-keyframes cc 
    from
        background-position: 0 0;
        transform: translateY(10px);
    
    to
        background-position: 600% 0;
    

@-moz-keyframes cc 
    from
        background-position: 0 0;
        transform: translateY(10px);
    
    to
        background-position: 600% 0;
    

@keyframes cc 
    0%
        background-position: 0 0;
    
    100%
        background-position: 600% 0;
    


@keyframes da 
    0%
        background-position: 0 0;
    
    100%
        background-position: 0 600%;
    

@-webkit-keyframes da 
    0%
        background-position: 0 0;
    
    100%
        background-position: 0 600%;
    

@-moz-keyframes da 
    0%
        background-position: 0 0;
    
    100%
        background-position: 0 600%;
    

@-ms-keyframes da 
    0%
        background-position: 0 0;
    
    100%
        background-position: 0 600%;
    

然后在 页首Html代码中添加：

<div id="midground" class="wall"></div>
<div id="foreground" class="wall"></div>
<div id="top" class="wall"></div>

添加看板萌娘

在 博客侧边栏公告（支持HTML代码）（支持JS代码） 中添加：

<script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>

<script>
setTimeout(() => 
    L2Dwidget.init(
        "model": 
            jsonPath: "https://unpkg.com/[email protected]/assets/shizuku.model.json",
            "scale": 1
        ,
        "display": 
            "position": "right",
            "width": 100,
            "height": 200,
            "hOffset": 0,
            "vOffset": -20
        ,
        "mobile": 
            "show": true,
            "scale": 0.5
        ,
        "react": 
            "opacityDefault": 1,
            "opacityOnHover": 0.2
        
    );
, 1000)
</script>

<!--
其他可选的模型：
黑猫：https://unpkg.com/[email protected]/assets/hijiki.model.json
萌娘：https://unpkg.com/[email protected]/assets/shizuku.model.json
白猫：https://unpkg.com/[email protected]/assets/tororo.model.json
狗狗：https://unpkg.com/[email protected]/assets/wanko.model.json
小可爱：https://unpkg.com/[email protected]/assets/z16.model.json
小可爱：https://unpkg.com/[email protected]/assets/koharu.model.json
-->

注意：如果没有开通js代码权限，需要发送邮件到博客园邮箱申请开通，否则无效。

增加鼠标点击样式

还是在 博客侧边栏公告（支持HTML代码）（支持JS代码） 中添加：

<script src="https://blog-static.cnblogs.com/files/e-cat/cursor-effects.js"></script>

文章增加目录

在 页脚Html代码 中添加：

<script language="javascript" type="text/javascript">
// 生成目录索引列表
// ref: http://www.cnblogs.com/wangqiguo/p/4355032.html
// modified by: zzq
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>

至此，页面基本上效果已经达到我想要的效果，希望能帮助到你。