样式调整
可以在 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"
}
}