Nhận xét không gian làm việc là một phần tử đồ hoạ mà bạn có thể nhập văn bản vào. Thông thường, mô hình này dùng để ghi lại mọi thứ về mã của bạn, chẳng hạn như nhận xét bằng ngôn ngữ lập trình dựa trên văn bản.
Bật tính năng nhận xét trong không gian làm việc
Để bật tính năng nhận xét trên không gian làm việc trong ứng dụng, bạn cần cung cấp cho người dùng một số cách tạo nhận xét. Một cách để thực hiện việc này là thêm mục trên trình đơn theo bối cảnh tạo nhận xét không gian làm việc. Bạn có thể đăng ký các mục trong trình đơn theo bối cảnh mặc định để tạo, xoá và sao chép nhận xét trong không gian làm việc bằng mã sau:
// This should be called on page load. It can be called before or after
// you inject your workspace.
Blockly.ContextMenuItems.registerCommentOptions();
Bạn cũng có thể tạo các lựa chọn trên trình đơn theo bối cảnh của riêng mình hoặc thêm một cách khác để người dùng thêm nhận xét trong không gian làm việc. Để biết thêm thông tin về các tuỳ chọn trình đơn theo bối cảnh, hãy xem phần Trình đơn theo bối cảnh.
Tuỳ chỉnh bình luận theo cách trực quan
Có một số cách để bạn tuỳ chỉnh giao diện của nhận xét trong không gian làm việc. Những URL này sử dụng CSS chứ không phải chủ đề. Bạn có thể điều khiển hầu hết màu sắc và kích thước của các phần khác nhau của nhận xét, nhưng không thể điều chỉnh cách đặt các màu.
Biến CSS màu
Bạn có thể đặt biến css commentFillColour để thay đổi màu nền của vùng văn bản. Bạn có thể đặt biến css commentBorderColour để thay đổi màu của thanh trên cùng của nhận xét và đường viền của nhận xét.
.blocklyWorkspace {
--commentFillColour: blue;
--commentBorderColour: red;
}
Lớp CSS
Có nhiều lớp css được chỉ định cho các phần tử khác nhau của chế độ xem nhận xét, cho phép bạn chỉnh sửa kiểu của các phần tử đó.
| (Các) hạng CSS | Bài đăng có hình ảnh |
|---|---|
| có thể chặn nhận xét, có thể chặn | 
|
| blocklySelected, blocklyAudiencemới |  
|
| blocklyCollapsed |  |
| blocklyCommentTopbar |  |
| blocklyFoldoutIcon |  |
| blocklycommentPreview, blocklyText | 
|
| blocklyDeleteIcon |  |
| blocklyText |  |
| blocklyResizeHandle |  |
Sử dụng CSS cơ bản
Trong hầu hết các trường hợp, bạn có thể áp dụng thuộc tính tuỳ chỉnh bằng lớp CSS thích hợp:
.blocklyCommentTopbarBackground {
height: 50px;
}
CSS cho văn bản
Tuy nhiên, đối với văn bản, bạn cần cụ thể hơn để ghi đè CSS do trình kết xuất tạo.
/* Modifies the preview text. */
.blocklyComment .blocklyCommentPreview.blocklyText {
fill: blue;
}
/* Modifies the input text. */
.blocklyComment .blocklyText {
color: blue;
}
Dịch vụ so sánh giá (CSS) cho các thông tin nổi bật đã chọn
Đối với việc làm nổi bật bình luận khi được chọn, đối tượng CSS sẽ được áp dụng cho các thay đổi tuỳ thuộc vào việc bình luận có được thu gọn hay không. Khi trình đơn này được thu gọn, bạn sẽ áp dụng CSS cho blocklyCommentTopbarBackground, nếu không, hãy áp dụng CSS cho 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;
}
Biểu tượng
Các lớp blocklyFoldoutIcon, blocklyDeleteIcon và blocklyResizeHandle đều được áp dụng cho các phần tử <image>. Điều này có nghĩa là nếu muốn thay đổi màu hoặc hình dạng của biểu tượng, bạn có thể đưa một hình ảnh khác vào thư mục nội dung đa phương tiện.
| Tên hình ảnh | Bài đăng có hình ảnh |
|---|---|
| Foldout-arrow.svg | |
| delete-icon.svg | |
| resize-handle.svg | |
Biểu tượng xóa
Biểu tượng xoá bị ẩn theo mặc định. Nếu muốn bật, bạn cần sử dụng CSS để hiển thị CSS:
.blocklyDeleteIcon {
display: block;
}