翻遍互联网都找不到的解决方案,一行代码轻松实现 Gitbook 默认折叠左侧菜单效果

Gitbook 是一款产品文档构建工具,也能够用于构建我的博客,默认状况下电脑端访问时左侧菜单是展开状态,可恰恰有人想要实现默认折叠效果,因而诞生了这篇文章!

善良的我选择帮助别人

多是网上关于 Gitbook 的教程相对来讲有些落后,加上写文章时分享了很多关于 gitbook 系列教程,所以关注个人粉丝好友中有很多是来源于 Gitbook.

因此上个月有个好友问我能不能配置 Gitbook 默认折叠的效果,内心有些犯难,做为 gitbook 的忠实粉丝,我都不知道 gitbook 还有这方面的配置?!

可是,善良的我老是有求必应,不忍心拒绝小白用户,因而我便抱着试一试的心态开始研究一下如何默认折叠?

固然,解决问题前仍是要先复现一下问题,而后在命令行中熟练敲入了 gitbook serve 命令来启动本地服务器,为了排除缓存等影响,特地打开了 Chrome 浏览器的无痕模式,果不其然默认左侧菜单是展开的!

「雪之梦技术驿站」: 不能复现的问题都不是个人问题,拒绝解决此类问题,搞很差是你本身环境搭建问题呢!

蓦然回首官方文档已走

问题复现后就要开始寻求解决之道,虽然印象中并无相关配置,可是难保记忆混乱遗漏了某些配置项,因此仍是先看看官方文档怎么说的吧!

可是,当你在浏览器中输入 gitbook 官方文档 时,并找不到想象中的官方文档而是新版官网,不信你本身去搜一下,确定是新版官网.

当你自觉得找到了官网时,点击进去查看文档部分,很遗憾,这是新版文档并非老版文档,你还会继续百度一下寻求可用连接期待找到官方文档.

为了节省宝贵时间,这里推荐访问我的维护的 gitbook 文档,点击访问: snowdreams1006.github.io/gitbook-off…

目前提供了中英文两个语言版本的文档,相信能够知足大多数用户的需求了,选择任意一种语言后点击进入翻阅相关设置.

实际上,官方文档也并无什么用,由于根本就没有提到过如何更改相关配置使其默认折叠而非展开状态.

「雪之梦技术驿站」: 官方再也不维护旧版文档,费尽心机找到旧版文档也无济于事,由于并无说起到相关配置,因此猜想极可能并未提供有关配置项!

百度一下你就知道了吗

俗话说:"互联网上绝大多数问题别人都已经遇到过并提供了解决方案,咱们惟一要作的就是找到它!"

这也是面向搜索编程的核心思想,遇到默认折叠问题应该也不会例外,那就搜索一下吧!

虽然百度搜索出现了一些相关文章,可是却不是咱们想要的效果,大多数是基于 gitbook 插件实现的目录折叠效果,并非默认折叠左侧菜单效果.

无论是换关键词从新搜索仍是谷歌搜索,均未发现有关默认折叠左侧菜单的解决方案,难不成面向搜索失败了,要作解决问题的第一人吗?!

「雪之梦技术驿站」: 屡次重复搜索操做均为找到解决方案,因而可知真的不多有人想要默认折叠左侧菜单,我也是很佩服提出该问题的小伙伴骨骼惊奇啊!

自力更生找寻蛛丝马迹

既然依靠别人没法解决问题,那么只能自力更生独自解决问题,是时候考验真正的技术了!

为了排除无关干扰,不能再用本身的 gitbook 项目了,毕竟文件太多不方便后续调试,那么不妨从新建立一个测试项目.

• 建立测试项目

$ mkdir test && cd test
复制代码

• 初始化测试项目

$ gitbook init
复制代码

• 启动测试项目

$ gitbook serve
复制代码

虽然一片空白,并无什么实质性内容,可是大道至简,对于咱们复现并测试问题来讲,足够了!

打开 Chrome 浏览器并按下 F12 开启调试模式,鼠标选中左侧的 Elements 元素选项卡并点亮左侧的小鼠标,而后在页面上找到左侧图标按钮,因而选中元素高亮了.

单独摘录 Html 关键代码以下:

<a class="btn pull-left js-toolbar-action" aria-label="" href="#"><i class="fa fa-align-justify"></i></a>
复制代码

稍微熟悉前端的小伙伴可能很轻松就能明白 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 current
GitBook version is 3.2.3
复制代码

• 找到 gitbook 安装位置

gitbook 通常安装在 ~/.gitbook/versions/3.2.3 目录,其中 ~ 表示用户家目录.

$ open ~/.gitbook/versions/3.2.3
复制代码

选择一款熟悉的编辑器并打开 Gitbook 安装目录,这里以 sublime 编辑器为例,选中项目后右键全局搜索关键字 js-toolbar-action 指望找到相关源码文件.

全局搜索后主要出现两个文件包含 js-toolbar-action 关键字,一个是输出文件 theme.js ,另外一个是源码文件 toolbar.js .

Searching 19744 files for "js-toolbar-action"

/Users/snowdreams1006/.gitbook/versions/3.2.3/node_modules/gitbook-plugin-theme-default/_assets/website/theme.js:

...

/Users/snowdreams1006/.gitbook/versions/3.2.3/node_modules/gitbook-plugin-theme-default/src/js/theme/toolbar.js:

...

4 matches across 2 files
复制代码

可想而知,源码文件确定是通过编译处理后统一打包输出,所以不只仅要找到源码文件还要掌握如何编译.

「雪之梦技术驿站」: 定位到当前 gitbook 目录后借助全局搜索功能定位到具体的文件路径,起做用的是 gitbook-plugin-theme-default 项目,其实这就是 Gitbook 的默认主题.

源码在哪

/Users/snowdreams1006/.gitbook/versions/3.2.3/node_modules/gitbook-plugin-theme-default/src/js/theme/toolbar.js :

// Update a button
function updateButton(opts) {
    var $result;
    var $toolbar = $('.book-header');
    var $title = $toolbar.find('h1');

    // Build class name
    var positionClass = 'pull-'+opts.position;

    // Create button
    var $btn = $('<a>', {
        'class': 'btn',
        'text': opts.text? ' ' + opts.text : '',
        'aria-label': opts.label,
        'href': '#'
    });

    // Bind click
    $btn.click(opts.onClick);

    // Prepend icon
    if (opts.icon) {
        $('<i>', {
            'class': opts.icon
        }).prependTo($btn);
    }

    // Prepare dropdown
    if (opts.dropdown) {
        var $container = $('<div>', {
            '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 应该就是入口文件:

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 的使用者!

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() 触发函数,能够验证咱们的猜测,这里就是控制中心!

// 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() 接收两个参数,第一次参数表示是展开仍是折叠,第二个参数暂不可知.

// 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) 默认折叠逻辑,接着看一下是否须要从新编译才能生效?

// 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-plugin-theme-default ,根据 gitbook 插件命名规范咱们知道,gitbook-plugin-* 通常是功能性插件,这一类的插件有 gitbook-plugin-readmore 阅读更多插件和 gitbook-plugin-copyright 版权保护插件等等.

可是若是插件名以 gitbook-plugin-theme 开头的话,这一类插件就是主题插件,好比 gitbook-plugin-theme-default 就是默认主题.

除此以外,只要遵照该命名规则的插件引入时无需添加 gitbook-plugin- 前缀,能够直接在 gitbook.json 文件中引入剩余的简称做为插件名.

摘录自 Gitbook 项目的配置文件,能够佐证上述规则的正确性.

"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 节点属性:

"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 中找到项目源码的托管地址,看一下有没有提供二次开发文档.

"repository": {
    "type": "git",
    "url": "git+https://github.com/GitbookIO/theme-default.git"
}
复制代码

使人遗憾的是,项目介绍空空如也,除了一张主题预览图,别的什么都没有?!

既然没有二次开发文档,那就看看项目源码有没有别的蛛丝马迹教咱们如何编译?

「雪之梦技术驿站」: 绕了这么多,其实还不是由于比较菜,人家都提供给源码都不会编译,留下来没有技术的眼泪!

视角再一次切换到源码目录,除了 js 和 less 目录外,居然还有一个 build.sh 构建脚本!

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$ 
复制代码

这一刻,仿佛看到了九点钟升起的太阳,将来是大家的也是咱们的!

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 仅涉及到一条,除此以外没有任何别的依赖,这一点很是好!

# 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.js

百度一下 browserify

再一次打开熟悉的浏览器输入关键字 browserify 后出现一系列相关文章,很好奇为啥排名第一个都不会是官网呢?无论怎么样,找到 browserify 的 github 项目地址也是不错的!

这里并不关心 browserify 究竟是什么,只在意如何安装基本环境而已!

$ npm install -g browserify
复制代码

「雪之梦技术驿站」: 若是是 mac 电脑,全局安装须要管理员权限,应该运行 sudo npm install -g browserify ,若是嫌弃安装速度慢也能够运行 cnpm install -g browserify ,前提是已安装 cnpm 命令.

谷歌一下 uglifyjs

不吹不黑,少走一点弯路,直接就找到了 github 项目网址,一样的也不关心项目介绍,直接翻看如何安装部分.

$ npm install -g uglify-js
复制代码

从新编译 others

涉及到 browserify src/js/theme/index.js | uglifyjs -mc > _assets/website/theme.js 命令的两个插件均已安装完毕,理所应当开始从新编译源码了,可是居然报错了?

当出现报错时,开始怀疑人生,难道推论不正确,难道环境没有安装成功吗,为啥提示找不到 mousetrap 模块?

$ browserify src/js/theme/index.js | uglifyjs -mc > _assets/website/theme.js
Error: Cannot find module 'mousetrap' from '/Users/snowdreams1006/.gitbook/versions/3.2.3/node_modules/gitbook-plugin-theme-default/src/js/theme'
    at /usr/local/lib/node_modules/browserify/node_modules/_resolve@1.1.7@resolve/lib/async.js:46:17
    at process (/usr/local/lib/node_modules/browserify/node_modules/_resolve@1.1.7@resolve/lib/async.js:173:43)
    at ondir (/usr/local/lib/node_modules/browserify/node_modules/_resolve@1.1.7@resolve/lib/async.js:188:17)
    at load (/usr/local/lib/node_modules/browserify/node_modules/_resolve@1.1.7@resolve/lib/async.js:69:43)
    at onex (/usr/local/lib/node_modules/browserify/node_modules/_resolve@1.1.7@resolve/lib/async.js:92:31)
    at /usr/local/lib/node_modules/browserify/node_modules/_resolve@1.1.7@resolve/lib/async.js:22:47
    at FSReqCallback.oncomplete (fs.js:158:21)
复制代码

算了吧,与其费尽心思猜想为啥没法加载 mousetrap 模块,不如继续安装剩余依赖,最大可能性排除环境问题.

那就先把 src/build.sh 构建脚本涉及到的其余命令所有安装一遍,而后再试一下吧!

除了编译 Js 的命令外,还有编译 Css 的命令,关于构建脚本 build.sh 的其余内容就是基本的复制粘贴之类的操做了.

# Compile Website CSS
lessc -clean-css src/less/website.less _assets/website/style.css
复制代码

这里省略面向搜索编程的中间过程,安装命令以下:

$ npm install -g less less-plugin-clean-css
复制代码

当我再一次运行构建脚本时,满心期待会编译成功,没想到现实再一次打脸,这时候错误更多了呢,真的是没想到!

snowdreams1006s-MacBook-Pro:gitbook-plugin-theme-default snowdreams1006$ src/build.sh 
Error: Cannot find module 'jquery' from '/Users/snowdreams1006/.gitbook/versions/3.2.3/node_modules/gitbook-plugin-theme-default/src/js/core'
    at /usr/local/lib/node_modules/browserify/node_modules/_resolve@1.1.7@resolve/lib/async.js:46:17
    at process (/usr/local/lib/node_modules/browserify/node_modules/_resolve@1.1.7@resolve/lib/async.js:173:43)
    at ondir (/usr/local/lib/node_modules/browserify/node_modules/_resolve@1.1.7@resolve/lib/async.js:188:17)
    at load (/usr/local/lib/node_modules/browserify/node_modules/_resolve@1.1.7@resolve/lib/async.js:69:43)
    at onex (/usr/local/lib/node_modules/browserify/node_modules/_resolve@1.1.7@resolve/lib/async.js:92:31)
    at /usr/local/lib/node_modules/browserify/node_modules/_resolve@1.1.7@resolve/lib/async.js:22:47
    at FSReqCallback.oncomplete (fs.js:158:21)
Error: Cannot find module 'mousetrap' from '/Users/snowdreams1006/.gitbook/versions/3.2.3/node_modules/gitbook-plugin-theme-default/src/js/theme'
    at /usr/local/lib/node_modules/browserify/node_modules/_resolve@1.1.7@resolve/lib/async.js:46:17
    at process (/usr/local/lib/node_modules/browserify/node_modules/_resolve@1.1.7@resolve/lib/async.js:173:43)
    at ondir (/usr/local/lib/node_modules/browserify/node_modules/_resolve@1.1.7@resolve/lib/async.js:188:17)
    at load (/usr/local/lib/node_modules/browserify/node_modules/_resolve@1.1.7@resolve/lib/async.js:69:43)
    at onex (/usr/local/lib/node_modules/browserify/node_modules/_resolve@1.1.7@resolve/lib/async.js:92:31)
    at /usr/local/lib/node_modules/browserify/node_modules/_resolve@1.1.7@resolve/lib/async.js:22:47
    at FSReqCallback.oncomplete (fs.js:158:21)
FileError: '../../node_modules/font-awesome/less/font-awesome.less' wasn't found. Tried - /Users/snowdreams1006/.gitbook/versions/3.2.3/node_modules/gitbook-plugin-theme-default/node_modules/font-awesome/less/font-awesome.less,/Users/snowdreams1006/.gitbook/versions/3.2.3/node_modules/gitbook-plugin-theme-default/node_modules/font-awesome/less/font-awesome.less,../../node_modules/font-awesome/less/font-awesome.less in /Users/snowdreams1006/.gitbook/versions/3.2.3/node_modules/gitbook-plugin-theme-default/src/less/website.less on line 2, column 1: 1 @import "base/all.less"; 2 @import "../../node_modules/font-awesome/less/font-awesome.less"; 3 @import "../../node_modules/preboot/less/preboot.less"; FileError: '../../../node_modules/gitbook-markdown-css/less/mixin.less' wasn't found. Tried - /Users/snowdreams1006/.gitbook/versions/3.2.3/node_modules/gitbook-plugin-theme-default/node_modules/gitbook-markdown-css/less/mixin.less,/Users/snowdreams1006/.gitbook/versions/3.2.3/node_modules/node_modules/gitbook-markdown-css/less/mixin.less,../../../node_modules/gitbook-markdown-css/less/mixin.less in /Users/snowdreams1006/.gitbook/versions/3.2.3/node_modules/gitbook-plugin-theme-default/src/less/base/mixins.less on line 1, column 1:
1 @import "../../../node_modules/gitbook-markdown-css/less/mixin.less";
2 

FileError: '../../../node_modules/gitbook-markdown-css/less/mixin.less' wasn't found. Tried - /Users/snowdreams1006/.gitbook/versions/3.2.3/node_modules/gitbook-plugin-theme-default/node_modules/gitbook-markdown-css/less/mixin.less,/Users/snowdreams1006/.gitbook/versions/3.2.3/node_modules/node_modules/gitbook-markdown-css/less/mixin.less,../../../node_modules/gitbook-markdown-css/less/mixin.less in /Users/snowdreams1006/.gitbook/versions/3.2.3/node_modules/gitbook-plugin-theme-default/src/less/base/mixins.less on line 1, column 1: 1 @import "../../../node_modules/gitbook-markdown-css/less/mixin.less"; 2 FileError: '../../../node_modules/gitbook-markdown-css/less/mixin.less' wasn't found. Tried - /Users/snowdreams1006/.gitbook/versions/3.2.3/node_modules/gitbook-plugin-theme-default/node_modules/gitbook-markdown-css/less/mixin.less,/Users/snowdreams1006/.gitbook/versions/3.2.3/node_modules/node_modules/gitbook-markdown-css/less/mixin.less,../../../node_modules/gitbook-markdown-css/less/mixin.less in /Users/snowdreams1006/.gitbook/versions/3.2.3/node_modules/gitbook-plugin-theme-default/src/less/base/mixins.less on line 1, column 1:
1 @import "../../../node_modules/gitbook-markdown-css/less/mixin.less";
2 

FileError: '../../../node_modules/gitbook-markdown-css/less/mixin.less' wasn't found. Tried - /Users/snowdreams1006/.gitbook/versions/3.2.3/node_modules/gitbook-plugin-theme-default/node_modules/gitbook-markdown-css/less/mixin.less,/Users/snowdreams1006/.gitbook/versions/3.2.3/node_modules/node_modules/gitbook-markdown-css/less/mixin.less,../../../node_modules/gitbook-markdown-css/less/mixin.less in /Users/snowdreams1006/.gitbook/versions/3.2.3/node_modules/gitbook-plugin-theme-default/src/less/base/mixins.less on line 1, column 1: 1 @import "../../../node_modules/gitbook-markdown-css/less/mixin.less"; 2 cp: directory _assets/website/fonts/fontawesome does not exist cp: node_modules/gitbook-logos/output/favicon.ico: No such file or directory cp: node_modules/gitbook-logos/output/apple-touch-icon-152.png: No such file or directory 复制代码

那就继续扩大安装环境范围,这时候对整个 gitbook-plugin-theme-default 进行 npm install 安装相关依赖,这一次会发生什么状况呢?

$ npm install
复制代码

让咱们拭目以待!

snowdreams1006s-MacBook-Pro:gitbook-plugin-theme-default snowdreams1006$ src/build.sh 
snowdreams1006s-MacBook-Pro:gitbook-plugin-theme-default snowdreams1006$
复制代码

命令行没有了乱七八糟的输出,世界变得安静了!

linux 命令行哲学告诉咱们,没有消息就是好消息,所有安装项目环境后再次运行 src/build.sh 脚本命令行瞬间安静了!

怀着忐忑不安的心,切换到测试项目运行 gitbook serve 命令后,那一瞬间,感受世界都静止了,奇迹就这么发生了?

终于成功了,实现默认折叠效果了吗?

为了验证是否成功实现默认折叠失效,作一次反向测试,既然默认折叠左侧菜单设置的是 false,若是设置成 true 的话,默认应该是展开状态.

// Prepare sidebar: state and toggle button
function 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);
    });
}
复制代码

从新编译后再次启动本地测试项目,若是是展开状态,那就说明成功不是偶然而是靠技巧和努力!

• 从新编译源码

$ src/build.sh
复制代码

/Users/snowdreams1006/.gitbook/versions/3.2.3/node_modules/gitbook-plugin-theme-default

• 启动本地项目

$ gitbook serve
复制代码

/Users/snowdreams1006/Documents/workspace/test

「雪之梦技术驿站」: 苦心人天不负,不是昙花一现的巧合而是货真价实的现实,就这么实现了默认折叠左侧菜单功能!

懒人直达以及回顾总结

若是你是 Gitbook 普通用户或者懒得折腾,那么推荐你直接替换掉 theme.js 文件:

• 查看正在使用的 gitbook 版本信息

$ gitbook current
GitBook version is 3.2.3
复制代码

• 打开正在使用的 gitbook 安装位置

$ open ~/.gitbook/versions/3.2.3/node_modules/gitbook-plugin-theme-default/
复制代码

• 新文件替换掉原来的 _assets/website/theme.js 文件

能够关注微信公众号回复 "gitbook" 获取从新编译后的新文件 theme.js.

• 切换到测试项目验证默认折叠是否已生效

$ gitbook serve
复制代码

若是你不怕麻烦,喜欢折腾,那么不妨体验一下如何从新编译源码文件.

• 查看正在使用的 gitbook 版本信息

$ gitbook current
GitBook version is 3.2.3
复制代码

• 打开正在使用的 gitbook 安装位置

$ open ~/.gitbook/versions/3.2.3/node_modules/gitbook-plugin-theme-default/
复制代码

• 安装 theme-default 默认主题项目所需依赖

$ npm install
复制代码

• 安装 build.sh 构建脚本所需依赖

$ sudo npm install -g browserify uglify-js less less-plugin-clean-css
复制代码

• 运行 build.sh 构建脚本从新编译

$ src/build.sh
复制代码

• 切换到测试项目验证默认折叠是否已生效

$ gitbook serve
复制代码

值得注意的是,实现默认折叠左侧菜单功能仅仅须要添加一行代码,可是也颇有可能和项目中已引入插件存在冲突,毕竟 sidebar 的状态也能够被未知代码所更改!

// Prepare sidebar: state and toggle button
function 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 中遇到任何问题,欢迎留言评论告诉我,固然我也不必定保证解决,万一哪天心血来潮翻看一下源码就解决了呢!

若是你以为本文对你有所帮助,欢迎点赞留言告诉我,你的鼓励是我继续创做的动力,不妨顺便关注下我的公众号「雪之梦技术驿站」,按期更新优质文章哟!