gitbook使用plugin

測試環境

接續上一篇「Ubuntu環境下，快速開始使用gitbook」。

下載Plugin範例

1
2
3

# cd ~/Documents/mybook

$ git clone https://github.com/GitbookIO/plugin.git node_modules/gitbook-plugin-sample

就可以看到「node_modules」有一個資料夾「gitbook-plugin-sample」。

1

$ tree node_modules/gitbook-plugin-sample

顯示

1
2
3
4
5
6
7
8
9
10

node_modules/gitbook-plugin-sample
├── book
│   ├── test.css
│   └── test.js
├── index.js
├── LICENSE
├── package.json
└── README.md

1 directory, 6 files

設定使用「gitbook-plugin-sample」這個「Plugin」

撰寫「book.json」

1

$ vi book.json

「book.json」填入下面的內容，設定使用「gitbook-plugin-sample」。

1
2
3
4
5

{
	"plugins": [
		"sample"
	]
}

執行下面的指令

1

$ gitbook build

就會看到下面的訊息

1
2
3
4

Starting build ...
init!
finish!
Successfully built!

觀看「node_modules/gitbook-plugin-sample/index.js」

1

$ cat node_modules/gitbook-plugin-sample/index.js

會看到下面兩個「function」，就是顯示「init!」和「finish!」的出處

1
2
3
4
5
6
7
8
9
10
11
12
13

hooks: {
	// For all the hooks, this represent the current generator

	// This is called before the book is generated
	"init": function() {
		console.log("init!");
	},

	// This is called after the book generation
	"finish": function() {
		console.log("finish!");
	},
}

利用「npm」查詢有哪些「plugin」和「theme」可以使用

查詢「plugin」

1

$ npm search gitbook-plugin

查詢「theme」

1

$ npm search gitbook-theme

安裝「gitbook-plugin-ga」

1

$ npm install gitbook-plugin-ga

就可以看到「node_modules」有一個資料夾「gitbook-plugin-ga」。

1

$ tree node_modules/gitbook-plugin-ga

顯示

1
2
3
4
5
6
7
8
9

node_modules/gitbook-plugin-ga
├── book
│   └── plugin.js
├── index.js
├── LICENSE
├── package.json
└── README.md

1 directory, 5 files

設定使用「gitbook-plugin-ga」這個「Plugin」

撰寫「book.json」

1

$ vi book.json

「book.json」填入下面的內容，設定使用「gitbook-plugin-ga」。

1
2
3
4
5
6
7
8
9
10
11
12

{
	"plugins": [
		"sample",
		"ga"
	],

	"pluginsConfig": {
		"ga": {
			"token": "UA-XXXX-Y"
		}
	}
}

啟動「server」。

1

$ gitbook serve

觀看網頁程式碼，在最下方，可以找到下面這行

1

<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-XXXX-Y', 'auto');ga('send', 'pageview');</script>

暫時紀錄

在「lib/generate/config.js」，可以看到

1
2
3
4

 // Set another theme with your own layout
// It's recommended to use plugins or add more options for default theme, though
// See https://github.com/GitbookIO/gitbook/issues/209
"theme": path.resolve(__dirname, '../../theme'),