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 和 stmt = 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';  // 替换为您的图标 URLimg.className = 'commenter-vip-logo';  // 添加类名// 将图像元素添加到链接后面links[i].appendChild(img);}}
});
</script>

结语

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

主题尚未完善，如有问题，欢迎指正。这是来博客园的第一篇随笔，希望以后能在这里记录我的学习历程！