Fengda HUANG vor 8 Jahren
Ursprung
Commit
dc1e9254cd
18 geänderte Dateien mit 2135 neuen und 73 gelöschten Zeilen
  1. 23 0
      .gitignore
  2. 54 0
      Makefile
  3. 4 0
      build/author.html
  4. 1 0
      build/head.html
  5. 4 0
      build/metadata.xml
  6. 1 0
      build/share.html
  7. 0 0
      build/stats.html
  8. 2 0
      build/title.txt
  9. 1 1
      chapters/devices.md
  10. 8 8
      chapters/documents.md
  11. 0 4
      chapters/graphics.md
  12. 1086 0
      css/vendor.css
  13. 150 0
      epub.css
  14. 314 54
      index.html
  15. 25 0
      listings-setup.tex
  16. 0 6
      params.json
  17. 219 0
      style.css
  18. 243 0
      template/template.tex

+ 23 - 0
.gitignore

@@ -0,0 +1,23 @@
+# Created by .ignore support plugin (hsz.mobi)
+### GitBook template
+# Node rules:
+## Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+## Dependency directory
+## Commenting this out is preferred by some people, see
+## https://docs.npmjs.com/misc/faq#should-i-check-my-node_modules-folder-into-git
+node_modules
+
+# Book build output
+_book
+
+# eBook build output
+*.epub
+*.mobi
+*.pdf
+
+*~
+.DS_Store
+node_modules
+.idea

+ 54 - 0
Makefile

@@ -0,0 +1,54 @@
+include_dir=build
+source=chapters/*.md
+title='Toolbox'
+filename='ebook'
+
+
+all: html epub rtf pdf mobi
+
+markdown:
+	awk 'FNR==1{print ""}{print}' $(source) > $(filename).md
+
+html: markdown
+	pandoc -s $(filename).md -t html5 -o index.html -c style.css \
+		--include-in-header $(include_dir)/head.html \
+		--include-before-body $(include_dir)/author.html \
+		--include-before-body $(include_dir)/share.html \
+		--include-after-body $(include_dir)/stats.html \
+		--title-prefix $(title) \
+		--normalize \
+		--smart \
+		--toc
+
+epub: markdown
+	pandoc -s $(filename).md --normalize --smart -t epub -o $(filename).epub \
+		--epub-metadata $(include_dir)/metadata.xml \
+		--epub-stylesheet epub.css \
+		--epub-cover-image img/cover.jpg \
+		--title-prefix $(title) \
+		--normalize \
+		--smart \
+		--toc
+
+rtf: markdown
+	pandoc -s $(filename).md -o $(filename).rtf \
+		--title-prefix $(title) \
+		--normalize \
+		--smart
+
+pdf: markdown
+	# OS X: http://www.tug.org/mactex/
+	# Then find its path: find /usr/ -name "pdflatex"
+	# Then symlink it: ln -s /path/to/pdflatex /usr/local/bin
+	pandoc -s $(filename).md -o $(filename).pdf \
+		--title-prefix $(title) \
+		--listings -H listings-setup.tex \
+		--template=template/template.tex \
+		--normalize \
+		--smart \
+		--toc \
+		--latex-engine=`which xelatex`
+
+mobi: epub
+	# Symlink bin: ln -s /path/to/kindlegen /usr/local/bin
+	kindlegen $(filename).epub

+ 4 - 0
build/author.html

@@ -0,0 +1,4 @@
+<p>
+<h1>一个全栈工程师的工具箱</h1>
+<p>Phodal Huang</p>
+</p>

+ 1 - 0
build/head.html

@@ -0,0 +1 @@
+<meta name="viewport" content="width=device-width">

+ 4 - 0
build/metadata.xml

@@ -0,0 +1,4 @@
+<dc:title>一个全栈工程师的工具箱</dc:title>
+<dc:creator>Phodal Huang</dc:creator>
+<dc:rights>Creative Commons Attribution Non-Commercial Share Alike 3.0</dc:rights>
+<dc:language>zh-CN</dc:language>

+ 1 - 0
build/share.html

@@ -0,0 +1 @@
+<div style="width:800px">

+ 0 - 0
build/stats.html


+ 2 - 0
build/title.txt

@@ -0,0 +1,2 @@
+% 一个全栈工程师的工具箱
+% Phodal Huang

+ 1 - 1
chapters/devices.md

@@ -4,7 +4,7 @@
 带有自定义按钮的鼠标
 ---
 
-![Steelseries](images/steelseries.jpg)
+![Steelseries](./images/devices/steelseries.jpg)
 
 机械键盘
 ---

+ 8 - 8
chapters/documents.md

@@ -1,7 +1,7 @@
 文档篇
 ===
 
-![Documents](./images/documents.png)
+![Documents](./images/documents/documents.png)
 
 Pandoc
 ---
@@ -16,7 +16,7 @@ XHTML、 HTML5、 以及HTML幻灯片Slidy, S5,或者DZSlides、Microsoft Wo
 
 上图
 
-![Pandoc](./images/pandoc.png)
+![Pandoc](./images/documents/pandoc.png)
 
 我最常用的就是:将md转化为workd及pdf。我的毕业论文及之前的几本电子书都是这么做的,它是一个命令行工具,安装方式:
 
@@ -37,7 +37,7 @@ Graphviz
 
 简单的来说,就是将代码转换为图形:
 
-![Graphviz](./images/graphviz-example.png)
+![Graphviz](./images/documents/graphviz-example.png)
 
 它让我最惊讶的是DOT语言,简直是以我们平时的用法来定义的。上面的图形的代码类似于这样的:
 
@@ -62,7 +62,7 @@ ImageMagick
 
 还可以加各种效果,如:
 
-![ImageMagick](./images/gausisan.jpg)
+![ImageMagick](./images/documents/gausisan.jpg)
 
 顺便做个介绍:上面的这个人叫瑞典模特儿莱娜·瑟德贝里,是在刊于1972年11月号《花花公子》杂志上的一张裸体插图照片的一部分。**她的脸部与裸露的肩部已经变成了事实上的工业标准。**
 
@@ -75,11 +75,11 @@ TeX是由是一个由美国计算机教授高德纳(Donald Ervin Knuth)编
 
 > 高德纳最早开始自行编写TEX的原因是当时十分粗糙的排版水平已经影响到他的巨著《计算机程序设计艺术》的印刷质量。他以典型的黑客思维模式,最终决定自行编写一个排版软件:TEX。他原本以为他只需要半年时间,在1978年下半年就能完成,但最终他用了超过十年时间,直到1989年TEX才最终停止修改。
 
-![计算机程序设计艺术](./images/aocp.jpg)
+![计算机程序设计艺术](./images/documents/aocp.jpg)
 
 这直接让我想起Martin Fowler在写《领域特定语言》里好像也是用DSL。Tex的最大优点是可以写出下面的这本复杂的公式:
 
-![formular](./images/formular.jpg)
+![formular](./images/documents/formular.jpg)
 
 LaTeX 建立在 TeX 之上的工具,它在TeX的基础上大大改善了易用性。对了,如果只是一般的用途的话,就没有必要拿去装逼了~。
 
@@ -90,7 +90,7 @@ Jupyter Notebook
 
 Jupyter Notebook使用浏览器作为界面,其前身是Ipython Notebook,Ipython3.0之后新建为Jupyter项目。它支持Markdown、Python语言交互、R语言交互、图形显示、运行时间分析、LaTex公式,对于交互编程、数据分析和数据可视化非常有用。
 
-![Jupyter](./images/Jupyter.png)
+![Jupyter](./images/documents/Jupyter.png)
 
 **安装(使用pip)**
 
@@ -108,7 +108,7 @@ Gitbook
 
 Gitbook是一个命令行工具(node.js库),可以把你的Markdown文件汇集成起来,生成一个静态网站,也可以输出为PDF等多种格式。
 
-![gitbook](./images/gitbook.jpg)
+![gitbook](./images/documents/gitbook.jpg)
 
 **安装(使用npm)**
 

+ 0 - 4
chapters/graphics.md

@@ -121,7 +121,3 @@ OpenSuSE在KDE桌面下效果最赞了——因为KDE和OpenSuSE都是德国制
 并且,它也是一个可以根据数据(GEOJSON,地理数据)生成图形的工具。
 
 ![vmap.jpg](http://articles.phodal.com/graphics/vmap.jpg)
-
-更多精彩内容欢迎关注我的微信公众号:Phodal
-
-![http://articles.phodal.com/qrcode.jpg](http://articles.phodal.com/qrcode.jpg)

+ 1086 - 0
css/vendor.css

@@ -0,0 +1,1086 @@
+@charset "UTF-8";
+
+.acodecode {
+	cursor: pointer
+}
+.acodecodeactive {
+	cursor: default
+}
+.codecodecode {
+	position: fixed;
+	z-index: 100;
+	left: 2%;
+	bottom: -30px;
+	width: 96%;
+	height: 0;
+	max-height: 270px;
+	text-align: left
+}
+.codecodecode>div {
+	box-shadow: 0 0 3px #444
+}
+.codecodecontrols {
+	height: 30px;
+	margin-top: -30px;
+	background-color: #fff;
+	background-color: rgba(255, 255, 255, .8);
+	border-radius: 8px 8px 0 0
+}
+.codecodecontrols a {
+	float: left;
+	line-height: 30px;
+	margin-left: 6px;
+	font-family: Arial;
+	font-size: 12px
+}
+.codecodecontrols .closeCodeCode {
+	float: right;
+	margin-right: 6px
+}
+.acodecode.codecode, .codecode {
+	border-radius: 0 !important;
+	position: relative !important;
+	width: 100% !important;
+	margin: 0 !important;
+	overflow: auto !important;
+	cursor: default !important
+}
+div.codecode [id^=highlighter] div.bar.show, div.codecode [id^=highlighter] div.toolbar {
+	display: none !important
+}
+h1, h2, h3, h4, h5, h6, p {
+	margin-top: 0;
+	padding-right: 15px;
+	padding-left: 15px;
+	text-align: left;
+	font-family: Georgia
+}
+h1 {
+	text-align: left
+}
+h2.booktitle {
+	font-size: 1.5em;
+	color: #666
+}
+.subhead-link {
+	font-size: .75em;
+	margin-left: -15px;
+	margin-top: 5px;
+	float: left;
+	visibility: hidden
+}
+.subhead-link:hover {
+	text-decoration: none;
+	visibility: visible
+}
+h1:hover .subhead-link, h2:hover .subhead-link, h3:hover .subhead-link, h4:hover .subhead-link {
+	visibility: visible
+}
+.container {
+	background: #FFF
+}
+header {
+	background: #fff
+}
+.content {
+	padding: 10px 0;
+	text-align: left
+}
+.footer {
+	background: #fff
+}
+.fltrt {
+	float: right;
+	margin-left: 8px
+}
+.fltlft {
+	float: left;
+	margin-right: 8px
+}
+.clearfloat {
+	clear: both;
+	height: 0;
+	font-size: 1px;
+	line-height: 0
+}
+.copyright {
+	text-align: left
+}
+.booktitle {
+	text-align: center;
+	line-height: 41px;
+	border-bottom: 1px solid #fff;
+	padding: 0;
+	font-size: 2.2em
+}
+.booktitle.author {
+	font-size: 24px
+}
+#contents-list {
+	background: none repeat scroll 0 0 #EEE;
+	border: 3px solid #DDD;
+	padding: 1em 1em 1em 3em
+}
+.subitem {
+	margin-left: 25px
+}
+#references-list {
+	word-wrap: break-word
+}
+pre {
+	display: block;
+	line-height: 18px;
+	background-color: #f5f5f5;
+	-webkit-border-radius: 4px;
+	-moz-border-radius: 4px;
+	border-radius: 4px;
+	white-space: pre;
+	white-space: pre-wrap;
+	word-break: break-all;
+	word-wrap: break-word
+}
+div.syntaxhighlighter {
+	padding: 1em 0
+}
+.syntaxhighlighter a, .syntaxhighlighter code, .syntaxhighlighter div, .syntaxhighlighter table, .syntaxhighlighter table caption, .syntaxhighlighter table tbody, .syntaxhighlighter table td, .syntaxhighlighter table thead, .syntaxhighlighter table tr, .syntaxhighlighter textarea {
+	-moz-border-radius: 0 !important;
+	-webkit-border-radius: 0 !important;
+	background: none !important;
+	border: 0 !important;
+	bottom: auto !important;
+	float: none !important;
+	height: auto !important;
+	left: auto !important;
+	line-height: 1.1em !important;
+	margin: 0 !important;
+	outline: 0 !important;
+	overflow: visible !important;
+	padding: 0 !important;
+	position: static !important;
+	right: auto !important;
+	text-align: left !important;
+	top: auto !important;
+	vertical-align: baseline !important;
+	width: auto !important;
+	box-sizing: content-box !important;
+	font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important;
+	font-weight: 400 !important;
+	font-style: normal !important;
+	font-size: 1em !important;
+	min-height: inherit !important;
+	min-height: auto !important
+}
+.syntaxhighlighter {
+	width: 100% !important;
+	margin: 1em 0 !important;
+	position: relative !important;
+	overflow: auto !important;
+	font-size: 1em !important
+}
+.syntaxhighlighter.source {
+	overflow: hidden !important
+}
+.syntaxhighlighter .bold {
+	font-weight: 700 !important
+}
+.syntaxhighlighter .italic {
+	font-style: italic !important
+}
+.syntaxhighlighter .line {
+	white-space: pre !important
+}
+.syntaxhighlighter table {
+	width: 100% !important
+}
+.syntaxhighlighter table caption {
+	text-align: left !important;
+	padding: .5em 0 .5em 1em !important
+}
+.syntaxhighlighter table td.code {
+	width: 100% !important
+}
+.syntaxhighlighter table td.code .container {
+	position: relative !important
+}
+.syntaxhighlighter table td.code .container textarea {
+	box-sizing: border-box !important;
+	position: absolute !important;
+	left: 0 !important;
+	top: 0 !important;
+	width: 100% !important;
+	height: 100% !important;
+	border: 0 !important;
+	background: #fff !important;
+	padding-left: 1em !important;
+	overflow: hidden !important;
+	white-space: pre !important
+}
+.syntaxhighlighter table td.gutter .line {
+	text-align: right !important;
+	padding: 0 .5em 0 1em !important
+}
+.syntaxhighlighter table td.code .line {
+	padding: 0 1em !important
+}
+.syntaxhighlighter.nogutter td.code .container textarea, .syntaxhighlighter.nogutter td.code .line {
+	padding-left: 0 !important
+}
+.syntaxhighlighter.show {
+	display: block !important
+}
+.syntaxhighlighter.collapsed table {
+	display: none !important
+}
+.syntaxhighlighter.collapsed .toolbar {
+	padding: .1em .8em 0 !important;
+	font-size: 1em !important;
+	position: static !important;
+	width: auto !important;
+	height: auto !important
+}
+.syntaxhighlighter.collapsed .toolbar span {
+	display: inline !important;
+	margin-right: 1em !important
+}
+.syntaxhighlighter.collapsed .toolbar span a {
+	padding: 0 !important;
+	display: none !important
+}
+.syntaxhighlighter.collapsed .toolbar span a.expandSource {
+	display: inline !important
+}
+.syntaxhighlighter .toolbar {
+	position: absolute !important;
+	right: 1px !important;
+	top: 1px !important;
+	width: 11px !important;
+	height: 11px !important;
+	font-size: 10px !important;
+	z-index: 10 !important
+}
+.syntaxhighlighter .toolbar span.title {
+	display: inline !important
+}
+.syntaxhighlighter .toolbar a {
+	display: block !important;
+	text-align: center !important;
+	text-decoration: none !important;
+	padding-top: 1px !important
+}
+.syntaxhighlighter .toolbar a.expandSource {
+	display: none !important
+}
+.syntaxhighlighter.ie {
+	font-size: .9em !important;
+	padding: 1px 0 !important
+}
+.syntaxhighlighter.ie .toolbar {
+	line-height: 8px !important
+}
+.syntaxhighlighter.ie .toolbar a {
+	padding-top: 0 !important
+}
+.syntaxhighlighter.printing .line.alt1 .content, .syntaxhighlighter.printing .line.alt2 .content, .syntaxhighlighter.printing .line.highlighted .number, .syntaxhighlighter.printing .line.highlighted.alt1 .content, .syntaxhighlighter.printing .line.highlighted.alt2 .content {
+	background: none !important
+}
+.syntaxhighlighter.printing .line .number {
+	color: #bbb !important
+}
+.syntaxhighlighter.printing .line .content {
+	color: #000 !important
+}
+.syntaxhighlighter.printing .toolbar {
+	display: none !important
+}
+.syntaxhighlighter.printing a {
+	text-decoration: none !important
+}
+.syntaxhighlighter.printing .plain, .syntaxhighlighter.printing .plain a {
+	color: #000 !important
+}
+.syntaxhighlighter.printing .comments, .syntaxhighlighter.printing .comments a {
+	color: #008200 !important
+}
+.syntaxhighlighter.printing .string, .syntaxhighlighter.printing .string a {
+	color: #00f !important
+}
+.syntaxhighlighter.printing .keyword {
+	color: #069 !important;
+	font-weight: 700 !important
+}
+.syntaxhighlighter.printing .preprocessor {
+	color: gray !important
+}
+.syntaxhighlighter.printing .variable {
+	color: #a70 !important
+}
+.syntaxhighlighter.printing .value {
+	color: #090 !important
+}
+.syntaxhighlighter.printing .functions {
+	color: #ff1493 !important
+}
+.syntaxhighlighter.printing .constants {
+	color: #06c !important
+}
+.syntaxhighlighter.printing .script {
+	font-weight: 700 !important
+}
+.syntaxhighlighter.printing .color1, .syntaxhighlighter.printing .color1 a {
+	color: gray !important
+}
+.syntaxhighlighter.printing .color2, .syntaxhighlighter.printing .color2 a {
+	color: #ff1493 !important
+}
+.syntaxhighlighter.printing .color3, .syntaxhighlighter.printing .color3 a {
+	color: red !important
+}
+.syntaxhighlighter.printing .break, .syntaxhighlighter.printing .break a {
+	color: #000 !important
+}
+.syntaxhighlighter, .syntaxhighlighter .line.alt1, .syntaxhighlighter .line.alt2 {
+	background-color: #1b2426 !important
+}
+.syntaxhighlighter .line.highlighted.alt1, .syntaxhighlighter .line.highlighted.alt2 {
+	background-color: #323e41 !important
+}
+.syntaxhighlighter .line.highlighted.number, .syntaxhighlighter table caption {
+	color: #b9bdb6 !important
+}
+.syntaxhighlighter .gutter {
+	color: #afafaf !important
+}
+.syntaxhighlighter .gutter .line {
+	border-right: 3px solid #435a5f !important
+}
+.syntaxhighlighter .gutter .line.highlighted {
+	background-color: #435a5f !important;
+	color: #1b2426 !important
+}
+.syntaxhighlighter.printing .line .content {
+	border: 0 !important
+}
+.syntaxhighlighter.collapsed {
+	overflow: visible !important
+}
+.syntaxhighlighter.collapsed .toolbar {
+	color: #5ba1cf !important;
+	background: #000 !important;
+	border: 1px solid #435a5f !important
+}
+.syntaxhighlighter.collapsed .toolbar a {
+	color: #5ba1cf !important
+}
+.syntaxhighlighter.collapsed .toolbar a:hover {
+	color: #5ce638 !important
+}
+.syntaxhighlighter .toolbar {
+	color: #fff !important;
+	background: #435a5f !important;
+	border: 0 !important
+}
+.syntaxhighlighter .toolbar a {
+	color: #fff !important
+}
+.syntaxhighlighter .toolbar a:hover {
+	color: #e0e8ff !important
+}
+.syntaxhighlighter .plain, .syntaxhighlighter .plain a {
+	color: #b9bdb6 !important
+}
+.syntaxhighlighter .comments, .syntaxhighlighter .comments a {
+	color: #878a85 !important
+}
+.syntaxhighlighter .string, .syntaxhighlighter .string a {
+	color: #5ce638 !important
+}
+.syntaxhighlighter .keyword {
+	color: #5ba1cf !important
+}
+.syntaxhighlighter .preprocessor {
+	color: #435a5f !important
+}
+.syntaxhighlighter .variable {
+	color: #ffaa3e !important
+}
+.syntaxhighlighter .value {
+	color: #090 !important
+}
+.syntaxhighlighter .functions {
+	color: #ffaa3e !important
+}
+.syntaxhighlighter .constants {
+	color: #e0e8ff !important
+}
+.syntaxhighlighter .script {
+	font-weight: 700 !important;
+	color: #5ba1cf !important;
+	background-color: none !important
+}
+.syntaxhighlighter .color1, .syntaxhighlighter .color1 a {
+	color: #e0e8ff !important
+}
+.syntaxhighlighter .color2, .syntaxhighlighter .color2 a {
+	color: #fff !important
+}
+.syntaxhighlighter .color3, .syntaxhighlighter .color3 a {
+	color: #ffaa3e !important
+}
+.sausage-set {
+	position: fixed;
+	right: 0;
+	top: 0;
+	width: 15px;
+	height: 100%;
+	border-left: solid 2px #fff;
+	border-right: solid 2px #fff;
+	background-color: #fff;
+	font-family: 'Helvetica Neue', Arial, sans-serif
+}
+.sausage {
+	position: absolute;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background-color: #f1f1f1;
+	text-decoration: none;
+	-moz-border-radius: 8px;
+	-webkit-border-bottom-left-radius: 8px;
+	-webkit-border-top-left-radius: 8px;
+	-webkit-border-bottom-right-radius: 8px;
+	-webkit-border-top-right-radius: 8px;
+	-moz-box-shadow: inset 0 1px 2px 4px rgba(0, 0, 0, .025);
+	-webkit-box-shadow: inset 0 1px 2px 4px rgba(0, 0, 0, .025);
+	cursor: pointer
+}
+.sausage-current, .sausage-hover {
+	background-color: #f2e4ed;
+	-moz-box-shadow: inset 0 1px 2px 4px rgba(51, 63, 70, .025)
+}
+.sausage-span {
+	position: absolute;
+	right: 24px;
+	top: 5px;
+	z-index: 2;
+	display: none;
+	width: 100px;
+	padding: 2px 3px;
+	color: #000;
+	background-color: #fff;
+	border: solid 2px #906;
+	font-size: 10px;
+	line-height: 12px;
+	font-weight: 700;
+	text-align: center;
+	-moz-border-radius: 7px;
+	-webkit-border-bottom-left-radius: 7px;
+	-webkit-border-top-left-radius: 7px;
+	-webkit-border-bottom-right-radius: 7px;
+	-webkit-border-top-right-radius: 7px;
+	-moz-box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, .05);
+	-webkit-box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, .05)
+}
+.sausage-current .sausage-span, .sausage-hover .sausage-span {
+	display: block
+}
+a, abbr, acronym, address, article, aside, blockquote, body, caption, code, dd, del, dfn, dialog, div, dl, dt, em, fieldset, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, iframe, img, label, legend, li, nav, object, ol, p, pre, q, section, span, table, tbody, td, tfoot, th, thead, tr, ul {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-weight: inherit;
+	font-style: inherit;
+	font-size: 100%;
+	font-family: inherit;
+	vertical-align: baseline
+}
+article, aside, dialog, figure, footer, header, hgroup, nav, section {
+	display: block
+}
+body {
+	line-height: 1.5
+}
+table {
+	border-collapse: separate;
+	border-spacing: 0
+}
+caption, td, th {
+	text-align: left;
+	font-weight: 400
+}
+table, td, th {
+	vertical-align: middle
+}
+blockquote:after, blockquote:before, q:after, q:before {
+	content: ""
+}
+blockquote, q {
+	quotes: "" ""
+}
+a img {
+	border: 0
+}
+.search, body, input[type=submit], input[type=text] {
+	font-family: Palatino, "Palatino Linotype", Georgia, Times, "Times New Roman", serif
+}
+html {
+	font-size: 100.01%
+}
+h1, h2, h3, h4, h5, h6 {
+	font-weight: 400;
+	color: #000
+}
+h1 {
+	font-size: 3em;
+	line-height: 1;
+	margin-bottom: .5em
+}
+h2 {
+	font-size: 2em;
+	margin-bottom: .75em
+}
+h3 {
+	font-size: 1.5em;
+	line-height: 1
+}
+h4 {
+	font-size: 1.2em;
+	line-height: 1.25;
+	margin-bottom: 1.25em
+}
+h5 {
+	font-size: 1em;
+	font-weight: 700;
+	margin-bottom: 1.5em
+}
+h6 {
+	font-size: 1em;
+	font-weight: 700
+}
+h1 img, h2 img, h3 img, h4 img, h5 img, h6 img {
+	margin: 0
+}
+p {
+	margin: 0 0 1.5em
+}
+p img.left {
+	float: left;
+	margin: 1.5em 1.5em 1.5em 0;
+	padding: 0
+}
+p img.right {
+	float: right;
+	margin: 1.5em 0 1.5em 1.5em
+}
+strong {
+	font-weight: 700
+}
+dfn, em {
+	font-style: italic
+}
+dfn {
+	font-weight: 700
+}
+sub, sup {
+	line-height: 0
+}
+address {
+	margin: 0 0 1.5em;
+	font-style: italic
+}
+del {
+	color: #666
+}
+li ol, li ul {
+	margin: 0
+}
+ol, ul {
+	margin: 0 1.5em 1.5em 0;
+	padding-left: 3.333em
+}
+ul {
+	list-style-type: disc
+}
+ol {
+	list-style-type: decimal
+}
+dl {
+	margin: 0 0 1.5em
+}
+dl dt {
+	font-weight: 700
+}
+dd {
+	margin-left: 1.5em
+}
+table {
+	margin-bottom: 1.4em
+}
+th {
+	font-weight: 700
+}
+thead th {
+	background: #c3d9ff
+}
+caption, td, th {
+	padding: 4px 10px 4px 5px
+}
+tfoot {
+	font-style: italic
+}
+body {
+	font-size: 100%;
+	color: #000;
+	background: #F6f6F6 url(../images/base.png) repeat 0 0
+}
+h3 {
+	border-bottom: 1px solid #CCC;
+	margin-bottom: .5em;
+	padding-bottom: .5em
+}
+.lead {
+	font-size: 1.5em
+}
+.stage_links {
+	color: #777
+}
+a, a:link, a:visited {
+	color: #906;
+	text-decoration: none
+}
+a:active, a:focus, a:hover {
+	color: #E106B2;
+	text-decoration: underline
+}
+hr.space {
+	background: #fff;
+	color: #fff;
+	visibility: hidden
+}
+hr {
+	background: #CCC;
+	color: #CCC;
+	clear: both;
+	float: none;
+	width: 100%;
+	height: .1em;
+	margin: 0 0 1.45em;
+	border: 0
+}
+hr.bold {
+	height: 1px;
+	background-color: #906;
+	color: #906
+}
+blockquote {
+	overflow: hidden;
+	margin: 0 0 1.5em;
+	padding: 0 1.5em;
+	color: #000;
+	font-style: normal
+}
+blockquote p {
+	margin-bottom: .5em
+}
+.attribution {
+	font-style: italic;
+	text-align: right;
+	color: #777
+}
+table {
+	width: 100%
+}
+code {
+	padding: 2px 4px;
+	color: #D14;
+	background-color: #F7F7F9;
+	border: 1px solid #E1E1E8;
+	font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+	font-size: 12px;
+	-webkit-border-radius: 3px;
+	-moz-border-radius: 3px;
+	border-radius: 3px
+}
+.caption, caption {
+	caption-side: bottom;
+	background: 0 0;
+	font-style: italic
+}
+tr.even td {
+	background: #F4F4F4
+}
+tfoot td {
+	border-top: 1px solid #EAEAEA;
+	font-weight: 700;
+	font-style: normal
+}
+abbr, acronym {
+	border: 0
+}
+abbr[title]:hover {
+	border-bottom: 1px dotted #666;
+	cursor: help
+}
+.red {
+	background: red
+}
+.highlight {
+	background: #EEC3C3
+}
+.blocks:after, .clearfix:after, .container:after, .edition_list:after, .editions:after, .inner:after {
+	content: "\0020";
+	display: block;
+	height: 0;
+	clear: both;
+	visibility: hidden;
+	overflow: hidden
+}
+.blocks, .clearfix, .container, .edition_list, .editions, .inner {
+	display: block
+}
+.clear {
+	clear: both
+}
+.container {
+	max-width: 940px;
+	margin: 0 auto;
+	padding: 0 16px;
+	text-align: left
+}
+.gttr {
+	margin-right: 2.9%;
+	float: left
+}
+.last {
+	float: left
+}
+.sidebar {
+	width: 32%;
+	float: right;
+	margin-right: 0
+}
+.content_footer {
+	clear: both
+}
+.span10, .span2, .span3, .span4, .span6, .span8 {
+	margin-right: 2.3%;
+	float: left
+}
+.span2 {
+	width: 14.6341%
+}
+.span3 {
+	width: 23.1707%
+}
+.span4 {
+	width: 31.7073%
+}
+.span6 {
+	width: 48.7805%
+}
+.span8 {
+	width: 65.853658%
+}
+.span10 {
+	width: 73.17073%
+}
+.blocks, .editions {
+	margin: 1.5em 0;
+	clear: both
+}
+.editions {
+	margin-bottom: 0
+}
+.last {
+	margin-right: 0 !important
+}
+.lyt_img {
+	max-width: 100%
+}
+.page_header {
+	overflow: hidden;
+	padding: 0 0 .2em;
+	margin: 1.5em 0
+}
+.logo {
+	width: 49.5%;
+	float: left;
+	margin-bottom: 0
+}
+.logo span {
+	display: block;
+	font-style: italic;
+	font-size: .5em
+}
+.logo a, .logo a:link, .logo a:visited {
+	color: #000
+}
+.logo a:active, .logo a:focus, .logo a:hover {
+	color: #906;
+	text-decoration: none
+}
+.search_box {
+	width: 50%;
+	float: right
+}
+.search {
+	width: auto;
+	float: right;
+	vertical-align: middle
+}
+.edition_list, .info_bubble, .inner, .stage {
+	padding: 1em 1.5em;
+	background: #FFF;
+	-moz-border-radius: 3px;
+	-webkit-border-radius: 3px;
+	border-radius: 3px;
+	-moz-box-shadow: 0 0 8px #999;
+	-webkit-box-shadow: 0 0 8px #999;
+	box-shadow: 0 0 8px #999
+}
+.stage {
+	margin-bottom: 1.5em;
+	padding: 3em 50% 1.5em 3em
+}
+.edition_list {
+	margin: 0 0 1em;
+	clear: both;
+	overflow: hidden
+}
+.edition_list p {
+	margin-bottom: 0;
+	font-style: italic
+}
+.edition_list h2 {
+	margin-bottom: 0;
+	font-size: 1.8em;
+	line-height: 1.5;
+	font-weight: 700
+}
+.edition_list ul {
+	margin: 0;
+	padding: 0;
+	list-style: none;
+	display: inline
+}
+.edition_list ul li {
+	display: inline;
+	margin-right: 1em;
+	padding-right: 1em;
+	border-right: 1px solid #F6f6F6
+}
+.edition_list ul li:last-child {
+	margin-right: 0;
+	padding-right: 0;
+	border-right: 0
+}
+.info_bubble {
+	padding-bottom: 1em;
+	color: #FFF;
+	text-shadow: 1px 1px 0 #000;
+	background: #906;
+	position: relative;
+	overflow: visible
+}
+.info_bubble p {
+	margin-bottom: 0
+}
+.info_bubble.startpage {
+	padding-bottom: 1em;
+	min-height: 9em;
+	height: auto !important;
+	height: 9em;
+	z-index: 0
+}
+.info_bubble.startpage span {
+	position: absolute;
+	display: block;
+	bottom: 1em;
+	left: -2em;
+	width: 40px;
+	height: 40px;
+	z-index: 100
+}
+.blocks>div {
+	margin-bottom: 1.5em
+}
+.footer {
+	margin: 1.5em 0 0;
+	padding: 1.5em 0 0;
+	overflow: hidden
+}
+#buy {
+	position: relative
+}
+#offers {
+	position: absolute;
+	bottom: 0;
+	font-size: .625em;
+	margin: 0;
+	padding: 0;
+	list-style: none;
+	display: none
+}
+.save_a_tree h3 {
+	display: none;
+	line-height: 1.5;
+	border-bottom: 0
+}
+#offers li {
+	display: inline;
+	margin-right: 1em;
+	padding-right: 1em;
+	border-right: 1px solid #F6f6F6
+}
+#offers li:last-child {
+	margin-right: 0;
+	padding-right: 0;
+	border-right: 0
+}
+.shopping_cart_button_line, .shopping_cart_button_line_bottom {
+	border-top: 1px solid #CCC;
+	margin-top: .5em;
+	padding: .5em 1px 0;
+	overflow: hidden;
+	clear: both
+}
+.shopping_cart_button_line_bottom {
+	margin-bottom: 7em
+}
+.shopping_cart_button_line:first-child {
+	border-top: 0
+}
+div.header {
+	font-size: 1.5em;
+	line-height: 1;
+	border-bottom: 1px solid #CCC;
+	margin-bottom: .5em;
+	padding-bottom: .5em;
+	color: #000;
+	text-shadow: 1px 1px 0 #FFF
+}
+.product_title {
+	font-style: italic;
+	margin-bottom: 1.5em
+}
+.product_price {
+	float: left
+}
+.price {
+	color: #666
+}
+.product_buy_link {
+	float: right;
+	line-height: 1
+}
+.ebook_formats, .safari_read_now, .whatisthis {
+	font-size: .75em
+}
+.safari_read_now {
+	float: right;
+	line-height: 2
+}
+input[type=submit], input[type=text] {
+	font-size: 1em;
+	-moz-border-radius: .5em;
+	-webkit-border-radius: .5em;
+	border-radius: .5em;
+	vertical-align: middle
+}
+input[type=text] {
+	width: 140px;
+	margin: .5em 0;
+	padding: .5em .5em .3em;
+	border: 1px solid #F1F1F0;
+	color: #666;
+	-moz-box-shadow: inset 3px 3px 2px #999;
+	-webkit-box-shadow: inset 3px 3px 2px #999;
+	box-shadow: inset 3px 3px 2px #999
+}
+input[type=text]:active, input[type=text]:focus, input[type=text]:hover {
+	background: #FFF;
+	color: #000;
+	outline: 0
+}
+input[type=submit] {
+	width: auto;
+	margin: 0;
+	padding: .28em .5em;
+	background: #906;
+	color: #FFF;
+	border: 0;
+	text-transform: uppercase;
+	cursor: pointer;
+	text-shadow: 1px 1px 0 #000;
+	-moz-box-shadow: 0 0 2px #999;
+	-webkit-box-shadow: 0 0 2px #999;
+	box-shadow: 0 0 2px #999
+}
+input[type=submit]:active, input[type=submit]:focus, input[type=submit]:hover {
+	color: #FFF;
+	background: #E106B2;
+	text-shadow: 1px 1px 0 #000;
+	-moz-box-shadow: 0 0 3px #333;
+	-webkit-box-shadow: 0 0 3px #333;
+	box-shadow: 0 0 3px #333
+}
+a.anchor {
+	color: #000
+}
+a.anchor:hover {
+	text-decoration: none
+}
+.figure {
+	padding-top: 1.5em
+}
+.caption, .figure {
+	display: block;
+	margin-bottom: 1.5em;
+	text-align: center
+}
+.figure * {
+	text-align: left
+}
+.caption {
+	font-size: .875em
+}
+.figure .caption {
+	text-align: center
+}
+.figure img {
+	margin-bottom: .5em;
+	max-width: 100%
+}
+.attribution::before {
+	content: ""
+}
+.sidebar ul {
+	font-size: .9em;
+	padding-left: 2em;
+	list-style-type: square
+}
+.disabled, .footer a, .footer a:active, .footer a:focus, .footer a:hover, .footer a:link, .footer a:visited, .info_bubble a, .info_bubble a:active, .info_bubble a:focus, .info_bubble a:hover, .info_bubble a:link, .info_bubble a:visited {
+	color: #BBB
+}
+.buybuttonswidget {
+	padding-bottom: 10px;
+	background: #FFF
+}
+@media (max-width:320px) {
+	.container {
+		max-width: 300px
+	}
+	#reviews {
+		display: none
+	}
+}
+@media (min-width:768px) and (max-width:1024px) {
+	.container {
+		max-width: 740px;
+		width: 740px
+	}
+}
+@media (min-width:1025px) {
+	.container {
+		width: 740px
+	}
+}

+ 150 - 0
epub.css

@@ -0,0 +1,150 @@
+html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, em, strong, b, u, i, pre, code, del, strike, abbr, acronym, address, q, cite, blockquote, big, small, sub, sup, tt, var, center, img, dfn, ins, kbd, s, samp, dl, dt, dd, ol, ul, li, fieldset, legend, label, table, caption, tbody, tfoot, thead, tr, th, td {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  outline: 0;
+  font-size: 100%;
+  vertical-align: baseline;
+  background: transparent;
+}
+@page {
+  margin: 5px;
+}
+p {
+  margin-bottom: 9px;
+  line-height: 1.4;
+}
+a {
+  color: #0069d6;
+}
+a:hover {
+  color: #0050a3;
+  text-decoration: none;
+}
+a img {
+  border: none;
+}
+h1, h2, h3, h4, h5, h6 {
+  color: #404040;
+  line-height: 1.5;
+  margin: 1em 0 0.5em;
+  -webkit-hyphens: none;
+  hyphens: none;
+  adobe-hyphenate: none;
+}
+h1 {
+  font-size: 220%;
+  margin-bottom: 1.5em;
+}
+h2 {
+  font-size: 190%;
+}
+h3 {
+  font-size: 160%;
+}
+h4 {
+  font-size: 140%;
+}
+h5 {
+  font-size: 130%;
+}
+h6 {
+  font-size: 120%;
+}
+hr {
+  margin: 0 0 19px;
+  border: 0;
+  border-bottom: 1px solid #ccc;
+}
+blockquote {
+  padding: 13px 13px 21px 15px;
+  margin-bottom: 18px;
+  font-family: georgia, serif;
+  font-style: italic;
+}
+blockquote:before {
+  content: "\201C";
+  font-size: 300%;
+  margin-left: -10px;
+  font-family: serif;
+  color: #eee;
+}
+blockquote p {
+  font-size: 120%;
+  margin-bottom: 0;
+  font-style: italic;
+}
+code, pre {
+  font-family: monospace;
+}
+code {
+  background-color: #fee9cc;
+  color: rgba(0, 0, 0, 0.75);
+  padding: 1px 3px;
+  -webkit-border-radius: 5px;
+  border-radius: 5px;
+  font-size: 85%;
+}
+pre {
+  display: block;
+  padding: 14px;
+  margin: 0 0 18px;
+  font-size: 85%;
+  line-height: 1.3;
+  border: 1px solid #d9d9d9;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  -webkit-hyphens: none;
+  hyphens: none;
+  adobe-hyphenate: none;
+}
+pre code {
+  background-color: #fff;
+  color: #737373;
+  padding: 0;
+}
+code.sourceCode span.kw {
+  color: #007020;
+  font-weight: bold;
+}
+code.sourceCode span.dt {
+  color: #902000;
+}
+code.sourceCode span.dv {
+  color: #40a070;
+}
+code.sourceCode span.bn {
+  color: #40a070;
+}
+code.sourceCode span.fl {
+  color: #40a070;
+}
+code.sourceCode span.ch {
+  color: #4070a0;
+}
+code.sourceCode span.st {
+  color: #4070a0;
+}
+code.sourceCode span.co {
+  color: #60a0b0;
+  font-style: italic;
+}
+code.sourceCode span.ot {
+  color: #007020;
+}
+code.sourceCode span.al {
+  color: red;
+  font-weight: bold;
+}
+code.sourceCode span.fu {
+  color: #06287e;
+}
+code.sourceCode span.re {
+}
+code.sourceCode span.er {
+  color: red;
+  font-weight: bold;
+}
+body {
+  font-family: serif;
+}

+ 314 - 54
index.html

@@ -1,58 +1,318 @@
 <!DOCTYPE html>
-<html lang="en-us">
-  <head>
-    <meta charset="UTF-8">
-    <title>Toolbox by phodal</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" type="text/css" href="stylesheets/normalize.css" media="screen">
-    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
-    <link rel="stylesheet" type="text/css" href="stylesheets/stylesheet.css" media="screen">
-    <link rel="stylesheet" type="text/css" href="stylesheets/github-light.css" media="screen">
-  </head>
-  <body>
-    <section class="page-header">
-      <h1 class="project-name">Toolbox</h1>
-      <h2 class="project-tagline">Phodal&#39;s Toolbox</h2>
-      <a href="https://github.com/phodal/toolbox" class="btn">View on GitHub</a>
-      <a href="https://github.com/phodal/toolbox/zipball/master" class="btn">Download .zip</a>
-      <a href="https://github.com/phodal/toolbox/tarball/master" class="btn">Download .tar.gz</a>
-    </section>
-
-    <section class="main-content">
-      <h1>
-<a id="全栈工程师的工具箱" class="anchor" href="#%E5%85%A8%E6%A0%88%E5%B7%A5%E7%A8%8B%E5%B8%88%E7%9A%84%E5%B7%A5%E5%85%B7%E7%AE%B1" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>全栈工程师的工具箱</h1>
-
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="generator" content="pandoc">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
+  <title>Toolbox - </title>
+  <style type="text/css">code{white-space: pre;}</style>
+  <link rel="stylesheet" href="style.css">
+  <!--[if lt IE 9]>
+    <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script>
+  <![endif]-->
+  <meta name="viewport" content="width=device-width">
+</head>
+<body>
+<p>
+<h1>一个全栈工程师的工具箱</h1>
+<p>Phodal Huang</p>
+</p>
+<div style="width:800px">
+<nav id="TOC">
 <ul>
-<li><a href="./documents.md">文档篇</a></li>
-<li><a href="./graphics.md">图形工具篇</a></li>
-<li><a href="./fe-plugins.md">Chrome插件 前端工具篇</a></li>
-<li>DevOps</li>
-<li>微服务篇</li>
-<li>前端工具篇</li>
-<li>后台框架篇</li>
-<li><a href="./devices.md">设外篇</a></li>
-<li><a href="./hardware.md">硬件篇</a></li>
+<li><a href="#devops">DevOps</a><ul>
+<li><a href="#nginx-pagespeed">Nginx Pagespeed</a></li>
+<li><a href="#boom">Boom</a></li>
+<li><a href="#goaccess">GoAccess</a></li>
+</ul></li>
+<li><a href="#外设篇">外设篇</a><ul>
+<li><a href="#带有自定义按钮的鼠标">带有自定义按钮的鼠标</a></li>
+<li><a href="#机械键盘">机械键盘</a></li>
+<li><a href="#机械键盘手托">机械键盘手托</a></li>
+<li><a href="#游戏鼠标线夹">游戏鼠标线夹</a></li>
+<li><a href="#笔记本支架折叠">笔记本支架折叠</a></li>
+<li><a href="#魔方插座">魔方插座</a></li>
+</ul></li>
+<li><a href="#文档篇">文档篇</a><ul>
+<li><a href="#pandoc">Pandoc</a></li>
+<li><a href="#graphviz">Graphviz</a></li>
+<li><a href="#imagemagick">ImageMagick</a></li>
+<li><a href="#tex-和-latex">TeX 和 Latex</a></li>
+<li><a href="#jupyter-notebook">Jupyter Notebook</a></li>
+<li><a href="#gitbook">Gitbook</a></li>
+</ul></li>
+<li><a href="#chrome插件-前端工具篇">Chrome插件 前端工具篇</a><ul>
+<li><a href="#chrome-devtools">Chrome DevTools</a></li>
+<li><a href="#open-seo-stats">Open SEO Stats</a></li>
+<li><a href="#pagespeed-insights">PageSpeed Insights</a></li>
+<li><a href="#postman">Postman</a></li>
+<li><a href="#xpath-helper">XPath Helper</a></li>
+<li><a href="#observepoint-tag-debugger">ObservePoint Tag Debugger</a></li>
+<li><a href="#capture-webpage-screenshot-entirely">Capture Webpage Screenshot Entirely</a></li>
+<li><a href="#amp-validator">AMP Validator</a></li>
+</ul></li>
+<li><a href="#程序员必知的七个图形工具">程序员必知的七个图形工具</a><ul>
+<li><a href="#流程图graphviz">流程图:Graphviz</a></li>
+<li><a href="#流程图-visio-vs-dia-vs-omnigraffle">流程图: Visio vs Dia vs OmnIGraffle</a></li>
+<li><a href="#在线流程图processon">在线流程图:Processon</a></li>
+<li><a href="#各种图-word和excel">各种图: Word和Excel</a></li>
+<li><a href="#脑图-xmind">脑图: XMind</a></li>
+<li><a href="#各种图d3.js">各种图:D3.js</a></li>
+<li><a href="#地图leaflet">地图:Leaflet</a></li>
+</ul></li>
+<li><a href="#硬件篇">硬件篇</a><ul>
+<li><a href="#raspberry-pi">Raspberry Pi</a></li>
+<li><a href="#arduino">Arduino</a><ul>
+<li><a href="#arduino-yun">Arduino Yun</a></li>
+<li><a href="#arduino-uno">Arduino Uno</a></li>
+<li><a href="#arduino-adk">Arduino ADK</a></li>
+<li><a href="#arduino-lilypad">Arduino Lilypad</a></li>
+</ul></li>
+<li><a href="#nodemcu">NodeMCU</a></li>
+<li><a href="#spark">Spark</a></li>
+</ul></li>
 </ul>
-
-<p>欢迎关注我的微信公众号</p>
-
-<p><img src="http://articles.phodal.com/qrcode.jpg" alt="Phodal Wechat"></p>
-
-<h2>
-<a id="license" class="anchor" href="#license" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>License</h2>
-
-<p>CC</p>
-
-<p><a href="http://ideas.phodal.com/"><img src="http://brand.phodal.com/shields/idea-small.svg" alt="Phodal's Idea"></a> <a href="http://www.xuntayizhan.com/person/ji-ke-ai-qing-zhi-er-shi-dai-wo-dai-ma-bian-cheng-qu-ni-wei-qi-ke-hao-wan/"><img src="http://brand.phodal.com/slogan/slogan.svg" alt="待我代码编成,娶你为妻可好"></a></p>
-
-      <footer class="site-footer">
-        <span class="site-footer-owner"><a href="https://github.com/phodal/toolbox">Toolbox</a> is maintained by <a href="https://github.com/phodal">phodal</a>.</span>
-
-        <span class="site-footer-credits">This page was generated by <a href="https://pages.github.com">GitHub Pages</a> using the <a href="https://github.com/jasonlong/cayman-theme">Cayman theme</a> by <a href="https://twitter.com/jasonlong">Jason Long</a>.</span>
-      </footer>
-
-    </section>
-
-  
-  </body>
+</nav>
+<h1 id="devops">DevOps</h1>
+<h2 id="nginx-pagespeed">Nginx Pagespeed</h2>
+<h2 id="boom">Boom</h2>
+<h2 id="goaccess">GoAccess</h2>
+<h1 id="外设篇">外设篇</h1>
+<h2 id="带有自定义按钮的鼠标">带有自定义按钮的鼠标</h2>
+<figure>
+<img src="./images/devices/steelseries.jpg" alt="Steelseries" /><figcaption>Steelseries</figcaption>
+</figure>
+<h2 id="机械键盘">机械键盘</h2>
+<p>红轴</p>
+<h2 id="机械键盘手托">机械键盘手托</h2>
+<h2 id="游戏鼠标线夹">游戏鼠标线夹</h2>
+<h2 id="笔记本支架折叠">笔记本支架折叠</h2>
+<h2 id="魔方插座">魔方插座</h2>
+<h1 id="文档篇">文档篇</h1>
+<figure>
+<img src="./images/documents/documents.png" alt="Documents" /><figcaption>Documents</figcaption>
+</figure>
+<h2 id="pandoc">Pandoc</h2>
+<blockquote>
+<p>Pandoc是一个标记语言转换工具,可实现不同标记语言间的格式转换,堪称该领域中的“瑞士军刀”。</p>
+</blockquote>
+<p>可以将 markdown、 reStructuredText、 textile、 HTML、 DocBook、 LaTeX、 MediaWiki markup、 TWiki markup、 OPML、 Emacs Org-Mode、 Txt2Tags、 Microsoft Word docx、 LibreOffice ODT、 EPUB、 Haddock markup</p>
+<p>转化为</p>
+<p>XHTML、 HTML5、 以及HTML幻灯片Slidy, S5,或者DZSlides、Microsoft Word docx、 OpenOffice/LibreOffice ODT、 OpenDocument XML、EPUB、DocBook、 GNU TexInfo、 Groff man pages、LaTeX、 ConTeXt、 LaTeX Beamer slides、PDF via LaTeX、Markdown、 reStructuredText、 AsciiDoc、 MediaWiki markup、 Emacs Org-Mode、 Textile</p>
+<p>上图</p>
+<figure>
+<img src="./images/documents/pandoc.png" alt="Pandoc" /><figcaption>Pandoc</figcaption>
+</figure>
+<p>我最常用的就是:将md转化为workd及pdf。我的毕业论文及之前的几本电子书都是这么做的,它是一个命令行工具,安装方式:</p>
+<ul>
+<li>Windows: choco install pandoc</li>
+<li>Ubuntu/CentOS/OpenSUSE: apt-get intall pandoc 或者 yum install pandoc</li>
+<li>Mac OS: brew install pandoc</li>
+</ul>
+<p>使用方式如下:</p>
+<pre><code>  pandoc fullstack.md -o fullstack.docx</code></pre>
+<p>如果要转为PDF,则需要另外的一个工具——LaTeX</p>
+<h2 id="graphviz">Graphviz</h2>
+<blockquote>
+<p>Graphviz (英文:Graph Visualization Software的缩写)是一个由AT&amp;T实验室启动的开源工具包,用于绘制DOT语言脚本描述的图形。它也提供了供其它软件使用的库。</p>
+</blockquote>
+<p>简单的来说,就是将代码转换为图形:</p>
+<figure>
+<img src="./images/documents/graphviz-example.png" alt="Graphviz" /><figcaption>Graphviz</figcaption>
+</figure>
+<p>它让我最惊讶的是DOT语言,简直是以我们平时的用法来定义的。上面的图形的代码类似于这样的:</p>
+<pre><code>home-&gt;products-&gt;widgets</code></pre>
+<p>又是一个让人惊呆的黑科技,这才是人类应该使用的语言。它可以支持PostScript,PDF,SVG,PNG等一系列的格式,用法</p>
+<pre><code> dot -T png phodal.dot -o phodal.png</code></pre>
+<p>简单、粗暴到没有朋友。</p>
+<h2 id="imagemagick">ImageMagick</h2>
+<blockquote>
+<p>ImageMagick (TM) 是一个免费的创建、编辑、合成图片的软件。它可以读取、转换、写入多种格式的图片。图片切割、颜色替换、各种效果的应用,图片的旋转、组合,文本,直线,多边形,椭圆,曲线,附加到图片伸展旋转。</p>
+</blockquote>
+<p>来自重点:可以支持超过两百多种格式。It can read and write images in a variety of formats (over 200) including PNG, JPEG, JPEG-2000, GIF, TIFF, DPX, EXR, WebP, Postscript, PDF, and SVG.</p>
+<p>它提供了一个命令行工具叫:<code>convert</code>,这可以自由地转换图片的形式,如:</p>
+<pre><code>convert image.jpg image.png</code></pre>
+<p>还可以加各种效果,如:</p>
+<figure>
+<img src="./images/documents/gausisan.jpg" alt="ImageMagick" /><figcaption>ImageMagick</figcaption>
+</figure>
+<p>顺便做个介绍:上面的这个人叫瑞典模特儿莱娜·瑟德贝里,是在刊于1972年11月号《花花公子》杂志上的一张裸体插图照片的一部分。<strong>她的脸部与裸露的肩部已经变成了事实上的工业标准。</strong></p>
+<p>又是一个简单、粗暴到没有朋友的工具。</p>
+<h2 id="tex-和-latex">TeX 和 Latex</h2>
+<p>TeX是由是一个由美国计算机教授高德纳(Donald Ervin Knuth)编写的功能强大的排版软件。顺便推荐一下他写的一本书:《计算机程序设计艺术》。因为:</p>
+<blockquote>
+<p>高德纳最早开始自行编写TEX的原因是当时十分粗糙的排版水平已经影响到他的巨著《计算机程序设计艺术》的印刷质量。他以典型的黑客思维模式,最终决定自行编写一个排版软件:TEX。他原本以为他只需要半年时间,在1978年下半年就能完成,但最终他用了超过十年时间,直到1989年TEX才最终停止修改。</p>
+</blockquote>
+<figure>
+<img src="./images/documents/aocp.jpg" alt="计算机程序设计艺术" /><figcaption>计算机程序设计艺术</figcaption>
+</figure>
+<p>这直接让我想起Martin Fowler在写《领域特定语言》里好像也是用DSL。Tex的最大优点是可以写出下面的这本复杂的公式:</p>
+<figure>
+<img src="./images/documents/formular.jpg" alt="formular" /><figcaption>formular</figcaption>
+</figure>
+<p>LaTeX 建立在 TeX 之上的工具,它在TeX的基础上大大改善了易用性。对了,如果只是一般的用途的话,就没有必要拿去装逼了~。</p>
+<p>它也是工作于命令行上的工具。</p>
+<h2 id="jupyter-notebook">Jupyter Notebook</h2>
+<p>Jupyter Notebook使用浏览器作为界面,其前身是Ipython Notebook,Ipython3.0之后新建为Jupyter项目。它支持Markdown、Python语言交互、R语言交互、图形显示、运行时间分析、LaTex公式,对于交互编程、数据分析和数据可视化非常有用。</p>
+<figure>
+<img src="./images/documents/Jupyter.png" alt="Jupyter" /><figcaption>Jupyter</figcaption>
+</figure>
+<p><strong>安装(使用pip)</strong></p>
+<pre><code>$ pip install jupyter</code></pre>
+<p><strong>运行</strong></p>
+<pre><code>$ jupyter notebook</code></pre>
+<p>官网:<a href="https://jupyter.org/">Jupyter</a></p>
+<h2 id="gitbook">Gitbook</h2>
+<p>Gitbook是一个命令行工具(node.js库),可以把你的Markdown文件汇集成起来,生成一个静态网站,也可以输出为PDF等多种格式。</p>
+<figure>
+<img src="./images/documents/gitbook.jpg" alt="gitbook" /><figcaption>gitbook</figcaption>
+</figure>
+<p><strong>安装(使用npm)</strong></p>
+<pre><code>$ npm install gitbook -g</code></pre>
+<p><strong>使用</strong></p>
+<pre><code>$ gitbook init # 初始化书籍目录
+$ gitbook serve # 运行</code></pre>
+<p>官网:<a href="https://www.gitbook.com/">Gitbook</a></p>
+<h1 id="chrome插件-前端工具篇">Chrome插件 前端工具篇</h1>
+<h2 id="chrome-devtools">Chrome DevTools</h2>
+<p>在我所用过的这些前端工具里,最常用、实用的就属Chrome自带的DevTools。通常情况下,我们只需要使用这个工具就可以完成大部分的工作了。</p>
+<figure>
+<img src="images/fe-plugins/dev-tool.jpg" alt="Chrome DevTools" /><figcaption>Chrome DevTools</figcaption>
+</figure>
+<p>每个前端工程师,都应该好好学习如何去使用Chrome DevTools。当然,这并不是一篇详细的关于Chrome DevTools的介绍——相关的内容足够写一本书了。除了正常的Debug功能,它可以模拟移动设备,模拟网络、模板分辨率、模拟,并在HTTP请求中带上相应的User Agent方便我们调试。</p>
+<h2 id="open-seo-stats">Open SEO Stats</h2>
+<p>顾名思义这是一个SEO状态查询工具,它可以让我们查看网站的SEO相关信息。也是一个非常棒的反诈骗软件,因为一个好的网站的Alexa Traffic Rank、PR以及Pages indexed(索引数)等等都会相对较高。</p>
+<figure>
+<img src="images/fe-plugins/seo-stats.jpg" alt="Open SEO Stats" /><figcaption>Open SEO Stats</figcaption>
+</figure>
+<p>除了基本的SEO状态显示,它还提供了一些有效的工具,来帮助我们优化页面的SEO。如在Page Info里,会罗列出页面的相关标签是否完整。在Links Stats里,会帮我们检查页面的外链情况等等。</p>
+<h2 id="pagespeed-insights">PageSpeed Insights</h2>
+<figure>
+<img src="images/fe-plugins/pagespeed.jpg" alt="PageSpeed Insights" /><figcaption>PageSpeed Insights</figcaption>
+</figure>
+<h2 id="postman">Postman</h2>
+<figure>
+<img src="images/fe-plugins/postman.jpg" alt="Chrome Postman" /><figcaption>Chrome Postman</figcaption>
+</figure>
+<h2 id="xpath-helper">XPath Helper</h2>
+<figure>
+<img src="images/fe-plugins/xpath.jpg" alt="XPath Helper" /><figcaption>XPath Helper</figcaption>
+</figure>
+<h2 id="observepoint-tag-debugger">ObservePoint Tag Debugger</h2>
+<figure>
+<img src="images/fe-plugins/observerPoint.jpg" alt="ObservePoint Tag Debugger" /><figcaption>ObservePoint Tag Debugger</figcaption>
+</figure>
+<h2 id="capture-webpage-screenshot-entirely">Capture Webpage Screenshot Entirely</h2>
+<h2 id="amp-validator">AMP Validator</h2>
+<h1 id="程序员必知的七个图形工具">程序员必知的七个图形工具</h1>
+<p>在上一篇《全栈工程师的百宝箱:黑魔法之文档篇》我们介绍了一些文档工具,今天让我来分享一下,我常用的一些图形工具。</p>
+<h2 id="流程图graphviz">流程图:Graphviz</h2>
+<p>说到流程图还是再次提及一下,我们之前说到的<strong>Graphviz</strong> 。</p>
+<blockquote>
+<p>Graphviz (英文:Graph Visualization Software的缩写)是一个由AT&amp;T实验室启动的开源工具包,用于绘制DOT语言脚本描述的图形。它也提供了供其它软件使用的库。</p>
+</blockquote>
+<p>它的主要特点是代码生成图像,并且足够的简单。</p>
+<p>在我的那个“Web Developer 成长路线图”(GitHub: <a href="https://github.com/phodal/developer" class="uri">https://github.com/phodal/developer</a>)里,就是用这个工具生成下面这个复杂的图形。</p>
+<figure>
+<img src="http://articles.phodal.com/graphics/tree.png" alt="tree.png" /><figcaption>tree.png</figcaption>
+</figure>
+<p>而其代码特别简单——和我们平时表达的手法是一样的,即:</p>
+<pre><code>&quot;包管理&quot; -&gt; &quot;包发布&quot; -&gt; &quot;自动部署&quot;
+&quot;CLI&quot; -&gt; &quot;部署&quot;
+&quot;脚本语言(Bash,Perl,Ruby,Python etc)&quot; -&gt; &quot;部署&quot;
+&quot;脚本语言(Bash,Perl,Ruby,Python etc)&quot; -&gt; &quot;构建&quot;
+&quot;*nix&quot; -&gt; &quot;软件编译&quot; -&gt; &quot;部署&quot;
+&quot;构建&quot; -&gt; &quot;软件编译&quot;</code></pre>
+<p>Graphviz有一个大的优点和弱点是:自动生成,导致画线的时候很出现出问题。接着,我们就来看看手动画线的例子。</p>
+<h2 id="流程图-visio-vs-dia-vs-omnigraffle">流程图: Visio vs Dia vs OmnIGraffle</h2>
+<p>在Windows世界里,在这一类的工具里面最常见的算是Visio:</p>
+<figure>
+<img src="http://articles.phodal.com/graphics/MS-Visio-flowchart.png" alt="MS-Visio-flowchart.png" /><figcaption>MS-Visio-flowchart.png</figcaption>
+</figure>
+<p>遗憾的是,它并不支持在Mac OS上使用。而且,它并不在我购买的Office 365套装里。</p>
+<p>在Mac世界里,最好的工具算是OmniGraffle,就是很贵——我们平时使用的是公司的Mac电脑,使用盗版软件是有法律风险的。</p>
+<figure>
+<img src="http://articles.phodal.com/graphics/Omnigrafflescreen.jpg" alt="Omnigrafflescreen.jpg" /><figcaption>Omnigrafflescreen.jpg</figcaption>
+</figure>
+<p>在GNU/Linux世界里,我们使用Dia。</p>
+<blockquote>
+<p>Dia 是开放源代码的流程图软件,是GNU计划的一部分,程序创立者是Alexander Larsson。Dia使用单一文件界面模式,类似于GIMP与Inkscape。 Dia将多种需求以模块化来设计,如流程图、网络图、电路图等。各模块之间的符号仍是可以通用的,并没有限制。</p>
+</blockquote>
+<figure>
+<img src="http://articles.phodal.com/graphics/dia_screenshot.png" alt="dia_screenshot.png" /><figcaption>dia_screenshot.png</figcaption>
+</figure>
+<p>顺便安利一下,我最喜欢的操作系统OpenSuSE——简洁、尾长、绿色。</p>
+<figure>
+<img src="http://articles.phodal.com/graphics/opensuse.jpg" alt="opensuse.jpg" /><figcaption>opensuse.jpg</figcaption>
+</figure>
+<p>OpenSuSE在KDE桌面下效果最赞了——因为KDE和OpenSuSE都是德国制造。总的来说,会比Debian系的Debian和Ubunt,及RetHat系的CentOS及Fedora稳定、漂亮。</p>
+<p>令人遗憾的是这三个工具,我都用不了。Mac对X Windows的支持不是一般的差,于是我就需要别的替代工具。</p>
+<h2 id="在线流程图processon">在线流程图:Processon</h2>
+<p>这个工具还是相当好用,至少是在GxFxW内比较快——我之前使用过Creately、draw.io、Gliffy等等的一些工具,只是随着版图的扩展,很多地区都已经“xx”了。</p>
+<figure>
+<img src="http://articles.phodal.com/graphics/tlok.jpg" alt="tlok.jpg" /><figcaption>tlok.jpg</figcaption>
+</figure>
+<p>不过遗憾的是:他们没有给我广告费。</p>
+<blockquote>
+<p>ProcessOn是一个在线协作绘图平台,为用户提供最强大、易用的作图工具!支持在线创作流程图、BPMN、UML图、UI界面原型设计、iOS界面原型设计等。</p>
+</blockquote>
+<p>同样的,在我的那个“Developer进阶书单”(GitHub: <a href="https://github.com/phodal/booktree" class="uri">https://github.com/phodal/booktree</a>)中,就是用这个工具画出规规矩矩的线。</p>
+<figure>
+<img src="http://articles.phodal.com/graphics/BookTree.png" alt="BookTree.png" /><figcaption>BookTree.png</figcaption>
+</figure>
+<p>并且,它还是跨平台的。</p>
+<h2 id="各种图-word和excel">各种图: Word和Excel</h2>
+<p>由于翻译和写书的需要,我成了一个Office 365订阅用户。于是发现在Word等一系列的Office工具中,自带了一个SmartArt的工具:</p>
+<figure>
+<img src="http://articles.phodal.com/graphics/smart-art.png" alt="smart-art.png" /><figcaption>smart-art.png</figcaption>
+</figure>
+<p>可以画出很多很有意思的图形,比如:</p>
+<figure>
+<img src="http://articles.phodal.com/graphics/program_road.png" alt="编程之路.png" /><figcaption>编程之路.png</figcaption>
+</figure>
+<p>又或者是:</p>
+<figure>
+<img src="http://articles.phodal.com/graphics/growth-lob.png" alt="growth-lob.png" /><figcaption>growth-lob.png</figcaption>
+</figure>
+<p>分分钟就能画一个的节奏。</p>
+<h2 id="脑图-xmind">脑图: XMind</h2>
+<p>我想这个一般人都是知道的。</p>
+<blockquote>
+<p>XMind思维导图软件被著名互联网媒体Lifehacker评选为“最佳头脑风暴和思维导图工具”及”最受欢迎的思维导图软件”。</p>
+</blockquote>
+<p>它有一个很大的优点是使用了全球最先进的Eclipse RCP 软件架构,支持跨平台使用。它有一个很大的缺点是使用了全球最先进的Eclipse RCP 软件架构,导致了有点卡。</p>
+<p>相比于流程图什么的,它只适合做脑图。</p>
+<figure>
+<img src="http://articles.phodal.com/graphics/banner_index.png" alt="banner_index.png" /><figcaption>banner_index.png</figcaption>
+</figure>
+<p>如果你还在使用Eclipse,那么你应该试试Intellij IDEA了。</p>
+<h2 id="各种图d3.js">各种图:D3.js</h2>
+<blockquote>
+<p>D3.js(D3或Data-Driven Documents)是一个用动态图形显示数据的JavaScript库,一个数据可视化的工具。</p>
+</blockquote>
+<p>与上面的工具相比,这个工具可能没有那么方便。但是,作为一个数据可视化工具,它不仅仅可以做出各种炫酷的图形。</p>
+<p>还可以做出一个技能树:</p>
+<figure>
+<img src="http://articles.phodal.com/graphics/sherlock.png" alt="sherlock.png" /><figcaption>sherlock.png</figcaption>
+</figure>
+<p>这个项目的GitHub见:<a href="https://github.com/phodal/sherlock" class="uri">https://github.com/phodal/sherlock</a></p>
+<h2 id="地图leaflet">地图:Leaflet</h2>
+<blockquote>
+<p>Leaflet 是一个为建设移动设备友好的互动地图,而开发的现代的、开源的JavaScript 库。</p>
+</blockquote>
+<p>虽然它与上面的图形没有啥关系,但是它带了一个图字啊。与Google Map原生的API,或者OpenStreet相比,它最大的优点是对移动设备支持好。</p>
+<p>并且,它也是一个可以根据数据(GEOJSON,地理数据)生成图形的工具。</p>
+<figure>
+<img src="http://articles.phodal.com/graphics/vmap.jpg" alt="vmap.jpg" /><figcaption>vmap.jpg</figcaption>
+</figure>
+<h1 id="硬件篇">硬件篇</h1>
+<h2 id="raspberry-pi">Raspberry Pi</h2>
+<h2 id="arduino">Arduino</h2>
+<h3 id="arduino-yun">Arduino Yun</h3>
+<h3 id="arduino-uno">Arduino Uno</h3>
+<h3 id="arduino-adk">Arduino ADK</h3>
+<h3 id="arduino-lilypad">Arduino Lilypad</h3>
+<h2 id="nodemcu">NodeMCU</h2>
+<h2 id="spark">Spark</h2>
+</body>
 </html>

+ 25 - 0
listings-setup.tex

@@ -0,0 +1,25 @@
+% Contents of listings-setup.tex
+\usepackage{xcolor}
+
+\lstset{
+    basicstyle=\ttfamily,
+    numbers=left,
+    keywordstyle=\color[rgb]{0.13,0.29,0.53}\bfseries,
+    stringstyle=\color[rgb]{0.31,0.60,0.02},
+    commentstyle=\color[rgb]{0.56,0.35,0.01}\itshape,
+    numberstyle=\footnotesize,
+    stepnumber=1,
+    numbersep=5pt,
+    backgroundcolor=\color[RGB]{248,248,248},
+    showspaces=false,
+    showstringspaces=false,
+    showtabs=false,
+    tabsize=2,
+    captionpos=b,
+    breaklines=true,
+    breakatwhitespace=true,
+    breakautoindent=true,
+    escapeinside={\%*}{*)},
+    linewidth=\textwidth,
+    basewidth=0.5em,
+}

+ 0 - 6
params.json

@@ -1,6 +0,0 @@
-{
-  "name": "Toolbox",
-  "tagline": "Phodal's Toolbox",
-  "body": "# 全栈工程师的工具箱\r\n\r\n - [文档篇](./documents.md)\r\n - [图形工具篇](./graphics.md)\r\n - [Chrome插件 前端工具篇](./fe-plugins.md)\r\n - DevOps\r\n - 微服务篇\r\n - 前端工具篇\r\n - 后台框架篇\r\n - [设外篇](./devices.md)\r\n - [硬件篇](./hardware.md)\r\n\r\n欢迎关注我的微信公众号\r\n\r\n![Phodal Wechat](http://articles.phodal.com/qrcode.jpg)\r\n\r\nLicense\r\n---\r\n\r\nCC\r\n\r\n[![Phodal's Idea](http://brand.phodal.com/shields/idea-small.svg)](http://ideas.phodal.com/) [![待我代码编成,娶你为妻可好](http://brand.phodal.com/slogan/slogan.svg)](http://www.xuntayizhan.com/person/ji-ke-ai-qing-zhi-er-shi-dai-wo-dai-ma-bian-cheng-qu-ni-wei-qi-ke-hao-wan/)\r\n\r\n",
-  "note": "Don't delete this file! It's used internally to help with page regeneration."
-}

+ 219 - 0
style.css

@@ -0,0 +1,219 @@
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote {
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", Arial, sans-serif;
+    font-size: 18px;
+    line-height: 1.4;
+    color: #000000;
+    margin: 10px 13px 10px 13px;
+}
+
+a {
+    color: #0069d6;
+}
+
+a:hover {
+    color: #0050a3;
+    text-decoration: none;
+}
+
+a img {
+    border: none;
+}
+
+p {
+    text-indent: 2em;
+    margin-bottom: 12px;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    color: #404040;
+    line-height: 36px;
+}
+
+h1 {
+    margin-bottom: 32px;
+    margin-top: 32px;
+    font-size: 30px;
+    color: #0050a3;
+}
+
+h1 a {
+    margin-top: 100px;
+    display: block;
+}
+
+h2 {
+    font-size: 24px;
+    margin-bottom: 28px;
+}
+
+h3 {
+    font-size: 18px;
+    margin-bottom: 24px;
+}
+
+h4 {
+    font-size: 16px;
+}
+
+h5 {
+    font-size: 14px;
+}
+
+h6 {
+    font-size: 13px;
+}
+
+hr {
+    margin: 0 0 19px;
+    border: 0;
+    border-bottom: 1px solid #ccc;
+}
+
+blockquote {
+    padding: 2px 13px 21px 2px;
+    margin-bottom: 12px;
+    font-family: georgia,serif;
+    font-style: italic;
+}
+
+blockquote:before {
+    content: "\201C";
+    font-size: 40px;
+    margin-left: -10px;
+    font-family: georgia,serif;
+    color: #eee;
+}
+
+blockquote p {
+    font-size: 14px;
+    font-weight: 300;
+    line-height: 18px;
+    margin-bottom: 0;
+    font-style: italic;
+}
+
+code, pre {
+    font-family: Monaco, Andale Mono, Courier New, monospace;
+}
+
+code {
+    background-color: #fee9cc;
+    color: rgba(0, 0, 0, 0.75);
+    padding: 1px 3px;
+    font-size: 12px;
+    -webkit-border-radius: 3px;
+    -moz-border-radius: 3px;
+    border-radius: 3px;
+}
+
+pre {
+    display: block;
+    padding: 14px;
+    margin: 0 0 18px;
+    line-height: 16px;
+    font-size: 11px;
+    border: 1px solid #d9d9d9;
+    white-space: pre-line;
+    word-wrap: break-word;
+}
+
+pre code {
+    background-color: #fff;
+    color: #737373;
+    font-size: 11px;
+    padding: 0;
+    white-space: pre-wrap;
+}
+
+
+figure img {
+    display: block;
+    margin: 0 auto;
+    max-width: 100%;
+}
+
+figcaption {
+    text-align: center;
+}
+
+ul li a {
+    font-weight: bold;
+}
+
+ul li ul a {
+    font-weight: normal;
+}
+
+@media screen and (min-width: 768px) {
+    body {
+        width: 748px;
+        margin: 40px auto;
+    }
+}
+
+
+table {
+    margin: 10px auto;
+}
+
+thead {
+    font-size: 120%;
+    font-weight: 1000;
+    cursor: pointer;
+    background: #c9dff0
+}
+
+thead tr th {
+    text-align: center;
+    font-weight: bold;
+    padding: 12px 30px;
+    padding-left: 42px
+}
+
+thead tr th span {
+    padding-right: 20px;
+    background-repeat: no-repeat;
+    background-position: 100% 100%
+}
+
+tbody tr td {
+    padding: 15px 10px
+}
+
+tbody tr td.lalign {
+    text-align: left
+}
+
+tbody tr:nth-child(even) {
+    background: #fff
+}
+
+tbody tr:nth-child(odd) {
+    background: #eee
+}
+
+td,th {
+    border-left: 1px solid #cbcbcb;
+    border-width: 0 0 0 1px;
+    font-size: inherit;
+    margin: 0;
+    overflow: visible;
+    padding: .5em 1em
+}

+ 243 - 0
template/template.tex

@@ -0,0 +1,243 @@
+\documentclass[a4paper, 11pt]{article}
+\usepackage{geometry}     % 設定邊界
+\geometry{
+  top=1in,
+  inner=1in,
+  outer=1in,
+  bottom=1in,
+  headheight=3ex,
+  headsep=2ex
+}
+\usepackage{tabu}
+\usepackage[T1]{fontenc}
+\usepackage{lmodern}
+\usepackage{booktabs}
+\usepackage{amssymb,amsmath}
+\usepackage{ifxetex,ifluatex}
+\usepackage{fixltx2e} % provides \textsubscript
+% use upquote if available, for straight quotes in verbatim environments
+\IfFileExists{upquote.sty}{\usepackage{upquote}}{}
+\ifnum 0\ifxetex 1\fi\ifluatex 1\fi=0 % if pdftex
+  \usepackage[utf8]{inputenc}
+$if(euro)$
+  \usepackage{eurosym}
+$endif$
+\else % if luatex or xelatex
+  \usepackage{fontspec}   % 允許設定字體
+  \usepackage{xeCJK}    % 分開設置中英文字型
+  \setCJKmainfont{STSong}   % 設定中文字型
+  \setmainfont[Mapping=tex-text]{Times New Roman}%\rmfamily 使用的字体,默认英文和数字的字体。   % 設定英文字型
+  \setromanfont{Georgia}  % 字型
+  \setmonofont{Courier New}
+  \linespread{1.2}\selectfont   % 行距
+  \XeTeXlinebreaklocale "zh"  % 針對中文自動換行
+  \XeTeXlinebreakskip = 0pt plus 1pt % 字與字之間加入0pt至1pt的間距,確保左右對整齊
+  \parindent 0em    % 段落縮進
+  \setlength{\parskip}{20pt}  % 段落之間的距離
+  \ifxetex
+    \usepackage{xltxtra,xunicode}
+  \fi
+  \defaultfontfeatures{Mapping=tex-text,Scale=MatchLowercase}
+  \newcommand{\euro}{€}
+$if(mainfont)$
+    \setmainfont{$mainfont$}
+$endif$
+$if(sansfont)$
+    \setsansfont{$sansfont$}
+$endif$
+$if(monofont)$
+    \setmonofont{$monofont$}
+$endif$
+$if(mathfont)$
+    \setmathfont{$mathfont$}
+$endif$
+\fi
+% use microtype if available
+\IfFileExists{microtype.sty}{\usepackage{microtype}}{}
+$if(geometry)$
+\usepackage[$for(geometry)$$geometry$$sep$,$endfor$]{geometry}
+$endif$
+$if(natbib)$
+\usepackage{natbib}
+\bibliographystyle{plainnat}
+$endif$
+$if(biblatex)$
+\usepackage{biblatex}
+$if(biblio-files)$
+\bibliography{$biblio-files$}
+$endif$
+$endif$
+$if(listings)$
+\usepackage{listings}
+$endif$
+$if(lhs)$
+\lstnewenvironment{code}{\lstset{language=Haskell,basicstyle=\small\ttfamily}}{}
+$endif$
+$if(highlighting-macros)$
+$highlighting-macros$
+$endif$
+$if(verbatim-in-note)$
+\usepackage{fancyvrb}
+$endif$
+$if(tables)$
+\usepackage{longtable}
+$endif$
+
+\usepackage{graphicx}
+\usepackage{caption}
+% We will generate all images so they have a width \maxwidth. This means
+% that they will get their normal width if they fit onto the page, but
+% are scaled down if they would overflow the margins.
+\makeatletter
+\def\maxwidth{\ifdim\Gin@nat@width>\linewidth\linewidth
+\else\Gin@nat@width\fi}
+\makeatother
+\let\Oldincludegraphics\includegraphics
+\renewcommand{\includegraphics}[1]{\Oldincludegraphics[width=\maxwidth]{#1}}
+\ifxetex
+  \usepackage[setpagesize=false, % page size defined by xetex
+              unicode=false, % unicode breaks when used with xetex
+              xetex]{hyperref}
+\else
+  \usepackage[unicode=true]{hyperref}
+\fi
+\hypersetup{breaklinks=true,
+            bookmarks=true,
+            pdfauthor={$author-meta$},
+            pdftitle={$title-meta$},
+            colorlinks=true,
+            urlcolor=$if(urlcolor)$$urlcolor$$else$blue$endif$,
+            linkcolor=$if(linkcolor)$$linkcolor$$else$magenta$endif$,
+            pdfborder={0 0 0}}
+\urlstyle{same}  % don't use monospace font for urls
+$if(links-as-notes)$
+% Make links footnotes instead of hotlinks:
+\renewcommand{\href}[2]{#2\footnote{\url{#1}}}
+$endif$
+$if(strikeout)$
+\usepackage[normalem]{ulem}
+% avoid problems with \sout in headers with hyperref:
+\pdfstringdefDisableCommands{\renewcommand{\sout}{}}
+$endif$
+\setlength{\parindent}{0pt}
+%\setlength{\parskip}{6pt plus 2pt minus 1pt}
+\setlength{\emergencystretch}{3em}  % prevent overfull lines
+\usepackage{titling}
+\setlength{\droptitle}{-8em}  % 將標題移動至頁面的上面
+
+\usepackage{fancyhdr}
+\usepackage{lastpage}
+\pagestyle{fancyplain}
+
+$if(numbersections)$
+\setcounter{secnumdepth}{5}
+$else$
+\setcounter{secnumdepth}{0}
+$endif$
+$if(verbatim-in-note)$
+\VerbatimFootnotes % allows verbatim text in footnotes
+$endif$
+$if(lang)$
+\ifxetex
+  \usepackage{polyglossia}
+  \setmainlanguage{$mainlang$}
+\else
+  \usepackage[$lang$]{babel}
+\fi
+$endif$
+$for(header-includes)$
+$header-includes$
+$endfor$
+
+$if(title)$
+\title{$title$}
+$endif$
+\author{$for(author)$$author$$sep$ \and $endfor$}
+\date{$date$}
+
+%%%% 段落首行缩进两个字 %%%%
+\makeatletter
+\let\@afterindentfalse\@afterindenttrue
+\@afterindenttrue
+\makeatother
+\setlength{\parindent}{2em}  %中文缩进两个汉字位
+
+
+%%%% 下面的命令重定义页面边距,使其符合中文刊物习惯 %%%%
+\addtolength{\topmargin}{-2pt}
+\setlength{\oddsidemargin}{0.63cm}  % 3.17cm - 1 inch
+\setlength{\evensidemargin}{\oddsidemargin}
+\setlength{\textwidth}{14.66cm}
+\setlength{\textheight}{24.00cm}    % 24.62
+
+%%%% 下面的命令设置行间距与段落间距 %%%%
+\linespread{1.4}
+% \setlength{\parskip}{1ex}
+\setlength{\parskip}{0.5\baselineskip}
+
+
+\begin{document}
+%%%% 定理类环境的定义 %%%%
+\newtheorem{example}{例}             % 整体编号
+\newtheorem{algorithm}{算法}
+\newtheorem{theorem}{定理}[section]  % 按 section 编号
+\newtheorem{definition}{定义}
+\newtheorem{axiom}{公理}
+\newtheorem{property}{性质}
+\newtheorem{proposition}{命题}
+\newtheorem{lemma}{引理}
+\newtheorem{corollary}{推论}
+\newtheorem{remark}{注解}
+\newtheorem{condition}{条件}
+\newtheorem{conclusion}{结论}
+\newtheorem{assumption}{假设}
+
+\newcommand{\tightlist}{%
+  \setlength{\itemsep}{0pt}\setlength{\parskip}{0pt}}
+  
+%%%% 重定义 %%%%
+\renewcommand{\contentsname}{目录}  % 将Contents改为目录
+\renewcommand{\abstractname}{摘要}  % 将Abstract改为摘要
+\renewcommand{\refname}{参考文献}   % 将References改为参考文献
+\renewcommand{\indexname}{索引}
+\renewcommand{\figurename}{图}
+\renewcommand{\tablename}{表}
+\renewcommand{\appendixname}{附录}
+
+$for(include-before)$
+$include-before$
+
+$endfor$
+$if(toc)$
+{
+\newpage
+\hypersetup{linkcolor=black}
+\setcounter{tocdepth}{$toc-depth$}
+\tableofcontents
+}
+\newpage
+$endif$
+$body$
+
+$if(natbib)$
+$if(biblio-files)$
+$if(biblio-title)$
+$if(book-class)$
+\renewcommand\bibname{$biblio-title$}
+$else$
+\renewcommand\refname{$biblio-title$}
+$endif$
+$endif$
+\bibliography{$biblio-files$}
+
+$endif$
+$endif$
+$if(biblatex)$
+\printbibliography$if(biblio-title)$[title=$biblio-title$]$endif$
+
+$endif$
+$for(include-after)$
+$include-after$
+
+$endfor$
+\end{document}