固定大小的工作區

將 Blockly 插入網頁最簡單的方法，就是將 Blockly 插入空白的 div 標記中。

1. 取得程式碼

取得程式碼，方法可以是應用程式最適合的任何方式。

2. 定義區域

在頁面主體的某處新增一個空白 div，並設定其大小：

<div id="blocklyDiv" style="height: 480px; width: 600px;"></div>

3. 插入工作區

定義工具箱結構：

const toolbox = {
  "kind": "flyoutToolbox",
  "contents": [
    {
      "kind": "block",
      "type": "controls_if"
    },
    {
      "kind": "block",
      "type": "controls_repeat_ext"
    },
    {
      "kind": "block",
      "type": "logic_compare"
    },
    {
      "kind": "block",
      "type": "math_number"
    },
    {
      "kind": "block",
      "type": "math_arithmetic"
    },
    {
      "kind": "block",
      "type": "text"
    },
    {
      "kind": "block",
      "type": "text_print"
    },
  ]
}

最後，請呼叫以下內容，將 Blockly 插入您定義的 div。

const workspace = Blockly.inject('blocklyDiv', {toolbox: toolbox});

目前未使用 workspace 變數，但如果您想儲存區塊或產生程式碼，這個變數就會變得重要。如果同一個網頁中插入多個 Blockly 例項，請確認每個傳回的工作區都儲存在不同的變數中。

您現在可以在瀏覽器中測試頁面。您應該會看到 Blockly 的編輯器填滿 div，工具箱中只有七個區塊。以下是實況示範。