、簡介

GitBook 是一個基于 Node.js 的命令行工具，可使用 Github/Git 和 Markdown 來制作精美的電子書，

支持輸出多種文檔格式：

- 靜態站點：GitBook 默認輸出該種格式，生成的靜態站點可直接托管搭建 Github Pages 服務上；

- PDF：需要安裝 gitbook-pdf 依賴；

- eBook：需要安裝 ebook-convert；

- 單HTML網頁：支持將內容輸出為單頁的HTML，不過一般用在將電子書格式轉換為PDF或eBook的中間過程；

- JSON：一般用于電子書的調試或元數據提取；

使用 GitBook 制作電子書，必備兩個文件：*README.md* 和 *SUMMARY.md*

二、GitBook 準備工作

2.1 系統環境

需要準備一臺CentOS7.5 x86_64系統環境，用于部署gitbook服務器端程序，用于在本地查看gitbook編輯保存的內容。

2.2 修改yum源

shell> wget -O /etc/yum.repos.d/CentOS-Base.repo http://mirrors.aliyun.com/repo/Centos-7.repo
shell> wget -O /etc/yum.repos.d/epel.repo http://mirrors.aliyun.com/repo/epel-7.repo
shell> yum clean all
shell> yum makecache

2.3 安裝 Node.js 和 npm

GitBook 是一個基于 Node.js 的命令行工具，下載安裝 Node.js，安裝完成之后，你可以使用下面的命令來檢驗是否安裝成功。

shell> yum -y install nodejs npm
shell> node -v
v6.17.1
shell> npm -v
3.10.10
# 由于不可說的原因，npm install 時速度總是非常慢，用如下方式修改npm源
shell> npm config set registry https://registry.npm.taobao.org
# 查看修改結果
shell> npm config get registry

2.4 安裝 GitBook

shell> npm install gitbook-cli -g
# 驗證安裝結果
shell> gitbook -V
CLI version: 2.3.2
Installing GitBook 3.2.3

三、創建 Gitbook 賬號與配置

3.1 創建GitBook賬號的過程這里不再說明，根據官方注冊內容填寫。注冊網址：https://app.gitbook.com/join

3.2 登錄GitBook頁面 https://app.gitbook.com/login

3.3 創建一個項目

按照步驟點擊"Create a new space"后，在彈出的窗口中輸入項目名稱，然后點擊"Create"創建新的項目，這里我們以91donkey為例創建一個Public權限的空間：

3.4 項目初始界面，這個時候我們就可以在界面右側進行內容編寫了。

3.5 設置GitBook to GitHub功能支持

點擊左側"盒子"的圖標，然后啟用"GitHub"，根據彈出的界面配置GitHub的同步地址，配置完成后，在GitBook上保存的內容，會自動同步到GitHub上。

四、Linux環境配置（作為Client端撰寫Markdown文檔時配置）

4.1 初始化

創建一個文件夾，使用 gitbook init 對其初始化，會自動生成兩個必要的文件 *README.md* 和 *SUMMARY.md*

shell> mkdir /home/gitbook/
shell> cd /home/gitbook/
shell> gitbook init
warn: no summary file in this book 
info: create README.md 
info: create SUMMARY.md 
info: initialization is finished 

- README.md：書的介紹文字，如前言、簡介，在章節中也可做為章節的簡介。

- SUMMARY.md 定制書籍的章節結構和順序。

4.2 啟動服務

默認Web界面端口4000
shell> gitbook serve /home/gitbook/
Live reload server started on port: 35729
Press CTRL+C to quit ...
info: 7 plugins are installed 
info: loading plugin "livereload"... OK 
info: loading plugin "highlight"... OK 
info: loading plugin "search"... OK 
info: loading plugin "lunr"... OK 
info: loading plugin "sharing"... OK 
info: loading plugin "fontsettings"... OK 
info: loading plugin "theme-default"... OK 
info: found 1 pages 
info: found 0 asset files 
info: >> generation finished with success in 0.6s ! 
Starting server ...
Serving book on http://localhost:4000

4.3 用瀏覽器訪問 http://localhost:4000 預覽電子書效果

4.4 注意事項

由于在每次重啟 gitbook 服務的時候，_book 目錄下的文件都會被清空，為避免資料的丟失應將md文件轉換為html文件，放在nginx下訪問，這樣也就不用啟動gitbook服務了。

作者：龍龍小寶

題單頁化

單頁化的設計，顧名思義可簡單地將其比喻為一頁紙的設計。單頁化的頁面存在于平面設計和網頁設計中，平面設計中的單頁設計,是指在紙的正反面上設計，主要用于折頁、宣傳單的場合中。專題中的單頁設計，更像是平面設計中單頁的翻版，只不過它可以加入跳轉、視差滾動、H5動態效果設計等。相對于整體網站頁面來說，單頁化的頁面設計在結構上比較簡單、鏈接深度最多不超過兩層。它的用途主要有專題活動頁、店鋪首頁形象、產品介紹頁。

1.紙媒單頁與網頁單頁的區別

提起單頁設計,不得不說其在線下紙媒中的樣子，像折頁、卡片、宣傳單等的設計，都是充分利用了材質的可感知性讓設計有了觸覺，通過另類的工藝處理有效地發揮設計創意。而網頁媒體中的單頁設計更多的是用于發揮促銷的直接性，提升平臺的整體形象，通過利用新技術，如視差滾動、動效設計等，讓網頁的單頁設計的可表現形式更為多樣化。紙媒中的單頁設計是利用僅有的單張紙的正反面去進行設計的表現，網頁中的單頁設計是利用大小的屏幕空間去進行需求的表現。如圖1-1所示，左圖為網頁單頁，右圖為海報單頁。

2.單頁化設計的優勢

網頁單頁設計的好處有很多，一是能快速地讓訪客直觀地看到要傳達的內容，無須頻繁跳轉頁面進行瀏覽;二是沒有 龐雜的導航菜單和子菜單，所有內容都可在一頁上呈現。制作成本少，效率高，比較適用于信息量中等的頁面設計。

3.單頁設計的四大趨勢

》大圖加大字

隨著現在扁平設計趨勢的蔓延,電商設計也更趨向于平面版式中的風格。大圖加上大字的設計形式，已然成了-種扁平化極簡的表達。讓傳達的產品和文案更直接，第一時間讓圖片去說話，讓文字去發聲,如圖1-2所示。

》固定尺寸內的視差滾動

在單頁的設計中，頁面的呈現形式并非傳統式的垂直或者水平滾動瀏覽，它可以利用視差滾動、H5+CSS技術， 充分把頁面內容更靈活地展示出來，讓用戶通過與鼠標交互的過程，慢慢地消化單頁中信息。

》充滿創意的布局

在網頁的單頁化設計中，形式可以多種多樣，因單頁化設計更偏向于平面媒體中的海報、單折頁等的視覺表現，所以，在專題的單頁中，版式的嘗試可以靈活多變，如圖1-3所示。

》單頁的多樣性與平臺的整體性

雖然說單頁的設計在形式上可以不拘一格，但是單頁的專題是寄存在整體平臺、店鋪和網站中的，所以，在設計時要站在平臺調性的大背景中去進行單頁的設計，如圖1-4所示。

提示

這里提到的單頁化設計并不是新的設計趨勢，只不過筆者在設計整理中更傾向于把這一類設計如專題頁、 活動頁、店鋪首頁統稱為單頁化的頁面設計。它的設計感還是存在于對基本的點線面和色彩的理解中的，它更像是平面中的海報設計或者宣傳單頁的設計形式，都是為主題和需求而服務，也更像是一種設計的”快消品”。