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"
},
]
}
और आखिर में, अपने तय किए गए div में Blockly इंजेक्ट करने के लिए, इन्हें कॉल करें.
const workspace = Blockly.inject('blocklyDiv', {toolbox: toolbox});
फ़िलहाल, workspace
वैरिएबल का इस्तेमाल नहीं किया गया है. हालांकि, जब कोई व्यक्ति ब्लॉक को सेव करना चाहेगा या कोड जनरेट करना चाहे, तो यह वैरिएबल अहम हो जाएगा.
अगर एक ही पेज पर Blockly के एक से ज़्यादा इंस्टेंस इंजेक्ट किए गए हैं, तो पक्का करें कि
वे फ़ाइल फ़ोल्डर एक अलग वैरिएबल में स्टोर किए गए हों.
अब ब्राउज़र में पेज की जांच की जा सकती है. आपको दिखेगा कि Blockly का एडिटर, डिव को भरता है, जिसमें टूलबॉक्स में सात ब्लॉक होंगे. यह रहा एक लाइव डेमो.