ธีม

ธีมคือวิธีปรับแต่งรูปลักษณ์ของ Blockly คุณสามารถปรับแต่งบล็อกสี สีของหมวดหมู่ และคอมโพเนนต์บางอย่างผ่านคลาส Themes หากต้องการปรับแต่งคอมโพเนนต์เพิ่มเติม เราตั้งชื่อธีมเป็นคลาสใน div การแทรก ซึ่งจะช่วยให้ผู้ใช้เปลี่ยนรูปลักษณ์ของคอมโพเนนต์ที่ไม่รองรับผ่าน CSS ได้ เป้าหมายหลักของเราในการสร้างธีมคือการส่งเสริมให้นักพัฒนาซอฟต์แวร์สร้างประสบการณ์ Blockly ที่เข้าถึงได้ง่ายมากขึ้น

คุณสมบัติของธีม

ธีมเป็นวัตถุที่มีพร็อพเพอร์ตี้หลายรายการ ได้แก่ ธีมพื้นฐานเพื่อขยายออก วัตถุรูปแบบสำหรับบล็อก หมวดหมู่ คอมโพเนนต์ และแบบอักษร และพิจารณาว่าจะใช้หมวกสำหรับการเริ่มต้นบล็อกหรือไม่

รูปแบบบล็อก

รูปแบบบล็อกประกอบด้วย 4 ช่อง ดังนี้

  • colourPrimary (ต้องระบุ) - สีพื้นหลังของบล็อก
  • colourSecondary (ไม่บังคับ) - สีพื้นหลังหากบล็อกเป็นบล็อกเงา
  • colourTertiary (ไม่บังคับ) - เส้นขอบหรือสีไฮไลต์ของบล็อก
  • hat (ไม่บังคับ) - เพิ่มหมวกให้กับบล็อก หากตั้งค่าเป็น cap ดูข้อมูลเพิ่มเติมเกี่ยวกับหมวก

บล็อกที่มีลูกศรชี้ไปยังสีหลัก สีรอง และสีตติยภูมิ

const listBlocks = {
   'colourPrimary': '#4a148c',
   'colourSecondary':'#AD7BE9',
   'colourTertiary':'#CDB6E9',
   'hat': 'cap'
}

ธีมจะมีการแมปชื่อรูปแบบบล็อกเพื่อบล็อกออบเจ็กต์รูปแบบ ดังนี้

const blockStyles = {
   'list_blocks': {
      'colourPrimary': '#4a148c',
      'colourSecondary':'#AD7BE9',
      'colourTertiary':'#CDB6E9'
   },
   'logic_blocks': {
      'colourPrimary': '#01579b',
      'colourSecondary':'#64C7FF',
      'colourTertiary':'#C5EAFF'
   }
}

รูปแบบหมวดหมู่

รูปแบบหมวดหมู่มีพร็อพเพอร์ตี้สีเท่านั้น

  • สี (จำเป็น) - สีของหมวดหมู่ในกล่องเครื่องมือ โดยปกติแล้ว สีเหล่านี้ควรเป็นสีเดียวกับ colourPrimary ของบล็อกส่วนใหญ่ในหมวดหมู่ วิธีนี้ช่วยให้ผู้ใช้บอกได้ง่ายว่าการบล็อกใดอยู่ในหมวดหมู่ใดหมวดหมู่หนึ่ง

ภาพหน้าจอของกล่องเครื่องมือที่มีสีต่างๆ ของหมวดหมู่

const mathCategory = {
   'colour':'290'
}

ธีมจะมีการจับคู่ชื่อหมวดหมู่กับออบเจ็กต์รูปแบบหมวดหมู่ ดังนี้

const categoryStyles = {
   'list_category': {
      'colour': '#4a148c'
   },
   'logic_category': {
      'colour': '#01579b',
   }
}

รูปแบบคอมโพเนนต์

ธีมสามารถกำหนดสีหรือค่าของคอมโพเนนต์ต่อไปนี้

  • workspaceBackgroundColour: สีพื้นหลังของพื้นที่ทำงาน
  • toolboxBackgroundColour: สีพื้นหลังของกล่องเครื่องมือ
  • toolboxForegroundColour: สีข้อความหมวดหมู่กล่องเครื่องมือ
  • flyoutBackgroundColour: สีพื้นหลัง Flyout
  • flyoutForegroundColour: สีข้อความของป้ายกำกับแบบ Flyout
  • flyoutOpacity: ความทึบแสงแบบ Flyout
  • scrollbarColour: สีของแถบเลื่อน
  • scrollbarOpacity: ความทึบแสงของแถบเลื่อน
  • insertionMarkerColour: สีของตัวทำเครื่องหมายการแทรก (ไม่ยอมรับชื่อสี)
  • insertionMarkerOpacity: ความทึบแสงของเครื่องหมายการแทรก
  • markerColour: สีของเครื่องหมายที่แสดงในโหมดการนำทางด้วยแป้นพิมพ์
  • cursorColour: สีของเคอร์เซอร์ที่แสดงในโหมดการนำทางด้วยแป้นพิมพ์

คุณเปลี่ยนคอมโพเนนต์อื่นๆ ส่วนใหญ่ได้โดยใช้ชื่อธีมใน CSS อย่างไรก็ตาม หากมีคอมโพเนนต์ที่คุณต้องการเปลี่ยนแปลงที่ยังไม่ได้เป็นส่วนหนึ่งของรายการนี้และไม่สามารถเปลี่ยนโดยใช้ CSS ได้ โปรดยื่นปัญหาพร้อมข้อมูลเพิ่มเติม

const componentStyle = {
   'workspaceBackgroundColour': '#1e1e1e',
   'toolboxBackgroundColour': '#333'
}

รูปแบบตัวอักษร

รูปแบบตัวอักษรคือวัตถุที่แบ่งประเภท น้ำหนัก และขนาดของแบบอักษร

const fontStyle = {
   'family': 'Georgia, serif',
   'weight': 'bold',
   'size': 12
}

เริ่มเล่นหมวก

หากคุณตั้งค่า startHats: true ในออบเจ็กต์ธีมโดยตรง ระบบจะเพิ่มหมวกลงในบล็อกทั้งหมดที่ไม่มีการเชื่อมต่อก่อนหน้าหรือเอาต์พุต หากต้องการควบคุมได้มากขึ้นว่าบล็อกใดจะได้หมวกจริงๆ คุณสามารถใช้พร็อพเพอร์ตี้สไตล์บล็อกแทน

ธีมที่กำหนดเอง

หากต้องการเพิ่มธีมไปยังแอปพลิเคชัน Blockly คุณจะต้องทำดังนี้

  1. สร้างธีม
  2. เพิ่มชื่อสไตล์
  3. ตั้งค่าธีมในพื้นที่ทำงาน

สร้างธีม

คุณสร้างธีมได้โดยใช้ตัวสร้างหรือใช้ defineTheme การใช้ defineTheme จะช่วยให้คุณขยายธีมที่มีอยู่ก่อนและกำหนดค่าทั้งหมดด้วยออบเจ็กต์เดียวได้อย่างง่ายดาย ธีมจะมีชื่อ และเป็นออบเจ็กต์ที่มีสไตล์บล็อก รูปแบบหมวดหมู่ และพร็อพเพอร์ตี้อื่นๆ ตามที่กล่าวไว้ข้างต้น

ธีมสามารถมีธีมพื้นฐานได้ ซึ่งจะให้ค่าเริ่มต้นสำหรับค่าใดๆ ที่ไม่ได้ระบุไว้ในธีมที่กำหนดเอง

const theme = Blockly.Theme.defineTheme('themeName', {
   'base': Blockly.Themes.Classic,
   'blockStyles': {
      'logic_blocks': {
         'colourPrimary': '#4a148c'
      },
      'math_blocks': {...}
   },
   'categoryStyles': {...},
   'componentStyles': {...},
   'fontStyle': {...},
   'startHats': true
});

นี่คือตัวอย่าง การใช้ defineTheme

เพิ่มชื่อรูปแบบ

ตอนนี้เมื่อเราสร้างธีมแล้ว เราจำเป็นต้องเพิ่มชื่อสไตล์ลงในการกำหนดบล็อกและหมวดหมู่

หมวดหมู่

วิธีกำหนดกล่องเครื่องมือจะเป็นตัวกำหนดว่าคุณต้องเพิ่มชื่อสไตล์อย่างไร ดูข้อมูลเพิ่มเติมได้ที่หน้ากล่องเครื่องมือ

บล็อก

วิธีกำหนดการบล็อกจะเป็นตัวกำหนดว่าคุณจะต้องเพิ่มชื่อสไตล์อย่างไร คุณดูข้อมูลเพิ่มเติมเกี่ยวกับคำจำกัดความของการบล็อกได้ในหน้าการบล็อกที่กำหนดเอง คุณจะกำหนดสไตล์บล็อกรูปแบบหนึ่งที่กำหนดไว้ในพร็อพเพอร์ตี้ blockStyles ของธีมให้กับการบล็อก

JSON

"style":"logic_blocks"

JavaScript

this.setStyle('logic_blocks');

ตั้งค่าธีมของคุณ

คุณต้องบอกให้ Blockly ทราบว่าจะใช้ธีมใด การกำหนดธีมหลายๆ แบบที่ใช้รูปแบบบล็อกและชื่อหมวดหมู่เดียวกันจะทำให้คุณสามารถเลือกธีมที่เหมาะกับตนเองมากที่สุด และเปลี่ยนได้แบบไดนามิกโดยไม่ต้องเปลี่ยนการกำหนดบล็อกเอง

ธีมเริ่มต้น

วิธีที่ดีที่สุดในการตั้งค่าธีมเริ่มต้นคือการใส่ options.theme ในการเรียกใช้การแทรก คุณใส่ธีมเป็นไฟล์ JSON หรือ JavaScript ได้

JSON

{
   theme: {
      "blockStyles" : {
         "list_blocks": {
            "colourPrimary": "#4a148c",
            "colourSecondary":"#AD7BE9",
            "colourTertiary":"#CDB6E9"
         }
      },
      "categoryStyles" : {
         "list_category": {
            "colour": "#4a148c"
         }
      },
      "componentStyles" : {
         "workspaceBackgroundColour": "#1e1e1e"
      }
   }
}

JavaScript

{
   theme: Blockly.Theme.defineTheme('themeName', {
      'blockStyles': blockStyles,
      'categoryStyles': categoryStyles,
      'componentStyles': componentStyles
   })
}

ดูข้อมูลเพิ่มเติมเกี่ยวกับตัวเลือกได้ในหน้าการกำหนดค่า หากไม่ได้กำหนดธีมไว้ ระบบจะใช้ธีมคลาสสิกเป็นค่าเริ่มต้น

ชุดรูปแบบแบบไดนามิก

หากต้องการเปลี่ยนธีมแบบไดนามิก (เช่น ในกรณีที่อนุญาตให้ผู้ใช้เลือกธีมจากเมนูแบบเลื่อนลง) คุณสามารถเรียกใช้ yourWorkspace.setTheme(theme)

สร้างสคริปต์ของรูปแบบบล็อก

Blockly ระบุสคริปต์ที่จะใช้ในแผนที่ของเฉดสีหรือค่าเลขฐาน 16 และจะคำนวณสีรองและสีลำดับที่สาม ดูสคริปต์ได้ที่โฟลเดอร์ scripts/themes

ธีมในระบบ

Blockly มีธีมมากมายสำหรับการช่วยเหลือพิเศษ โดยเฉพาะภาวะบกพร่องทางการมองเห็นสีบางประเภท ดังนี้

นอกจากนี้ เรายังมี