Chia sẻ qua

Bố cục trang tùy chỉnh trong Power Pages

  • Bài viết

Khi bạn tạo một trang web mới bằng studio thiết kế, bạn cần chọn bố cục trang. Không gian làm việc Pages cung cấp một tập hợp các bố cục trang được định cấu hình sẵn.

Chọn bố cục trang.

Bạn cũng có thể tạo bố cục trang tùy chỉnh của riêng mình bằng cách sử dụng HTML, Liquid, JavaScript và CSS.

Tiền bo

Chúng tôi đã tạo một loạt hướng dẫn và video để bạn học cách sử dụng Power Pages và cách tạo bố cục trang tùy chỉnh. Để biết thêm thông tin, hãy truy cập Hướng dẫn: Thêm bố cục trang tùy chỉnh.

Tạo bố cục trang tùy chỉnh

Để tạo trang tùy chỉnh, bạn sẽ cần làm theo các bước sau:

  • Tạo một mẫu web chứa mã tùy chỉnh của bạn.
  • Tạo và định cấu hình mẫu trang tương ứng sẽ xuất hiện dưới dạng bố cục trang tùy chỉnh khi tạo trang web mới trong không gian làm việc Pages.

Tạo mẫu web

Mẫu web sẽ chứa mã cho bố cục của bạn. Mã mẫu web có thể là sự kết hợp của Liquid, HTML, CSS, và JavaScript.

Các mẫu web có thể được đưa vào nội dung khác hoặc kết hợp với các mẫu khác để xây dựng một hệ thống mẫu mô-đun khi xây dựng ứng dụng web.

  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.

    Việc chọn dấu chấm lửng sẽ đưa bạn đến menu nơi bạn có thể chọn ứng dụng quản lý cổng thông tin.

  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.

    Tùy chọn + Menu mới từ trang Mẫu web hiện hoạt trong ứng dụng Quản lý cổng thông tin.

  5. Đ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.
    Nguồn Nội dung mã nguồn của mẫu web của bạn, mã thường là sự kết hợp của Liquid, HTML, CSS và JavaScript. Bạn sẽ tạo mã dựa trên yêu cầu của bạn.
    Loại MIME (Cuộn xuống để xem trường này) Trường này có thể cung cấp loại MIME cho nội dung của mẫu. Nếu không có loại nào được cung cấp thì sẽ giả định loại là text/html. Giá trị này sẽ chỉ được sử dụng trong những trường hợp mà mẫu được liên kết với mẫu trang và kiểm soát khả năng kết xuất tất cả nội dung cho mẫu đó.

    Các trường có thể điền cho Tệp Web Mới.

  6. Chọn Lưu.

Tạo một mẫu trang mới

Các mẫu web có thể được sử dụng cùng với các mẫu trang để tạo bố cục trang tùy chỉnh được sử dụng khi tạo các trang web mới trong studio thiết kế.

  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.

    Tùy chọn + Menu mới từ trang Mẫu trang hiện hoạt trong ứng dụng Quản lý cổng thông tin.

  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 mẫu web nơi chứa mã tùy chỉnh của bạn. Đặ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.
    Dùng đầu trang và chân trang của website Nếu thiết đặt này được chọn, mẫu web của bạn sẽ kiểm soát khả năng kết xuất mọi nội dung trang giữa đầu trang và cuối trang của toàn bộ trang web. Nếu bỏ chọn tùy chọn này, mẫu web của bạn sẽ chịu trách nhiệm kết xuất toàn bộ phản hồi trong trường hợp bạn đang kết xuất HTML. Điều này nghĩa là mọi nội dung từ loại tài liệu tới thẻ <html> gốc và mọi thứ ở giữa.
    Là mặc định Không được chọn.
    Tên bảng Chưa chọn gì.
    Nội dung mô tả Mô tả mẫu trang của bạn.

    Mẫu trang dựa trên mẫu web.

  4. Chọn Lưu.

Mặc dù mẫu web thường được sử dụng phổ biến nhất trong kết xuất HTML, việc kết xuất toàn bộ phản hồi (bằng cách bỏ chọn Sử dụng Đầu trang và Chân trang của Trang web) sẽ cung cấp cho bạn tùy chọn kết xuất mọi định dạng dựa trên văn bản mà mình chọn. Đây là nơi mà thuộc tính Loại MIME của mẫu web trở nên phù hợp. Nếu một mẫu trang không dùng đầu trang và chân trang của trang web được hiển thị, đầu trang Loại nội dung phản hồi HTTP sẽ được đặt thành Loại MIME của Mẫu Web được liên kết (văn bản/html sẽ được sử dụng nếu không có Loại MIME nào được cung cấp.), mang đến nhiều tùy chọn để hiển thị nội dung không phải HTML bằng cách sử dụng Liquid. Trường hợp sử dụng phổ biến nhất là kết xuất nguồn cấp dữ liệu RSS, bằng cách đặt Loại MIME của application/rss+xml.

Tạo một trang web bằng cách sử dụng mẫu tùy chỉnh

  1. Trong Studio thiết kế, trong không gian làm việc Pages, chọn + Trang.

  2. 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.

    Chọn bố cục tùy chỉnh khi tạo một trang web mới.

  3. Chọn Xem trước để xem trang tùy chỉnh của bạn trên trang web.

Xem thêm