cnbook主题风格美化 —— 01（未完成）

个人自定义风格美化

整体风格偏B站吧？
https://chat.deepseek.com/share/t7mk9h55qj5wety52g

源代码作者：博客主题——cnbook
非常好的效果演出，感谢大佬！！！ヾ(≧∇≦*)ゝ（这个是我目前见到过的，效果最舒服的）

目前几个解决不了的问题
本人太菜了，没有深入去学习js（还没有学），html+css会一些

整了一天半多的时间，发现了不少问题
0.(暂时忘了)
1.隐藏侧边栏后，在内容区域右侧300px显示
2.手机端打开侧边栏后，点击空白区域无法取消
3.手机端顶部导航栏的优化显示
4.第一次进入页面会进入一个全页显示页面，下拉后进入主要的文章页（类似登录前需要进入的界面，登录后就不会跳转到该界面[指功能上]）

个人改进代码配置（B站+cnbook+展现头图）效果

链接

• cnbook@20251025-toke648个人优化.zip

侧边栏效果演出（有点苹果界面的感觉，有点意思就先留着了）

页面定制Css代码（添加）

/************** 简化侧边栏样式 ***************/.simplified-sidebar {position: fixed;left: -60px;top: 0;width: 60px;height: 100vh;background: var(--color-white);border-right: 1px solid var(--border-color-extra-light);z-index: 90;padding-top: 100px;display: flex;flex-direction: column;align-items: center;gap: 15px;transition: left 0.3s ease;box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
}/* 侧边栏隐藏时显示简化侧边栏 */
body:not(.main-widthout-sidebar) .simplified-sidebar {left: 0;
}/* 侧边栏展开时隐藏简化侧边栏 */
.main-widthout-sidebar .simplified-sidebar {left: -60px;
}/* 为主内容区域添加左边距 */
body:not(.main-widthout-sidebar) #mainContent {margin-left: 60px !important;transition: margin-left 0.3s ease;
}/* 简化侧边栏图标 */
.sidebar-icon {width: 40px;height: 40px;display: flex;align-items: center;justify-content: center;border-radius: 8px;cursor: pointer;transition: all 0.3s ease;font-size: 16px;color: var(--color-text-secondary);background: transparent;
}.sidebar-icon:hover {background: var(--color-primary);color: var(--color-white);transform: scale(1.1);
}.sidebar-icon i {font-size: 18px;
}/* 移动端隐藏简化侧边栏 */
@media screen and (max-width: 1200px) {.simplified-sidebar {display: none !important;}body:not(.main-widthout-sidebar) #mainContent {margin-left: 0 !important;}
}

页首Html代码

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">

页脚Html代码

/* 布局调整 */
function setLayout()
{// $('#mainContent').prepend($('#header'));// $(".forFlow").append($("#footer"));// $("#footer").show();// 全屏黑幕$("#main").append('<div class="mask"></div>');// 侧边悬浮按钮if($("#home").find(".float-btn").length <1){$("#home").append('<div class="float-btn"><ul>' +'<li class="btn-top"><span></span><a href="#top"></a></li>' +'<li class="btn-theme"><span></span><a href="javascript:changeTheme()"></a></li>' +'<li class="btn-main"><span></span><a href="javascript:sidebarToggle()"></a></li>' +"</ul></div>");}// 新消息红点msgDot();// 添加简化侧边栏createSimplifiedSidebar();
}/* 创建简化侧边栏 */
function createSimplifiedSidebar() {if ($("#simplified-sidebar").length < 1) {const simplifiedSidebar = `<div id="simplified-sidebar" class="simplified-sidebar"><div class="sidebar-icon" onclick="sidebarToggle()" title="展开侧边栏"><i class="fas fa-bars"></i></div><div class="sidebar-icon" onclick="scrollToTop()" title="返回顶部"><i class="fas fa-arrow-up"></i></div><div class="sidebar-icon" onclick="changeTheme()" title="切换主题"><i class="fas fa-moon"></i></div><div class="sidebar-icon" onclick="scrollToElement('#comment_form_container')" title="跳到评论"><i class="fas fa-comments"></i></div><div class="sidebar-icon" onclick="scrollToElement('#blog_post_info_block')" title="文章信息"><i class="fas fa-info-circle"></i></div></div>`;$("body").append(simplifiedSidebar);}
}/* 滚动到指定元素 */
function scrollToElement(selector) {const element = $(selector);if (element.length) {$('html, body').animate({scrollTop: element.offset().top - 100}, 500);}
}/* 返回顶部 */
function scrollToTop() {$('html, body').animate({scrollTop: 0}, 500);
}