ธีมคือวิธีปรับแต่งรูปลักษณ์ของ 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
: สีพื้นหลัง FlyoutflyoutForegroundColour
: สีข้อความของป้ายกำกับแบบ FlyoutflyoutOpacity
: ความทึบแสงแบบ FlyoutscrollbarColour
: สีของแถบเลื่อน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 คุณจะต้องทำดังนี้
- สร้างธีม
- เพิ่มชื่อสไตล์
- ตั้งค่าธีมในพื้นที่ทำงาน
สร้างธีม
คุณสร้างธีมได้โดยใช้ตัวสร้างหรือใช้ 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 มีธีมมากมายสำหรับการช่วยเหลือพิเศษ โดยเฉพาะภาวะบกพร่องทางการมองเห็นสีบางประเภท ดังนี้
นอกจากนี้ เรายังมี