24年从B站上找了博客园优化模板，改了改bug，开始写博客了

1.主要修改了页面定制css代码：

点击查看代码

/* ===== 侧边栏背景图 ===== */
.menu-wrap {
  background-image: url('https://img2024.cnblogs.com/blog/3405355/202608/3405355-20260819193035721-1061202956.png') !important;
  background-size: cover !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
}
.morph-shape { display: none !important; }
.menu,
.menu-wrap .menu,
.show-menu .menu {
  background: transparent !important;
  background-color: transparent !important;
}

/* ===== 个人信息卡 ===== */
.introduce-box {
  background-image: none !important;
  background-color: transparent !important;
}
#introduce,
#introduce .personInfo,
.introduce-via + div,
.introduce-box div {
  color: #fff !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45) !important;
}

/* ===== 导航项：透明 + 底部分隔线 ===== */
#m-nav-list li {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 14px 20px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
  transition: background-color 0.25s ease, padding-left 0.25s ease !important;
  list-style: none !important;
  position: relative !important;
}
#m-nav-list li:hover {
  background-color: rgba(255, 255, 255, 0.15) !important;
  padding-left: 28px !important;
}
#m-nav-list li a {
  background-image: none !important;
  background: transparent !important;
  background-color: transparent !important;
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) !important;
  letter-spacing: 1px !important;
  display: block !important;
}
#m-nav-list li a:hover {
  color: #77b6ff !important;
}
#m-nav-list li a i,
#m-nav-list li a .iconfont {
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) !important;
  margin-right: 8px !important;
}

/* ===== 隐藏罗马数字（核心修正：li::before 才是真实的伪元素！） ===== */
#m-nav-list li::before,
#m-nav-list li::after,
#m-nav-list li a::before,
#m-nav-list li a::after,
#m-nav-list li a > span,
#m-nav-list li a > em,
#m-nav-list li a > b,
#m-nav-list li a > small,
.icon-list li::before,
.icon-list li::after,
.icon-list li a::before,
.icon-list li a::after,
.icon-list li a > span,
.m-icon-list li::before,
.m-icon-list li::after,
.m-icon-list li a::before,
.m-icon-list li a::after,
.m-icon-list li a > span {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
  content: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ===== 搜索框美化（毛玻璃圆角） ===== */
#sb_widget_my_zzk,
.div_my_zzk,
.mySearch {
  display: block !important;
  visibility: visible !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 18px 20px !important;
  opacity: 1 !important;
  overflow: visible !important;
  text-align: center !important;
  background: transparent !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
  position: relative !important;
}
/* 输入框 */
.input_my_zzk,
#q,
.div_my_zzk input[type="text"] {
  width: 88% !important;
  height: 38px !important;
  padding: 0 16px 0 38px !important;
  margin: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  border-radius: 19px !important;
  background: rgba(255, 255, 255, 0.18) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  color: #fff !important;
  font-size: 13px !important;
  font-family: "Open Sans", "Microsoft Yahei", sans-serif !important;
  outline: none !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12) !important;
  box-sizing: border-box !important;
}
.input_my_zzk::placeholder,
#q::placeholder {
  color: rgba(255, 255, 255, 0.65) !important;
  letter-spacing: 1px !important;
}
.input_my_zzk:focus,
#q:focus {
  border-color: #77b6ff !important;
  background: rgba(255, 255, 255, 0.28) !important;
  box-shadow: 0 0 0 3px rgba(119, 182, 255, 0.25), 0 2px 10px rgba(0, 0, 0, 0.18) !important;
}
/* 搜索图标（用伪元素加在输入框左侧） */
.div_my_zzk::before,
#sb_widget_my_zzk::before {
  content: "\1F50D" !important;
  position: absolute !important;
  left: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 14px !important;
  color: rgba(255, 255, 255, 0.7) !important;
  z-index: 2 !important;
  pointer-events: none !important;
}
/* 隐藏原生"找找看"按钮，回车搜索 */
.btn_my_zzk,
input[value="找找看"],
.div_my_zzk input[type="button"],
.div_my_zzk input[type="submit"] {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
}

/* ===== 日历美化（透明风 + 今天高亮 + 整体居中） ===== */
#blog-calendar,
#calendar,
.calendar,
#sb_widget_calendar,
#sidebar_calendar {
  display: block !important;
  visibility: visible !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 auto !important;
  padding: 15px 0 18px !important;
  opacity: 1 !important;
  overflow: visible !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
  float: none !important;
  text-align: center !important;
}
#blog-calendar {
  margin: 0 auto !important;
  padding: 0 !important;
  width: 100% !important;
}
/* 日历表格：整体居中 */
#calendar .Cal,
.Cal {
  width: 90% !important;
  max-width: 200px !important;
  margin: 0 auto !important;
  border-collapse: collapse !important;
  color: #fff !important;
  font-family: "Open Sans", "Microsoft Yahei", sans-serif !important;
  font-size: 12px !important;
  table-layout: fixed !important;
  float: none !important;
  display: table !important;
}

/* 月份标题 */
.CalTitle,
.CalTitle td {
  background: transparent !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-align: center !important;
  padding: 6px 0 10px !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35) !important;
  font-family: "Open Sans", "Microsoft Yahei", sans-serif !important;
  letter-spacing: 1px !important;
}
/* 星期表头 */
.CalDayHeader {
  background: rgba(255, 255, 255, 0.12) !important;
  color: rgba(255, 255, 255, 0.85) !important;
  font-weight: 600 !important;
  padding: 6px 0 !important;
  text-align: center !important;
  font-size: 11px !important;
  letter-spacing: 0.5px !important;
}
/* 日期单元格 */
#calendar td,
.Cal td {
  background: transparent !important;
  color: rgba(255, 255, 255, 0.85) !important;
  text-align: center !important;
  padding: 4px 0 !important;
  font-size: 12px !important;
  font-family: "Open Sans", "Microsoft Yahei", sans-serif !important;
  transition: all 0.2s ease !important;
  height: 26px !important;
  vertical-align: middle !important;
}
/* 有文章的日期链接 */
#calendar table a:link,
#calendar table a:visited,
#calendar table a:active,
.Cal a:link,
.Cal a:visited,
.Cal a:active {
  color: #fff !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
  line-height: 24px !important;
  border-radius: 50% !important;
  transition: all 0.25s ease !important;
}
#calendar table a:hover,
.Cal a:hover {
  background: rgba(119, 182, 255, 0.45) !important;
  color: #fff !important;
  text-decoration: none !important;
  transform: scale(1.1) !important;
}
/* 今天 */
.CalTodayDay {
  background: rgba(119, 182, 255, 0.6) !important;
  color: #fff !important;
  font-weight: 700 !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
  line-height: 24px !important;
  box-shadow: 0 2px 8px #046ee6 !important;
}
/* 周末 */
.CalWeekendDay {
  background: transparent !important;
  color: rgba(255, 255, 255, 0.55) !important;
}
/* 其他月份日期 */
.CalOtherMonthDay {
  background: transparent !important;
  color: rgba(255, 255, 255, 0.3) !important;
}
/* 上个月/下个月切换 */
.CalNextPrev a:link,
.CalNextPrev a:visited,
.CalNextPrev a:active {
  color: rgba(255, 255, 255, 0.75) !important;
  font-weight: 600 !important;
  padding: 0 6px !important;
  text-decoration: none !important;
  font-size: 13px !important;
}
.CalNextPrev a:hover {
  color: #77b6ff !important;
}
/* 选中日期 */
.CalSelector {
  background: rgba(119, 182, 255, 0.3) !important;
}

/* ===== 导航美化增强 ===== */
#m-nav-list li {
  position: relative !important;
  overflow: hidden !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 14px 20px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  list-style: none !important;
}
/* hover：左移 + 半透明白底 + 左侧蓝色色条 */
#m-nav-list li:hover {
  background-color: rgba(255, 255, 255, 0.15) !important;
  padding-left: 28px !important;
  box-shadow: inset 3px 0 0 #77b6ff !important;
}
#m-nav-list li a {
  background-image: none !important;
  background: transparent !important;
  background-color: transparent !important;
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) !important;
  letter-spacing: 1.5px !important;
  display: flex !important;
  align-items: center !important;
  transition: color 0.25s ease !important;
}
#m-nav-list li a:hover {
  color: #77b6ff !important;
}
#m-nav-list li a i,
#m-nav-list li a .iconfont {
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) !important;
  margin-right: 10px !important;
  font-size: 16px !important;
  width: 20px !important;
  text-align: center !important;
  transition: transform 0.25s ease !important;
}
#m-nav-list li:hover a i,
#m-nav-list li:hover a .iconfont {
  transform: scale(1.15) !important;
  color: #77b6ff !important;
}

/* ===== 隐藏罗马数字（保留，防止主题重新注入） ===== */
#m-nav-list li a::before,
#m-nav-list li a::after,
#m-nav-list li a > span,
#m-nav-list li a > em,
#m-nav-list li a > b,
#m-nav-list li a > small,
.icon-list li a::before,
.icon-list li a::after,
.icon-list li a > span,
.m-icon-list li a::before,
.m-icon-list li a::after,
.m-icon-list li a > span {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
  content: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ===== 其他侧边栏模块透明 + 白字 ===== */
.catList,
.catListArticleCategory,
.catListBlogRank,
.catListComment,
.catListEssay,
.catListFeedback,
.catListImageCategory,
.catListLink,
.catListNoteBook,
.catListPostArchive,
.catListPostCategory,
.catListTag,
.catListView,
.newsItem {
  background-color: transparent !important;
  background-image: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 12px 20px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #fff !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45) !important;
}
.catList a,
.newsItem a,
.catList li a {
  color: #fff !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45) !important;
}
.catList a:hover,
.newsItem a:hover,
.catList li a:hover {
  color: #77b6ff !important;
}
.catListTitle {
  color: #fff !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) !important;
}
/* ===== 禁止侧边栏左右移动 ===== */
.menu-wrap,
.menu,
#menuWrap,
#sideBar,
#sideBarMain {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  touch-action: pan-y !important;
  -webkit-overflow-scrolling: touch !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}
/* 禁止侧边栏内所有元素被水平拖动 */
.menu-wrap *,
.menu *,
#menuWrap * {
  touch-action: pan-y !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

2.页首html代码：

点击查看代码

<script>
(function() {
  function hideSearch() {
    // 1. 找到所有文字为"找找看"的元素（span/button/a/div）
    var all = document.querySelectorAll('span, button, a, div, input');
    for (var i = 0; i < all.length; i++) {
      var el = all[i];
      var text = (el.textContent || el.value || '').trim();
      if (text === '找找看' || text === '搜索') {
        // 隐藏按钮本身
        el.style.display = 'none';
        // 往上找2层父容器，把整个搜索框区域隐藏
        var p = el.parentElement;
        for (var j = 0; j < 3 && p; j++) {
          if (p.className && /search|zzk|mySearch/i.test(p.className)) {
            p.style.display = 'none';
            break;
          }
          p = p.parentElement;
        }
      }
    }
    
  }

  // 立即执行 + 轮询10次，确保主题动态渲染后也能覆盖
  hideSearch();
  var count = 0;
  var timer = setInterval(function() {
    hideSearch();
    count++;
    if (count >= 15) clearInterval(timer);
  }, 400);
})();
</script>

3.首先解决的是侧边框背景问题：

3.1之前的结构是

.menu-wrap ← 最外层抽屉（fixed定位，280px宽，100%高）
├── .morph-shape ← SVG装饰层（绝对定位铺满，填充纯黑）
└── .menu ← 内容容器（默认 background:#000）
├── ├── .introduce-box 个人信息卡
├── ├── .icon-list 导航列表
├── ├── #calendar 日历
├── └── ...

3.2每段 CSS 解决什么问题

1. .menu-wrap 加背景图
背景图挂在最外层，只要内层不遮挡，就能透出来。

2. .morph-shape { display:none } — 最关键
这层是主题自带的纯黑 SVG，绝对定位铺满整个抽屉，它才是侧边栏变黑的真凶。前几次方案失败就是因为没发现这层，背景图被它完全盖住了。

3. .menu { background:transparent }
.menu 是内容容器，主题默认给了 background:#000。不清掉的话，即使 morph-shape 隐藏了，这层黑底还是会盖住背景图。
用了三个选择器叠加（.menu、.menu-wrap .menu、.show-menu .menu）是为了提高 CSS 优先级，防止主题 JS 动态加内联样式覆盖。

4. .introduce-box 清背景
个人信息卡默认有独立背景，清掉才能透出底下的背景图。

5. 文字白色 + 阴影
背景图是亮色插画，深色文字看不清，所以统一设白色加文字阴影。

点击查看代码

/* ===== 侧边栏背景图 ===== */
.menu-wrap {
  background-image: url('https://img2024.cnblogs.com/blog/3405355/202608/3405355-20260819193035721-1061202956.png') !important;
  background-size: cover !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
}
.morph-shape { display: none !important; }
.menu,
.menu-wrap .menu,
.show-menu .menu {
  background: transparent !important;
  background-color: transparent !important;
}


/* ===== 个人信息卡 ===== */
.introduce-box {
  background-image: none !important;
  background-color: transparent !important;
}
#introduce,
#introduce .personInfo,
.introduce-via + div,
.introduce-box div {
  color: #fff !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45) !important;
}

3.3可能出现：

问题 1：页面全白崩坏

• 现象：加完 CSS 后页面几乎全白，仅右下角一小块有图
• 原因：给 #sideBar（博客园原生右侧边栏）加背景图，挂错了元素。主题用的是左侧抽屉 .menu-wrap，不是 #sideBar
• 解决：背景图挂在 .menu-wrap 上

问题 2：侧边栏全黑，背景图完全不显示

• 现象：侧边栏变回纯黑，背景图看不见
• 原因：两层遮挡物没清掉：
  1. .morph-shape — 主题自带的纯黑 SVG 层，绝对定位铺满整个抽屉
  2. .menu — 内容容器默认 background:#000

问题 3：只有头像区有背景图，下方导航 / 日历仍黑

• 现象：个人信息区有图，下面导航日历纯黑
• 原因：只给局部元素加了背景，没给最外层 .menu-wrap 加
• 解决：背景图统一挂 .menu-wrap，内部模块单独设半透明黑底

4.其次解决的是出现灰底的问题：

.morph-shape

.morph‑shape 是SVG 蒙版灰色遮罩层。
这个元素是悬浮在侧边栏背景图上层的半透明灰色画布，盖住你的背景图片，视觉上就是一层灰蒙蒙的底色。

• display: none !important; → 直接把整个灰色蒙版盒子彻底移除，灰底立刻消失。

属性	是否占页面空间	事件能否点击	渲染说明
display:none	❌ 完全消失，不占位	不能点击	直接从文档树移除
visibility:hidden	✅ 保留原来的位置、宽高、留白	不能点击	透明看不见，但盒子还在
opacity:0	✅ 保留位置	✅ 可以点击	完全透明

5.最后解决的是罗马字、日历、找一找不美观问题：

5.1罗马数字（导航前面序号）问题

侧边栏导航 #m‑nav-list 的每一项前面自动生成罗马数字 Ⅰ、Ⅱ、Ⅲ，属于 CSS 伪元素 ::before 生成出来的内容，不是页面 HTML 自带文字，所以单纯改 HTML 删不掉。
解决思路：

1. 选中 li::before，直接干掉生成罗马数字的伪元素
2. 多重隐藏兜底：display:none 为主力，visibility、opacity、content:none 多重保险，防止主题 JS 动态重新注入序号。

点击查看代码

#m-nav-list li::before,
#m-nav-list li::after,
#m-nav-list li a::before,
#m-nav-list li a::after,
#m-nav-list li a > span,
#m-nav-list li a > em,
#m-nav-list li a > b,
#m-nav-list li a > small,
……
{
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
  content: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

5.2「找找看」搜索按钮问题：博客园自带搜索组件，输入框右边多出一个【找找看】按钮；想要只保留输入框、删掉按钮、回车提交搜索。

作用：页面加载完成后，循环扫描页面所有标签，找到文字为「找找看」的元素，JS 强制隐藏；并且轮询多次执行，解决侧边栏是点击后才动态渲染、一开始 DOM 不存在按钮的问题。
1）JavaScript 脚本（动态删除）

点击查看代码

(function() {
  function hideSearch() {
    var all = document.querySelectorAll('span, button, a, div, input');
    for (var i = 0; i < all.length; i++) {
      var el = all[i];
      var text = (el.textContent || el.value || '').trim();
      if (text === '找找看' || text === '搜索') {
        el.style.display = 'none';
        // 向上查找父容器，连带隐藏多余区域
        var p = el.parentElement;
        for (var j = 0; j < 3 && p; j++) {
          if (p.className && /search|zzk|mySearch/i.test(p.className)) {
            p.style.display = 'none';
            break;
          }
          p = p.parentElement;
        }
      }
    }
  }
  hideSearch();
  // 轮询延时执行，应对主题延迟渲染
  var count = 0;
  var timer = setInterval(function() {
    hideSearch();
    count++;
    if (count >= 15) clearInterval(timer);
  }, 400);
})();

2）CSS 静态隐藏兜底

点击查看代码

.btn_my_zzk,
input[value="找找看"],
.div_my_zzk input[type="button"],
.div_my_zzk input[type="submit"] {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
}