翻遍互聯網都找不到的解決方案,一行代碼輕鬆實現 Gitbook 默認摺疊左側菜單效果

時間  2021-08-14
標籤 css html 前端 node jquery linux git github web npm 欄目 Git 简体版
原文   原文鏈接

Gitbook 是一款產品文檔構建工具,也能夠用於構建我的博客,默認狀況下電腦端訪問時左側菜單是展開狀態,可恰恰有人想要實現默認摺疊效果,因而誕生了這篇文章!css

善良的我選擇幫助別人

多是網上關於 Gitbook 的教程相對來講有些落後,加上寫文章時分享了很多關於 gitbook 系列教程,所以關注個人粉絲好友中有很多是來源於 Gitbook.html

因此上個月有個好友問我能不能配置 Gitbook 默認摺疊的效果,內心有些犯難,做爲 gitbook 的忠實粉絲,我都不知道 gitbook 還有這方面的配置?!前端

可是,善良的我老是有求必應,不忍心拒絕小白用戶,因而我便抱着試一試的心態開始研究一下如何默認摺疊?node

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

固然,解決問題前仍是要先復現一下問題,而後在命令行中熟練敲入了 gitbook serve 命令來啓動本地服務器,爲了排除緩存等影響,特地打開了 Chrome 瀏覽器的無痕模式,果不其然默認左側菜單是展開的!jquery

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

「雪之夢技術驛站」: 不能復現的問題都不是個人問題,拒絕解決此類問題,搞很差是你本身環境搭建問題呢!linux

驀然回首官方文檔已走

問題復現後就要開始尋求解決之道,雖然印象中並無相關配置,可是難保記憶混亂遺漏了某些配置項,因此仍是先看看官方文檔怎麼說的吧!git

可是,當你在瀏覽器中輸入 gitbook 官方文檔 時,並找不到想象中的官方文檔而是新版官網,不信你本身去搜一下,確定是新版官網.github

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

當你自覺得找到了官網時,點擊進去查看文檔部分,很遺憾,這是新版文檔並非老版文檔,你還會繼續百度一下尋求可用連接期待找到官方文檔.web

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

爲了節省寶貴時間,這裏推薦訪問我的維護的 gitbook 文檔,點擊訪問: snowdreams1006.github.io/gitbook-off…npm

目前提供了中英文兩個語言版本的文檔,相信能夠知足大多數用戶的需求了,選擇任意一種語言後點擊進入翻閱相關設置.

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

實際上,官方文檔也並無什麼用,由於根本就沒有提到過如何更改相關配置使其默認摺疊而非展開狀態.

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

「雪之夢技術驛站」: 官方再也不維護舊版文檔,費盡心機找到舊版文檔也無濟於事,由於並無說起到相關配置,因此猜想極可能並未提供有關配置項!

百度一下你就知道了嗎

俗話說:"互聯網上絕大多數問題別人都已經遇到過並提供瞭解決方案,咱們惟一要作的就是找到它!"

這也是面向搜索編程的核心思想,遇到默認摺疊問題應該也不會例外,那就搜索一下吧!

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

雖然百度搜索出現了一些相關文章,可是卻不是咱們想要的效果,大多數是基於 gitbook 插件實現的目錄摺疊效果,並非默認摺疊左側菜單效果.

無論是換關鍵詞從新搜索仍是谷歌搜索,均未發現有關默認摺疊左側菜單的解決方案,難不成面向搜索失敗了,要作解決問題的第一人嗎?!

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

「雪之夢技術驛站」: 屢次重複搜索操做均爲找到解決方案,因而可知真的不多有人想要默認摺疊左側菜單,我也是很佩服提出該問題的小夥伴骨骼驚奇啊!

自力更生找尋蛛絲馬跡

既然依靠別人沒法解決問題,那麼只能自力更生獨自解決問題,是時候考驗真正的技術了!

爲了排除無關干擾,不能再用本身的 gitbook 項目了,畢竟文件太多不方便後續調試,那麼不妨從新建立一個測試項目.

  • 建立測試項目
$ mkdir test && cd test
複製代碼
  • 初始化測試項目
$ gitbook init
複製代碼
  • 啓動測試項目
$ gitbook serve
複製代碼

雖然一片空白,並無什麼實質性內容,可是大道至簡,對於咱們復現並測試問題來講,足夠了!

gitbook-issue-modify-default-fold-test-serve.png

打開 Chrome 瀏覽器並按下 F12 開啓調試模式,鼠標選中左側的 Elements 元素選項卡並點亮左側的小鼠標,而後在頁面上找到左側圖標按鈕,因而選中元素高亮了.

gitbook-issue-modify-default-fold-test-serve-selected-elements.png

單獨摘錄 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 文件在起做用.

gitbook-issue-modify-default-fold-test-serve-inspection-listeners.png

果不其然,元素上存在 click 點擊事件監聽而且發現執行監聽的邏輯代碼出如今 theme.js 文件,點擊進入文件查看具體內容.

gitbook-issue-modify-default-fold-test-serve-themejs-ugly.png

壓縮後的 js 代碼不具有可讀性,點擊左下方的 {} 圖標能夠進行代碼格式化,可是可能不是單純的壓縮而是進行了醜化或者混淆代碼之類的邏輯,格式化後的代碼仍然不可讀!

gitbook-issue-modify-default-fold-test-serve-themejs-format.png

「雪之夢技術驛站」: 終於發現了蛛絲馬跡,修改的代碼邏輯就隱藏在 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 指望找到相關源碼文件.

gitbook-issue-modify-default-fold-source-sublime-search.png

全局搜索後主要出現兩個文件包含 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-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 項目的配置文件,能夠佐證上述規則的正確性.

"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"
}
複製代碼

使人遺憾的是,項目介紹空空如也,除了一張主題預覽圖,別的什麼都沒有?!

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

既然沒有二次開發文檔,那就看看項目源碼有沒有別的蛛絲馬跡教咱們如何編譯?

「雪之夢技術驛站」: 繞了這麼多,其實還不是由於比較菜,人家都提供給源碼都不會編譯,留下來沒有技術的眼淚!

視角再一次切換到源碼目錄,除了 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 項目地址也是不錯的!

gitbook-issue-modify-default-fold-search-browserify.png

這裏並不關心 browserify 究竟是什麼,只在意如何安裝基本環境而已!

$ npm install -g browserify
複製代碼

「雪之夢技術驛站」: 若是是 mac 電腦,全局安裝須要管理員權限,應該運行 sudo npm install -g browserify ,若是嫌棄安裝速度慢也能夠運行 cnpm install -g browserify ,前提是已安裝 cnpm 命令.

谷歌一下 uglifyjs

不吹不黑,少走一點彎路,直接就找到了 github 項目網址,一樣的也不關心項目介紹,直接翻看如何安裝部分.

$ npm install -g uglify-js
複製代碼

gitbook-issue-modify-default-fold-search-uglifyjs.png

從新編譯 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 命令後,那一瞬間,感受世界都靜止了,奇蹟就這麼發生了?

gitbook-issue-modify-default-fold-test-serve-again-success.png

終於成功了,實現默認摺疊效果了嗎?

爲了驗證是否成功實現默認摺疊失效,作一次反向測試,既然默認摺疊左側菜單設置的是 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-issue-modify-default-fold-test-serve-again-verify.png

「雪之夢技術驛站」: 苦心人天不負,不是曇花一現的巧合而是貨真價實的現實,就這麼實現了默認摺疊左側菜單功能!

懶人直達以及回顧總結

若是你是 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 中遇到任何問題,歡迎留言評論告訴我,固然我也不必定保證解決,萬一哪天心血來潮翻看一下源碼就解決了呢!

若是你以爲本文對你有所幫助,歡迎點贊留言告訴我,你的鼓勵是我繼續創做的動力,不妨順便關注下我的公衆號「雪之夢技術驛站」,按期更新優質文章喲!

雪之夢技術驛站.png
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程