样式调整

可以在 GitBook 项目根目录创建styles文件夹,然后在其中创建website.css文件,调整默认的页面样式。

例如在website.css文件中添加如下代码,调整页面内容的展示宽度。

/* 调整主内容区域宽度 */
.book .book-body .page-wrapper .page-inner {
    max-width: 95% !important;
}

/* 调整正文内容宽度 */
.markdown-section {
    /* max-width: 1200px !important; */
    max-width: 100% !important;
    margin: 0 auto;
    padding: 0 40px;
}

/* 调整代码块的宽度 */
.markdown-section pre {
    max-width: 100% !important;
}

/* 调整表格宽度 */
.markdown-section table {
    width: 100% !important;
}

/* 如果需要调整侧边栏宽度 */
.book .book-summary {
    width: 300px !important;
}

.book.with-summary .book-body {
    left: 300px !important;
}

/* 移动端适配 */
@media (max-width: 768px) {
    .book .book-summary {
        /* width: 280px !important; */
        width: 100% !important;
        transform: translateX(-100%);
    }

    .book.with-summary .book-summary {
        transform: translateX(0);
    }

    .book.with-summary .book-body {
        /* transform: translateX(280px); */
        transform: translateX(100%);
        left: 0 !important;
    }

    .markdown-section {
        max-width: 100% !important;
        padding: 0 20px;
    }
}

同时需要在book.js文件中添加CSS 配置(如果没有这个配置,似乎也不会影响效果,应该是作为默认项加载)

{
    "styles": {
        "website": "styles/website.css"
    }
}
© phdlisl all right reserved,powered by GitbookUpdate in 2025-10-09

results matching ""

    No results matching ""