Workspace 註解

工作區註解是一種圖形元素，您可以輸入文字。這項資訊通常用於記錄程式碼相關內容，就像記錄文字程式設計語言中的註解一樣。

注意： 你無法將工作區註解新增至flyout中。

啟用工作區註解

若要在應用程式中啟用工作區註解，您需要為使用者提供建立工作區註解的方法。其中一個做法是新增內容選單項目，以建立工作區註解。您可以使用下列程式碼註冊預設內容選單項目，以建立、刪除和複製工作區註解：

// This should be called on page load. It can be called before or after
// you inject your workspace.
Blockly.ContextMenuItems.registerCommentOptions();

您也可以建立自己的內容選單選項，或為使用者新增其他方式新增工作區註解。如要進一步瞭解內容選單選項，請參閱內容選單。

自訂註解

您可以透過多種方式自訂 Workspace 註解的外觀。 這些欄位使用的是 CSS，而非主題。可以控制留言不同部分的大部分顏色和大小，但無法控制這些元素的位置。

彩色 CSS 變數

您可以設定 commentFillColour CSS 變數來變更文字區域的背景顏色。您可以設定 commentBorderColour CSS 變數，變更註解頂端列的顏色和註解邊框。

.blocklyWorkspace {
  --commentFillColour: blue;
  --commentBorderColour: red;
}

CSS 類別

留言檢視畫面中的不同元素會指派不同的 css 類別，方便您修改元素的樣式。

CSS 類別	圖片
區塊留言、可封鎖
已選取「封鎖」、封鎖「註解」
blocklyCollapsed
blocklyCommentTopbar
blocklyFoldoutIcon
blocklyCommentPreview、blocklyText
blocklyDeleteIcon
blocklyText
blocklyResizeHandle

CSS 基本用法

在多數情況下，您可以使用適當的 CSS 類別套用自訂屬性：

.blocklyCommentTopbarBackground {
  height: 50px;
}

用於文字的 CSS

不過，對於文字來說，您需要更具體，才能覆寫轉譯器產生的 CSS。

/* Modifies the preview text. */
.blocklyComment .blocklyCommentPreview.blocklyText {
  fill: blue;
}

/* Modifies the input text. */
.blocklyComment .blocklyText {
  color: blue;
}

所選重點資訊的 CSS

此外，為了在選取註解時醒目顯示註解，請根據註解是否處於收合狀態，對變更套用 CSS。如果控制項處於收合狀態，您會將 CSS 套用至 blocklyCommentTopbarBackground，否則請將其套用至 blocklyCommentHighlight。

/* Highlight when expanded. */
.blocklySelected .blocklyCommentHighlight {
  stroke: #fc3;
  stroke-width: 3px;
}

/* Hide normal highlight when collapsed. */
.blocklyCollapsed.blocklySelected .blocklyCommentHighlight {
  stroke: none;
}

/* Instead apply the collapsed highlight to the top bar. */
.blocklyCollapsed.blocklySelected .blocklyCommentTopbarBackground {
  stroke: #fc3;
  stroke-width: 3px;
}

圖示

blocklyFoldoutIcon、blocklyDeleteIcon 和 blocklyResizeHandle 類別全都會套用至 <image> 元素。也就是說，如要變更圖示的顏色或形狀，您可以在媒體資料夾中加入其他圖片。

映像檔名稱	圖片
foldout-arrow.svg
刪除-icon.svg
resize-handle.svg

刪除圖示

刪除圖示會預設為隱藏。如要啟用資訊卡，則必須透過 CSS 顯示：

.blocklyDeleteIcon {
  display: block;
}