Drupal - Chủ đề & Bố cục

Trong chương này, chúng ta hãy nghiên cứu về Themes and Layouts. Drupal sẽ cài đặtBartikchủ đề làm chủ đề mặc định trong khi cài đặt. Bạn có thể chọn các chủ đề trả phí hoặc miễn phí từ trang web chính thức của Drupal. Nói chung, bố cục là sự sắp xếp của văn bản và đồ họa. Bạn nên chọn một chủ đề, lưu ý các bố cục khác nhau để sử dụng trên trang web của bạn.

Step 1- Truy cập trang web chính thức của Drupal và nhấp vàoGet Started.

Step 2 - Bấm vào All Themes như hiển thị trong màn hình sau đây.

Step 3- Bạn sẽ nhận được một danh sách các chủ đề. Chọn chủ đề bạn chọn (hãy để chúng tôi chọnAdaptive theme vì nó bao gồm Layout & General Settings, sẽ được đề cập sau trong chương này) và nhấp vào Version như hiển thị trong màn hình sau đây.

Step 4 - Tiếp theo, nhấp chuột phải Download file và sao chép địa chỉ liên kết như hiển thị trong màn hình sau.

Step 5 - Bạn cũng có thể tải xuống chủ đề trực tiếp bằng cách nhấp vào archive file và mô-đun sẽ được tải xuống cục bộ trên máy tính của bạn như hiển thị trong màn hình sau.

Step 6 - Đi tới Appearance và bấm vào Install new theme như hiển thị trong màn hình sau đây.

Step 7 - Bạn có thể dán địa chỉ liên kết mà bạn đã sao chép vào step (4) và nhấp vào nút cài đặt như hiển thị trong màn hình sau đây.

Step 8 - Bạn cũng có thể tải lên kho lưu trữ chủ đề, thay vì sao chép địa chỉ liên kết, nếu bạn đã tải xuống và nhấp vào Install như hiển thị trong màn hình sau đây.

Step 9 - Màn hình sau xuất hiện, chờ cho đến khi cài đặt hoàn tất.

Step 10 - Tiếp theo, bấm Enable newly added themes như hiển thị trong màn hình sau đây.

Step 11- Theo mặc định, các chủ đề bị tắt. Để kích hoạt chúng, hãy nhấp vàoEnable and set default như hiển thị trong màn hình sau đây.

Step 12 - Bấm vào Settings như được hiển thị trong màn hình sau để thiết lập giao diện cho trang web của bạn.

Step 13 - Sự Layout & General Settings tùy chọn bật lên trên màn hình, trong Adaptive theme bao gồm Standard layout, Tablet Layout, Smalltouch layout và Panels & Gpanels. Các tùy chọn này kiểm soát cài đặt hiển thị cho chủ đề AT Admin hiện tại đã được sử dụng. Khi trang web của bạn hiển thị chủ đề, các cài đặt này sẽ được sử dụng. Bây giờ, chúng ta hãy thảo luận từng bố cục một.

Step 14 - Trong Standard layout bạn có thể chọn bố cục cho máy tính để bàn, máy tính xách tay và các thiết bị màn hình lớn khác.

Choose sidebar positions - Bạn có thể chọn vị trí thanh bên bằng cách nhấp vào nút radio.
Set the width of each sidebar - Bạn có thể đặt chiều rộng của thanh bên thứ nhất và thanh bên thứ hai và đơn vị tính bằng% hoặc px hoặc em.
Set the page width - Bạn có thể đặt chiều rộng của trang.
Set a max width −Bạn có thể chọn hoặc bỏ chọn để đặt chiều rộng tối đa.
Media query for this layout - Truy vấn phương tiện xác định các quy tắc kiểu khác nhau cho các thiết bị phương tiện khác nhau và theo mặc định cho bố cục này sẽ là 1025px.

Step 15 - Tiếp theo, bấm Tablet Layoutnhư hiển thị trong màn hình sau đây. Các thiết bị máy tính bảng sẽ có hai hướngLandscape và Portrait. Bạn có thể định cấu hình một bố cục khác nhau cho từng hướng.

Dưới Landscape tablet và Portrait tabletbạn có thể chọn vị trí thanh bên, chiều rộng của mỗi thanh bên và chiều rộng trang. Truy vấn phương tiện choLandscape tabletsẽ có chiều rộng tối thiểu: 769px và chiều rộng tối đa: 1024px. Đối vớiPortrait tablet nó sẽ có chiều rộng tối thiểu: 581px và chiều rộng tối đa: 768px

Step 16 - Bây giờ, nhấp vào Smalltouch Layout như hiển thị trong màn hình sau đây. Smalltouch layout cũng sẽ có hai định hướng Landscape và Portrait. Bạn có thể định cấu hình một bố cục khác nhau cho từng hướng.

Trong Landscape Smalltouchbạn có thể chọn vị trí thanh bên và đặt chiều rộng. CácPortrait Smalltouchluôn hiển thị trong một cột với các thanh bên xếp chồng lên nhau theo chiều ngang bên dưới nội dung chính. Truy vấn phương tiện choLandscape Smalltouch sẽ có chiều rộng tối thiểu: 321px và chiều rộng tối đa: 580px và cho Portrait Smalltouch nó sẽ là max-width: 320px.

Step 17 - Tiếp theo, bấm Panels & Gpanelsnhư hiển thị trong màn hình sau đây. Chủ đề thích ứng hỗ trợ bố cục Bảng điều khiển và Gpanel đáp ứng. Để sử dụng khả năng này, bạn có thể sử dụng mô-đun Panels , Display Suite (với Panels) hoặc các bố cục Gpanels gốc của chủ đề thích ứng .

Bạn có thể chọn các tùy chọn cho từng phạm vi thiết bị và bố trí loại của chúng. Hãy để chúng tôi xem từng cái một.

Dưới Standard layoutbạn có thể chọn các bố cục bạn muốn sử dụng khi trang web đang được xem ở bố cục tiêu chuẩn. Bằng cách nhấp vàoTWO, THREE, FOUR, FIVE, SIX or INSET, bạn có thể chọn cách sắp xếp cột như trong màn hình sau.