', { 'class': 'dropdown '+positionClass+' '+opts.className }); // Add button to container $btn.addClass('toggle-dropdown'); $container.append($btn); // Create inner menu var $menu = createDropdownMenu(opts.dropdown); // Menu position $menu.addClass('dropdown-'+(opts.position == 'right'? 'left' : 'right')); $container.append($menu); $result = $container; } else { $btn.addClass(positionClass); $btn.addClass(opts.className); $result = $btn; } $result.addClass('js-toolbar-action'); if ($.isNumeric(opts.index) && opts.index >= 0) { insertAt($toolbar, '.btn, .dropdown, h1', opts.index, $result); } else { $result.insertBefore($title); } } // Update all buttons function updateAllButtons() { $('.js-toolbar-action').remove(); buttons.forEach(updateButton); } 粗略看一下,上述代码是实现触发左侧图标折叠/展开菜单的逻辑实现,这里只是具体实现还不知道谁是使用者,也就是说这种逻辑是在哪里调用的? 只能继续顺藤摸瓜,往上翻看,根据基本开发常识,在该文件的同级目录中存在如下文件,其中的 index.js 应该就是入口文件: Copy snowdreams1006s-MacBook-Pro:theme snowdreams1006$ tree . . ├── dropdown.js ├── index.js ├── keyboard.js ├── loading.js ├── navigation.js ├── platform.js ├── sidebar.js └── toolbar.js 0 directories, 8 files snowdreams1006s-MacBook-Pro:theme snowdreams1006$ 打开 index.js 文件,根据注释我们可以看到 init() 函数是入门函数,其中 sidebar.init() 和 sidebar.toggle() 函数无不说明 sidebar.js 和 toolbar.js 关系密切,完全有理由猜想 sidebar.js 是 toolbar.js 的使用者! Copy function init() { // Init sidebar sidebar.init(); // Init keyboard keyboard.init(); // Bind dropdown dropdown.init(); // Init navigation navigation.init(); // Add action to toggle sidebar toolbar.createButton({ index: 0, icon: 'fa fa-align-justify', onClick: function(e) { e.preventDefault(); sidebar.toggle(); } }); } 打开 sidebar.js 文件并查看 init() 初始化函数和 toggle() 触发函数,可以验证我们的猜想,这里就是控制中心! Copy // Prepare sidebar: state and toggle button function init() { // 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); }); } 「雪之梦技术驿站」: 非手机端初始化上次状态,默认展开侧边栏,如果是手机端则折叠侧边栏.其中 toggleSidebar() 接收两个参数,第一次参数表示是展开还是折叠,第二个参数暂不可知. Copy // Toggle sidebar with or withour animation function toggleSidebar(_state, animation) { if (gitbook.state != null && isOpen() == _state) return; if (animation == null) animation = true; gitbook.state.$book.toggleClass('without-animation', !animation); gitbook.state.$book.toggleClass('with-summary', _state); gitbook.storage.set('sidebar', isOpen()); } 「雪之梦技术驿站」: 第一个参数确实表示状态而第二个参数表示是否有动画效果,不用看具体代码逻辑而是看注释就能猜出大概逻辑了. 通过上述分析,我们可以得知 init() 初始化函数决定了默认行为是折叠还是展开,同时 gitbook.storage.set('sidebar', isOpen()) 和 gitbook.storage.get('sidebar', true) 应该是设置和获取是否展开菜单的标志! 由此,如果想要默认折叠左侧菜单,那么只需要设置成 gitbook.storage.set('sidebar', false) 应该就会生效! 如何编译# 说干就干,于是乎在 init() 函数插入 gitbook.storage.set('sidebar', false) 默认折叠逻辑,接着看一下是否需要重新编译才能生效? Copy // Prepare sidebar: state and toggle button function init() { // Close sidebar as default state gitbook.storage.set('sidebar', false); // 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 serve 启动本地服务器,发现并没有任何变化,很有可能改变源码文件需要重新编译才会生效或者说更改的源码项目也没有生效? gitbook-issue-modify-default-fold-test-serve-again-fail.png 「雪之梦技术驿站」: 该源码文件所在的项目是 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 项目的配置文件,可以佐证上述规则的正确性. Copy "plugins": [ "toc", "pageview-count", "mermaid-gb3", "-lunr", "-search", "search-plus", "splitter", "-sharing", "sharing-plus", "expandable-chapters-small", "anchor-navigation-ex", "edit-link", "copy-code-button", "chart", "favicon-custom", "github-buttons", "advanced-emoji", "rss", "readmore", "copyright", "tbfed-pagefooter", "mygitalk", "donate" ] 作为普通的 nodejs 包,开发规范规定了 package.json 提供了插件的配置信息,而 Gitbook 插件除了是标准的 nodejs 包之外还有自己的约束,主要体现在提供了 gitbook 节点属性: Copy "gitbook": { "properties": { "styles": { "type": "object", "title": "Custom Stylesheets", "properties": { "website": { "title": "Stylesheet for website output", "default": "styles/website.css" }, "pdf": { "title": "Stylesheet for PDF output", "default": "styles/pdf.css" }, "epub": { "title": "Stylesheet for ePub output", "default": "styles/epub.css" }, "mobi": { "title": "Stylesheet for Mobi output", "default": "styles/mobi.css" }, "ebook": { "title": "Stylesheet for ebook outputs (PDF, ePub, Mobi)", "default": "styles/ebook.css" }, "print": { "title": "Stylesheet to replace default ebook css", "default": "styles/print.css" } } }, "showLevel": { "type": "boolean", "title": "Show level indicator in TOC", "default": false } } } 默认主题仅仅提供了两个配置项,分别是 styles 样式文件位置和 showLevel 是否显示层级配置. 再一次验证了猜想的正确性,真的需要修改源码才能实现默认折叠左侧菜单的效果,紧着继续在 package.json 中找到项目源码的托管地址,看一下有没有提供二次开发文档. Copy "repository": { "type": "git", "url": "git+https://github.com/GitbookIO/theme-default.git" } 令人遗憾的是,项目介绍空空如也,除了一张主题预览图,别的什么都没有?! gitbook-issue-modify-default-fold-theme-default-github-preview.png 既然没有二次开发文档,那就看看项目源码有没有别的蛛丝马迹教我们如何编译? 「雪之梦技术驿站」: 绕了这么多,其实还不是因为比较菜,人家都提供给源码都不会编译,留下来没有技术的眼泪! 视角再一次切换到源码目录,除了 js 和 less 目录外,竟然还有一个 build.sh 构建脚本! Copy snowdreams1006s-MacBook-Pro:src snowdreams1006$ tree . ├── build.sh ├── js │ ├── core │ └── theme │ ├── dropdown.js │ ├── index.js │ ├── keyboard.js │ ├── loading.js │ ├── navigation.js │ ├── platform.js │ ├── sidebar.js │ └── toolbar.js └── less 7 directories, 37 files snowdreams1006s-MacBook-Pro:src snowdreams1006$ 这一刻,仿佛看到了九点钟升起的太阳,未来是你们的也是我们的! Copy snowdreams1006s-MacBook-Pro:gitbook-plugin-theme-default snowdreams1006$ cat src/build.sh #! /bin/bash # Cleanup folder rm -rf _assets # Recreate folder mkdir -p _assets/website/ mkdir -p _assets/ebook/ # Compile JS browserify src/js/core/index.js | uglifyjs -mc > _assets/website/gitbook.js browserify src/js/theme/index.js | uglifyjs -mc > _assets/website/theme.js # Compile Website CSS lessc -clean-css src/less/website.less _assets/website/style.css # Compile eBook CSS lessc -clean-css src/less/ebook.less _assets/ebook/ebook.css lessc -clean-css src/less/pdf.less _assets/ebook/pdf.css lessc -clean-css src/less/mobi.less _assets/ebook/mobi.css lessc -clean-css src/less/epub.less _assets/ebook/epub.css # Copy fonts mkdir -p _assets/website/fonts cp -R node_modules/font-awesome/fonts/ _assets/website/fonts/fontawesome/ # Copy icons mkdir -p _assets/website/images cp node_modules/gitbook-logos/output/favicon.ico _assets/website/images/ cp node_modules/gitbook-logos/output/apple-touch-icon-152.png _assets/website/images/apple-touch-icon-precomposed-152.png snowdreams1006s-MacBook-Pro:gitbook-plugin-theme-default snowdreams1006$ 这一段脚本中除了看不懂 browserify,uglifyjs,lessc -clean-css 命令外,剩下部分都很简单,大致是编译源码文件并输出到 _assets 目录. 编译 js 的命令主要有以下两条,而我们关心的 theme.js 仅涉及到一条,除此之外没有任何别的依赖,这一点非常好! Copy # Compile JS browserify src/js/core/index.js | uglifyjs -mc > _assets/website/gitbook.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 src/js/theme/index.js | uglifyjs -mc > _assets/website/theme