博客主题分享

样式展示

部署教程

设置选项

设置皮肤

页面定制CSS代码（不禁用默认样式）

/* ===========================
   作者信息卡
=========================== */

#freps-author-card{
    width:100%;
    background:#fff;
    border-radius:14px;
    text-align:center;
    padding:0px 20px;
    box-sizing:border-box;
    transition:.3s;
}



#freps-author-card img{
       width: 190px;
    height: 190px;
    /* border-radius: 50%; */
    object-fit: cover;
    border: 4px solid #fff;
    box-shadow: 0 5px 15px rgba(0,0,0,.2);
}

#freps-author-card h2{
    margin:15px 0 5px;
    font-size:28px;
    font-weight:600;
    color:#333;
}

#freps-author-card .job{
    color:#666;
    margin-top:8px;
    font-size:15px;
}

#freps-author-card .skill{
    margin-top:10px;
    color:#555;
    font-size:16px;
}

#freps-author-card hr{
    margin:20px 0;
    border:none;
    border-top:1px solid #eee;
}

#freps-author-card .tags{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:8px;
}

#freps-author-card .tags span{
    background:#409EFF;
    color:#fff;
    border-radius:20px;
    padding:5px 12px;
    font-size:13px;
}

#freps-author-card .bottom{
    margin-top:18px;
    color:#666;
    font-size:15px;
}



.profile{
    margin-top:15px;
}

.profile div{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:8px 0;
    border-bottom:1px dashed #eee;
    font-size:14px;
}

.profile div:last-child{
    border-bottom:none;
}

.profile span:first-child{
    color:#666;
}

.profile span:last-child{
    color:#333;
    font-weight:600;
}
.catListTitle{
    display: none;
}

/* ==========================
   文章目录
========================== */

#freps-toc{
        position: fixed;

    top: 50px;

    left: calc(50% + 535px);

    width: 180px;

    max-height: calc(100vh - 120px);

    overflow-y: auto;

    background: #fff;

    box-shadow: 0 8px 25px rgba(0,0,0,.08);

    padding: 15px;

    z-index: 999;
}

#freps-toc-title{
    font-size:18px;
    font-weight:700;
    color:#333;
    margin-bottom:15px;
    border-bottom:1px solid #eee;
    padding-bottom:10px;
}

#freps-toc ul{
    list-style:none;
    padding:0;
    margin:0;
}

#freps-toc li{
    margin:6px 0;
}

#freps-toc a{
    display:block;
    text-decoration:none;
    color:#666;
    font-size:14px;
    line-height:1.7;
    transition:.25s;
}

#freps-toc a:hover{
    color:#409EFF;
    padding-left:6px;
}

#freps-toc .lv2{
    padding-left:15px;
}

#freps-toc .lv3{
    padding-left:30px;
}

#freps-toc a.active{
    color:#409EFF;
    font-weight:bold;
}

页脚HTML代码

<script>

window.addEventListener("load",function(){

  
    var notice=document.querySelector("#blog-news");

    if(!notice) return;

    /* 清空公告默认内容（昵称、粉丝等） */
    notice.innerHTML = "";
    var card=document.createElement("div");

    card.id="freps-author-card";

    card.innerHTML = `
    <img src="https://images.cnblogs.com/cnblogs_com/blogs/832937/galleries/2425615/o_260412025005_photo_2026-04-12_10-41-10.jpg">

    <h2>freps</h2>



    <div class="profile">
        <div><span>👤 昵称</span><span>freps</span></div>
        <div><span>📅 园龄</span><span>1年8个月</span></div>
        <div><span>⭐ 粉丝</span><span>4</span></div>
        <div><span>❤️ 关注</span><span>6</span></div>
    </div>


`;

    notice.appendChild(card);

});
window.addEventListener("load",function(){

    const article=document.querySelector("#cnblogs_post_body");

    if(!article) return;

    const hs=article.querySelectorAll("h1,h2,h3");

    if(hs.length==0) return;

    const toc=document.createElement("div");

    toc.id="freps-toc";

    toc.innerHTML="<div id='freps-toc-title'>📑 目录导航</div><ul></ul>";

    document.body.appendChild(toc);

    const ul=toc.querySelector("ul");

    hs.forEach(function(h,index){

        if(!h.id){
            h.id="toc_"+index;
        }

        let li=document.createElement("li");

        let a=document.createElement("a");

        a.href="#"+h.id;

        a.innerText=h.innerText;

        a.className="lv"+h.tagName.substring(1);

        a.onclick=function(e){

            e.preventDefault();

            document.getElementById(h.id).scrollIntoView({

                behavior:"smooth",

                block:"start"

            });

        };

        li.appendChild(a);

        ul.appendChild(li);

    });

});

</script>