主题插件

1.主题

• Gitbook 提供了三种主题: Book文档, API文档, FAQ文档
• 默认是Book文档, 其他两种类型顾名思义
• 使用插件:

{
    "plugins": [
        "theme-comscore"
    ]
}

1.1.theme-default

• theme-default 是默认的主题类型
• 但它是黑白类型的，所以一般会会用彩色主题: theme-comscore
• theme-comscore 会为不同级别的标题添加颜色
• API文档, FAQ文档 因为没有使用, 在此不再赘述

2.插件

• Gitbook 默认加载的了下述插件:

livereload
highlight
search
lunr
sharing
fontsettings
theme-default

2.1插件的安装

• 1.添加到 book.json 然后使用 gitbook install 安装 (不推荐)
• 2.使用npm安装: npm install plugin-name

2.2插件的禁用

• 如果想禁用默认插件, 在默认插件前面加 - 即可
• 禁用 sharing

{
    "plugins": [
        "-sharing"
    ]
}

2.3插件的配置

• pluginsConfig 可以配置插件的字段配置

2.4常用插件

• 下述是关注度、使用比较多的插件

- alerts        提示框的增强
- anchor        锚点
- chapter       菜单折叠
- code          代码行号、复制
- favicon       网站的小图标
- github        链接到github仓库
- pagefooter    页脚说明
- prism         代码着色
- search        增强中文搜索
- section       文本折叠
- sharing       分享增强
- splitter      菜单动态伸缩
- statistics    搜索引擎点击统计，百度统计，谷歌统计
- version       多版本选择

• 网友插件总结

2.5参考

{
    "plugins": [
        "theme-comscore",
        "chapter-fold",
        "expandable-chapters",
        "livereload",
        "back-to-top-button",
        "splitter",
        "-lunr",
        "-search",
        "search-pro",
        "insert-logo",
        "custom-favicon",
        "tbfed-pagefooter",
        "prism",
        "anchor-navigation-ex",
        "summary"
    ],
    "pluginsConfig": {
        "insert-logo": {
            "url": "/styles/images/icon.png",
            "style": "background: none; max-height: 80px; min-height: 80px"
            },
        "favicon": "/styles/images/icon.png",
        "tbfed-pagefooter": {
            "copyright": "Copyright by <a href='https://www.skyne.cn'> SKYNE </a>",
            "modify_label": " ",
            "modify_format": "YYYY-MM-DD"
            },
        "anchor-navigation-ex": {
            "showLevel": false, 
            "showGoTop": false
        }
    },

    "styles": {
        "website": "styles/website.css"
    }
}

2.6自定义CSS

• 如果自己有前端能力还可以自己写css来扩展主题自带的
• 在 book.json 增加 styles 字段，并指定文件位置

{
    "styles": {
        "website": "styles/website.css",
        "ebook": "styles/ebook.css",
        "pdf": "styles/pdf.css",
        "mobi": "styles/mobi.css",
        "epub": "styles/epub.css"
    }
}

• 自己不太喜欢主题自带的灰色的code和目录样式
• 因此自己重新定义了样式
• 参考如下:

.book .book-body .page-wrapper .page-inner section.normal :not(pre)>code {
    padding: 0.1em;
    border-radius: 0.3em;
    white-space: normal;
    color: #f85353;
    background-color: #e5e5e5;
}

.book-summary ul.summary li.header {
    font-size: 1em;
    padding: 0.1em;
    font-weight: bolder;
    color: #364149;
}