adjust mac screenlock to correct format

README.md

@@ -36,7 +36,7 @@
         *   [Step 3: 转换IP为GEO信息](http://ideabook.phodal.com/#step-3-转换ip为geo信息)
         *   [Step 4: 展示数据到地图上](http://ideabook.phodal.com/#step-4-展示数据到地图上)
         *   [练习建议](http://ideabook.phodal.com/#练习建议)
-*   [书籍录入程序](http://ideabook.phodal.com/#书籍录入程序)
+*   [书籍录入移动应用：条形码扫描](http://ideabook.phodal.com/#书籍录入移动应用条形码扫描)
     *   [概况](http://ideabook.phodal.com/#概况-1)
         *   [背景](http://ideabook.phodal.com/#背景-1)
         *   [ShowCase](http://ideabook.phodal.com/#showcase-1)
@@ -53,7 +53,7 @@
     *   [步骤](http://ideabook.phodal.com/#步骤-2)
         *   [Step 1: 基本图形](http://ideabook.phodal.com/#step-1-基本图形)
         *   [Step 2: 高级Badge](http://ideabook.phodal.com/#step-2-高级badge)
-*   [Web文本编辑器](http://ideabook.phodal.com/#web文本编辑器)
+*   [微信文章编辑器](http://ideabook.phodal.com/#微信文章编辑器)
     *   [概况](http://ideabook.phodal.com/#概况-3)
         *   [背景](http://ideabook.phodal.com/#背景-3)
         *   [ShowCase](http://ideabook.phodal.com/#showcase-3)
@@ -64,7 +64,7 @@
         *   [Step 3: 初始化](http://ideabook.phodal.com/#step-3-初始化)
         *   [Step 4: 创建对应的View](http://ideabook.phodal.com/#step-4-创建对应的view)
         *   [练习建议](http://ideabook.phodal.com/#练习建议-2)
-*   [JavaScript打造Slide应用](http://ideabook.phodal.com/#javascript打造slide应用)
+*   [JavaScript制作Slide框架](http://ideabook.phodal.com/#javascript制作slide框架)
     *   [概况](http://ideabook.phodal.com/#概况-4)
         *   [背景](http://ideabook.phodal.com/#背景-4)
         *   [Showcase](http://ideabook.phodal.com/#showcase-4)
@@ -77,14 +77,14 @@
         *   [Step 5: 进度条](http://ideabook.phodal.com/#step-5-进度条)
         *   [Step 6: 同步](http://ideabook.phodal.com/#step-6-同步)
         *   [练习建议](http://ideabook.phodal.com/#练习建议-3)
-*   [编辑-发布-分离应用](http://ideabook.phodal.com/#编辑-发布-分离应用)
+*   [编辑-发布-分离的博客系统](http://ideabook.phodal.com/#编辑-发布-分离的博客系统)
     *   [概况](http://ideabook.phodal.com/#概况-5)
         *   [背景: 编辑-发布-开发分离](http://ideabook.phodal.com/#背景-编辑-发布-开发分离)
         *   [用户场景](http://ideabook.phodal.com/#用户场景)
     *   [步骤](http://ideabook.phodal.com/#步骤-5)
         *   [Step 1: 构建工具](http://ideabook.phodal.com/#step-1-构建工具)
         *   [Step 2: 静态页面生成](http://ideabook.phodal.com/#step-2-静态页面生成)
-*   [Google Map与Solr实现多边形搜索](http://ideabook.phodal.com/#google-map与solr实现多边形搜索)
+*   [Solr实现多边形地理搜索](http://ideabook.phodal.com/#solr实现多边形地理搜索)
     *   [概况](http://ideabook.phodal.com/#概况-6)
         *   [背景](http://ideabook.phodal.com/#背景-5)
         *   [Showcase](http://ideabook.phodal.com/#showcase-5)
@@ -102,7 +102,7 @@
         *   [Step 2: 响应式设计](http://ideabook.phodal.com/#step-2-响应式设计)
         *   [Step 3: 平台特定代码](http://ideabook.phodal.com/#step-3-平台特定代码)
         *   [未来](http://ideabook.phodal.com/#未来)
-*   [Ionic ElasticSearch打造O2O应用](http://ideabook.phodal.com/#ionic-elasticsearch打造o2o应用)
+*   [Ionic与ElasticSearch打造O2O应用](http://ideabook.phodal.com/#ionic与elasticsearch打造o2o应用)
     *   [概况](http://ideabook.phodal.com/#概况-8)
         *   [背景](http://ideabook.phodal.com/#背景-7)
         *   [Showcase](http://ideabook.phodal.com/#showcase-7)
@@ -115,7 +115,7 @@
         *   [Step 4: Ionic ElasticSearch 创建页面](http://ideabook.phodal.com/#step-4-ionic-elasticsearch-创建页面)
         *   [Step 5: Ionic ElasticSearch Service](http://ideabook.phodal.com/#step-5-ionic-elasticsearch-service)
         *   [Step 6: Ionic OpenLayer 地图显示](http://ideabook.phodal.com/#step-6-ionic-openlayer-地图显示)
-*   [一步步搭建JavaScript框架: Lettuce](http://ideabook.phodal.com/#一步步搭建javascript框架-lettuce)
+*   [一步步搭建JavaScript框架](http://ideabook.phodal.com/#一步步搭建javascript框架)
     *   [概况](http://ideabook.phodal.com/#概况-9)
         *   [背景](http://ideabook.phodal.com/#背景-8)
     *   [步骤](http://ideabook.phodal.com/#步骤-9)
@@ -125,20 +125,27 @@
         *   [Step 4: 整合](http://ideabook.phodal.com/#step-4-整合)
         *   [Step 5: 测试](http://ideabook.phodal.com/#step-5-测试)
         *   [练习建议](http://ideabook.phodal.com/#练习建议-4)
-*   [基于Virtual DOM的测试代码生成](http://ideabook.phodal.com/#基于virtual-dom的测试代码生成)
+*   [制作简易Mac OS上的伪锁屏工具](http://ideabook.phodal.com/#制作简易mac-os上的伪锁屏工具)
     *   [概况](http://ideabook.phodal.com/#概况-10)
         *   [背景](http://ideabook.phodal.com/#背景-9)
+    *   [步骤](http://ideabook.phodal.com/#步骤-10)
+        *   [Step 1：屏幕截图](http://ideabook.phodal.com/#step-1屏幕截图)
+        *   [Step 2：调节亮度](http://ideabook.phodal.com/#step-2调节亮度)
+        *   [Step 3：全屏图片](http://ideabook.phodal.com/#step-3全屏图片)
+*   [基于Virtual DOM的测试代码生成](http://ideabook.phodal.com/#基于virtual-dom的测试代码生成)
+    *   [概况](http://ideabook.phodal.com/#概况-11)
+        *   [背景](http://ideabook.phodal.com/#背景-10)
         *   [ShowCase](http://ideabook.phodal.com/#showcase-8)
         *   [基本原理](http://ideabook.phodal.com/#基本原理)
-    *   [步骤](http://ideabook.phodal.com/#步骤-10)
+    *   [步骤](http://ideabook.phodal.com/#步骤-11)
         *   [Step 1: Virtual-dom与HyperScript](http://ideabook.phodal.com/#step-1-virtual-dom与hyperscript)
         *   [Step 2: 标记DOM变化](http://ideabook.phodal.com/#step-2-标记dom变化)
-*   [单页面移动应用](http://ideabook.phodal.com/#单页面移动应用)
-    *   [概况](http://ideabook.phodal.com/#概况-11)
-        *   [背景](http://ideabook.phodal.com/#背景-10)
+*   [基于Backbone的单页面移动应用](http://ideabook.phodal.com/#基于backbone的单页面移动应用)
+    *   [概况](http://ideabook.phodal.com/#概况-12)
+        *   [背景](http://ideabook.phodal.com/#背景-11)
         *   [Showcase](http://ideabook.phodal.com/#showcase-9)
         *   [jQuery + Backbone + UnderScore + Require.JS](http://ideabook.phodal.com/#jquery-backbone-underscore-require.js)
-    *   [步骤](http://ideabook.phodal.com/#步骤-11)
+    *   [步骤](http://ideabook.phodal.com/#步骤-12)
         *   [Step 1: 使用Require.js管理依赖](http://ideabook.phodal.com/#step-1-使用require.js管理依赖)
         *   [Step 2: 添加路由](http://ideabook.phodal.com/#step-2-添加路由)
         *   [Step 3: 创建主页View](http://ideabook.phodal.com/#step-3-创建主页view)
@@ -149,55 +156,54 @@
         *   [Step 7: 重构](http://ideabook.phodal.com/#step-7-重构)
         *   [Step 8: 移动CMS滑动](http://ideabook.phodal.com/#step-8-移动cms滑动)
 *   [Oculus + Node.js + Three.js 打造VR世界](http://ideabook.phodal.com/#oculus-node.js-three.js-打造vr世界)
-    *   [概况](http://ideabook.phodal.com/#概况-12)
-        *   [背景](http://ideabook.phodal.com/#背景-11)
+    *   [概况](http://ideabook.phodal.com/#概况-13)
+        *   [背景](http://ideabook.phodal.com/#背景-12)
         *   [Showcase](http://ideabook.phodal.com/#showcase-10)
         *   [框架： Oculus Rift & Node NMD](http://ideabook.phodal.com/#框架-oculus-rift-node-nmd)
-    *   [步骤](http://ideabook.phodal.com/#步骤-12)
+    *   [步骤](http://ideabook.phodal.com/#步骤-13)
         *   [Step 1: Node Oculus Services](http://ideabook.phodal.com/#step-1-node-oculus-services)
         *   [Step 2: Node.js Oculus Hello，World](http://ideabook.phodal.com/#step-2-node.js-oculus-helloworld)
         *   [Step 3: Node Oculus WebSocket](http://ideabook.phodal.com/#step-3-node-oculus-websocket)
         *   [Step 4: Oculus Effect + DK2 Control](http://ideabook.phodal.com/#step-4-oculus-effect-dk2-control)
         *   [Step 5: Three.js KeyHandler](http://ideabook.phodal.com/#step-5-three.js-keyhandler)
         *   [练习建议](http://ideabook.phodal.com/#练习建议-5)
-*   [制作照片地图](http://ideabook.phodal.com/#制作照片地图)
-    *   [概况](http://ideabook.phodal.com/#概况-13)
+*   [手动制作照片地图](http://ideabook.phodal.com/#手动制作照片地图)
+    *   [概况](http://ideabook.phodal.com/#概况-14)
         *   [Background:把照片放在地图上](http://ideabook.phodal.com/#background把照片放在地图上)
         *   [Showcase](http://ideabook.phodal.com/#showcase-11)
         *   [框架： EXIF & ExifRead & CartoDB](http://ideabook.phodal.com/#框架-exif-exifread-cartodb)
-    *   [步骤](http://ideabook.phodal.com/#步骤-13)
+    *   [步骤](http://ideabook.phodal.com/#步骤-14)
         *   [Step 1: 解析读取照片信息](http://ideabook.phodal.com/#step-1-解析读取照片信息)
         *   [Step 2: 上传数据](http://ideabook.phodal.com/#step-2-上传数据)
         *   [练习建议](http://ideabook.phodal.com/#练习建议-6)
-*   [D3.js 制作技能树](http://ideabook.phodal.com/#d3.js-制作技能树)
-    *   [概况](http://ideabook.phodal.com/#概况-14)
-        *   [背景](http://ideabook.phodal.com/#背景-12)
+*   [D3.js打造技能树](http://ideabook.phodal.com/#d3.js打造技能树)
+    *   [概况](http://ideabook.phodal.com/#概况-15)
+        *   [背景](http://ideabook.phodal.com/#背景-13)
         *   [Showcase](http://ideabook.phodal.com/#showcase-12)
         *   [Graphviz](http://ideabook.phodal.com/#graphviz)
-    *   [步骤](http://ideabook.phodal.com/#步骤-14)
+    *   [步骤](http://ideabook.phodal.com/#步骤-15)
         *   [Step 1: 打造简单的技能树](http://ideabook.phodal.com/#step-1-打造简单的技能树)
         *   [Step 3: D3.js Tooltipster](http://ideabook.phodal.com/#step-3-d3.js-tooltipster)
 *   [技术雷达趋势](http://ideabook.phodal.com/#技术雷达趋势)
-    *   [概况](http://ideabook.phodal.com/#概况-15)
-        *   [背景](http://ideabook.phodal.com/#背景-13)
+    *   [概况](http://ideabook.phodal.com/#概况-16)
+        *   [背景](http://ideabook.phodal.com/#背景-14)
         *   [Showcase](http://ideabook.phodal.com/#showcase-13)
         *   [D3.js](http://ideabook.phodal.com/#d3.js)
-    *   [步骤](http://ideabook.phodal.com/#步骤-15)
+    *   [步骤](http://ideabook.phodal.com/#步骤-16)
         *   [Step 1: Schema与原始代码](http://ideabook.phodal.com/#step-1-schema与原始代码)
         *   [Step 2: 处理数据](http://ideabook.phodal.com/#step-2-处理数据)
-*   [文本转化为Logo](http://ideabook.phodal.com/#文本转化为logo)
-    *   [概况](http://ideabook.phodal.com/#概况-16)
-        *   [背景](http://ideabook.phodal.com/#背景-14)
+*   [文本转Logo](http://ideabook.phodal.com/#文本转logo)
+    *   [概况](http://ideabook.phodal.com/#概况-17)
+        *   [背景](http://ideabook.phodal.com/#背景-15)
         *   [ShowCase](http://ideabook.phodal.com/#showcase-14)
         *   [需求说明](http://ideabook.phodal.com/#需求说明)
-    *   [步骤](http://ideabook.phodal.com/#步骤-16)
+    *   [步骤](http://ideabook.phodal.com/#步骤-17)
         *   [Step 1: Python 文字转Logo实战](http://ideabook.phodal.com/#step-1-python-文字转logo实战)
-*   [GEOJSON与ElasticSearch实现高级图形搜索](http://ideabook.phodal.com/#geojson与elasticsearch实现高级图形搜索)
-    *   [概况](http://ideabook.phodal.com/#概况-17)
-        *   [背景](http://ideabook.phodal.com/#背景-15)
+*   [GeoJSON与ElasticSearch实现高级图形搜索](http://ideabook.phodal.com/#geojson与elasticsearch实现高级图形搜索)
+    *   [概况](http://ideabook.phodal.com/#概况-18)
         *   [Showcase](http://ideabook.phodal.com/#showcase-15)
         *   [jQuery + Mustache + Leaflet](http://ideabook.phodal.com/#jquery-mustache-leaflet)
-    *   [步骤](http://ideabook.phodal.com/#步骤-17)
+    *   [步骤](http://ideabook.phodal.com/#步骤-18)
         *   [Step 1: 离线地图与搜索](http://ideabook.phodal.com/#step-1-离线地图与搜索)
         *   [Step 2: 从地点到地图上显示](http://ideabook.phodal.com/#step-2-从地点到地图上显示)
         *   [Step 3: 从地图到地点上显示](http://ideabook.phodal.com/#step-3-从地图到地点上显示)

api/all.json

@@ -68,6 +68,10 @@
       "title": "文本转Logo",
       "path": "chapters/text2logo.md"
     },
+    {
+      "title": "制作简易Mac OS上的伪锁屏工具",
+      "path": "chapters1/lock.md"
+    },
     {
       "title": "GeoJSON与ElasticSearch实现高级图形搜索",
       "path": "chapters/vmap.md"

chapters/lock.md

@@ -1,7 +1,12 @@
 制作简易Mac OS上的伪锁屏工具
 ===
 
-今天中午在锁屏的时候，想到一件有意思的事。平时我会有两种“锁屏方式”：
+概况
+---
+
+### 背景
+
+某天中午在锁屏的时候，想到一件有意思的事。平时我会有两种“锁屏方式”：
 
  - 传统的锁屏方式：command + alt + 电源，适用于长时间离开。
  - 将屏幕亮度调暗，适用于上个厕所什么的。
@@ -14,7 +19,10 @@
 
 接着，我就开始编写了。
 
-### Mac OS Python截图
+步骤
+---
+
+### Step 1：屏幕截图
 
 在Mac OS上有一个工具``screencapture``，可以用于截取当前屏幕。如：
 
@@ -30,7 +38,7 @@ import os
 os.system("screencapture screen.png")
 ```
 
-### Mac OS Python调节亮度
+### Step 2：调节亮度
 
 在Mac OS上有一个工具叫``brightness``，可以用百分比调节屏幕的亮度，如
 
@@ -46,7 +54,7 @@ brew install brightness
 
 然后用Python的os模块，即可调用 。
 
-### Mac OS Python GTK 全屏图片
+### Step 3：全屏图片
 
 随后，用GTK简单的弄了个全屏图片的脚本，就完成了。
 

ideabook.md

@@ -2472,7 +2472,12 @@ grunt里的任务包含了:
 制作简易Mac OS上的伪锁屏工具
 ===
 
-今天中午在锁屏的时候，想到一件有意思的事。平时我会有两种“锁屏方式”：
+概况
+---
+
+### 背景
+
+某天中午在锁屏的时候，想到一件有意思的事。平时我会有两种“锁屏方式”：
 
  - 传统的锁屏方式：command + alt + 电源，适用于长时间离开。
  - 将屏幕亮度调暗，适用于上个厕所什么的。
@@ -2485,7 +2490,10 @@ grunt里的任务包含了:
 
 接着，我就开始编写了。
 
-### Mac OS Python截图
+步骤
+---
+
+### Step 1：屏幕截图
 
 在Mac OS上有一个工具``screencapture``，可以用于截取当前屏幕。如：
 
@@ -2501,7 +2509,7 @@ import os
 os.system("screencapture screen.png")
 ```
 
-### Mac OS Python调节亮度
+### Step 2：调节亮度
 
 在Mac OS上有一个工具叫``brightness``，可以用百分比调节屏幕的亮度，如
 
@@ -2517,7 +2525,7 @@ brew install brightness
 
 然后用Python的os模块，即可调用 。
 
-### Mac OS Python GTK 全屏图片
+### Step 3：全屏图片
 
 随后，用GTK简单的弄了个全屏图片的脚本，就完成了。
 

index.html

@@ -211,28 +211,33 @@ code > span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Inf
 </ul></li>
 </ul></li>
 <li><a href="#制作简易mac-os上的伪锁屏工具">制作简易Mac OS上的伪锁屏工具</a><ul>
-<li><a href="#mac-os-python截图">Mac OS Python截图</a></li>
-<li><a href="#mac-os-python调节亮度">Mac OS Python调节亮度</a></li>
-<li><a href="#mac-os-python-gtk-全屏图片">Mac OS Python GTK 全屏图片</a></li>
-</ul></li>
-<li><a href="#基于virtual-dom的测试代码生成">基于Virtual DOM的测试代码生成</a><ul>
 <li><a href="#概况-10">概况</a><ul>
 <li><a href="#背景-9">背景</a></li>
+</ul></li>
+<li><a href="#步骤-10">步骤</a><ul>
+<li><a href="#step-1屏幕截图">Step 1：屏幕截图</a></li>
+<li><a href="#step-2调节亮度">Step 2：调节亮度</a></li>
+<li><a href="#step-3全屏图片">Step 3：全屏图片</a></li>
+</ul></li>
+</ul></li>
+<li><a href="#基于virtual-dom的测试代码生成">基于Virtual DOM的测试代码生成</a><ul>
+<li><a href="#概况-11">概况</a><ul>
+<li><a href="#背景-10">背景</a></li>
 <li><a href="#showcase-8">ShowCase</a></li>
 <li><a href="#基本原理">基本原理</a></li>
 </ul></li>
-<li><a href="#步骤-10">步骤</a><ul>
+<li><a href="#步骤-11">步骤</a><ul>
 <li><a href="#step-1-virtual-dom与hyperscript">Step 1: Virtual-dom与HyperScript</a></li>
 <li><a href="#step-2-标记dom变化">Step 2: 标记DOM变化</a></li>
 </ul></li>
 </ul></li>
 <li><a href="#基于backbone的单页面移动应用">基于Backbone的单页面移动应用</a><ul>
-<li><a href="#概况-11">概况</a><ul>
-<li><a href="#背景-10">背景</a></li>
+<li><a href="#概况-12">概况</a><ul>
+<li><a href="#背景-11">背景</a></li>
 <li><a href="#showcase-9">Showcase</a></li>
 <li><a href="#jquery-backbone-underscore-require.js">jQuery + Backbone + UnderScore + Require.JS</a></li>
 </ul></li>
-<li><a href="#步骤-11">步骤</a><ul>
+<li><a href="#步骤-12">步骤</a><ul>
 <li><a href="#step-1-使用require.js管理依赖">Step 1: 使用Require.js管理依赖</a></li>
 <li><a href="#step-2-添加路由">Step 2: 添加路由</a></li>
 <li><a href="#step-3-创建主页view">Step 3: 创建主页View</a></li>
@@ -245,12 +250,12 @@ code > span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Inf
 </ul></li>
 </ul></li>
 <li><a href="#oculus-node.js-three.js-打造vr世界">Oculus + Node.js + Three.js 打造VR世界</a><ul>
-<li><a href="#概况-12">概况</a><ul>
-<li><a href="#背景-11">背景</a></li>
+<li><a href="#概况-13">概况</a><ul>
+<li><a href="#背景-12">背景</a></li>
 <li><a href="#showcase-10">Showcase</a></li>
 <li><a href="#框架-oculus-rift-node-nmd">框架： Oculus Rift &amp; Node NMD</a></li>
 </ul></li>
-<li><a href="#步骤-12">步骤</a><ul>
+<li><a href="#步骤-13">步骤</a><ul>
 <li><a href="#step-1-node-oculus-services">Step 1: Node Oculus Services</a></li>
 <li><a href="#step-2-node.js-oculus-helloworld">Step 2: Node.js Oculus Hello，World</a></li>
 <li><a href="#step-3-node-oculus-websocket">Step 3: Node Oculus WebSocket</a></li>
@@ -260,55 +265,55 @@ code > span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Inf
 </ul></li>
 </ul></li>
 <li><a href="#手动制作照片地图">手动制作照片地图</a><ul>
-<li><a href="#概况-13">概况</a><ul>
+<li><a href="#概况-14">概况</a><ul>
 <li><a href="#background把照片放在地图上">Background:把照片放在地图上</a></li>
 <li><a href="#showcase-11">Showcase</a></li>
 <li><a href="#框架-exif-exifread-cartodb">框架： EXIF &amp; ExifRead &amp; CartoDB</a></li>
 </ul></li>
-<li><a href="#步骤-13">步骤</a><ul>
+<li><a href="#步骤-14">步骤</a><ul>
 <li><a href="#step-1-解析读取照片信息">Step 1: 解析读取照片信息</a></li>
 <li><a href="#step-2-上传数据">Step 2: 上传数据</a></li>
 <li><a href="#练习建议-6">练习建议</a></li>
 </ul></li>
 </ul></li>
 <li><a href="#d3.js打造技能树">D3.js打造技能树</a><ul>
-<li><a href="#概况-14">概况</a><ul>
-<li><a href="#背景-12">背景</a></li>
+<li><a href="#概况-15">概况</a><ul>
+<li><a href="#背景-13">背景</a></li>
 <li><a href="#showcase-12">Showcase</a></li>
 <li><a href="#graphviz">Graphviz</a></li>
 </ul></li>
-<li><a href="#步骤-14">步骤</a><ul>
+<li><a href="#步骤-15">步骤</a><ul>
 <li><a href="#step-1-打造简单的技能树">Step 1: 打造简单的技能树</a></li>
 <li><a href="#step-3-d3.js-tooltipster">Step 3: D3.js Tooltipster</a></li>
 </ul></li>
 </ul></li>
 <li><a href="#技术雷达趋势">技术雷达趋势</a><ul>
-<li><a href="#概况-15">概况</a><ul>
-<li><a href="#背景-13">背景</a></li>
+<li><a href="#概况-16">概况</a><ul>
+<li><a href="#背景-14">背景</a></li>
 <li><a href="#showcase-13">Showcase</a></li>
 <li><a href="#d3.js">D3.js</a></li>
 </ul></li>
-<li><a href="#步骤-15">步骤</a><ul>
+<li><a href="#步骤-16">步骤</a><ul>
 <li><a href="#step-1-schema与原始代码">Step 1: Schema与原始代码</a></li>
 <li><a href="#step-2-处理数据">Step 2: 处理数据</a></li>
 </ul></li>
 </ul></li>
 <li><a href="#文本转logo">文本转Logo</a><ul>
-<li><a href="#概况-16">概况</a><ul>
-<li><a href="#背景-14">背景</a></li>
+<li><a href="#概况-17">概况</a><ul>
+<li><a href="#背景-15">背景</a></li>
 <li><a href="#showcase-14">ShowCase</a></li>
 <li><a href="#需求说明">需求说明</a></li>
 </ul></li>
-<li><a href="#步骤-16">步骤</a><ul>
+<li><a href="#步骤-17">步骤</a><ul>
 <li><a href="#step-1-python-文字转logo实战">Step 1: Python 文字转Logo实战</a></li>
 </ul></li>
 </ul></li>
 <li><a href="#geojson与elasticsearch实现高级图形搜索">GeoJSON与ElasticSearch实现高级图形搜索</a><ul>
-<li><a href="#概况-17">概况</a><ul>
+<li><a href="#概况-18">概况</a><ul>
 <li><a href="#showcase-15">Showcase</a></li>
 <li><a href="#jquery-mustache-leaflet">jQuery + Mustache + Leaflet</a></li>
 </ul></li>
-<li><a href="#步骤-17">步骤</a><ul>
+<li><a href="#步骤-18">步骤</a><ul>
 <li><a href="#step-1-离线地图与搜索">Step 1: 离线地图与搜索</a></li>
 <li><a href="#step-2-从地点到地图上显示">Step 2: 从地点到地图上显示</a></li>
 <li><a href="#step-3-从地图到地点上显示">Step 3: 从地图到地点上显示</a></li>
@@ -2145,7 +2150,9 @@ root.Lettuce = Lettuce;
 <h3 id="step-5-测试">Step 5: 测试</h3>
 <h3 id="练习建议-4">练习建议</h3>
 <h1 id="制作简易mac-os上的伪锁屏工具">制作简易Mac OS上的伪锁屏工具</h1>
-<p>今天中午在锁屏的时候，想到一件有意思的事。平时我会有两种“锁屏方式”：</p>
+<h2 id="概况-10">概况</h2>
+<h3 id="背景-9">背景</h3>
+<p>某天中午在锁屏的时候，想到一件有意思的事。平时我会有两种“锁屏方式”：</p>
 <ul>
 <li>传统的锁屏方式：command + alt + 电源，适用于长时间离开。</li>
 <li>将屏幕亮度调暗，适用于上个厕所什么的。</li>
@@ -2157,20 +2164,21 @@ root.Lettuce = Lettuce;
 <li>降低屏幕亮度</li>
 </ol>
 <p>接着，我就开始编写了。</p>
-<h3 id="mac-os-python截图">Mac OS Python截图</h3>
+<h2 id="步骤-10">步骤</h2>
+<h3 id="step-1屏幕截图">Step 1：屏幕截图</h3>
 <p>在Mac OS上有一个工具<code>screencapture</code>，可以用于截取当前屏幕。如：</p>
 <pre><code>screencapture screen.png</code></pre>
 <p>将图片存储为screen.png，我们只需要调用Python调用系统的命令，即可：</p>
 <div class="sourceCode"><pre class="sourceCode bash"><code class="sourceCode bash"><span class="kw">import</span> os
 
 <span class="kw">os.system</span>(<span class="st">&quot;screencapture screen.png&quot;</span>)</code></pre></div>
-<h3 id="mac-os-python调节亮度">Mac OS Python调节亮度</h3>
+<h3 id="step-2调节亮度">Step 2：调节亮度</h3>
 <p>在Mac OS上有一个工具叫<code>brightness</code>，可以用百分比调节屏幕的亮度，如</p>
 <div class="sourceCode"><pre class="sourceCode bash"><code class="sourceCode bash"><span class="kw">brightness</span> 0</code></pre></div>
 <p>可以将屏幕的亮度调到0，即最低。所以，先安装这个工具：</p>
 <div class="sourceCode"><pre class="sourceCode bash"><code class="sourceCode bash"><span class="kw">brew</span> install brightness</code></pre></div>
 <p>然后用Python的os模块，即可调用 。</p>
-<h3 id="mac-os-python-gtk-全屏图片">Mac OS Python GTK 全屏图片</h3>
+<h3 id="step-3全屏图片">Step 3：全屏图片</h3>
 <p>随后，用GTK简单的弄了个全屏图片的脚本，就完成了。</p>
 <div class="sourceCode"><pre class="sourceCode python"><code class="sourceCode python">
 <span class="im">import</span> os
@@ -2202,8 +2210,8 @@ gtk.main()</code></pre></div>
     <span class="kw">python</span> <span class="st">&quot;/Users/fdhuang/learing/mock-screen/main.py&quot;</span> 
 <span class="kw">}</span></code></pre></div>
 <h1 id="基于virtual-dom的测试代码生成">基于Virtual DOM的测试代码生成</h1>
-<h2 id="概况-10">概况</h2>
-<h3 id="背景-9">背景</h3>
+<h2 id="概况-11">概况</h2>
+<h3 id="背景-10">背景</h3>
 <p>当我们在写一些UI测试的时候，我们总需要到浏览器去看一下一些DOM的变化。比如，我们点击了某个下拉菜单，会有另外一个联动的下拉菜单发生了变化。而如果这个事件更复杂的时候，有时我们可能就很难观察出来他们之间的变化。</p>
 <h3 id="showcase-8">ShowCase</h3>
 <figure>
@@ -2227,7 +2235,7 @@ gtk.main()</code></pre></div>
 <span class="op">}</span>)<span class="op">;</span></code></pre></div>
 <p>在beforeEach的时候，我们设定了固定的DOM进去，按照用户的行为做一些相应的操作。接着依据这个DOM中的元素变化 ，来作一些断言。</p>
 <p>那么，即使我们已经有一个固定的DOM，想要监听这个DOM的变化就是一件容易的事。在我们断言之前，我们就会有一个新的DOM。我们只需要Diff一下这两个DOM的变化，就可以生成这部分测试代码。</p>
-<h2 id="步骤-10">步骤</h2>
+<h2 id="步骤-11">步骤</h2>
 <h3 id="step-1-virtual-dom与hyperscript">Step 1: Virtual-dom与HyperScript</h3>
 <p>在寻觅中发现了<a href="https://github.com/Matt-Esch/virtual-dom">virtual-dom</a>这个库，一个可以支持创建元素、diff计算以及patch操作的库，并且它效率好像还不错。</p>
 <p>virtual-dom可以说由下面几部分组成的：</p>
@@ -2355,8 +2363,8 @@ gtk.main()</code></pre></div>
 <p>用Chrome的console来标记修改的部分，及添加的部分。</p>
 <p>最后，我们似乎就可以生成相应的测试代码了。。。</p>
 <h1 id="基于backbone的单页面移动应用">基于Backbone的单页面移动应用</h1>
-<h2 id="概况-11">概况</h2>
-<h3 id="背景-10">背景</h3>
+<h2 id="概况-12">概况</h2>
+<h3 id="背景-11">背景</h3>
 <p>看到项目上的移动框架，网上寻找了一下，发现原来这些一开始都有。于是，找了个示例开始构建一个移动平台的CMS——<a href="http://cms.moqi.mobi">墨颀 CMS</a>，方便项目深入理解的同时，也可以自己维护一个CMS系统。</p>
 <h3 id="showcase-9">Showcase</h3>
 <p>GitHub: <a href="http://github.com/phodal/moqi.mobi" class="uri">http://github.com/phodal/moqi.mobi</a></p>
@@ -2391,7 +2399,7 @@ gtk.main()</code></pre></div>
 <p><strong>源码</strong></p>
 <p>代码依然是放在Github上，基本功能已经可以Works了。</p>
 <p><a href="https://github.com/gmszone/moqi.mobi" class="uri">https://github.com/gmszone/moqi.mobi</a></p>
-<h2 id="步骤-11">步骤</h2>
+<h2 id="步骤-12">步骤</h2>
 <h3 id="step-1-使用require.js管理依赖">Step 1: 使用Require.js管理依赖</h3>
 <p><strong>库及依赖</strong></p>
 <p>这里用的是bower的JS来下载库，详细可以参考一下<a href="http://www.phodal.com/blog/use-bower-to-install-js-plugins/">bower install js使用bower管理js</a> 这篇文章。</p>
@@ -3176,8 +3184,8 @@ require([&#39;../app&#39;], function(App){
 <li>当用户向左滑动的时候，菜单应该关闭</li>
 </ul>
 <h1 id="oculus-node.js-three.js-打造vr世界">Oculus + Node.js + Three.js 打造VR世界</h1>
-<h2 id="概况-12">概况</h2>
-<h3 id="背景-11">背景</h3>
+<h2 id="概况-13">概况</h2>
+<h3 id="背景-12">背景</h3>
 <p>在尝试一个晚上的开发环境搭建后，我放弃了开发原生应用的想法。一是没有属于自己的电脑（如果Raspberry Pi II不算的话）——没有Windows、没有GNU/Linux，二是公司配的电脑是Mac OS。对于嵌入式开发和游戏开发来说，Mac OS简直是手机中的Windows Phone——坑爹的LLVM、GCC(Mac OS )、OpenGL、OGLPlus、C++11。并且官方对Mac OS和Linux的SDK的支持已经落后了好几个世纪。</p>
 <p>说到底，还是Web的开发环境到底还是比较容易搭建的。</p>
 <h3 id="showcase-10">Showcase</h3>
@@ -3198,7 +3206,7 @@ require([&#39;../app&#39;], function(App){
 <blockquote>
 <p>Oculus Rift 是一款为电子游戏设计的头戴式显示器。这是一款虚拟现实设备。这款设备很可能改变未来人们游戏的方式。</p>
 </blockquote>
-<h2 id="步骤-12">步骤</h2>
+<h2 id="步骤-13">步骤</h2>
 <p>现在，让我们开始构建吧。</p>
 <h3 id="step-1-node-oculus-services">Step 1: Node Oculus Services</h3>
 <p>这里，我们所要做的事情便是将传感器返回来的四元数(Quaternions)与欧拉角(Euler angles)以API的形式返回到前端。</p>
@@ -3567,7 +3575,7 @@ yaw = (rotation about (Pitch • Raw • Z));”</code></pre>
 <p>快接上你的HMD试试吧~~</p>
 <h3 id="练习建议-5">练习建议</h3>
 <h1 id="手动制作照片地图">手动制作照片地图</h1>
-<h2 id="概况-13">概况</h2>
+<h2 id="概况-14">概况</h2>
 <h3 id="background把照片放在地图上">Background:把照片放在地图上</h3>
 <p>我使用的Nokia Lumia 920没有一个好的照片应用,而我当时也没有钱换一个新手机</p>
 <h3 id="showcase-11">Showcase</h3>
@@ -3594,7 +3602,7 @@ yaw = (rotation about (Pitch • Raw • Z));”</code></pre>
 <blockquote>
 <p>Create dynamic maps, analyze and build location aware and geospatial applications with your data using the power using the power of PostGIS in the cloud.</p>
 </blockquote>
-<h2 id="步骤-13">步骤</h2>
+<h2 id="步骤-14">步骤</h2>
 <h3 id="step-1-解析读取照片信息">Step 1: 解析读取照片信息</h3>
 <p>简单的来说，就是我们可以创建包含位置信息的内容到上面去。</p>
 <p>主要步骤如下：</p>
@@ -3697,8 +3705,8 @@ jsonFile.close()</code></pre></div>
 <h3 id="练习建议-6">练习建议</h3>
 <p>无</p>
 <h1 id="d3.js打造技能树">D3.js打造技能树</h1>
-<h2 id="概况-14">概况</h2>
-<h3 id="背景-12">背景</h3>
+<h2 id="概况-15">概况</h2>
+<h3 id="背景-13">背景</h3>
 <p>在开始设计新的技能树——<a href="https://github.com/phodal/sherlock">Sherlock</a>的同时，结合一下原有的技能树，说说如何去设计，新的技能树还很丑。</p>
 <h3 id="showcase-12">Showcase</h3>
 <p>代码见： <a href="https://github.com/phodal/sherlock" class="uri">https://github.com/phodal/sherlock</a></p>
@@ -3722,7 +3730,7 @@ jsonFile.close()</code></pre></div>
 <img src="http://ideabook.phodal.com/images/lz.jpg" alt="lz" /><figcaption>lz</figcaption>
 </figure>
 <p>接着我们便可以建立一个简单的模型来构建我们的技能树。</p>
-<h2 id="步骤-14">步骤</h2>
+<h2 id="步骤-15">步骤</h2>
 <h3 id="step-1-打造简单的技能树">Step 1: 打造简单的技能树</h3>
 <p>先以JavaScript全栈作一个简单的示例，他们可能存在下面的依赖关系:</p>
 <ul>
@@ -3811,8 +3819,8 @@ jsonFile.close()</code></pre></div>
     <span class="at">$</span>(<span class="kw">this</span>).<span class="at">find</span>(<span class="st">&#39;rect&#39;</span>).<span class="at">css</span>(<span class="st">&#39;fill&#39;</span><span class="op">,</span> <span class="st">&#39;#ecf0f1&#39;</span>)<span class="op">;</span>
   <span class="op">}</span>)<span class="op">;</span></code></pre></div>
 <h1 id="技术雷达趋势">技术雷达趋势</h1>
-<h2 id="概况-15">概况</h2>
-<h3 id="背景-13">背景</h3>
+<h2 id="概况-16">概况</h2>
+<h3 id="背景-14">背景</h3>
 <p>出于一些原因，我需要构建一个项目组相关的技术趋势图。首先也是想到了<a href="https://www.thoughtworks.com/cn/radar">ThoughtWorks 技术雷达</a>，然而我也发现了技术雷达只会发现一些新出现的技术，以及其对应的一些趋势。对于现有的技术栈的一些趋势不够明显，接着就只能去构建一个新的技术趋势图。</p>
 <p>当然首选的框架也是D3.js，似乎会一些更好的工具，但是并不没有去尝试。</p>
 <h3 id="showcase-13">Showcase</h3>
@@ -3822,7 +3830,7 @@ jsonFile.close()</code></pre></div>
 <img src="http://ideabook.phodal.com/images/tech-stack.jpg" alt="Screenshot" /><figcaption>Screenshot</figcaption>
 </figure>
 <h3 id="d3.js">D3.js</h3>
-<h2 id="步骤-15">步骤</h2>
+<h2 id="步骤-16">步骤</h2>
 <h3 id="step-1-schema与原始代码">Step 1: Schema与原始代码</h3>
 <p>最开始的代码是基于<a href="https://github.com/simonellistonball/techradar" class="uri">https://github.com/simonellistonball/techradar</a>这个库的，但是这其中的数据都是写好的。而在找到这个库之前，我也定义好了我的数据应该有的样子：</p>
 <div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="op">{</span>
@@ -3893,8 +3901,8 @@ jsonFile.close()</code></pre></div>
   <span class="op">}</span>)
 <span class="op">}</span></code></pre></div>
 <h1 id="文本转logo">文本转Logo</h1>
-<h2 id="概况-16">概况</h2>
-<h3 id="背景-14">背景</h3>
+<h2 id="概况-17">概况</h2>
+<h3 id="背景-15">背景</h3>
 <p>在设计技能树的时候需要做一些简单的Logo，方便我们来识别，这时候就想到了PIL。加上一些简单的圆角，以及特殊的字体，就可以构成一个简单的Logo。做成的图标看上去还不错:</p>
 <h3 id="showcase-14">ShowCase</h3>
 <p><img src="http://ideabook.phodal.com/images/node.png" alt="Node" /> <img src="http://ideabook.phodal.com/images/refactor.png" alt="Refactor" /> <img src="http://ideabook.phodal.com/images/tdd.png" alt="TDD" /> <img src="http://ideabook.phodal.com/images/clean_code.png" alt="Clean Code" /></p>
@@ -3905,7 +3913,7 @@ jsonFile.close()</code></pre></div>
 <li>圆角</li>
 <li>色彩(自动)</li>
 </ul>
-<h2 id="步骤-16">步骤</h2>
+<h2 id="步骤-17">步骤</h2>
 <h3 id="step-1-python-文字转logo实战">Step 1: Python 文字转Logo实战</h3>
 <p>一个简单的PIL生成图片的代码:</p>
 <div class="sourceCode"><pre class="sourceCode python"><code class="sourceCode python"><span class="co"># -*- coding: utf-8 -*-</span>
@@ -3958,7 +3966,7 @@ font_colors <span class="op">=</span> []
 colors_length <span class="op">=</span> ConfigColor.items(<span class="st">&#39;Color&#39;</span>).<span class="fu">__len__</span>()</code></pre></div>
 <p>最后我们就可以得到我们想要的图片了~~</p>
 <h1 id="geojson与elasticsearch实现高级图形搜索">GeoJSON与ElasticSearch实现高级图形搜索</h1>
-<h2 id="概况-17">概况</h2>
+<h2 id="概况-18">概况</h2>
 <h3 id="showcase-15">Showcase</h3>
 <p>在线Demo见： <a href="http://vmap.phodal.com/" class="uri">http://vmap.phodal.com/</a></p>
 <p>或者你已经使用过了相应多的省市区与地图联动，但是这些联动往往是单向的、不可逆。并且这些数据往往都是在线使用的，不能离线使用。下图是一个结合百度地图的省市区与地图联动：</p>
@@ -3978,7 +3986,7 @@ colors_length <span class="op">=</span> ConfigColor.items(<span class="st">&#39;
 <li>Mustache，模板生成。</li>
 <li>Leaflet，交互地图库。</li>
 </ul>
-<h2 id="步骤-17">步骤</h2>
+<h2 id="步骤-18">步骤</h2>
 <h3 id="step-1-离线地图与搜索">Step 1: 离线地图与搜索</h3>
 <p>在GitHub上搜索数据的过程中，发现了一个名为<a href="https://github.com/ufoe/d3js-geojson">d3js-geojson</a>的项目里面放着中国详细省、市、县数据，并且还有及GeoJSON文件。</p>
 <p>这就意味着两件事：</p>