Tùy chỉnh chủ đề của bạn

Bạn đang xem tài liệu về Apigee Edge.
Truy cập vào tài liệu Apigee X. thông tin

Giao diện bao gồm một biểu định kiểu chung, giúp mang lại giao diện nhất quán cho tất cả các trang trong cổng thông tin của bạn. Mục tiêu của giao diện là cho phép bạn thay đổi giao diện của tất cả các trang trên cổng thông tin cùng một lúc.

Bạn có thể tuỳ chỉnh, xem trước và xuất bản giao diện như mô tả trong các phần sau.

Khám phá trình chỉnh sửa giao diện

Tuỳ chỉnh, xem trước và xuất bản giao diện cho cổng thông tin của bạn trong trình chỉnh sửa giao diện.

Cách truy cập vào trình chỉnh sửa giao diện:

• Chọn Publish > Portals (Xuất bản > Cổng thông tin) trong thanh công cụ điều hướng bên, chọn cổng thông tin của bạn rồi nhấp vào Themes (Giao diện) trên trang đích.
• Khi chỉnh sửa một cổng thông tin, hãy nhấp vào Giao diện trong trình đơn thả xuống ở thanh công cụ điều hướng trên cùng.

Như minh hoạ trong hình trước, trình chỉnh sửa giao diện cho phép bạn:

• Nhanh chóng tuỳ chỉnh các kiểu cơ bản bằng trình chỉnh sửa giao diện kiểu cơ bản, bao gồm các phần tử sau:
  • Bảng màu
  • Bộ phông chữ và kiểu phông chữ
  • Biểu trưng
• Ghi đè các biến giao diện hoặc tuỳ chỉnh các phần tử kiểu giao diện trong trình chỉnh sửa giao diện nâng cao, bao gồm (nhưng không giới hạn ở) các phần tử sau:
  • Bảng màu
  • Bộ phông chữ và kiểu phông chữ
  • Thanh công cụ điều hướng
  • Hình nền
  • Kiểu chữ
• Xem trước các thay đổi về giao diện
• Xem trước cổng thông tin trong trình duyệt
• Xuất bản giao diện lên cổng thông tin trực tiếp

Giới thiệu về giao diện cơ sở

Phần lớn các quy tắc về kiểu giao diện cơ bản xác định giao diện của trang web đều dựa trên thiết kế theo phong cách Material của Angular. Thiết kế Material của Angular sử dụng bố cục dựa trên lưới, các thành phần và kiểu nhất quán để mang lại trải nghiệm tương tác thống nhất.

Các quy tắc kiểu được xác định bằng Bảng định kiểu xếp tầng Sassy (SCSS). SCSS là một siêu tập hợp của Biểu định kiểu xếp tầng (CSS), mang lại những lợi thế sau:

• Các biến chung có thể được dùng lại trong toàn bộ biểu định kiểu.
• Các quy tắc lồng nhau giúp tiết kiệm thời gian phát triển biểu định kiểu.
• Có khả năng tạo các mixin và hàm

Ví dụ:

// Variable declaration
$my-variable: 12px;

// Nested selectors
.container-selector {
  .element-selector {
    padding: $my-variable;
  }
}

// The SCSS compiler will compile the above code to:
.container-selector .element-selector {
  padding: 12px;
}

// Function declaration
@function double($x) { return $x * 2; }

// Call function
.my-selector { height: double(12px); }

// The SCSS compiler will compile the above code to:
.my-selector { height: 24px; }

SCSS được biên dịch và chuyển đổi thành CSS thông thường trước khi nội dung được hiển thị trên trang web.

Trang định kiểu Material của Angular, tệp SCSS tạo giao diện Material (material-theming.scss) được dùng cho giao diện cơ bản. Biểu định kiểu này khai báo các biến, hàm và mixin mà bạn có thể ghi đè bằng các biến tuỳ chỉnh và phần SCSS, như mô tả trong phần Tuỳ chỉnh giao diện bằng trình chỉnh sửa giao diện nâng cao.

Dựa trên lựa chọn giao diện người dùng của bạn, một số biến SCSS được khai báo để xác định kiểu chữ, màu sắc và bố cục, đồng thời được sử dụng bởi biểu định kiểu cơ sở. Bạn có thể ghi đè các biến được liệt kê trong tài liệu tham khảo về biến chủ đề.

Tuỳ chỉnh bảng màu

Tuỳ chỉnh bảng màu bằng trình chỉnh sửa kiểu cơ bản hoặc bằng cách ghi đè các biến chủ đề.

Giới thiệu về các danh mục bảng màu

Các định nghĩa về bảng màu cho cổng tích hợp được nhóm thành các danh mục sau đây, được xác định bằng cách sử dụng kiểu màu Material Design trong giao diện cơ sở.

Tuỳ chỉnh bảng màu bằng trình chỉnh sửa kiểu cơ bản

Nhanh chóng tuỳ chỉnh bảng màu chính và nhấn mạnh bằng trình chỉnh sửa kiểu cơ bản.

Cách tuỳ chỉnh bảng màu bằng trình chỉnh sửa kiểu cơ bản:

1. Truy cập vào trình chỉnh sửa giao diện.
2. Để tuỳ chỉnh màu chính, trong trình đơn thả xuống Màu chính, hãy chọn một màu hoặc nhấp vào Tuỳ chỉnh rồi nhập một giá trị màu tuỳ chỉnh theo hệ thập lục phân vào hộp văn bản.
3. Để tuỳ chỉnh màu nhấn, trong trình đơn thả xuống Màu nhấn, hãy chọn một màu hoặc nhấp vào Tuỳ chỉnh rồi nhập giá trị màu hệ thập lục phân tuỳ chỉnh vào hộp văn bản.
4. Nhấp vào Lưu để lưu các thay đổi.
5. Xem các thay đổi trong ngăn xem trước hoặc nhấp vào Xem trước để xem trước các thay đổi đối với cổng thông tin trong trình duyệt.
   Lưu ý: Bạn có thể nhấp vào bảng điều hướng của cổng thông tin trong ngăn xem trước để xem các thay đổi trên tất cả các trang.
6. Nhấp vào Xuất bản để xuất bản giao diện. Bạn sẽ được nhắc xác nhận nội dung cập nhật.

Tuỳ chỉnh bảng màu bằng cách ghi đè các biến giao diện

Để tuỳ chỉnh bảng màu bằng cách ghi đè các biến giao diện, hãy truy cập vào trình chỉnh sửa giao diện nâng cao và thêm một hoặc nhiều biến sau đây có giá trị đã điều chỉnh vào phần Biến để thay đổi màu chính, màu phụ, màu nhấn hoặc màu thông báo cảnh báo tương ứng. Xem phần Giới thiệu về các danh mục bảng màu.

$primary: mat-palette($mat-grey, 800, 100, 900);
$secondary: mat-palette($mat-green, 700, 100, 900);
$accent: mat-palette($mat-blue, 600, 700, 900);
$warn: mat-palette($mat-red);

Xem nội dung của tệp SCSS tạo giao diện theo chất liệu (material-theming.scss) đã nhập để xác định các biến màu được xác định trước (chẳng hạn như $mat-grey). Các giá trị bằng số cho biết giá trị đổ bóng cho các phần tử mặc định, sáng hơn và tối hơn, tương ứng.

Ngoài ra, bạn có thể tạo biến màu của riêng mình. Ví dụ:

$my-color-variable: (    
    50 : #f9f0e7,    
    100 : #f0d8c2,    
    200 : #e6bf9a,    
    300 : #dba572,    
    400 : #d49153,    
    500 : #cc7e35,    
    600 : #c77630,    
    700 : #c06b28,    
    800 : #b96122,    
    900 : #ad4e16,    
    A100 : #ffebe0,     
    A200 : #ffc9ad,    
    A400 : #ffa77a,    
    A700 : #ff9661,     
    // Color to render text presented on a background of the same level       
    contrast: (    
        50 : #000000,     
        100 : #000000,     
        200 : #000000,     
        300 : #000000,    
        400 : #000000,     
        500 : #000000,    
        600 : #000000,    
        700 : #ffffff,     
        800 : #ffffff,    
        900 : #ffffff,     
        A100 : #000000,     
        A200 : #000000,     
        A400 : #000000,     
        A700 : #000000,     
    )    
);    

Sau đó, hãy dùng mã này để thay đổi bảng màu, như trong ví dụ sau:

$primary: mat-palette($my-color-variable, 900, 200, 400);

Tuỳ chỉnh bộ phông chữ và kiểu chữ

Tuỳ chỉnh bộ phông chữ và kiểu chữ bằng trình chỉnh sửa kiểu cơ bản hoặc bằng cách ghi đè các biến chủ đề. Bạn cũng có thể nhập một phông chữ tuỳ chỉnh.

Tuỳ chỉnh bộ phông chữ và kiểu chữ bằng trình chỉnh sửa kiểu cơ bản

Nhanh chóng tuỳ chỉnh bộ phông chữ và kiểu chữ bằng trình chỉnh sửa kiểu cơ bản, như minh hoạ trong hình sau.

Cách tuỳ chỉnh bộ phông chữ và kiểu chữ bằng trình chỉnh sửa kiểu cơ bản:

1. Truy cập vào trình chỉnh sửa giao diện.
2. Để thay đổi bộ phông chữ, hãy chọn một giá trị trong trình đơn thả xuống Phông chữ.
3. Để thay đổi kiểu phông chữ, hãy mở rộng mục Kiểu phông chữ rồi chỉnh sửa các kiểu (nếu cần), bao gồm cả cỡ chữ, chiều cao dòng và độ đậm của phông chữ cho các phần tử HTML mong muốn.
4. Nhấp vào Lưu để lưu các thay đổi.
5. Xem các thay đổi trong ngăn xem trước hoặc nhấp vào Xem trước để xem trước các thay đổi đối với cổng thông tin trong trình duyệt.
   Lưu ý: Bạn có thể nhấp vào bảng điều hướng của cổng thông tin trong ngăn xem trước để xem các thay đổi trên tất cả các trang.
6. Nhấp vào Xuất bản để xuất bản giao diện. Bạn sẽ được nhắc xác nhận nội dung cập nhật.

Tuỳ chỉnh bộ phông chữ và kiểu chữ bằng cách ghi đè các biến giao diện

Để tuỳ chỉnh bộ phông chữ và kiểu chữ bằng cách ghi đè các biến giao diện, hãy truy cập vào trình chỉnh sửa giao diện nâng cao và thêm một hoặc nhiều biến bộ phông chữ và kiểu chữ có giá trị đã điều chỉnh vào mục Biến.

Ví dụ: để thay đổi phông chữ mặc định thành Arial, hãy xác định biến sau:

$typography-main-font-family: 'Arial';

Nhập phông chữ tuỳ chỉnh

Nhập một phông chữ của Google (không có trong bộ phông chữ mặc định) hoặc phông chữ tuỳ chỉnh của riêng bạn, sau đó tham chiếu phông chữ tuỳ chỉnh đó trong biểu định kiểu, như mô tả bên dưới.

Nhập phông chữ của Google

Để nhập một phông chữ của Google, hãy truy cập vào trình chỉnh sửa giao diện nâng cao rồi nhập phông chữ trong mục Kiểu tuỳ chỉnh, như minh hoạ dưới đây:

@import url(https://fonts.googleapis.com/css?family=Indie+Flower);

Nhập phông chữ tuỳ chỉnh

Nhập phông chữ tuỳ chỉnh của riêng bạn bằng quy tắc CSS @font-face. Quy tắc @font-face hỗ trợ một số loại định dạng tệp, bao gồm TrueType (TTF), Web Open Font Format (WOFF) và nhiều loại khác.

Cách nhập phông chữ tuỳ chỉnh của riêng bạn:

1. Bạn cũng có thể tải tệp phông chữ lên trình quản lý tài sản, như mô tả trong phần Tải tệp lên.

2. Truy cập vào trình chỉnh sửa giao diện nâng cao và thêm quy tắc @font-face vào mục Kiểu tuỳ chỉnh, trong đó font-family chỉ định tên phông chữ, url chỉ định vị trí của tệp phông chữ (trong trường hợp này là trình quản lý tài sản), MyCustomFont.tff là tên của tệp phông chữ tuỳ chỉnh và format chỉ định định dạng phông chữ.

   @font-face {
      font-family: 'MyCustomFont';
      src: url('files/MyCustomFont.tff') format('truetype')
   }
   

Tham chiếu phông chữ tuỳ chỉnh trong biểu định kiểu

Tham chiếu phông chữ tuỳ chỉnh trong một trong các biến bộ phông chữ và kiểu trong mục Biến. Ví dụ:

$typography-main: mat-typography-config(    
    $font-family: '"Indie Flower", "Oxygen", sans-serif',    
    $display-4: mat-typography-level(112px, 112px, 300), // One-off huge headers    
    $display-3: mat-typography-level(56px, 56px, 400), // One-off large headers    
    $display-2: mat-typography-level(45px, 48px, 400), // One-off medium headers    
    $display-1: mat-typography-level(34px, 40px, 400), // One-off small headers    
    $headline: mat-typography-level(24px, 32px, 400), // <h1> tags    
    $title: mat-typography-level(20px, 32px, 500), // <h2> tags    
    $subheading-2: mat-typography-level(16px, 28px, 400), // <h3> tags   
    $subheading-1: mat-typography-level(15px, 24px, 400), // <h4> tags   
    $body-2: mat-typography-level(14px, 24px, 500), // Bolder body text   
    $body-1: mat-typography-level(16px, 22px, 400), // Base body text    
    $caption: mat-typography-level(12px, 20px, 400), // Smaller body and hint text    
    $button: mat-typography-level(14px, 14px, 500), // Buttons    
    $input: mat-typography-level(16px, 1.125, 400) // Input form fields
);    

Tuỳ chỉnh biểu trưng

Bạn có thể tuỳ chỉnh biểu trưng được dùng trong cổng thông tin ở những vị trí sau:

Tuỳ chỉnh biểu trưng trong thanh điều hướng cho màn hình máy tính và thiết bị di động

Tuỳ chỉnh biểu trưng trong thanh công cụ điều hướng cho màn hình máy tính và thiết bị di động. Tuỳ thuộc vào chiều rộng của trình duyệt, bạn có thể thấy phiên bản biểu trưng dành cho máy tính hoặc thiết bị di động.

Bạn không thể xoá biểu trưng chính mà chỉ có thể thay thế biểu trưng đó. Nếu bạn không chỉ định biểu trưng cho màn hình di động, thì biểu trưng chính sẽ được sử dụng theo mặc định.

Cách tuỳ chỉnh biểu trưng dùng trong thanh công cụ điều hướng cho màn hình máy tính và thiết bị di động:

1. Lấy một hoặc nhiều bản sao biểu trưng công ty của bạn để sử dụng.
   Tham khảo bảng trước để biết các kích thước được đề xuất.
2. Truy cập vào trình chỉnh sửa giao diện.
3. Cách thay thế biểu trưng trong thanh công cụ điều hướng trên cùng trên màn hình máy tính:
   a. Trong mục Kiểu cơ bản ở ngăn bên phải, hãy nhấp vào trong trường Biểu trưng chính.
   b. Duyệt tìm phiên bản logo dành cho máy tính trong thư mục trên máy tính của bạn.
   c. Nhấp vào Mở để tải tệp lên.
4. Cách thay thế biểu trưng trong thanh công cụ điều hướng trên cùng trên màn hình thiết bị di động:
   a. Trong phần Kiểu cơ bản ở ngăn bên phải, hãy mở rộng Lựa chọn về biểu trưng rồi nhấp vào trong trường Biểu trưng trên thiết bị di động.
   b. Duyệt tìm phiên bản di động của biểu trưng trong thư mục trên thiết bị của bạn.
   c. Nhấp vào Mở để tải tệp lên.
5. Nhấp vào Lưu để xem trước các thay đổi trong ngăn bên trái.
6. Nhấp vào Xuất bản để xuất bản các thay đổi đối với cổng thông tin của bạn. Xác nhận thao tác khi được nhắc.

Tuỳ chỉnh biểu tượng trang web

Để tuỳ chỉnh biểu tượng trang web được dùng trong thanh địa chỉ của trình duyệt web (và các vị trí khác:

1. Lấy một bản sao biểu trưng công ty của bạn phù hợp để sử dụng làm biểu tượng trang web.
   Tham khảo bảng trước để biết kích thước đề xuất.
2. Truy cập vào trình chỉnh sửa giao diện.
3. Trong mục Kiểu cơ bản ở ngăn bên phải, hãy mở rộng Các lựa chọn về biểu trưng rồi nhấp vào trong trường Favicon.
4. Duyệt tìm phiên bản biểu tượng trang web của biểu trưng trong thư mục cục bộ.
5. Nhấp vào Mở để tải tệp lên.
6. Nhấp vào Lưu để xem trước các thay đổi trong ngăn bên trái.
7. Nhấp vào Xuất bản để xuất bản các thay đổi đối với cổng thông tin của bạn. Xác nhận thao tác khi được nhắc.

Tuỳ chỉnh biểu trưng trên trang Đăng nhập

Tuỳ chỉnh biểu trưng trên trang Đăng nhập khi thiết lập trải nghiệm đăng ký và đăng nhập cho chương trình nhà phát triển của bạn, như mô tả trong phần Quản lý thông tin công ty.

Tuỳ chỉnh thanh công cụ điều hướng

Sau đây là một số mẹo nhanh để tuỳ chỉnh thanh công cụ điều hướng:

• Tuỳ chỉnh màu của thanh công cụ điều hướng trong tiêu đề và chân trang bằng cách thay đổi màu chính, như mô tả trong phần Tuỳ chỉnh bảng màu.
• Tuỳ chỉnh cỡ chữ và kiểu chữ của các mục trong trình đơn trên thanh điều hướng ở đầu trang và chân trang bằng cách thay đổi kiểu Phông chữ và Nút, như mô tả trong phần Tuỳ chỉnh bộ phông chữ và kiểu chữ.
• Tuỳ chỉnh chiều cao của thanh công cụ điều hướng trong tiêu đề bằng cách truy cập vào trình chỉnh sửa giao diện nâng cao và thêm biến sau đây cùng với giá trị đã điều chỉnh vào mục Biến: $layout-header-height: 64px;
• Tuỳ chỉnh chiều cao của thanh công cụ điều hướng ở chân trang bằng cách truy cập vào trình chỉnh sửa giao diện nâng cao và thêm biến sau đây cùng với giá trị đã điều chỉnh vào mục Biến: $layout-footer-height: 44px;
• Tuỳ chỉnh biểu trưng trong thanh điều hướng cho màn hình máy tính và thiết bị di động.

Tuỳ chỉnh hình nền

Tuỳ chỉnh hình nền trên trang chủ bằng cách thực hiện một trong các thao tác sau:

• Tải phiên bản hình ảnh home-background.jpg của riêng bạn lên trình quản lý tài sản bằng cách sử dụng cùng tên và kích thước tệp tương đối (3000 pixel x 1996 pixel). Để biết thêm thông tin, hãy xem bài viết Quản lý tài sản.

• Sửa đổi tên tệp hình nền và khoảng đệm của tệp bằng cách truy cập vào trình chỉnh sửa giao diện nâng cao và thêm SCSS sau đây có các giá trị đã điều chỉnh vào phần Kiểu tuỳ chỉnh:

  #index {
    &.main {
      .main-content {
        padding: 0;
        background-image: url('/files/home-background.jpg');
        background-size: cover;
      }
    }
  }
  

• Thêm hình nền vào tất cả các trang trong cổng thông tin bằng cách truy cập vào trình chỉnh sửa giao diện nâng cao và thêm SCSS sau đây có giá trị đã điều chỉnh vào phần Kiểu tuỳ chỉnh:

   body {
      background-image: url('/files/background-image.jpg');
   }
  
  

Tuỳ chỉnh kiểu chữ

Tuỳ chỉnh kiểu chữ bằng cách truy cập vào trình chỉnh sửa giao diện nâng cao và điều chỉnh giá trị cho một hoặc nhiều biến kiểu chữ sau đây trong mục Biến:

• $typography-main
• $typography-header
• $typography-footer
• $typography-context-bar

Ví dụ:

// Main content typography (includes dialog and notification popups)
$typography-main: mat-typography-config(
    $font-family: 'Roboto, "Oxygen", sans-serif',
    $display-4: mat-typography-level(112px, 112px, 300), // One-off huge headers
    $display-3: mat-typography-level(56px, 56px, 400), // One-off large headers
    $display-2: mat-typography-level(45px, 48px, 400), // One-off medium headers
    $display-1: mat-typography-level(34px, 40px, 400), // One-off small headers
    $headline: mat-typography-level(24px, 32px, 400), // <h1> tags
    $title: mat-typography-level(20px, 32px, 500), // <h2> tags
    $subheading-2: mat-typography-level(16px, 28px, 400), // <h3> tags
    $subheading-1: mat-typography-level(15px, 24px, 400), // <h4> tags
    $body-2: mat-typography-level(14px, 24px, 500), // Bolder body text
    $body-1: mat-typography-level(16px, 22px, 400), // Base body text
    $caption: mat-typography-level(12px, 20px, 400), // Smaller body and hint text
    $button: mat-typography-level(14px, 14px, 500), // Buttons
    $input: mat-typography-level(16px, 1.125, 400) // Input form fields
);

Sau đó, bạn có thể áp dụng kiểu chữ cho một bộ chọn CSS cụ thể, như trong ví dụ sau:

@include mat-base-typography($custom-typography-config, '.css-selector');

Ngoài ra, bạn có thể áp dụng một cấp kiểu chữ cụ thể được xác định trong kiểu chữ tuỳ chỉnh cho một bộ chọn CSS, như trong ví dụ sau:

.css-selector {
  @include mat-typography-level-to-styles($custom-typography-config, display-3);
}

Tuỳ chỉnh giao diện bằng trình chỉnh sửa giao diện nâng cao

Tuỳ chỉnh giao diện bằng cách ghi đè các biến giao diện hoặc bằng cách tuỳ chỉnh các phần tử kiểu giao diện ngay trong trình chỉnh sửa giao diện nâng cao.

Ghi đè các biến giao diện

Ghi đè các biến giao diện trong mục Biến của trình chỉnh sửa giao diện nâng cao. Để xem danh sách các biến chủ đề, hãy xem Tài liệu tham khảo về biến chủ đề.

Ví dụ: để tuỳ chỉnh chiều cao của thanh công cụ điều hướng trong tiêu đề và chân trang, hãy lần lượt thêm các biến sau đây có giá trị đã điều chỉnh trong mục Biến của trình chỉnh sửa giao diện nâng cao:

Để xem thêm ví dụ, hãy xem:

• Tuỳ chỉnh bảng màu bằng cách ghi đè các biến giao diện
• Tuỳ chỉnh bộ phông chữ và kiểu chữ bằng cách ghi đè các biến giao diện

Cách ghi đè các biến giao diện:

1. Truy cập vào trình chỉnh sửa giao diện.
2. Trong ngăn bên phải, hãy nhấp vào Nâng cao.
3. Nhấp vào Biến.
4. Thêm các chế độ ghi đè biến.
   Để biết danh sách các biến có thể bị ghi đè, hãy xem Tài liệu tham khảo về biến giao diện.
5. Nhấp vào Lưu để lưu các thay đổi.
6. Nhấp vào biểu tượng x để đóng trình chỉnh sửa giao diện nâng cao.
7. Xem các thay đổi trong ngăn xem trước hoặc nhấp vào Xem trước để xem trước các thay đổi đối với cổng thông tin trong trình duyệt. Lưu ý: Bạn có thể nhấp vào bảng điều hướng của cổng thông tin trong ngăn xem trước để xem các thay đổi trên tất cả các trang.
8. Nhấp vào Xuất bản để xuất bản giao diện. Bạn sẽ được nhắc xác nhận nội dung cập nhật.

Tuỳ chỉnh các phần tử kiểu giao diện

Tuỳ chỉnh các phần tử kiểu giao diện ngay trong phần Kiểu tuỳ chỉnh của trình chỉnh sửa giao diện nâng cao.

Ví dụ: để thay đổi màu của nút Tạo trên trang Ứng dụng mới xuất hiện khi đăng ký ứng dụng trong cổng thông tin, hãy thêm thuộc tính kiểu giao diện sau đây với giá trị đã điều chỉnh:

.main .main-content button.app-save {
  color: blue;
}

Xem thêm phần Tuỳ chỉnh hình nền.

Cách tuỳ chỉnh các phần tử kiểu giao diện:

1. Truy cập vào trình chỉnh sửa giao diện.
2. Trong ngăn bên phải, hãy nhấp vào Nâng cao.
3. Nhấp vào Kiểu tuỳ chỉnh.
4. Thêm các phần tử kiểu giao diện.
5. Nhấp vào Lưu để lưu các thay đổi.
6. Đóng x để đóng trình chỉnh sửa giao diện nâng cao.
7. Xem các thay đổi trong ngăn xem trước hoặc nhấp vào Xem trước để xem trước các thay đổi đối với cổng thông tin trong trình duyệt.
   Lưu ý: Bạn có thể nhấp vào bảng điều hướng của cổng thông tin trong ngăn xem trước để xem các thay đổi trên tất cả các trang.
8. Nhấp vào Xuất bản để xuất bản giao diện. Bạn sẽ được nhắc xác nhận nội dung cập nhật.

Tạo một bảng điều khiển có chiều rộng đầy đủ trong trang cổng thông tin

Cách tạo bảng điều khiển có chiều rộng đầy đủ trong trang cổng thông tin:

1. Thêm các phần tử kiểu giao diện sau đây trong trình chỉnh sửa giao diện nâng cao, như mô tả trong phần Tuỳ chỉnh các phần tử kiểu giao diện:

   .full-width__container {
     position: relative;
     left: 50%;
     right: 50%;
     max-width: 100vw;
     margin-left: -50vw;
     margin-right: -50vw;
     background-image: url("/files/your-image.jpg");
     background-size: cover;
     background-position: 50% 50%;
     padding: 0;
   }
   
   .full-width__centered {
     @include centered-content();
   }
   
   .full-width__content {
     // Add any 'additional' padding here and NOT in .full-width__centered. Adding padding to
     // .full-width__centered will result in a horizontal scroll bar. You can exclude this class
     // and corresponding <div> container if no additional padding control other than the
     // min page padding is needed.
   }

2. Chỉnh sửa nội dung trang cổng thông tin để thêm phần tử <div> sau đây, như mô tả trong phần Phát triển nội dung cổng thông tin bằng trình chỉnh sửa trang:

   <div class="full-width__container">
     <div class="full-width__centered">
       <div class="full-width__content">  <!-- Include this div if you need additional padding -->
         <h2>Full Width Container</h2>
         <p>
           This content will align with the page header and other content outside
           of this full width container
         </p>
       </div>
     </div>
   </div>

Xuất bản giao diện

Cách xuất bản những nội dung tuỳ chỉnh về giao diện và kiểu mà bạn đã thêm vào cổng thông tin thực tế:

1. Truy cập vào trình chỉnh sửa giao diện.
2. Nhấp vào Xuất bản.

Để xem nội dung đã xuất bản trong cổng phát trực tiếp, hãy nhấp vào Xem cổng trong thanh công cụ điều hướng trên cùng.

Tìm hiểu các quy tắc về độ ưu tiên của CSS

Độ đặc hiệu của CSS mô tả phương thức mà trình duyệt sử dụng để xác định mức độ ưu tiên cho các khai báo thuộc tính kiểu CSS khi xảy ra xung đột. Độ cụ thể của CSS được tính bằng cách áp dụng trọng số cho một khai báo thuộc tính kiểu CSS cụ thể dựa trên loại bộ chọn của thuộc tính đó. Bộ chọn CSS càng cụ thể thì trọng số càng cao. Ví dụ: thuộc tính mã nhận dạng sẽ được gán trọng số cao hơn trong phép tính so với bộ chọn kiểu.

Ví dụ: nếu bạn xác định các thuộc tính kiểu sau trong mã CSS, thì phần tử đoạn văn sẽ có màu đỏ vì khai báo thuộc tính kiểu p trong phần tử div cụ thể hơn khai báo thuộc tính kiểu p.

div p { color: red }  ← More specific  
p { color: blue }

Tương tự, nếu bạn xác định các khai báo thuộc tính kiểu sau đây trong mã CSS, thì mọi văn bản nằm trong thẻ <div class="test"></div> sẽ có màu xanh dương vì khai báo thuộc tính kiểu thuộc tính id trong phần tử div cụ thể hơn khai báo thuộc tính kiểu div.

div#test { background-color: blue; }  ← More specific  
div { background-color: red; }

Đối với các khai báo thuộc tính kiểu có cùng độ đặc hiệu, khai báo thuộc tính kiểu được xác định sau cùng sẽ được ưu tiên. Ví dụ: với thứ tự khai báo thuộc tính kiểu sau đây, phần tử đoạn văn sẽ có màu xanh dương.

p { color: red }  
p { color: blue }  ← Last specified

Tài liệu tham khảo về biến giao diện

Các phần sau đây tóm tắt những biến có thể được ghi đè trong phần Biến của trình chỉnh sửa giao diện nâng cao, như mô tả trong phần Ghi đè các biến giao diện.

• Biến giao diện cơ bản
• Biến bảng màu
• Biến kiểu và bộ phông chữ
• Biến kiểu chữ

Biến giao diện cơ bản

Tuỳ chỉnh màu nền trước của giao diện cơ sở được dùng trên toàn bộ trang web. Các giá trị hợp lệ là light và dark.

$base-theme: light;

Các biến bảng màu

Tuỳ chỉnh bảng màu bằng cách sửa đổi các biến sau để thay đổi màu của thông báo chính, phụ, điểm nhấn và cảnh báo, tương ứng. Xem phần Giới thiệu về các danh mục bảng màu.

$primary: mat-palette($mat-grey, 800, 100, 900); 
$secondary: mat-palette($mat-green); 
$accent: mat-palette($mat-blue); 
$warn: mat-palette($mat-red); 

Các giá trị bằng số cho biết giá trị đổ bóng cho các phần tử mặc định, sáng hơn và tối hơn, tương ứng. Xem nội dung của tệp SCSS tạo giao diện theo chủ đề bằng Material (material-theming.scss) để xác định các biến màu được xác định trước.

Ví dụ: bạn có thể thay đổi bảng màu chính thành màu xanh lục như sau:

$primary: mat-palette($mat-green, 800, 100, 900);

Để chỉ tuỳ chỉnh các giá trị đổ bóng cho bộ màu mặc định được xác định trong giao diện cơ bản, hãy thêm mã sau đây với các giá trị đổ bóng đã điều chỉnh:

$primary: mat-palette($custom-hex-primary, 800, 100, 900);
$secondary: mat-palette($custom-hex-secondary, 800, 100, 900);
$accent: mat-palette($custom-hex-accent, 800, 100, 900);
$warn: mat-palette($custom-hex-warn, 800, 100, 900);

Các biến về bộ phông chữ và kiểu phông chữ

Tuỳ chỉnh bộ phông chữ và kiểu chữ.

// If using a custom font, import it by URL. 
$typography-main-font-family: 'Roboto, sans-serif';

// Must resolve to a pixel value
$layout-responsive-breakpoint: 900px;
$layout-header-height: 64px;
$layout-header-menu-item-height: 36px;
$layout-header-menu-item-horiz-padding: 16px;
$layout-header-nested-menu-item-vert-padding: 5px;
$layout-header-menu-resp-item-height: 64px;
$layout-footer-height: 44px;
$layout-footer-menu-item-height: 36px;
$layout-footer-menu-item-horiz-padding: 16px;
$layout-footer-nested-menu-item-vert-padding: 5px;
$layout-context-bar-height: 60px;
$layout-context-bar-button-height: 36px;
$layout-context-bar-button-horiz-padding: 16px;
$layout-main-content-max-width: 1400px;
$layout-main-content-vert-padding: 38px;
$layout-horizontal-min-padding: 24px;

// Uses variables declared above
$typography-header: $typography-main;
$typography-footer: $typography-main;
$typography-context-bar: $typography-main;

Chỉ định kiểu chữ tuỳ chỉnh của riêng bạn để kiểm soát chi tiết hơn, như trong ví dụ sau:

$typography-context-bar: mat-typography-config(
    $font-family: 'Ubuntu, sans-serif',
    $headline: mat-typography-level(30px, 30px, 500), // Title
    $button: mat-typography-level(19px, 19px, 200) // Action buttons
);

Biến kiểu chữ

Tuỳ chỉnh kiểu chữ của Angular Material. Mỗi cấp độ kiểu chữ xác định một cỡ chữ, chiều cao dòng và độ đậm của phông chữ.

$typography-main-display-4: mat-typography-level(112px, 112px, 300);
$typography-main-display-3: mat-typography-level(56px, 56px, 400);
$typography-main-display-2: mat-typography-level(45px, 48px, 400);
$typography-main-display-1: mat-typography-level(34px, 40px, 400);
$typography-main-headline: mat-typography-level(24px, 32px, 400);
$typography-main-title: mat-typography-level(20px, 32px, 400);
$typography-main-subheading-2: mat-typography-level(16px, 28px, 400);
$typography-main-subheading-1: mat-typography-level(15px, 24px, 400);
$typography-main-body-2: mat-typography-level(14px, 24px, 400);
$typography-main-body-1: mat-typography-level(16px, 22px, 400);
$typography-main-caption: mat-typography-level(12px, 20px, 400);
$typography-main-button: mat-typography-level(14px, 14px, 700);
$typography-main-input: mat-typography-level(16px, 1.125, 400);

// Copies properties declared above into a cohesive object
$typography-main: mat-typography-config(
  $font-family: $typography-main-font-family,
  $display-4: $typography-main-display-4,
  $display-3: $typography-main-display-3,
  $display-2: $typography-main-display-2,
  $display-1: $typography-main-display-1,
  $headline: $typography-main-headline,
  $title: $typography-main-title,
  $subheading-2: $typography-main-subheading-2,
  $subheading-1: $typography-main-subheading-1,
  $body-2: $typography-main-body-2,
  $body-1: $typography-main-body-1,
  $caption: $typography-main-caption,
  $button: $typography-main-button,
  $input: $typography-main-input);