Solutions that you can't find through the Internet, one line of code to easily collapse Gitbook's default left menu effect

Gitbook is a product documentation building tool that can also be used to build a personal blog. By default, when accessed on the computer, the left menu is expanded, but some people want to achieve the default folding effect, so this article was born!

Kind I choose to help others

Maybe the online Gitbook tutorials are a bit behind schedule, plus I shared a lot about it while writing articles gitbook Series Tutorials So many of my fans who follow me are from Gitbook.

So last month, a friend asked me if I could configure the default folding effect of Gitbook. I was a bit confused. As a loyal gitbook fan, I didn't know if gitbook had any other configurations in this area?!

However, the kind-hearted I always have to respond and can't bear to reject the small white user, so I started to study how to fold by default with a try mentality.

gitbook-issue-modify-default-fold-preview.png

Of course, you have to repeat the problem before you solve it, then skillfully type the gitbook serve r command on the command line to start the local server. In order to exclude caching and other effects, you have deliberately opened the Trackless mode of Chrome Browser, otherwise the default left menu is expanded!

gitbook-issue-modify-default-fold-review.png

"Snow Dream Technology Post": The problems that can not be reproduced are not my problems, refuse to solve such problems, or it is your own environment to build problems!

Suddenly recall that the official document has gone

After the problem recurs, you should start to find a solution. Although there are no related configurations in your impression, some configurations are missing from your hard-to-remember confusion, so let's see what the official documents say first.

However, when you enter gitbook's official documents into your browser, you can't find the official documents you imagined but a new version of the official website. If you don't trust you to search for it yourself, it must be a new version of the official website.

gitbook-issue-modify-default-fold-document-search-result-preview.png

When you think you have found the official website, click in to view the document section. Unfortunately, this is a new version of the document and not an old one. You will also continue Baidu to look for available links in order to find the official document.

gitbook-issue-modify-default-fold-document-search-result-click.png

To save precious time, it is recommended that you visit a personally maintained gitbook document by clicking Visit: https://snowdreams1006.github.io/gitbook-official/

At present, there are documents in both Chinese and English versions, which are believed to meet the needs of most users. Select any language and click to browse through the relevant settings.

gitbook-issue-modify-default-fold-gitbook-official-preview.png

In fact, official documents are useless because there is no mention of how to change the configuration so that it collapses by default instead of expanding.

gitbook-issue-modify-default-fold-gitbook-official-useless.png

"Snow Dream Technology Post": It is no longer necessary for the government to maintain the old documents. It is no use trying to find the old documents. There is no mention of the configuration, so it is likely that no configuration item has been provided!

Baidu, you know?

As the saying goes, "Most problems on the Internet have been encountered by others and solutions have been provided. The only thing we have to do is find it!"

This is also the core idea of search-oriented programming, and default folding problems should not be an exception, so let's search!

gitbook-issue-modify-default-fold-search-baidu-no-result.png

Although there are some related articles in Baidu Search, they are not what we want. Most of them are based on the folding effect of the gitbook plug-in, not the default folding effect of the left menu.

Whether it's a re-search with a new keyword or a Google search, there's no solution for the default fold-down left menu. It's hard not to face the search failure. Do you want to be the first person to solve the problem?!

gitbook-issue-modify-default-fold-search-google-no-result.png

"Snow Dream Technology Post": Repeated searches to find solutions show that few people really want to collapse the left menu by default, and I'm also impressed by the little buddy skeleton who asked this question!

Self-reliant Search for Traces

Now that you can't solve problems by relying on others, you can only solve problems by yourself. It's time to test your real technology!

In order to eliminate irrelevant interference, you can no longer use your gitbook project. After all, there are too many files for subsequent debugging, so you might want to re-create a test project.

  • Create a test project
$ mkdir test && cd test
  • Initialize test project
$ gitbook init
  • Start a test project
$ gitbook serve

Although it's blank and there's nothing substantial, the Avenue is simple enough for us to recreate and test the problem!

Open the Chrome browser and press F12 to start debugging mode, select the Elements Elements tab on the left side of the mouse, light up the small mouse on the left side, then find the icon button on the left side of the page, and the selected element is highlighted.

A separate excerpt of the Html key code is as follows:

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

A little familiarity with the front-end buddy may make it easy to understand what the class attribute of the a tag means, as the name implies:

  • btn should be a style of control over appearance, acting like a button.
  • pull-left should be the position of the control element, pulling down the left side.
  • js-toolbar-action should control the behavior of elements and js toolbar behavior.

Thus, clicking on the icon to collapse/expand the left menu should be. js-toolbar-action in effect, that is, a section of JS must be listening on the class!

At this point, click on the Event Listeners tab on the right to see which specific js file is working for which click event the element has listened for.

Otherwise, there is click click event listening on the element and the logic code to execute the listening appears in the theme.js file, click into the file to see the specific content.

The compressed js code is not readable. Click on the {} icon at the bottom left to format the code, but it may not be just compression but logic like ugly or confusing code. The formatted code is still unreadable!

"Snow Dream Technology Post": Find a clue at last. The modified code logic is hidden in the theme.js file. The default folding effect can be achieved by recompiling the output theme.js file and replacing it with the relevant source code!

Don't worry about the darkness before dawn

From the clues we have now, it is certain that there are two main useful clues:

  • Listening Element.js-toolbar-action
  • Output file theme.js

One is the source file, the other is the output file, in order to quickly locate the relevant code logic in the huge gitbook project, limited personal ability, not familiar with the front-end development and debugging process, so use the simplest and crude foolish search method to investigate!

"Snow Dream Technology Post": If the reader compares the properties of the modern front-end development process, the project structure should be able to debug the positioning problem after about one pass, without the foolish search like me!

  • View the current gitbook version
$ gitbook current
GitBook version is 3.2.3
  • Locate gitbook installation location

Gitbook is generally installed in the ~/.gitbook/versions/3.2.3 directory, where ~represents the user's home directory.

$ open ~/.gitbook/versions/3.2.3

Choose a familiar editor and open the Gitbook installation directory. Take the sublime editor for example. Right-click the global search keyword js-toolbar-action when the project is selected expecting to find the relevant source files.

After the global search, there are two main files that contain js-toolbar-action keywords, one is the output file theme.js, the other is the source file 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

It is conceivable that source files must be uniformly packaged and output after compilation, so you need to know not only how to find the source files but also how to compile them.

"Snow Dream Technology Post": After locating the current gitbook directory, use the global search function to locate specific file paths. What works is the gitbook-plugin-theme-default project, which is actually the default theme of Gitbook.

Where is the source code

/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);
}

At a glance, the above code is a logical implementation that triggers the collapse/expand menu of the left icon, where the implementation just doesn't know who the user is, that is, where the logic is invoked?

You can only continue to grope around and look up. According to basic development common sense, there are the following files in the file's sibling directory, where index.js should be the entry file:

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$ 

Open the index.js file and we can see from the comments that the init() function is an introductory function, in which both sidebar.init() and sidebar.toggle() functions indicate that sidebar.js and toolbar.js are closely related, and there is good reason to guess that sidebar.js are users of 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();
        }
    });
}

To verify our conjecture, open the sidebar.js file and look at the init() initialization function and the toggle() trigger function, here's the control center!

// 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);
    });
}

"Snow Dream Technology Post": Non-mobile initializes the last state, expands the sidebar by default, folds the sidebar if it is mobile. In which toggleSidebar() receives two parameters, the first parameter indicates whether to expand or collapse, and the second parameter is not known yet.

// 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());
}

"Snow Dream Technology Post": The first parameter does represent the state and the second parameter indicates whether there is an animation effect. You can guess the approximate logic by looking at the comment instead of the code logic.

From the above analysis, we can see that the init() initialization function determines whether the default behavior is collapsed or expanded, and that gitbook.storage.set('sidebar', isOpen()) and gitbook.storage.get('sidebar', true) should be the flags to set and get whether to expand the menu!

So if you want to collapse the left menu by default, just set it to gitbook.storage.set('sidebar', false) and it should work!

How to Compile

Just do it, so you insert the default collapsing logic for gitbook.storage.set('sidebar', false) into the init() function, and then see if recompiling is necessary to take effect?

// 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);
    });
}

Then switch to the test project and run gitbook serve r again to start the local server. Nothing has changed. It is very likely that changes to the source file will need to be recompiled to take effect, or that the changed source project will not take effect?

"Snow Dream Technology Post": The source file is located in the project gitbook-plugin-theme-default. According to the gitbook plugin naming conventions, we know that gitbook-plugin-* is generally a functional plugin. There are gitbook-plugin-readmore read more plugins, gitbook-plugin-copyright protection plugins and so on.

But if the plug-in name starts with gitbook-plugin-theme, this type of plug-in is the theme plug-in, for example, gitbook-plugin-theme-default is the default theme.

In addition, as long as plug-ins that follow this naming rule are introduced without adding a gitbook-plugin-prefix, the remaining abbreviated plug-in names can be introduced directly into the gitbook.json file.

An excerpt from the configuration file for the Gitbook project will confirm the above rules.

"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"
]

As a normal nodejs package, the development specification specifies that package.json provides configuration information for plug-ins, while Gitbook plug-ins have their own constraints in addition to being standard nodejs packages, mainly in providing gitbook node properties:

"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
      }
    }
}

The default theme provides only two configurations, styles style file location and whether showLevel displays hierarchical configurations.

Verify the correctness of your guess again. You really need to modify the source code to collapse the left menu by default. Continue to find the managed address of the project source in package.json to see if a secondary development document is available.

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

Unfortunately, the project description is empty and there is nothing more than a preview of the theme?!

Since there is no redevelopment documentation, see if there are any other clues to how we compile the project source code?

"Snow Dream Technology Post": So many bypasses, in fact, it is not because of comparison dishes, people have provided the source code will not compile, leaving unscientific tears!

Once again, switch to the source directory, there is a build.sh build script in addition to the js and less directories!

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$ 

At this moment, it seems as if you saw the sun rising at nine o'clock. The future is yours and ours too!

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$ 

In this script, except for the browserify, uglifyjs, and lessc-clean-css commands, the rest of the script is simple, basically by compiling the source file and outputting it to the _assets directory.

There are two main commands for compiling js, and the theme.js we're concerned about involves only one, and there's no other dependency on it. That's great!

# 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

The next point is how to run the browserify src/js/theme/index.js | uglifyjs-mc > _assets/website/theme.js command!

Change over to recompile source code

browserify src/js/theme/index.js | uglifyjs -mc > _assets/website/theme.js

Baidu once browserify

After opening the familiar browser again and typing the keyword browserify, a series of related articles appeared. It's interesting to know why ranking first is not the official website. Anyway, it's good to find the github project address of browserify!

It doesn't really matter what browserify is here, just how to install the basic environment!

$ npm install -g browserify

"Snow Dream Technology Post": If you are a mac computer, the global installation requires administrator privileges, you should run sudo npm install -g browserify, or cnpm install -g browserify if you suspect the installation is slow, provided the cnpm command is installed.

Google uglifyjs

Don't blackout, take a little less detour, and you'll find the github project web address directly. You don't care about the project description either, just flip through the installation section.

$ npm install -g uglify-js

Recompile others

Both plug-ins involving the browserify src/js/theme/index.js | uglifyjs - MC > _assets/website/theme.js command have been installed. It is reasonable to start recompiling the source code, but what went wrong?

When a mistake occurs, you begin to suspect life. Is the inference incorrect, is the environment not installed successfully, and why can't you find the mousetrap module?

$ 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)

Forget it, instead of trying to guess why you can't load the mousetrap module, continue installing the remaining dependencies and possibly eliminate environmental issues.

First install all the other commands involved in the src/build.sh build script, and then try again.

In addition to the commands for compiling Js, there are commands for compiling Css, and other things about building the script build.sh are basic copy and paste operations.

# Compile Website CSS
lessc -clean-css src/less/website.less _assets/website/style.css

The intermediate process for search-oriented programming is omitted here, and the installation commands are as follows:

$ npm install -g less less-plugin-clean-css

When I run the build script again, I am full of expectations that it will compile successfully, but I didn't expect the reality to face again. There are more errors at this time, really not!

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

Then continue to expand your installation environment, and what happens this time when you rely on npm install installation for the entire gitbook-plugin-theme-default?

$ npm install

Let's wait!

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

The command line has no messy output and the world is quiet!

The linux command line philosophy tells us that no news is good news. Running the src/build.sh script command line again after all the project environments have been installed is instantly quiet!

With a jittery heart, switch to the test project and run the gitbook serve r command. At that moment, you feel the world is still, and miracles are happening?

Finally successful, did you achieve the default folding effect?

To verify that the default collapse failed successfully, do a reverse test. Since the default collapse left menu is set to false, if set to true, it should be expanded by default.

// 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);
    });
}

Start the local test project again after recompiling, and if it is expanded, it means that success is not accidental but dependent on skill and effort!

  • Recompile Source
$ src/build.sh

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

  • Start Local Project
$ gitbook serve

/Users/snowdreams1006/Documents/workspace/test

"Snow Dream Technology Post Station": It is not a flash in the pan but a real reality, so the default fold left menu function is implemented!

Lazy Direct and Retrospective Summary

If you're a regular Gitbook user or a lazy person, it's recommended that you replace the theme.js file directly:

  • View gitbook version information in use
$ gitbook current
GitBook version is 3.2.3
  • Open the gitbook installation location you are using
$ open ~/.gitbook/versions/3.2.3/node_modules/gitbook-plugin-theme-default/
  • The new file replaces the original _assets/website/theme.js file

You can follow the WeChat Public Reply to "gitbook" to get the recompiled new file theme.js.

  • Switch to the test project to verify that the default fold is in effect
$ gitbook serve

If you're not afraid of trouble and enjoy the hassle, you might want to experience how to recompile source files.

  • View gitbook version information in use
$ gitbook current
GitBook version is 3.2.3
  • Open the gitbook installation location you are using
$ open ~/.gitbook/versions/3.2.3/node_modules/gitbook-plugin-theme-default/
  • Dependencies required to install theme-default default default theme items
$ npm install
  • Dependencies required to install build.sh build scripts
$ sudo npm install -g browserify uglify-js less less-plugin-clean-css
  • Run build.sh build script to recompile
$ src/build.sh
  • Switch to the test project to verify that the default fold is in effect
$ gitbook serve

It's worth noting that only one line of code is needed to collapse the left menu by default, but it's also possible to conflict with plug-ins introduced in your project, since the state of sidebar can also be changed by unknown code!

// 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);
    });
}

Finally, I hope this article will help you. When search-oriented programming becomes unavailable, self-reliance is also possible. If you encounter any problems in using Gitbook, you are welcome to leave a comment and tell me. Of course, I don't guarantee to solve them either. In case you have to look through the source code one day!

If this article is helpful to you, you don't need to appreciate it or forward it, just leave a message of approval to encourage you!

Tags: node.js less Mobile npm github

Posted on Sat, 09 Nov 2019 18:10:24 -0800 by phreek