研究問卷調查：與我們分享您使用 Blockly 的體驗

本頁面由 Cloud Translation API 翻譯而成。

主題

主題可用來自訂 Blockly 的外觀和風格。您可以透過 Themes 類別自訂區塊顏色、類別顏色和特定元件。如要自訂其他元件，我們會提供主題名稱做為插入 div 的類別。這樣一來，使用者就能透過 CSS 變更任何不支援元件的外觀。我們建立主題的主要目的，是為了讓開發人員能夠打造更易於存取的 Blockly 體驗。

主題屬性

主題是具有多個屬性的物件：要擴充的基礎主題、用於區塊、類別、元件和字型的樣式物件，以及是否要為開始區塊使用帽子。

區塊樣式

區塊樣式由四個欄位組成：

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：Toolbox 類別文字顏色
flyoutBackgroundColour：彈出式視窗背景顏色
flyoutForegroundColour：Flyout 標籤文字顏色
flyoutOpacity：彈出式視窗的不透明度
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 應用程式，您必須執行下列操作：

建立主題
新增樣式名稱
在工作區中設定主題

新建主題

您可以使用建構函式或 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 提供可擷取色調或十六進位值對應的指令碼，並會為其計算次要顏色和第三色。您可以在 scripts/themes 資料夾中找到指令碼。

內建主題

Blockly 提供多種輔助功能主題，特別是針對某些類型的色覺辨認障礙：

我們也提供：

傳統主題
Modern
深色模式