Less is richness，基於less is more的部落格園寬屏主題魔改

寫在前面

之前做過很多個人部落格，都是做著玩的，資源託管在免費或低價的伺服器上，也不經常維護，所以就一直不長久，最終還是選擇了部落格園。發現部落格園可以自定義樣式，於是試著給部落格換了一個又一個主題。個人比較喜歡寬屏的樣式，感覺LessIsMore主題佈局比較好、也比較簡潔，但是不夠美觀，打算對此進行魔改。

經過兩天的F12+參考知乎掘金等網站+問豆包+除錯，終於大功告成。

主題名字叫less is more，這是建築師路德維希·密斯·凡德羅說過的一句話，意思是簡單的東西往往帶給人們的是更多的享受。魔改之後，就叫LessIsRichness吧。

魔改的設定（需要先申請js許可權）

側邊公告欄

<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>

css程式碼

body {font-family: -apple-system,BlinkMacSystemFont,Roboto,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);}
    
    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: 70px;
        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 New', Courier, monospace;
        font-weight: 600;
    }
    
    #Header1_HeaderTitle:hover {
        color: #fff !important;
        background-color: #007fff;
    }
    
    .subtitle {
        margin: 5px 0px 0px 10px;
    }
    
    /*導航*/
    
    #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;
    }
    
    /*首頁左側*/
    .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;
    }
    #sideBarContents dd{
        margin-left:20px;
    }
    #sideBarContents dd.indent3{
        margin-left:40px;
    }
    #sideBarContents dd.indent4{
        margin-left:60px;
    }
    #sideBarContents dd.indent5{
        margin-left:80px;
    }
    #sideBarContents dd.indent6{
        margin-left:100px;
    }
    
    #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: 14px;
    vertical-align: middle;
    }

頁首Html程式碼

<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) {//到達預定位置，則解禁滑鼠滾輪，並退出
            window.onmousewheel = function(){
                return true;
            }
            return true; 
        } 
        if (currentpos < finalpos) {//未到達，則計算下一步所要移動的距離
            dist = Math.ceil((finalpos - currentpos)/10); 
            currentpos += dist; 
        } 
        if (currentpos > finalpos) { 
            dist = Math.ceil((currentpos - finalpos)/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, 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>

頁尾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-20240812105915804-1642176338.png';  // 替換為您的圖示 URL
      img.className = 'commenter-vip-logo';  // 新增類名

      // 將影像元素新增到連結後面
      links[i].appendChild(img);
    }
  }
});
</script>

結語

魔改主題LessIsRichness可以免費使用，禁止用於商業用途，請在footer保留魔改主題名稱LessIsRichness，歡迎二次魔改。

主題尚未完善，如有問題，歡迎指正。這是來部落格園的第一篇隨筆，希望以後能在這裡記錄我的學習歷程！