善良的我选择帮助别人
可能是网上关于 Gitbook 的教程相对来说有些掉队,加上写文章时分享了不少关于 ，因此关注我的粉丝好友中有不少是来源于 Gitbook.
以是上个月有个好友问我能不能配置 Gitbook 默认折叠的效果,心里有些犯难,作为 gitbook 的虔诚粉丝,我都不知道 gitbook 还有这方面的配置?!
但是,善良的我总是有求必应,不忍心谢绝小白用户,于是我便抱着试一试的心态开始研究一下如何默认折叠?
当然,办理问题前还是要先复现一下问题,然后在命令行中闇练敲入了 gitbook serve 命令来启动本地做事器,为了打消缓存等影响,特意打开了 Chrome 浏览器的无痕模式,果不其然默认左侧菜单是展开的!
不能复现的问题都不是我的问题,谢绝办理此类问题,搞不好是你自己环境搭建问题呢!
蓦然回顾官方文档已走
问题复现后就要开始寻求办理之道,虽然印象中并没有干系配置,但是难保影象混乱遗漏了某些配置项,以是还是先看看官方文档怎么说的吧!
但是,当你在浏览器中输入 gitbook 官方文档 时,并找不到想象中的官方文档而是新版官网,不信你自己去搜一下,肯定是新版官网.
当你自以为找到了官网时,点击进去查看文档部分,很遗憾,这是新版文档并不是老版文档,你还会连续百度一下寻求可用链接期待找到官方文档.
为了节省宝贵韶光,这里推举访问个人掩护的 gitbook 文档
目前供应了中英文两个措辞版本的文档,相信可以知足大多数用户的需求了,选择任意一种措辞后点击进入翻阅干系设置.
实际上,官方文档也并没有什么用,由于根本就没有提到过如何变动干系配置使其默认折叠而非展开状态.
官方不再掩护旧版文档,费尽心机找到旧版文档也无济于事,由于并没有提及到干系配置,以是预测很可能并未供应有关配置项!
百度一下你就知道了吗
俗话说:\"大众互联网上绝大多数问题别人都已经碰着过并供应理解决方案,我们唯一要做的便是找到它!\公众
这也是面向搜索编程的核心思想,碰着默认折叠问题该当也不会例外,那就搜索一下吧!
虽然百度搜索涌现了一些干系文章,但是却不是我们想要的效果,大多数是基于 gitbook 插件实现的目录折叠效果,并不是默认折叠左侧菜单效果.
不管是换关键词重新搜索还是谷歌搜索,均未创造有关默认折叠左侧菜单的办理方案,难不成面向搜索失落败了,要做办理问题的第一人吗?!
多次重复搜索操作均为找到办理方案,由此可见真的很少有人想要默认折叠左侧菜单,我也是很佩服提出该问题的小伙伴骨骼惊奇啊!
独立重生找寻蛛丝马迹
既然依赖别人无法办理问题,那么只能独立重生独自办理问题,是时候磨练真正的技能了!
为了打消无关滋扰,不能再用自己的 gitbook 项目了,毕竟文件太多未便利后续调试,那么不妨重新创建一个测试项目.
创建测试项目初始化测试项目启动测试项目虽然一片空缺,并没有什么本色性内容,但是大道至简,对付我们复现并测试问题来说,足够了!
打开 Chrome 浏览器并按下 F12 开启调试模式,鼠标选中左侧的 Elements 元素选项卡并点亮左侧的小鼠标,然后在页面上找到左侧图标按钮,于是选中元素高亮了.
单独摘录 Html 关键代码如下:
轻微熟习前真个小伙伴可能很轻松就能明白 a 标签的 class 属性表示的含义,见名知意,可以这么阐明:
btn 该当是掌握外不雅观的样式,表现得像是按钮效果.pull-left 该当是掌握元素的位置,拉倒左边.js-toolbar-action 该当是掌握元素的行为,js 工具栏行为动作.由此可见,点击该图标实现左侧菜单折叠/展开效果该当是 .js-toolbar-action 在起浸染,也便是说某一段 js 肯定是针对该 class进行了监听!
此时,点击右侧的 Event Listeners 选项卡查看该元素已监听的 click 事宜,定位到是哪一个详细的 js 文件在起浸染.
果不其然,元素上存在 click 点击事宜监听并且创造实行监听的逻辑代码涌如今 theme.js 文件,点击进入文件查看详细内容.
压缩后的 js 代码不具备可读性,点击左下方的 {} 图标可以进行代码格式化,但是可能不是纯挚的压缩而是进行了丑化或者稠浊代码之类的逻辑,格式化后的代码仍旧不可读!
终于创造了蛛丝马迹,修正的代码逻辑就隐蔽在 theme.js 文件中,只要找到干系源码重新编译输出 theme.js文件并更换该当就能实现默认折叠效果!
不要担心黎明前的阴郁
根据目前已节制的线索,可以肯定的是有用线索紧张有两个:
监听元素 .js-toolbar-action输出文件 theme.js一个是源码文件,另一个是输出文件,想要在弘大的 gitbook 项目中迅速定位到干系代码逻辑,个人能力有限,并不熟习前端开拓调试流程,因此采取最大略粗暴傻瓜式搜索办法进行排查!
如果读者对付当代前端开拓流程比较属性的话,大概过一遍项目构造该当就可以调试定位问题了,用不着像我这样傻瓜式搜索排查!
查看当前 gitbook 版本找到 gitbook 安装位置gitbook 一样平常安装在 ~/.gitbook/versions/3.2.3 目录,个中 ~ 表示用户家目录.
选择一款熟习的编辑器并打开 Gitbook 安装目录,这里以 sublime 编辑器为例,选中项目后右键全局搜索关键字 js-toolbar-action 期望找到干系源码文件.
全局搜索后紧张涌现两个文件包含 js-toolbar-action 关键字,一个是输出文件 theme.js ,另一个是源码文件 toolbar.js .
可想而知,源码文件肯定是经由编译处理后统一打包输出,因此不仅仅要找到源码文件还要节制如何编译.
定位到当前 gitbook 目录后借助全局搜索功能定位到详细的文件路径,起浸染的是 gitbook-plugin-theme-default 项目,实在这便是 Gitbook 的默认主题.
源码在哪
/Users/snowdreams1006/.gitbook/versions/3.2.3/node_modules/gitbook-plugin-theme-default/src/js/theme/toolbar.js :
粗略看一下,上述代码是实现触发左侧图标折叠/展开菜单的逻辑实现,这里只是详细实现还不知道谁是利用者,也便是说这种逻辑是在哪里调用的?
只能连续顺藤摸瓜,往上翻看,根据基本开拓知识,在该文件的同级目录中存在如下文件,个中的 index.js 该当便是入口文件:
打开 index.js 文件,根据注释我们可以看到 init() 函数是入门函数,个中 sidebar.init() 和 sidebar.toggle() 函数无不解释 sidebar.js 和 toolbar.js 关系密切,完备有情由猜想 sidebar.js 是 toolbar.js 的利用者!
打开 sidebar.js 文件并查看 init() 初始化函数和 toggle() 触发函数,可以验证我们的猜想,这里便是掌握中央!
: 非手机端初始化上次状态,默认展开侧边栏,如果是手机端则折叠侧边栏.个中 toggleSidebar() 吸收两个参数,第一次参数表示是展开还是折叠,第二个参数暂不可知.
「: 第一个参数确实表示状态而第二个参数表示是否有动画效果,不用看详细代码逻辑而是看注释就能猜出大概逻辑了.
通过上述剖析,我们可以得知 init() 初始化函数决定了默认行为是折叠还是展开,同时 gitbook.storage.set('sidebar', isOpen()) 和 gitbook.storage.get('sidebar', true) 该当是设置和获取是否展开菜单的标志!
由此,如果想要默认折叠左侧菜单,那么只须要设置成 gitbook.storage.set('sidebar', false) 该当就会生效!
如何编译
说干就干,于是乎在 init() 函数插入 gitbook.storage.set('sidebar', false) 默认折叠逻辑,接着看一下是否须要重新编译才能生效?
接着切换到测试项目再次运行 gitbook serve 启动本地做事器,创造并没有任何变革,很有可能改变源码文件须要重新编译才会生效或者说变动的源码项目也没有生效?
: 该源码文件所在的项目是 gitbook-plugin-theme-default ,根据 gitbook 插件命名规范我们知道,gitbook-plugin- 一样平常是功能性插件,这一类的插件有 gitbook-plugin-readmore 阅读更多插件和 gitbook-plugin-copyright版权保护插件等等.
但是如果插件名以 gitbook-plugin-theme 开头的话,这一类插件便是主题插件,比如 gitbook-plugin-theme-default 便是默认主题.
除此之外,只要遵守该命名规则的插件引入时无需添加 gitbook-plugin- 前缀,可以直接在 gitbook.json 文件中引入剩余的简称作为插件名.
摘录自 Gitbook 项目的配置文件,可以佐证上述规则的精确性.
作为普通的 nodejs 包,开拓规范规定了 package.json 供应了插件的配置信息,而 Gitbook 插件除了是标准的 nodejs 包之外还有自己的约束,紧张表示在供应了 gitbook 节点属性:
默认主题仅仅供应了两个配置项,分别是 styles 样式文件位置和 showLevel 是否显示层级配置.
再一次验证了猜想的精确性,真的须要修正源码才能实现默认折叠左侧菜单的效果,紧着连续在 package.json 中找到项目源码的托管地址,看一下有没有供应二次开拓文档.
令人遗憾的是,项目先容空空如也,除了一张主题预览图,别的什么都没有?!
既然没有二次开拓文档,那就看看项目源码有没有别的蛛丝马迹教我们如何编译?
绕了这么多,实在还不是由于比较菜,人家都供应给源码都不会编译,留下来没有技能的眼泪!
视角再一次切换到源码目录,除了 js 和 less 目录外,竟然还有一个 build.sh 构建脚本!
这一刻,仿佛看到了九点钟升起的太阳,未来是你们的也是我们的!
这一段脚本中除了看不懂 browserify,uglifyjs,lessc -clean-css 命令外,剩下部分都很大略,大致是编译源码文件并输出到 _assets 目录.
编译 js 的命令紧张有以下两条,而我们关心的 theme.js 仅涉及到一条,除此之外没有任何别的依赖,这一点非常好!
接下来的重点便是如何运行 browserify src/js/theme/index.js | uglifyjs -mc > _assets/website/theme.js 命令了!
摇身一变重新编译源码
browserify src/js/theme/index.js | uglifyjs -mc > _assets/website/theme.js
百度一下 browserify
再一次打开熟习的浏览器输入关键字 browserify 后涌现一系列干系文章,很好奇为啥排名第一个都不会是官网呢?不管怎么样,找到 browserify 的 github 项目地址也是不错的!
这里并不关心 browserify 到底是什么,只在乎如何安装基本环境而已!
如果是 mac 电脑,全局安装须要管理员权限,该当运行 sudo npm install -g browserify ,如果嫌弃安装速率慢也可以运行 cnpm install -g browserify ,条件是已安装 cnpm 命令.
谷歌一下 uglifyjs
不吹不黑,少走一点弯路,直接就找到了 github 项目网址,同样的也不关心项目先容,直接翻看如何安装部分.
重新编译 others
涉及到 browserify src/js/theme/index.js | uglifyjs -mc > _assets/website/theme.js 命令的两个插件均已安装完毕,理所应该开始重新编译源码了,但是竟然报错了?
当涌现报错时,开始疑惑人生,难道推论禁绝确,难道环境没有安装成功吗,为啥提示找不到 mousetrap 模块?
算了吧,与其费尽心思预测为啥无法加载 mousetrap 模块,不如连续安装剩余依赖,最大可能性打消环境问题.
那就先把 src/build.sh 构建脚本涉及到的其他命令全部安装一遍,然后再试一下吧!
除了编译 Js 的命令外,还有编译 Css 的命令,关于构建脚本 build.sh 的其他内容便是基本的复制粘贴之类的操作了.
这里省略面向搜索编程的中间过程,安装命令如下:
当我再一次运行构建脚本时,满心期待会编译成功,没想到现实再一次打脸,这时候缺点更多了呢,真的是没想到!
那就连续扩大安装环境范围,这时候对全体 gitbook-plugin-theme-default 进行 npm install 安装干系依赖,这一次会发生什么情形呢?
让我们拭目以待!
命令行没有了乱七八糟的输出,天下变得安静了!
linux 命令行哲学见告我们,没有便是好,全部安装项目环境后再次运行 src/build.sh 脚本命令行瞬间安静了!
怀着忐忑不定的心,切换到测试项目运行 gitbook serve 命令后,那一瞬间,觉得天下都静止了,奇迹就这么发生了?
终于成功了,实现默认折叠效果了吗?
为了验证是否成功实现默认折叠失落效,做一次反向测试,既然默认折叠左侧菜单设置的是 false,如果设置成 true 的话,默认该当是展开状态.
重新编译后再次启动本地测试项目,如果是展开状态,那就解释成功不是有时而是靠技巧和努力!
重新编译源码/Users/snowdreams1006/.gitbook/versions/3.2.3/node_modules/gitbook-plugin-theme-default
启动本地项目/Users/snowdreams1006/Documents/workspace/test
苦心人天不负,不是昙花一现的巧合而是货真价实的现实,就这么实现了默认折叠左侧菜单功能!
如果你是 Gitbook 普通用户或者查看正在利用的 gitbook 版本信息打开正在利用的 gitbook 安装位置新文件更换掉原来的 _assets/website/theme.js 文件切换到测试项目验证默认折叠是否已生效
如果你不怕麻烦,喜好折腾,那么不妨体验一下如何重新编译源码文件.
查看正在利用的 gitbook 版本信息打开正在利用的 gitbook 安装位置安装 theme-default 默认主题项目所需依赖安装 build.sh 构建脚本所需依赖运行 build.sh 构建脚本重新编译切换到测试项目验证默认折叠是否已生效值得把稳的是,实现默认折叠左侧菜单功能仅仅须要添加一行代码,但是也很有可能和项目中已引入插件存在冲突,毕竟 sidebar 的状态也可以被未知代码所变动!Copy// Prepare sidebar: state and toggle buttonfunction init() { // Close sidebar as default state gitbook.storage.set('sidebar', false); // Open sidebar as default state // gitbook.storage.set('sidebar', true); // Init last state if not mobile if (!platform.isMobile()) { toggleSidebar(gitbook.storage.get('sidebar', true), false); } // Close sidebar after clicking a link on mobile $(document).on('click', '.book-summary li.chapter a', function(e) { if (platform.isMobile()) toggleSidebar(false, false); });}
末了希望本文对你有所帮助,面向搜索编程变得不可用时,独立重生也未尝不可,如果大家在利用 Gitbook 中碰着任何问题,欢迎留言评论见告我,当然我也不一定担保办理,万一哪天心血来潮翻看一下源码就办理了呢!
