Hướng dẫn: Thêm bố cục trang tùy chỉnh vào trang web

Khi tạo trang web mới bằng không gian làm việc Trang, bạn có thể lựa chọn các bố cục trang được cung cấp. Trong một số trường hợp, có thể bạn cần tạo bố cục trang tùy chỉnh để hiển thị thông tin theo một định dạng nhất định hoặc để cung cấp giao diện người dùng chuyên biệt.

Trong hướng dẫn này, bạn sẽ tìm hiểu cách tạo bố cục trang tùy chỉnh bằng Liquid.

Tình huống ví dụ của chúng ta là xây dựng một mẫu hai cột có menu trang web chính làm điều hướng bên trái và nội dung trang ở bên phải.

Sau đây là các bước và tài nguyên sẽ được tạo để cung cấp bố cục trang tùy chỉnh:

• Chúng ta sẽ tạo một mẫu web cơ sở chung có mã tùy chỉnh để thiết lập bố cục trang cơ bản.
• Chúng ta sẽ tạo mẫu web thứ hai có mã bổ sung để thể hiện các tính năng mô-đun của mẫu web.
• Chúng ta cũng sẽ tạo một bản ghi mẫu trang tham chiếu đến mẫu web mà sẽ định cấu hình cách hiển thị bố cục trang trên trang web.
• Cuối cùng, chúng ta sẽ tạo trang web bằng bố cục trang tùy chỉnh.

Điều kiện tiên quyết

• Đăng ký hoặc dùng thử Power Pages. Nhận bản dùng thử Power Pages tại đây.
• Đã tạo trang web Power Pages. Tạo trang web Power Pages.
• Kiến thức cơ bản về HTML và Liquid.

Bước 1: Tạo mẫu web và viết mã mẫu Liquid

Trước tiên, chúng ta sẽ tạo mẫu web và viết mã mẫu Liquid. Chúng tôi rất có thể phải sử dụng lại một số thành phần phổ biến của mẫu này trong các mẫu trong tương lai. Vậy chúng ta sẽ tạo một mẫu cơ bản phổ biến mà sau đó chúng ta sẽ mở rộng mẫu cụ thể. Mẫu cơ sở sẽ cung cấp các liên kết đánh dấu đường dẫn và tiêu đề trang, cũng như xác định bố cục hai cột.

1. Truy cập Power Pages.

2. Trong studio thiết kế, chọn ... rồi chọn Quản lý cổng thông tin. Bạn sẽ cần sử dụng ứng dụng Quản lý cổng thông tin để tạo bản ghi mẫu web và nhập mã tùy chỉnh của mình.

   

3. Trong ứng dụng Quản lý cổng thông tin, cuộn đến phần Nội dung và chọn Mẫu web.

4. Từ màn hình Mẫu web hiện hoạt, hãy chọn Mới.

5. Đặt tên mẫu web là Bố cục hai cột.

   

6. Dán mã sau đây vào trường Nguồn.

   Bố cục 2 Cột (Mẫu Web)

   <div class=container>
     <div class=page-heading>
       <ul class=breadcrumb>
         {% for crumb in page.breadcrumbs -%}
           <li>
             <a href={{ crumb.url }}>{{ crumb.title }}</a>
           </li>
         {% endfor -%}
         <li class=active>{{ page.title }}</li>
       </ul>
       <div class=page-header>
         <h1>{{ page.title }}</h1>
       </div>
     </div>
     <div class=row>
       <div class=col-sm-4 col-lg-3>
         {% block sidebar %}{% endblock %}
       </div>
       <div class=col-sm-8 col-lg-9>
         {% block content %}{% endblock %}
       </div>
     </div>
   </div>
   

7. Chọn Lưu.

Bước 2: Tạo một mẫu web mới mở rộng mẫu bố cục cơ sở của chúng tôi

Chúng ta sẽ tạo một mẫu web để đọc bản ghi điều hướng từ trang web được liên kết (xem bên dưới). Chúng ta cũng sẽ mở rộng mẫu cơ sở đã tạo ở bước trước. Có thể sử dụng các mẫu web làm thành phần tái sử dụng được khi tạo các trang web nâng cao.

1. Trong ứng dụng Quản lý cổng thông tin, cuộn đến phần Nội dung và chọn Mẫu web.

2. Từ màn hình Mẫu web hiện hoạt, hãy chọn Mới.

3. Đặt tên mẫu web thành Điều hướng bên trái liên kết web.

   

   Điều hướng Trái Liên kết web (Mẫu Web)

   Lưu ý về cách mã sử dụng từ khóa Liquid extends để tích hợp mẫu bố cục cơ sở.

   {% extends 'Two Column Layout' %}
   
   {% block sidebar %}
     {% assign weblinkset_id = page.adx_navigation.id %}
     {% if weblinkset_id %}
       {% assign nav = weblinks[page.adx_navigation.id] %}
       {% if nav %}
         <div class=list-group>
           {% for link in nav.weblinks %}
             <a class=list-group-item href={{ link.url }}>
               {{ link.name }}
             </a>
           {% endfor %}
         </div>
       {% endif %}
     {% endif %}
   {% endblock %}
   
   {% block content %}
     <div id="mainContent" class = "wrapper-body" role="main">
       {% include 'Page Copy' %}
     </div>
   {% endblock %}
   

Bước 3: Tạo mẫu trang mới dựa trên mẫu web

Ở bước này, chúng tôi sẽ tạo một mẫu trang mới dựa trên mẫu trang mà chúng tôi đã tạo ở bước trước. Bắt buộc phải có mẫu trang để bố cục trang tùy chỉnh trở thành một tùy chọn có thể chọn khi tạo trang web mới.

1. Trong ứng dụng Quản lý cổng thông tin, cuộn đến phần Trang web và chọn Mẫu trang.

2. Từ màn hình Mẫu trang hiện hoạt, hãy chọn Mới.

3. Điền vào các trường.

   Trường	Giá_trị
   Tên	Nhập một tên.
   Trang web	Chọn trang web mà chủ đề sẽ được áp dụng. Đặt con trỏ vào trường rồi nhấn Enter trên bàn phím để hiển thị danh sách các tùy chọn có sẵn.
   Loại	Chọn mẫu web
   Mẫu Web	Chọn Điều hướng bên trái liên kết web (hoặc bất cứ tên nào bạn đặt cho mẫu web của mình).
   Dùng đầu trang và chân trang của website	Đã chọn.
   Là mặc định	Không được chọn.
   Tên bảng	Chưa chọn gì cả.
   Nội dung mô tả	Mô tả mẫu trang của bạn.

   

4. Chọn Lưu.

Bước 4: Tạo một trang web để hiển thị nội dung

1. Trong studio thiết kế, hãy chọn Đồng bộ hóa. Thao tác này sẽ mang đến các cập nhật đã thực hiện trong ứng dụng Quản lý cổng thông tin cho studio thiết kế.

2. Trong không gian làm việc Trang, hãy chọn + Trang.

3. Hộp thoại Thêm trang sẽ mở ra;

   1. Nhập Tên trang
   2. Từ Bố cục tùy chỉnh, hãy chọn bố cục trang tùy chỉnh của bạn.
   3. Chọn Thêm.

   

4. Thêm bất kỳ nội dung nào khác vào các phần có thể chỉnh sửa của trang.

Cấu hình trang bổ sung

Trong ví dụ này, chúng ta cần liên kết bản ghi điều hướng với trang nội dung để mã tùy chỉnh hiển thị menu ở phần điều hướng bên trái.

1. Trong studio thiết kế, chọn ... rồi chọn Quản lý cổng thông tin. Bạn sẽ sử dụng ứng dụng Quản lý cổng thông tin để thêm cấu hình bổ sung vào trang của mình.

2. Trong ứng dụng Quản lý cổng thông tin, hãy cuộn đến phần Nội dung và chọn Các trang web.

3. Định vị và mở trang đã tạo trước đó trong không gian làm việc Trang. Trang web gốc sẽ mở ra. Chúng ta sẽ cần thực hiện các thay đổi trong trang nội dung đã bản địa hóa có liên quan.

4. Cuộn xuống và trong phần Nội dung được bản địa hóa, hãy chọn trang web có nội dung đã bản địa hóa.

   

   Lưu ý

   Nếu có nhiều ngôn ngữ đã cấp phép, bạn sẽ cần cập nhật từng trang được bản địa hóa.

5. Đi đến phần Khác và chọn bộ liên kết web bạn muốn hiển thị trong trường Điều hướng.

   

6. Lưu thay đổi và quay lại studio thiết kế.

7. Chọn Bản xem trước rồi chọn Máy tính để bàn để xem trang tùy chỉnh của bạn có phần điều hướng bên đã triển khai.

   

Xem thêm

• Tạo bố cục trang tùy chỉnh
• Tổng quan về Liquid