Simple Blockly
通過刪除文件桶唐，大家發(fā)現其實blockly-master文件中很多文件并不是必不可少的黔龟，通過Simple Blockly案例，梳理Blockly的文件目錄到踏，實現精簡版的Blockly援奢。
1. 準備工作
（1）HTML知識準備
最小的HTML文檔：
<!DOCTYPE> //定義文檔的類型
<html> //定義一個 HTML 文檔
<head> //定義關于文檔的信息
<meta charset="utf-8"> //對于中文網頁，聲明編碼脐湾，否則會出現亂碼
<title>文檔標題</title> //定義文檔的標題
</head>
<body> //定義文檔的主體
文檔內容......
</body>
</html>
除了上述最小HTML文檔中包含的內容闻鉴，我們會用到還有：
Script標簽，定義客戶端腳本
<script src="helloworld.js"></script>
Link標簽茂洒，鏈接樣式表
<link rel="stylesheet" type="text/css" href="theme.css">
根據上述內容孟岛，完成下面的小案例，要求：
- 在最小HTML文檔的基礎上督勺，顯示HelloWorld渠羞；
- 通過內部js腳本控制彈框輸出HelloWorld；
- 通過外部js腳本控制彈框輸出HelloWorld智哀；
/**示例代碼**/
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8">
<title>HelloWorld</title>
<!--<script>
alert("Hello World!");
</script>-->
<script src="alert_helloworld.js"></script>
</head>
<body>
Hello World!
</body>
</html>
（2）blockly-master文件準備
2. 動手實踐
（1）新建文件目錄
新建一個文件夾堵未，重命名為SimpleBlockly，并在文件夾中新建css盏触，js兩個子文件夾，將blockly-master/Demos/Code中的index.html復制到SimpleBlockly根目錄下，如下圖：
（2）導入赞辩、調整文件
使用notepad++打開index.html文件雌芽，修改head部分的內容，并將head部分的涉及的內容辨嗽，從blockly-master中復制添加到SimpleBlockly中的css和js文件夾中世落。
- 將title修改為Simple Blockly；
- 將blockly-master/demos/code文件中的style.css文件移至css文件夾中糟需，并將href引號中對應的字符串改為"css/style.css"屉佳；
- storage.js直接刪除即可，它和Google的Clound Storage有關洲押，案例中用不會涉及這部分功能武花；
- 將blockly-mater文件中的blockly_compressed.js文件移至js文件夾中，并將src引號中對應的字符串改為"js/blockly_compressed.js";
- 將blockly-mater文件中的blockls_compressed.js文件移至js文件夾中杈帐，并將src引號中對應的字符串改為"js/blockls_compressed.js";
- 將blockly-mater文件中的javascript_compressed.js文件移至js文件夾中体箕，并將src引號中對應的字符串改為"js/javascript_compressed.js";
- 將blockly-mater文件中的python_compressed.js文件移至js文件夾中，并將src引號中對應的字符串改為"js/python_compressed.js";
- 將blockly-mater文件中的php_compressed.js文件移至js文件夾中挑童，并將src引號中對應的字符串改為"js/php_compressed.js";
- 將blockly-mater文件中的lua_compressed.js文件移至js文件夾中累铅，并將src引號中對應的字符串改為"js/lua_compressed.js";
- 將blockly-mater文件中的dart_compressed.js文件移至js文件夾中，并將src引號中對應的字符串改為"js/dart_compressed.js";
- 將blockly-master/demos/code文件中的code.js文件移至js文件夾中站叼，并將src引號中對應的字符串改為"js/code.js";
此步的目的是將Blockly相關文件的位置進行調整娃兽，并且修改html部分代碼，讓其能指向對應文件尽楔；找文件的一個技巧：".."代表返回父文件目錄投储，文件前沒有內容的話，就表明和html文件在同一文件夾下翔试。
上述操作完成之后轻要，保存html文件，并在瀏覽器中打開：
如上圖垦缅，比較直觀的可以看出Toolbox并未顯示出來冲泥。文件明明已經導入并調整好了，為什么還會出現這種情況壁涎？我們可以借助Chrome瀏覽器的“檢查”功能凡恍，查看出現問題的原因：
在上圖中，發(fā)現有幾個錯誤怔球，仔細看這些錯誤嚼酝，發(fā)現除了media文件相關的錯誤之外，出現頻率較高的就是msg相關的錯誤竟坛。
對比之前的“刪除文件”案例闽巩，在刪除media或msg文件夾之后的現象钧舌。
msg文件這么重要嗎？它有什么功能涎跨？
對于msg文件洼冻，可分為2部分，一部分blocks的msg文件隅很，負責blocks語言的轉換撞牢；一部分是category的msg文件，負責category語言的轉換叔营；
如何解決這種情況屋彪？
a. 方案
分別導入blocks和category的en.js文件；（可分別添加绒尊，然后刷新兩個文件對界面的影響）畜挥；界面轉換成中文（兩個zh-hans.js文件導入）。
b.方案
通過a.方案可以實現基本功能垒酬，達到預期的效果砰嘁，不過語言轉換功能就失效了；如果需要完整的功能勘究，就要通過code.js文件修改矮湘，直接進行調整msg文件指向的路徑；
/**在修改code之前口糕，需要了解一個基礎知識**/
document.write("test");
/**可以在demo2-1中進行測試缅阳，不過要區(qū)分與code.js中代碼的細微區(qū)別**/
先將根目錄下的msg文件和code目錄下的msg文件，分別拷貝到SimpleBlockly/msg文件中景描，為方便區(qū)分十办，分別重命名為blocks-msg和category-msg，然后修改code.js中的代碼指向這些文件超棺。刷新網頁向族，即可正常工作。
// Load the Code demo's language strings.
document.write('<script src="msg/category-msg/' + Code.LANG + '.js"></script>\n');
// Load Blockly's language strings.
document.write('<script src="msg/blocks-msg/' + Code.LANG + '.js"></script>\n');
（3）媒體文件的導入
通過查看Chrome的Console棠绘，發(fā)現media文件缺失件相，導致界面有裂圖。所以將media文件拷貝到SimpleBlockly文件的目錄中氧苍，然后修改html和code.js文件中的media對應路徑即可夜矗。
code.js文件中的media文件對應第420行
至此，Simple Blockly就大功告成了让虐！
