gtibook 插件 侧边导航

简介: gtibook 插件 侧边导航

侧边导航

文章目录

1. 简介

Gitbook 提供的书籍默认都会在左侧提供书籍目录索引导航的功能。


对于侧边导航功能、UI、布局、效果等等有一些开源的插件可供选择,插件的核心功能与差异:


chapter-fold 插件: 默认的侧边目录是全部展开的,该插件可以让文章按照层级目录折叠起来,同时只能展开一个目录。

expandable-chapters 插件: 默认的侧边目录是全部展开的,该插件可以让文章按照层级目录折叠起来,展开后不会自动折叠。

expandable-chapters-small 插件: 默认的侧边目录是全部展开的,该插件可以让文章按照层级目录折叠起来,展开后不会自动折叠,箭头相比 expandable-chapters 会细一些。

sidebar-style 插件: 会替换掉 Published by GitBook,并在左侧最上面显示标题。

splitter 插件:提供侧边栏宽度可调节功能。

本站点使用:


expandable-chapters-small 插件

sidebar-style 插件

splitter 插件

1. chapter-fold 插件

安装

npm i gitbook-plugin-chapter-fold

默认的侧边目录是全部展开的,该插件可以使左侧导航目录默认折叠。

在点击折叠目录时,只会展开一个目录,新的目录展开时其他目录会折叠。

{
    "plugins": ["chapter-fold"]
}

效果图:

1832b220aa754cd18c504acc7686a560.png

2. expandable-chapters 插件

安装

npm i gitbook-plugin-expandable-chapters

默认的侧边目录是全部展开的,该插件可以使左侧导航目录默认折叠。

可以支持点击展开后的目录一直保持展开的状态,这点和 chapter-fold 不同。

expandable-chapters-small 效果相同,唯一不同的是这个插件的箭头粗一些。

{
    "plugins": [
         "expandable-chapters"
    ]
}

效果图:

1832b220aa754cd18c504acc7686a560.png

3. expandable-chapters-small 插件

安装

npm i gitbook-plugin-expandable-chapters-small

默认的侧边目录是全部展开的,该插件可以使左侧导航目录默认折叠。

可以支持点击展开后的目录一直保持展开的状态,这点和 chapter-fold 不同。

和 expandable-chapters 插件 效果相同,差异是折叠展开箭头图标小一些。

{
    "plugins": [
         "expandable-chapters-small"
    ]
}

效果图:

1832b220aa754cd18c504acc7686a560.png

4. sidebar-style 插件

安装

npm i gitbook-plugin-sidebar-style

在左侧最上方添加标题。

在左侧导航最下方替换掉 Published by GitBook 提示信息

{
    "plugins": ["sidebar-style"],
    "pluginsConfig": {
        "sidebar-style": {
            "title": "《Git Demo》",
            "author": "zongxun"
        }
    }
}

效果图:

1832b220aa754cd18c504acc7686a560.png

5. splitter 插件

安装

npm i gitbook-plugin-splitter

侧边栏宽度可调节

b41705914ab149ed906428aa9032a946.gif

相关文章
|
7月前
|
容器
uniapp中制作侧边导航栏
uniapp中制作侧边导航栏
514 0
|
5月前
|
小程序 API
【微信小程序-原生开发】实用教程07 - Grid 宫格导航,详情页,侧边导航(含自定义页面顶部导航文字)
【微信小程序-原生开发】实用教程07 - Grid 宫格导航,详情页,侧边导航(含自定义页面顶部导航文字)
104 0
|
前端开发 容器
Bootstrap教程(20)--选项卡式导航、胶囊式导航、面包屑导航
本文目录 1. 概述 2. 选项卡式导航 2.1 普通选项卡导航 2.2 等宽选项卡导航 3. 胶囊式导航 3.1 普通胶囊式导航 3.2 垂直胶囊式导航 4. 面包屑导航 5. 小结
715 0
Bootstrap教程(20)--选项卡式导航、胶囊式导航、面包屑导航
|
算法 安全
一句话次导航相关问题
一句话次导航相关问题,SEOer必看: 1、次导航锚文本里,我可以做几个词? 没有一句话次导航的情况下,最多写3个。如果认真写了一句话次导航,则里面可以包含5-8个。不要超过10个。 2、如果主导航上有了某个关键词,我需要在次导航上再做吗?
162 0
侧边栏菜单导航
在线演示 本地下载
1238 0
3D焦点图插件
在线演示 本地下载
792 0
导航
原文:导航 切换动画,相关的过渡动画,是淡入淡出的效果 private void Frame_Navigating(object sender, NavigatingCancelEventArgs e) { if (Content != nul...
1023 0
|
JavaScript
面包屑导航
Document .bread{ width: 90%; height: 50px; border-bottom: 1px solid #000; margin: 0 auto; line-height: 50px; } .
1439 0