Bạn đang xem tài liệu về Apigee Edge.
Chuyển đến tài liệu về
Apigee X. thông tin
Giao diện là một tập hợp các tệp xác định giao diện của một trang web. Ban đầu, cổng Dịch vụ dành cho nhà phát triển được xác định bằng một giao diện mặc định mà bạn có thể tuỳ chỉnh. Điều này cho phép bạn chọn giao diện cổng thông tin mà mình ưu tiên. Cụ thể hơn, bạn có thể thay đổi màu của đường liên kết, nền, văn bản và các thành phần giao diện khác. Bạn cũng có thể thay đổi thông báo chào mừng xuất hiện trên trang chủ của cổng thông tin dành cho nhà phát triển.
Bạn có thể tuỳ chỉnh giao diện thông qua giao diện người dùng của cổng thông tin cho nhà phát triển hoặc bằng cách viết mã trong một tệp giao diện tuỳ chỉnh để ghi đè tệp giao diện mặc định.
Tuỳ thuộc vào phiên bản cổng thông tin dành cho nhà phát triển, bạn sẽ có một số giao diện để lựa chọn:
| Giao diện | Nội dung mô tả |
|---|---|
|
Giao diện thích ứng Apigee |
Dựa trên Bootstrap 3, giao diện mặc định cho các bản phát hành sau này của cổng thông tin. Giao diện này hỗ trợ các thiết bị có chiều rộng từ 768 pixel đến 1400 pixel. Tất cả tính năng Bootstrap 3 đều có trong giao diện này. Lưu ý: Để sử dụng giao diện thích ứng Apigee, hãy nhớ bật giao diện Bootstrap 7.x-3.0. |
|
Giao diện Apigee DevConnect |
Giao diện cổng thông tin mặc định, trước đây là giao diện thích ứng của Apigee. Bạn có thể nâng cấp các cổng thông tin hiện có lên giao diện thích ứng mới của Apigee, nhưng trước tiên phải đảm bảo rằng tất cả các khối, mẫu và nội dung khác đều tương thích với Bootstrap 3 và đã bật giao diện Bootstrap 7.x-3.0. |
|
Giao diện cơ sở Apigee |
Là giao diện mẹ của giao diện Apigee DevConnect và không có ý định sử dụng riêng giao diện này. |
Đặt giao diện mặc định
Nếu cổng thông tin của bạn vẫn đang sử dụng giao diện cũ của Apigee DevConnect, bạn có thể thấy một cảnh báo dưới dạng như sau:
"Apigee DevConnect theme" is out of date
Bạn có thể dùng quy trình sau để đặt giao diện mặc định cho cổng thông tin. Bạn nên luôn kiểm thử giao diện mới trước trên một hệ thống không phát hành công khai trước khi triển khai giao diện chính thức.
Cách đặt giao diện mặc định:
- Đăng nhập vào cổng thông tin của bạn với tư cách là người dùng có đặc quyền của quản trị viên hoặc tạo nội dung.
- Chọn Giao diện trong trình đơn quản trị Drupal. Danh sách các giao diện đã bật sẽ xuất hiện.
- Đối với giao diện mà bạn muốn dùng làm mặc định, hãy chọn Đặt mặc định.
Để sử dụng giao diện thích ứng Apigee, hãy nhớ bật giao diện Bootstrap 7.x-3.0 trên trang đó. - Lưu cấu hình.
Tuỳ chỉnh giao diện thích ứng Apigee
Phần này mô tả cách định cấu hình giao diện thích ứng của Apigee, bao gồm:
- Tùy chỉnh các biểu mẫu phương thức
- Tuỳ chỉnh chế độ cài đặt chung
Cách tuỳ chỉnh tính năng hỗ trợ biểu mẫu dạng phương thức:
Cổng thông tin sử dụng mô-đun hộp cát Biểu mẫu tự khởi động của Drupal để hiển thị các biểu mẫu Drupal dưới dạng phương thức. Theo mặc định, biểu mẫu đăng nhập và đăng ký sẽ là các phương thức. Bạn có thể tắt chức năng này để cho những biểu mẫu đó xuất hiện dưới dạng trang riêng lẻ.
- Đăng nhập vào cổng thông tin dành cho nhà phát triển với tư cách là người dùng có đặc quyền của quản trị viên.
- Chọn biểu mẫu Configuration > User UI > Bootstrap Modal (Cấu hình > Giao diện người dùng > Mô-đun tự khởi động) trong trình đơn quản trị Drupal.
- Bật hoặc tắt tính năng hỗ trợ phương thức cho biểu mẫu.
- Chọn Lưu cấu hình.
Cách tuỳ chỉnh chế độ cài đặt chung của giao diện thích ứng Apigee:
- Đăng nhập vào cổng thông tin của bạn với tư cách là người dùng có đặc quyền của quản trị viên hoặc tạo nội dung.
- Chọn Giao diện trong trình đơn quản trị Drupal. Danh sách các giao diện đã bật sẽ xuất hiện.
- Trong phần Apigee Response (giao diện mặc định) của trang, hãy chọn Cài đặt (không chọn nút Cài đặt ở đầu trang).
- Trang cài đặt cho giao diện thích ứng của Apigee sẽ xuất hiện.
- Bảng sau đây mô tả các vùng trên trang đó mà bạn có thể sử dụng để định cấu hình giao diện. Nếu bạn thay đổi bất kỳ chế độ cài đặt nào trong số này, hãy chọn Lưu cấu hình.
Khu vực Mục Nội dung mô tả Chế độ cài đặt khởi động
Thành phần
Kiểm soát việc hiển thị breadcrumb (tập hợp liên kết phân cấp), vị trí của trình đơn chính (còn gọi là Thanh điều hướng trong phần cài đặt) và việc hiển thị các kho lưu trữ khu vực:
- Breadcrumb (tập hợp liên kết phân cấp): Ẩn/hiện breadcrumb, bật/tắt đường liên kết đến Trang chủ bên trong breadcrumb.
- Thanh điều hướng: Thay đổi vị trí của Thanh điều hướng (trình đơn chính) thành các vị trí cố định/tĩnh/thông thường, giúp bố cục linh động hơn.
- Rồng vùng: Thêm một lớp giếng vào bất kỳ khu vực nào trên trang web để thêm nền tối hơn vào khu vực đó.
JavaScript
Kiểm soát việc hiển thị quảng cáo cố định cuối màn hình, cửa sổ bật lên và chú giải công cụ:
- Neo: Cố định các vị trí neo và cho phép cuộn mượt mà.
- Cửa sổ bật lên: Cửa sổ bật lên thêm các lớp phủ nội dung nhỏ vào bất kỳ phần tử nào. Bật/tắt cửa sổ bật lên và định cấu hình cách sử dụng cửa sổ bật lên.
- Chú giải công cụ: Định cấu hình cách sử dụng chú giải công cụ. Bạn có thể buộc mỗi chú giải công cụ hiển thị ở bên phải, bên trái, trên cùng hoặc dưới cùng của mỗi phần tử biểu mẫu và thiết lập các tuỳ chọn hiển thị khác.
Nâng cao
Kiểm soát cách cổng thông tin sử dụng BootstrapCDN để cập nhật các tệp giao diện Bootstrap. Bạn có thể tắt tính năng phụ thuộc của cổng thông tin trên BootstrapCDN, nhưng sau đó bạn phải tự triển khai khung Bootstrap.
Cài đặt DevConnect
Đặt thông báo chào mừng, màu mặc định và kích thước của biểu trưng xuất hiện trong trình đơn chính.
Ghi đè các chế độ cài đặt chung
Bật/tắt hiển thị
Bật và tắt chế độ hiển thị các khu vực khác nhau của cổng thông tin.
Chế độ cài đặt hình ảnh biểu trưng
Chỉ định hình ảnh hiển thị trong trình đơn chính.
Cài đặt biểu tượng lối tắt
Chỉ định hình ảnh hiển thị trong thanh địa chỉ của trình duyệt hoặc cho dấu trang trên cổng thông tin.
Tuỳ chỉnh giao diện Apigee DevConnect
Giao diện Apigee DevConnect là giao diện cổng thông tin mặc định cho các bản phát hành cũ của cổng thông tin. Bạn có thể nâng cấp giao diện này lên giao diện Apigee đáp ứng mới. Tuy nhiên, trước tiên, bạn phải đảm bảo rằng tất cả khối, mẫu và nội dung khác đều tương thích với Bootstrap 3 trước khi nâng cấp.
Cách tuỳ chỉnh các chế độ cài đặt chung của giao diện Apigee DevConnect:
- Đăng nhập vào cổng thông tin của bạn với tư cách là người dùng có đặc quyền của quản trị viên hoặc tạo nội dung.
- Chọn Appearance > Apigee DevConnect theme > Settings (Giao diện > Giao diện Apigee DevConnect > Cài đặt) trong trình đơn quản trị Drupal. Thao tác này sẽ hiển thị các chế độ cài đặt ban đầu cho giao diện. Các chế độ cài đặt màu được chỉ định dưới dạng giá trị thập lục phân.
- Thay đổi các chế độ cài đặt cho phù hợp với lựa chọn ưu tiên của bạn.
Ví dụ: thêm hoặc thay đổi thư chào mừng hoặc thay đổi màu nền của tiêu đề. Màu nền của tiêu đề ban đầu được đặt thành màu gần như màu cam (#FF4300). Bạn có thể thay đổi màu đó thành một màu khác như xanh lam (#0000FF). - Khi bạn thay đổi xong các chế độ cài đặt, hãy nhấp vào Lưu.
Tuỳ chỉnh một giao diện bằng cách tạo một giao diện phụ
Tất cả các tệp và tài sản xác định giao diện mặc định được vận chuyển bằng cổng thông tin đều nằm trong thư mục profiles/apigee/themes trong thư mục cài đặt cổng thông tin. Thư mục này nằm tại /var/www/html/profiles/apigee/themes nếu bạn đã cài đặt cổng ở vị trí mặc định.
Nếu muốn chỉnh sửa một giao diện để sửa đổi giao diện của trang web, bạn không nên sửa đổi trực tiếp các tệp giao diện trong profiles/apigee/themes. Nếu bạn làm như vậy, các thay đổi của bạn sẽ bị ghi đè vào lần tiếp theo bạn nâng cấp cổng thông tin.
Thay vào đó, hãy tạo một giao diện phụ của chủ đề mà bạn muốn sửa đổi bằng cách sao chép các tệp giao diện mặc định vào thư mục /sites/all/themes. Để biết hướng dẫn về các chủ đề phụ, hãy xem tài liệu của Drupal tại https://www.drupal.org/node/225125.
- Sao chép thư mục profiles/apigee/themes/apigee_responsive/apigee_responsive_starterkit vào thư mục /sites/all/themes.
- Đổi tên thư mục apigee_responsive_starterkit thành Your_TOPIC_NAME.
- Đổi tên tệp apigee_responsive_starterkit.info thành Your_TOPIC_NAME.info.
- Đổi tên css/apigee_responsive_starterkit.css thành css/YOUR_themes_NAME.css.
- Đổi tên js/apigee_responsive_starterkit.js thành Your_TOPIC_NAME.js.
- Chỉnh sửa tệp CỦA BẠN_SUBJECT_NAME.info và thay thế các dòng sau:
stylesheets[all][] = css/apigee_responsive_starterkit.css
script[] = js/apigee_responsive_starterkit.js
bằng:
stylesheets[all][] = css/YOUR_TOPIC_NAME] Script.cs. - Thay đổi tên của giao diện trong tệp CỦA BẠN_themes_NAME.info từ Bộ công cụ thích ứng dành cho người mới bắt đầu API thành TÊN CHỦ ĐỀ CỦA BẠN.
- Nếu bạn muốn thêm ảnh chụp màn hình mới cho giao diện, hãy thay thế tệp screenshot.png hiện có.
- Nếu bạn muốn thêm biểu trưng mới vào giao diện thì hãy thay thế tệp logo.png đang thoát.
- Nếu bạn muốn thêm biểu tượng trang web mới vào giao diện, hãy thay thế tệp favicon.ico hiện có.