Tuỳ chỉnh giao diện (phiên bản gốc)

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 xếp tầng (CSS) chung, mang đến giao diện đồng nhất cho tất cả các trang trong cổng thông tin của bạn. Mục tiêu của một giao diện là cho phép bạn thay đổi giao diện và cảm quan của tất cả các trang trên cổng thông tin cùng một lúc.

Đa số các kiểu mặc định được cung cấp cùng với cổng thông tin mẫu đều dựa trên Bootstrap. Bạn có thể tuỳ chỉnh, xem trước và xuất bản giao diện của mình như mô tả trong các phần sau.

Hãy xem video sau đây để tìm hiểu cách tuỳ chỉnh giao diện của cổng thông tin.

Truy cập vào 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. Để mở trình chỉnh sửa giao diện, hãy chọn Giao diện trong trình đơn thả xuống ở thanh điều hướng trên cùng.

Trình chỉnh sửa giao diện

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

Thêm kiểu tuỳ chỉnh

Tuỳ chỉnh giao diện bằng cách thêm mã CSS của riêng bạn vào ngăn trình chỉnh sửa kiểu. Tất cả các phần tử kiểu CSS đều được hỗ trợ.

Cách tuỳ chỉnh giao diện:

  1. Chọn Giao diện trong trình đơn thả xuống ở thanh điều hướng trên cùng.
  2. Thêm mã CSS tuỳ chỉnh vào ngăn trình chỉnh sửa kiểu ở bên phải trang.
  3. Xem trước các thay đổi trong ngăn xem trước bằng cách nhấp vào tải lại bản xem trước.
    > Lưu ý: Bạn có thể nhấp vào bảng điều hướng trên cổng thông tin để xem trước nội dung trên tất cả các trang.
  4. Nhấp vào Xuất bản để xuất bản các thay đổi về giao diện.
  5. Nhấp vào Xuất bản để xác nhận nội dung cập nhật.

Tuỳ chỉnh hình ảnh "Biểu trưng của bạn" bằng biểu trưng của công ty bạn, thay thế các tệp hình ảnh sau đây trong trình quản lý tệp bằng cách tải biểu trưng của bạn lên bằng cùng tên và kích thước tệp tương đối:

  • logo.png (140 pixel x 40 pixel)
  • mobile-logo.png (140 pixel x 40 pixel)

Ngoài ra, hãy sửa đổi nội dung sau trong biểu định kiểu CSS (nếu cần):

/* ==== Header Menu ==== */
...
body .navbar-brand {
  padding: 5px 15px;
}



.navbar-brand img {
  max-height: 50px;
  margin: 0;
  padding: 0;
}

Để biết thêm thông tin, hãy xem bài viết Quản lý tài sản.

Tuỳ chỉnh hình nền trên trang chủ

Tuỳ chỉnh hình nền trên trang chủ bằng cách sửa đổi nội dung sau trong biểu định kiểu CSS.

  • Sửa đổi tệp hình nền và vị trí của tệp đó.
    Bạn có thể tải phiên bản portal-hero.jpg của riêng mình lên trình quản lý tệp bằng cách sử dụng cùng tên và kích thước tệp tương đối (1440 pixel x 540 pixel). Nếu bạn muốn sử dụng một tên tệp khác, hãy nhớ chỉnh sửa giá trị background-image trong CSS bên dưới. 

    /* ==== Jumbotron ====
a billboard for drawing attention, from Bootstrap  */

home-page-jumbotron-bg {
    background-image: url('/files/portal-hero.jpg');
}

  • Sửa đổi định dạng của văn bản phủ lên hình nền. 

    .jumbotron {
 text-align: center;
 height: 500px;
 background-size: cover;
 margin: -50px -30px 0 -30px;
 border-radius: 0;
}

.jumbotron h1 {
 font-size: 40px;
 font-weight: 400;
}

.jumbotron h2 {
 font-size: 25px;
 font-weight: 400;
}

.jumbotron a, .jumbotron a:hover {
 font-size: 18px;
}

.jumbotron p {
 max-width: none;
}

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 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 id trong một 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 gần đây nhất sẽ được ưu tiên. Ví dụ: giả sử thứ tự khai báo thuộc tính kiểu như sau, phần tử đoạn văn sẽ có màu xanh dương. 

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

Xuất bản giao diện

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

  1. Chọn Giao diện trong trình đơn thả xuống ở trình đơn điều hướng trên cùng.
  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 Cổng phát trực tiếp trên thanh điều hướng trên cùng.