Gitbook是一款產品文檔構建工具,也可以用於構建個人博客,默認情況下電腦端訪問時左側菜單是展開狀態,可偏偏有人想要實現默認折疊效果,於是誕生了這篇文章!
善良的我選擇幫助別人
可能是網上關於 Gitbook 的教程相對來說有些落后,加上寫文章時分享了不少關於 gitbook 系列教程,因此關注我的粉絲好友中有不少是來源於 Gitbook.
所以上個月有個好友問我能不能配置 Gitbook 默認折疊的效果,心里有些犯難,作為 gitbook 的忠實粉絲,我都不知道 gitbook 還有這方面的配置?!
但是,善良的我總是有求必應,不忍心拒絕小白用戶,於是我便抱着試一試的心態開始研究一下如何默認折疊?
當然,解決問題前還是要先復現一下問題,然后在命令行中熟練敲入了 gitbook serve 命令來啟動本地服務器,為了排除緩存等影響,特意打開了 Chrome 瀏覽器的無痕模式,果不其然默認左側菜單是展開的!
「雪之夢技術驛站」: 不能復現的問題都不是我的問題,拒絕解決此類問題,搞不好是你自己環境搭建問題呢!
驀然回首官方文檔已走
問題復現后就要開始尋求解決之道,雖然印象中並沒有相關配置,但是難保記憶混亂遺漏了某些配置項,所以還是先看看官方文檔怎么說的吧!
但是,當你在瀏覽器中輸入 gitbook 官方文檔 時,並找不到想象中的官方文檔而是新版官網,不信你自己去搜一下,肯定是新版官網.
當你自以為找到了官網時,點擊進去查看文檔部分,很遺憾,這是新版文檔並不是老版文檔,你還會繼續百度一下尋求可用鏈接期待找到官方文檔.
為了節省寶貴時間,這里推薦訪問個人維護的 gitbook 文檔,點擊訪問: https://snowdreams1006.github.io/gitbook-official/
目前提供了中英文兩個語言版本的文檔,相信可以滿足大多數用戶的需求了,選擇任意一種語言后點擊進入翻閱相關設置.
實際上,官方文檔也並沒有什么用,因為根本就沒有提到過如何更改相關配置使其默認折疊而非展開狀態.
「雪之夢技術驛站」: 官方不再維護舊版文檔,費盡心機找到舊版文檔也無濟於事,因為並沒有提及到相關配置,所以猜測很可能並未提供有關配置項!
百度一下你就知道了嗎
俗話說:"互聯網上絕大多數問題別人都已經遇到過並提供了解決方案,我們唯一要做的就是找到它!"
這也是面向搜索編程的核心思想,遇到默認折疊問題應該也不會例外,那就搜索一下吧!
雖然百度搜索出現了一些相關文章,但是卻不是我們想要的效果,大多數是基於 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 中遇到任何問題,歡迎留言評論告訴我,當然我也不一定保證解決,萬一哪天心血來潮翻看一下源碼就解決了呢!
如果本文對你有所幫助,請動動小手點一下推薦,否則還請留言指正,如有需要,請關注個人公眾號「 雪之夢技術驛站 」
