Trao đổi về dự án
Partitech Sonata Extra Bundle

Gói Sonata Extra: cấu hình các bố cục của Sonata Page

Giới thiệu Cấu hình các bố cục của Sonata Page là một bước quan trọng để tạo ra một trang web có cấu trúc tốt và hấp dẫn về mặt trực quan. Hướng dẫn này sẽ giúp bạn hiểu quá trình cấu hình bố cục trong Sonata Page. Yêu cầu tiên quyết Trước khi tiếp tục, hã...

Được viết bởi Géraud Bourdin 3 phút đọc

Giới thiệu

Cấu hình các bố cục của Sonata Page là một bước quan trọng để tạo ra một trang web có cấu trúc tốt và hấp dẫn về mặt trực quan. Hướng dẫn này sẽ giúp bạn hiểu quá trình cấu hình bố cục trong Sonata Page.

Yêu cầu tiên quyết

Trước khi tiếp tục, hãy đảm bảo rằng bạn đã đọc tài liệu chính của SonataPage : Đọc tài liệu của SonataPage

Các bước cài đặt

Bước 1: xác định cấu hình bố cục của bạn

Bắt đầu bằng cách định nghĩa bố cục của bạn trong một tệp cấu hình YAML. Đây là một ví dụ:

partitech_index:
  path: 'demo_index.html.twig'
  name: 'Partitech Index'
  containers:
    logo:
      name: Logo
    header:
      name: Header
    recherche:
      name: Recherche
    content:
      name: Contenu
    footer:
      name: Footer
  matrix:
    layout: |
      LLHHHHHHHHHHHHHHHHRR
      CCCCCCCCCCCCCCCCCCCC
      CCCCCCCCCCCCCCCCCCCC
      CCCCCCCCCCCCCCCCCCCC
      CCCCCCCCCCCCCCCCCCCC
      CCCCCCCCCCCCCCCCCCCC
      CCCCCCCCCCCCCCCCCCCC
      FFFFFFFFFFFFFFFFFFFF
    mapping:
      L: logo
      H: header
      R: recherche
      C: content
      F: footer

Bước 2: cấu hình mẫu chính

Định nghĩa đường dẫn tới mô hình chính của bạn. Mô hình này sẽ được sử dụng để hiển thị toàn bộ trang:

  • Đường dẫn: layout_partitech_index.html.twig

Bước 3: cấu hình các container

Xác định các container trong cấu hình. Các container là các phần trong giao diện của bạn như logo, tiêu đề, nội dung, v.v.

  • Container: Xác định các container và gán tên cho chúng để dễ dàng nhận biết.

Bước 4: trả các container vào trong mẫu

Đặt những container này vào mẫu chính của bạn bằng cách sử dụng cú pháp sau:

{{ sonata_block_render_event('breadcrumb', { 'context': 'logo', 'current_uri': app.request.requestUri }) }}
{{ sonata_block_render_event('breadcrumb', { 'context': 'header', 'current_uri': app.request.requestUri }) }}
{{ sonata_block_render_event('breadcrumb', { 'context': 'recherche', 'current_uri': app.request.requestUri }) }}
{{ sonata_block_render_event('breadcrumb', { 'context': 'content', 'current_uri': app.request.requestUri }) }}
{{ sonata_block_render_event('breadcrumb', { 'context': 'footer', 'current_uri': app.request.requestUri }) }}

Bước 5: cấu hình ma trận và ánh xạ

Cấu hình ma trận để thể hiện bố cục nội dung và ánh xạ các mã bố cục (L, H, R, C, F) với các hộp chứa tương ứng.

  • Ma trận: Đây là đại diện trực quan của cách bố trí mô hình của bạn, điều này giúp chọn các container trong giao diện quản trị Sonata.
  • Mapping: Giúp liên kết các mã bố trí của ma trận với các container đã được định nghĩa.

img.png

Kết luận

Bằng cách làm theo những bước này, bạn sẽ có một cấu hình bố cục được sắp xếp hợp lý cho SonataPage của mình. Cấu hình này không chỉ làm cho các trang của bạn nhất quán về mặt hình ảnh mà còn hợp lý hóa quy trình làm việc của bạn trong việc quản lý nội dung và bố cục của các trang.

Lời khuyên bảo trì

Đặt tên cho các hộp chứa theo vai trò biên tập của chúng thay vì vị trí hiển thị. Một ma trận ổn định (header, main, aside, footer) chịu được các thay đổi về đồ họa tốt hơn và tạo điều kiện thuận lợi cho việc tái sử dụng các khối giữa các trang.

Chia sẻ bài viết