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);
}