Less is richness，基于less is more的博客园宽屏主题魔改

（修改于2024年8月14日）

1 写在前面

之前做过很多个人博客，都是做着玩的，资源托管在免费或低价的服务器上，也不经常维护，所以就一直不长久，最终还是选择了博客园。发现博客园可以自定义样式，于是试着给博客换了一个又一个主题。个人比较喜欢宽屏的样式，感觉LessIsMore主题布局比较好、也比较简洁，但是不够美观，打算对此进行魔改。

经过两天的F12+参考知乎掘金等网站+问豆包+调试，终于大功告成。

主题名字叫less is more，这是建筑师路德维希·密斯·凡德罗说过的一句话，意思是简单的东西往往带给人们的是更多的享受。魔改之后，就叫LessIsRichness吧。

2 魔改的设置（需要先申请js权限）

2.1 侧边公告栏

点击查看代码

<div class="blog-news-main" style="margin-top: 5px;">
公告内容
</div>
<div id="sidebar_about" class="sidebar-block"><div class="catListTag">
    <h3 class="catListTitle"><a href="https://www.cnblogs.com/xiins/tag/" class="sidebar-card-title-a">关于我</a></h3>
</div>
</div>
 
<div id="profile_avatar">
<a href="https://www.cnblogs.com/xiins">
<img src="https://pic.cnblogs.com/avatar/3501016/20240810101545.png" alt="Shu-How Z" 
class="img_avatar" width="85px" height="85px" style="border-radius:100%">
</a>
</div>

2.2 css代码

点击查看代码

body {font-family: Roboto,'Noto Sans SC', sans-serif，-apple-system,BlinkMacSystemFont,Helvetica Neue,Helvetica,Segoe UI,Arial,PingFang SC,miui,Hiragino Sans GB,Microsoft Yahei,sans-serif; 
    font-size: 14px !important; margin-top: 0px;
    color: #252933;
    background-color: rgb(244,246,249);}
    
    // <uniquifier>: Use a unique and descriptive class name
    // <weight>: Use a value from 100 to 900
 
    .noto-sans-sc-<uniquifier> {
    font-family: "Noto Sans SC", sans-serif;
    font-optical-sizing: auto;
    font-weight: <weight>;
    font-style: normal;
    }
 
    a,dt,dd{
        color: #252933;
        transition: background-color 0.25s ease;
        transition: color 0.25s ease;
        text-decoration: none!important;
    }
    a:hover,dt:hover,dd:hover,#sideBarTab h2:hover {
        color: #007fff;
        transition: background-color 0.25s ease;
        transition: color 0.25s ease;
    }
    
    #cnblogs_post_body h1 {
        font-size: 22px;
    }
    #cnblogs_post_body h2 {
        font-size: 20px;
    }
    h1, h2, h3, h4, h5, h6, th {
        color: #252933;
        transition: color 0.25s ease;
    }
    h1:hover, h2:hover, h3:hover, h4:hover, h5:hover, h6:hover, th:hover {
        color: #007fff;
        transition: color 0.25s ease;
    }
 
    code {
        font-size: 14px!important;
        border-radius: 5px!important;
        margin: 5px 0px 5px 0px!important;
    }
    
    #green_channel a {
        background: url() repeat-x;
        display: inline-block;
        padding: 3px 8px;
        color: #fff;
        text-decoration: none;
        font-weight: bold;
        cursor: pointer;
        margin-right: 10px;
        border-radius: 5px;
        -webkit-border-radius: 10px;
        box-shadow: 0 0px 0px rgba(0, 0, 0, .5);
        text-shadow: 0 -1px 1px rgba(0,0,0,.25);
        vertical-align: middle;
    }
    #main {
        margin: 20px;
    }
    
    #mainContent {
        background-color: rgb(255,255,255);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); 
        padding: 10px 0px 10px 0px;
    }
    #sideBar {
        background-color: rgb(255,255,255);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); 
        top: 60px;
        border: 0px;
        width: 260px;
        right: 17px;
        padding: 0 30px 20px 30px;
    }
    /*标题*/
    #blogTitle {
        display: flex;
        align-items: center;
        position: absolute;
        top: 5px;  /* 您可以根据实际需要调整这个值来控制标题距离导航的距离 */
        left: 20px;
        padding: 0px;
    }
    #Header1_HeaderTitle {
        background-color: #f2f3f5;
        border-radius: 25px;
        padding: 0px 20px 0px 20px;
        color: #007fff !important;
        font-family: Courier, 'Courier New', monospace;
        font-weight: 600;
    }
    
    #Header1_HeaderTitle:hover {
        color: #fff !important;
        background-color: #007fff;
    }
    
    .subtitle {
        margin: 5px 0px 0px 10px;
    }
    
    /*导航*/
    #header {
    position: fixed;
    top: 0px;
    width: 100%;
    z-index: 997;
    }
 
    #navigator {
        background-color: #fff;
        border-top: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
        border-width: 1px;
        height: 50px;
        line-height: 50px;
        color: #8a919f;
        padding-left: 250px;
        padding-right: 70px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); 
        border: 0px;
    }
    
    #navList li a {
        font-size: 15px!important;
        color: #8a919f;
        border-radius: 5px;
        padding: 7px 10px 7px 10px;
        margin: 0px;
        transition: color 0.5s ease!important;
    }
    
    #navList li a:hover {
        color: #007fff;
        transition: color 0.5s ease!important;
    }
    
    #navList li + li:before {
        content: "|";  /* 竖线内容 */
        margin-right: 20px;  /* 20 像素的右外边距 */
        color: #8a919f;  /* 竖线颜色为黑色 */
    }
    
    #stats_post_count,#stats_article_count,#stats_comment_count,#stats_total_view_count{
        margin-left: 10px;
    }
    
    
    /*日期归档*/
    .dayTitle {
        margin: 10px 0px 10px 30px;
    }
    .dayTitle a {
        color: #333;
        background-color: #f2f3f5;
        border-radius: 10px;
        padding: 5px 20px 5px 20px;
 
    }
 
    .dayTitle a:hover {
        background-color: #eaf5ff;
        color: #007fff;
    }
    
    /*首页左侧*/
    #mainContent {
        margin-top: 60px;
    }
 
    .postBody {
        color: #252933!important;
        font-size: 14px;}
    
    .forFlow {
        margin: 15px 30px 15px 30px;
    }
 
    .article-wrapper a.postTitle2.vertical-middle span {
        color: #252933!important;
        font-size: 18px!important;
        font-weight: 600!important;}
 
        .article-wrapper a.postTitle2.vertical-middle span:hover {
        color: #007fff!important;
    }
    
    #cb_post_title_url > span {
        color: #252933!important;
        font-size: 26px!important;
        font-weight: 600!important;}
 
    #cb_post_title_url > span:hover {
        color: #007fff!important;
    }
 
    .day img{
        border-radius: 5px;
    }
    
    
    .postDesc{
        color: #8a919f;
        transition: background-color 0.25s ease!important;
        padding-bottom: 0px;
    }
    .postDesc a{
        color: #fff !important;
        background-color: #bbb;
        border-radius: 3px;
        padding: 2px 10px 2px 10px;
        margin-left: 5px;
        transition: background-color 0.25s ease!important;
    }
    .postDesc a:hover{
        background-color: #8a919f;
    }
    
    .c_b_p_desc{
        color: #8a919f;
        line-height: 2;
        font-size: 14px;
        margin: 10px 0px 10px 0px;
    }
    
    .post-view-count,
    .post-comment-count,
    .post-digg-count
    {
        color: #8a919f;
        background-color: #f2f3f5;
        border-radius: 3px;
        padding: 2px 10px 2px 10px;
        margin-left: 5px;
    }
 
    .article-wrapper{
        padding: 15px 30px 15px 30px;
        font-size: 12px;
        color:#8a919f;
    }
    .article-wrapper:hover{
        background-color: rgb(247,248,250);
    }
    
    .PostListTitle, .entrylistTitle, .thumbTitle, .forFlow h3 div, .galleryTitle {
        font-size: 18px;
        font-weight: bold;
        margin: 0px 0px 10px 0px;
        text-align: left;
    }
 
    .postTitle{
        margin: 0px 0 0px;
    }
    .article-wrapper a[rel="nofollow"] {
        display: none;
    }
 
 
    /*内容页*/
 
    .author_avatar {border-radius: 100%;}
    .author_profile_info {margin: 10px 0px 0px 10px}
    #author_profile {
        width: 180px;
    }
    
    /*评论*/
    .comment_textarea {
        margin-top: 10px!important;
    }
    
    
    .comment_textarea{
        width: 100% !important;
    }
    
    .comment_digg,.comment_bury  {
        color: #333;
        background-color: #f2f3f5;
        border-radius: 10px;
        padding: 5px 5px 5px 5px;
    }
    
    .comment_digg:hover {
        background-color: #eaf5ff;
        color: #007fff;
    }
    .comment_bury:hover {
        background-color: rgb(223, 240, 255);
        color: #0040ff;
    }
    
    #div_digg .buryit, #div_digg .diggit {
        border-radius: 6px;
        cursor: pointer;
        height: 58px;
        margin: 0;
        padding-top: 0;
        text-align: center;
        width: 58px;
    }
    
    #div_digg .diggit {
        background: #ecfdf5;
        border: 1px solid #a7f3d0;
        color: #10b981;
        float: left;
    }
    #div_digg .diggit:hover {
        background: #a7f3d0;
        border: 1px solid #a7f3d0;
    }
    #div_digg .buryit {
        background: #f6f8fa;
        border: 1px solid #e5e7eb;
        color: #6b7280;
        float: right;
    }
    #div_digg .buryit:hover {
        background: #e5e7eb;
        border: 1px solid #e5e7eb;
    }
    
    #div_digg .diggit .diggnum {
        color: #10b981;
        font-size: 16px;
    }
    #div_digg .diggnum {
        line-height: 1.5em !important;
    }
    
    #div_digg .buryit .burynum {
        color: #6b7280;
        font-size: 16px;
    }
    #div_digg .burynum {
        line-height: 1.5em !important;
    }
    
    #digg_count:before {
        content: "▲";  /* 清空默认内容 */
        font-size: 18px;
        color: #10b981;
        display: block;
        margin: 5px 0px 2px 0px;
    }
    #bury_count:before {
        content: "▼";  /* 清空默认内容 */
        font-size: 18px;
        color: #6b7280;
        display: block;
        margin: 5px 0px 2px 0px;
    }
    
    
    .layer{
        color: #007fff;
        background-color: #eaf5ff;
        border-radius: 3px;
        padding: 2px 10px 2px 10px;
        margin-right: 10px;
        border: 1px solid #007fff;
    }
    .layer:hover{
        color: #fff;
        background-color: #007fff;
    }
    
    .feedbackCon{
        margin-top: 5px;
    }
    
    .comment_btn{
        color: #007fff;
        background-color: #eaf5ff;
        border-radius: 3px;
        padding: 5px 15px 5px 15px;
        margin-right: 10px;
        border: 1px solid #007fff;
        width:120px;
        height:32px;
    }
    .comment_btn:hover{
        color: #fff;
        background-color: #007fff;
    }
    
    .comment-nav-right a{
        color: #fff !important;
        background-color: #bbb;
        border-radius: 3px;
        padding: 2px 10px 2px 10px;
        margin-left: 5px;
    }
    .comment-nav-right a:hover{
        background-color: #8a919f;
    }
    
    /*摘要*/
    a[class="c_b_p_desc_readmore"] {
        background-color: rgb(255, 255, 255);  /* 初始背景色 */
        padding: 2px 15px 2px 15px;  /* 内边距，增加点击区域和美观度 */
        border-radius: 20px;  /* 圆角 */
        color: #007fff !important;  /* 文字颜色 */
        margin: 0px 0px 0px 5px;
        text-decoration: none !important;
        border: 1px solid #007fff;  
        transition: background-color 0.25s ease;
        transition: color 0.25s ease;
    }
    
    a[class="c_b_p_desc_readmore"]:hover {
        background-color: #eaf5ff;  /* 悬停时的背景色 */
        color: #007fff !important;  /* 悬停时的文字颜色 */
        border-color: #007fff !important;
        transition: background-color 0.25s ease;
        transition: color 0.25s ease;
    }
    
    /*底部*/
    #footer {
        color:#666;
        background-color: #fff;
        padding: 10px 10px 10px 10px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); 
    }
 
    
    /*侧栏*/
    .catListTitle {
        color: #666;
        font-size: 16px !important;
        line-height: 22px !important;
        font-weight: normal !important;
    }
    .blog-news-main +#sidebar_about,
    .sidebar-block +.sidebar-block,
    .sidebar-block +#sidebar_categories,
    .catListPostCategory +.catListPostArchive,
    #sideBarMain +#uprightsideBar
    {
        border-top: 1px dashed rgba(0, 0, 0, 0.2);
        margin-top: 10px;  /* 横线与上方元素之间的间距 */
    }
    .catListTitle:before,#sideBarTab h2:before {
        content: "■";  /* 清空默认内容 */
        color: #007fff;
        display: inline-block;
        margin-right: 10px;  /* 图标与文字之间的间距 */
    }
    
    .catListTitle a[href="https://www.cnblogs.com/xiins/post-categories"] {
        margin-left: -4px;
    }
    .catListTitle a[href="https://www.cnblogs.com/xiins/post-categories"] {
        margin-left: -4px;
    }
    
    .catListPostArchive h3.catListTitle {
        margin-left: -4px;
    }
    
    #sideBarTab h2 {
        font-size: 16px!important;
        font-weight: normal!important;
        color: #666;
        line-height: 22px !important;
    }
    
    #sideBarTab {
        margin-top: 10px;
    }
    
    #sideBarContents dd, dt {
        cursor: pointer;
        padding: 5px 10px 5px 10px;
        border-radius: 5px;
    }
    #sideBarContents dd:hover, dt:hover {
        background-color: #eaf5ff;
    }
    #sideBarContents dd{
        margin-left:0px;
    }
    #sideBarContents dd.indent3{
        margin-left:20px;
    }
    #sideBarContents dd.indent4{
        margin-left:40px;
    }
    #sideBarContents dd.indent5{
        margin-left:60px;
    }
    #sideBarContents dd.indent6{
        margin-left:80px;
    }
    
    #sidebar_toptags ul,#sidebar_categories ul {
        margin: 5px 0px 5px 0px;
    }
    
    #sidebar_toptags ul li a,#sidebar_categories ul li a {
        color: #007fff!important;
        background-color: #eaf5ff;
        border: 1px solid #007fff;
        border-radius: 3px;
        padding: 2px 10px 2px 10px;
        margin: 0px 0px 0px 5px;
        transition: background-color 0.25s ease;
        transition: color 0.25s ease;
    }
    
    #sidebar_toptags ul li a:hover,#sidebar_categories ul li a:hover {
        color: #eaf5ff !important;
        background-color: #007fff;
        transition: background-color 0.25s ease;
        transition: color 0.25s ease;
    }
    
 
    #sideBarContents dl dt, #sideBarContents dl dd {
    /* 分别设置目录标题和子项的样式 */
    margin-top: 5px;
    }
 
    /*公告栏关于我*/
    #profile_avatar a img {
        float: left;
        margin-right: 10px; 
        margin-top: 5px;
        border: 2px solid #fff;
        transition: border-color 0.5s ease;
    }
    
    #profile_avatar img:hover {
        border: 2px solid #007fff;
        transition: border-color 0.5s ease;
    }
 
    /*隐藏*/
    #cnblogs_ch,#opt_under_post,#under_post_card1,#under_post_card2,.follow-tip,.under-post-card,#commentform_title,.comment-nav-right {
        display: none;
    }
    .postDesc a[href='https://www.cnblogs.com/xiins'] {
        display: none;
    }
    /*wap*/
    @media (max-width: 767px) {
       #navList,.blogStats,.post-view-count,.post-comment-count,.post-digg-count {
            display: none;
        }
    
    
        #sideBar {
          width: 0 !important;
          height: 100%!important;  /* 占满整个屏幕高度 */
          position: absolute!important;  /* 绝对定位 */
          top: 0!important;
          left: 0!important;
          transition: width 0.5s ease!important;
          overflow: hidden!important;
          z-index: 999!important;  /* 确保在上方显示 */
          display: none!important;  /* 初始不显示 */
        }
    
        #sideBar.open {
          width: 100%!important;  /* 展开时占满整个屏幕宽度 */
          display: block!important;
        }
    
        .close-btn {
          position: absolute!important;
          top: 10px!important;
          right: 10px!important;
          cursor: pointer!important;
          z-index: 1000!important;  /* 确保在上方显示 */
          display: none;  /* 初始不显示叉号 */
        }
        .open-btn {
          position: absolute!important;
          top: 10px!important;
          right: 10px!important;
          cursor: pointer!important;
          z-index: 998!important;  /* 确保在上方显示 */
        }
    
        .close-btn,.open-btn {
        background-color: rgb(255, 255, 255);  /* 初始背景色 */
        padding: 2px 15px 2px 15px;  /* 内边距，增加点击区域和美观度 */
        border-radius: 20px;  /* 圆角 */
        color: #007fff !important;  /* 文字颜色 */
        margin: 0px 0px 0px 5px;
        text-decoration: none !important;
        border: 1px solid #007fff;  
        font-size: 18px;
        }
    
        .close-btn:hover,.open-btn:hover {
        background-color: #eaf5ff;  /* 悬停时的背景色 */
        color: #007fff !important;  /* 悬停时的文字颜色 */
        border-color: #007fff !important;
        }
    }
    
    @media (min-width: 768px) {
     .open-btn,.close-btn {
        display: none;
      }
    }
    
    /*其他*/
    img.commenter-vip-logo {
    height: 18px;
    vertical-align: middle;
    margin: 0px 0px 2px 1px;
    }
 
    #sideBar {
    position: absolute;
    }
 
    #profile_block a[href='https://home.cnblogs.com/u/xiins/'] {
        font-weight: 600;
    }
    #profile_block a[title='入园时间：2024-08-10'] {
        font-weight: normal!important;
    }
    #profile_block img.commenter-vip-logo {
    margin: 0px 0px 2px -3px!important;
    }

2.3 页首Html代码

点击查看代码

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@100..900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
 
<script type="text/javascript">
var BlogDirectory = {
    /*
        获取元素位置，距浏览器左边界的距离（left）和距浏览器上边界的距离（top）
    */
    getElementPosition:function (ele) {        
        var topPosition = 0;
        var leftPosition = 0;
        while (ele){              
            topPosition += ele.offsetTop;
            leftPosition += ele.offsetLeft;        
            ele = ele.offsetParent;     
        }  
        return {top:topPosition, left:leftPosition}; 
    },
 
    /*
    获取滚动条当前位置
    */
    getScrollBarPosition:function () {
        var scrollBarPosition = document.body.scrollTop || document.documentElement.scrollTop;
        return  scrollBarPosition;
    },
    
    /*
    移动滚动条，finalPos 为目的位置，internal 为移动速度
    */
    moveScrollBar:function(finalpos, interval) {
 
        //若不支持此方法，则退出
        if(!window.scrollTo) {
            return false;
        }
 
        //窗体滚动时，禁用鼠标滚轮
        window.onmousewheel = function(){
            return false;
        };
          
        //清除计时
        if (document.body.movement) { 
            clearTimeout(document.body.movement); 
        } 
 
        var currentpos =BlogDirectory.getScrollBarPosition();//获取滚动条当前位置
 
        var dist = 0; 
        if (currentpos == finalpos - 30) {//到达预定位置上方 30px，则解禁鼠标滚轮，并退出
            window.onmousewheel = function(){
                return true;
            }
            return true; 
        } 
        if (currentpos < finalpos - 30) {//未到达预定位置上方 30px，则计算下一步所要移动的距离
            dist = Math.ceil((finalpos - 30 - currentpos)/10); 
            currentpos += dist; 
        } 
        if (currentpos > finalpos - 30) { 
            dist = Math.ceil((currentpos - (finalpos - 30))/10); 
            currentpos -= dist; 
        }
        
        var scrTop = BlogDirectory.getScrollBarPosition();//获取滚动条当前位置
        window.scrollTo(0, currentpos);//移动窗口
        if(BlogDirectory.getScrollBarPosition() == scrTop)//若已到底部，则解禁鼠标滚轮，并退出
        {
            window.onmousewheel = function(){
                return true;
            }
            return true;
        }
        
        //进行下一步移动
        var repeat = "BlogDirectory.moveScrollBar(" + finalpos + "," + interval + ")"; 
        document.body.movement = setTimeout(repeat, interval); 
    },
    
    htmlDecode:function (text){
        var temp = document.createElement("div");
        temp.innerHTML = text;
        var output = temp.innerText || temp.textContent;
        temp = null;
        return output;
    },
 
 
        createBlogDirectory: function (id, mt, st, interval) {
            // 获取博文正文 div 容器
            var elem = document.getElementById(id);
            if (!elem) return false;
            // 获取 div 中所有元素结点
            var nodes = elem.getElementsByTagName("*");
            // 创建博客目录的 div 容器
            var divSideBar = document.createElement('DIV');
            divSideBar.className = 'uprightsideBar';
            divSideBar.setAttribute('id', 'uprightsideBar');
 
            // 将新创建的 div 放入指定的 div 中
            var sidebar = document.getElementById('sideBar');
            sidebar.appendChild(divSideBar);
 
            var divSideBarTab = document.createElement('DIV');
            divSideBarTab.setAttribute('id','sideBarTab');
            divSideBar.appendChild(divSideBarTab);
            var h2 = document.createElement('H2');
            divSideBarTab.appendChild(h2);
            var txt = document.createTextNode('目录导航');
            h2.appendChild(txt);
            var divSideBarContents = document.createElement('DIV');
            divSideBarContents.style.display = 'none';
            divSideBarContents.setAttribute('id', 'sideBarContents');
            divSideBar.appendChild(divSideBarContents);
            // 创建自定义列表
            var dlist = document.createElement("dl");
            divSideBarContents.appendChild(dlist);
            var num = 0;// 统计找到的 mt 和 st
            mt = mt.toUpperCase();// 转化成大写
            st = st.toUpperCase();// 转化成大写
            // 遍历所有元素结点
            for (var i = 0; i < nodes.length; i++) {
                var tits = ['H1', 'H2', 'H3', 'H4', 'H5', 'H6'];
                if (tits.indexOf(nodes[i].nodeName)!== -1) { 
                    // 获取标题文本
                    var nodetext = nodes[i].innerHTML.replace(/<\/?[^>]+>/g,"");
                    nodetext = BlogDirectory.htmlDecode(nodetext);
                    // 插入锚
                    nodes[i].setAttribute("id", "blogTitle" + num);
                    var item;
                    switch (nodes[i].nodeName) {
                        case 'H1':    // 若为主标题
                            item = document.createElement("dt");
                            break;
                        case 'H3':
                            item = document.createElement("dd");
                            item.setAttribute('class', 'indent3');
                            break;
                        case 'H4':
                            item = document.createElement("dd");
                            item.setAttribute('class', 'indent4');
                            break;
                        case 'H5':
                            item = document.createElement("dd");
                            item.setAttribute('class', 'indent5');
                            break;
                        case 'H6':
                            item = document.createElement("dd");
                            item.setAttribute('class', 'indent6');
                            break;
                        default:    // 若为子标题
                            item = document.createElement("dd");
                            break;
                    }
 
                    // 创建锚链接
                    var itemtext = document.createTextNode(nodetext);
                    item.appendChild(itemtext);
                    item.setAttribute("name", num);
                    item.onclick = function () {        // 添加鼠标点击触发函数
                        var pos = BlogDirectory.getElementPosition(document.getElementById("blogTitle" + this.getAttribute("name")));
                        if (!BlogDirectory.moveScrollBar(pos.top - 30, interval)) return false;
                    };
 
                    // 将自定义表项加入自定义列表中
                    dlist.appendChild(item);
                    num++;
                }
            }
            divSideBarContents.style.display = 'block';
 
            // 如果没有找到标题，则不生成目录导航栏
            if (num == 0) return false;
            /*鼠标进入时的事件处理*/
            // divSideBarTab.onmouseenter = function(){
            //     divSideBarContents.style.display = 'block';
            // }
 
            /*鼠标离开时的事件处理*/
            // divSideBar.onmouseleave = function() {
            //     divSideBarContents.style.display = 'none';
            // }
 
            /*鼠标点击时的事件处理*/
            divSideBarTab.onclick = function () {
                if (divSideBarContents.style.display == "none")
                    divSideBarContents.style.display = 'block';
                else {
                    divSideBarContents.style.display = 'none';
                }
            }
        }
    };
 
    window.onload = function () {
        /*页面加载完成之后生成博客目录*/
        BlogDirectory.createBlogDirectory("cnblogs_post_body", "h1", "h2", 20);
    }
</script>
 
<script>
    function openSideBar() {
      document.getElementById('sideBar').classList.add('open');
    }
 
    function closeSideBar() {
      document.getElementById('sideBar').classList.remove('open');
    }
 
 
    function openSideBar() {
      document.getElementById('sideBar').classList.add('open');
      document.querySelector('.close-btn').style.display = 'block';  // 显示叉号
    }
 
    function closeSideBar() {
      document.getElementById('sideBar').classList.remove('open');
      document.querySelector('.close-btn').style.display = 'none';  // 隐藏叉号
    }
</script>

2.4 页脚Html代码

点击查看代码

<button class="open-btn" onclick="openSideBar()">···</button>
<button class="close-btn" onclick="closeSideBar()">×</button>
<script type="text/javascript">
if (window.location.pathname === '/xiins') { 
  // 获取所有的 postTitle 元素
  var postTitles = document.querySelectorAll('.postTitle');
 
  postTitles.forEach(function(postTitle) {
    var current = postTitle;
    var wrapperDiv = null;
 
    while (current) {
      if (current.classList.contains('postSeparator')) {
        break;
      }
 
      if (!wrapperDiv) {
        wrapperDiv = document.createElement('div');
        wrapperDiv.classList.add('article-wrapper');
        current.parentNode.insertBefore(wrapperDiv, current);
      }
 
      // 移动当前元素及其所有子元素到新的包裹 div 中
      var children = Array.from(current.childNodes);
      children.forEach(function(child) {
        wrapperDiv.appendChild(child);
      });
 
      current = current.nextElementSibling;
    }
  });
}
</script>
 
<script>
    if (window.location.pathname === '/xiins') {
      var divs = document.getElementsByClassName('forFlow');
      for (var i = 0; i < divs.length; i++) {
        divs[i].style.margin = '10px 0'; 
      }
    }
</script>
 
<script>
var footer = document.getElementById('footer');
var text = footer.innerHTML;
 
text = text.replace('学海人', '学海人 - xiin');
text = text.replace('Kubernetes', 'Kubernetes.　Themed by LessIsRichness Light.');
 
footer.innerHTML = text;
</script>
<script>
// 等待页面加载完成
window.addEventListener('load', function() {
  var postDesc = document.querySelector('.postDesc');
  var text = postDesc.innerHTML;
  text = text.replace('posted @', '发布于');
  postDesc.innerHTML = text;
});
</script>
<script>
// 等待页面加载完成
window.addEventListener('load', function() {
  // 获取所有的链接元素
  var links = document.getElementsByTagName('a');
 
  // 遍历链接元素
  for (var i = 0; i < links.length; i++) {
    // 如果链接文本包含 "学海人"
    if (links[i].innerHTML.includes('学海人')) {
      // 创建一个新的图像元素
      var img = document.createElement('img');
      img.src = 'https://img2024.cnblogs.com/blog/3501016/202408/3501016-20240813095604119-70444258.png';  // 替换为您的图标 URL
      img.className = 'commenter-vip-logo';  // 添加类名
 
      // 将图像元素添加到链接后面
      links[i].appendChild(img);
    }
  }
});
</script>
 
<script>
    if (!window.location.pathname.startsWith('/xiins/p/')) {
      document.getElementById('sideBarMain').style.display = 'block';
    } else {
      document.getElementById('sideBarMain').style.display = 'none';
    }
</script>
<script>
    if (window.location.pathname.startsWith('/xiins/p/')) {
      document.getElementById('sideBar').style.position = 'fixed';
      document.getElementById('sideBar').style.top = '70';
      document.getElementById('sideBar').style.right = '17';
    }
</script>

3 结语

魔改主题LessIsRichness可以免费使用，禁止用于商业用途，请在footer保留魔改主题名称LessIsRichness。

主题尚未完善，持续更新中……