Làm cách nào để ghi đè mẫu Twig trong Drupal 8?

Tôi muốn có một tiêu đề khác khi mô-đun tùy chỉnh của tôi đang hoạt động. Mã tiêu đề của tôi nằm trong chủ đề của tôi page.html.twig. Tôi muốn ghi đè mẫu đó trong mô-đun của riêng mình

Có hai bước

1. Tạo mẫu mới trong mô-đun của bạn
2. Yêu cầu mô-đun ghi đè cùng một mẫu trong chủ đề với hook_theme_registry_alter trong tệp .module của tôi

Tạo mẫu page.html.twig mới

Sao chép mẫu page.html.twig hiện có từ chủ đề vào thư mục /templates trong mô-đun của bạn mà chúng tôi sẽ gọi là my_module. Thực hiện những thay đổi bạn cần

Ghi đè mẫu của chủ đề

Các mẫu chủ đề sẽ được ưu tiên hơn các mẫu mô-đun. Chúng tôi phải sử dụng hook_theme_registery_alter trong tệp .module của mô-đun tùy chỉnh của chúng tôi

Trong page.html.twig1

/**
 * Implements hook_theme_registry_alter
 */
function my_module_theme_registry_alter[&$theme_registry] {
  $theme = \Drupal::theme[]->getActiveTheme[]->getName[];
  if [$theme == 'my_theme'] {
    $theme_registry['page']['path'] = drupal_get_path['module', 'my_module'] . '/templates';
  }
}

Thay đổi my_module và page.html.twig3 được in đậm bằng tên máy của mô-đun và chủ đề của bạn

Tôi muốn đảm bảo rằng mô-đun của tôi không ghi đè chủ đề quản trị. Vì vậy, trình bao bọc page.html.twig4 sẽ kiểm tra chủ đề phù hợp trước

Nếu bạn đặt mẫu của mình trong một thư mục con như page.html.twig5 trong dòng page.html.twig6 từ page.html.twig7 đến page.html.twig8

Trong bài đăng này, bạn sẽ tìm hiểu cách tạo chủ đề cho các chế độ xem Drupal 8 bằng cách ghi đè các mẫu chế độ xem mặc định và sử dụng đánh dấu của riêng chúng tôi để tạo đàn accordion [dựa trên ]. Chúng tôi sẽ bắt đầu bằng cách xác định một chủ đề tùy chỉnh cho trang web Drupal 8 mới được cài đặt của chúng tôi và thêm các tệp css và javascript bootstrap 3

Đây là tất cả những gì chúng ta cần để tạo một chủ đề mới

    ├── demotheme.info.yml
    ├── demotheme.libraries.yml
    ├── css
    │   ├── bootstrap-theme.min.css
    │   └── bootstrap.min.css
    └── js
        └── bootstrap.min.js

Sau đó, chúng tôi sẽ tạo một chế độ xem mới từ "quản trị viên/cấu trúc/lượt xem/thêm" để hiển thị các bài viết được thêm mới nhất

• Xem thông tin cơ bản. Chúng tôi sẽ đặt tên cho chế độ xem của mình là "Bài báo Accordion" [tên máy. "articles_accordion"]
• Giao diện cài đặt. Chọn [Hiển thị. Nội dung], [thuộc loại. Bài báo] và [sắp xếp theo. Mới đầu]
• Cài đặt trang. Kiểm tra "Tạo trang" và đặt "Tiêu đề trang" và "Đường dẫn" theo ý thích của bạn. Trong "Cài đặt hiển thị trang", chọn [Định dạng hiển thị. danh sách chưa định dạng], [của. lĩnh vực]
• Nhấp vào "Lưu và chỉnh sửa"

Đây là một ảnh chụp màn hình cho chế độ xem cài đặt ban đầu của chúng tôi

Sau khi lưu chế độ xem, chúng tôi sẽ nhấp vào "Nội dung. Tiêu đề" và bỏ chọn "Liên kết đến Nội dung", sau đó thêm trường "Nội dung"

Đây là ảnh chụp màn hình để xem cài đặt cuối cùng

Hiểu các mẫu xem

Các mẫu mặc định của chế độ xem được đặt trong thư mục "/core/modules/views/templates/"

Mỗi chế độ xem sử dụng tối thiểu hai mẫu

• Mẫu đầu tiên là "lượt xem-lượt xem. html. cành cây". Mẫu này được sử dụng cho tất cả các chế độ xem và chứa bố cục cho chế độ xem. [xem nội dung, đầu trang, chân trang, biểu mẫu hiển thị và tệp đính kèm]
• Mẫu thứ hai là mẫu kiểu. Mẫu được sử dụng mặc định sẽ thay đổi dựa trên kiểu xem được áp dụng [lưới, bảng, danh sách html hoặc không được định dạng]
  • lưới. lượt xem-xem-lưới. html. cành cây
  • Bàn. lượt xem-xem-bảng. html. cành cây
  • Danh sách HTML. lượt xem-xem-danh sách. html. cành cây
  • chưa định dạng. lượt xem-xem-không được định dạng. html. cành cây
• Mẫu thứ ba là "lượt xem-lượt xem. html. cành cây". Mẫu này chỉ được sử dụng nếu kiểu hàng xem được đặt thành "Trường". Mẫu này chịu trách nhiệm lặp qua các trường có sẵn và in các trình bao bọc, nhãn và đánh dấu trường
• Mẫu thứ tư là "view-view-field. html. cành cây". Mẫu này chỉ được sử dụng nếu kiểu hàng xem được đặt thành "Trường". Đây là mẫu cuối cùng và chịu trách nhiệm in từng đánh dấu trường

Đặt tên cho các mẫu xem

Mỗi loại mẫu xem ở trên có thể được ghi đè bằng nhiều tên khác nhau. Tên mẫu là sự kết hợp của [tên mẫu cơ sở, tên máy xem, loại hiển thị xem và id hiển thị xem - được phân tách bằng 2 dấu gạch nối "--"]

Sau đây là các tên mẫu có thể được sắp xếp theo mức độ ưu tiên

• [tên mẫu cơ sở]--[xem tên máy]--[xem id hiển thị]. html. cành cây
• [tên mẫu cơ sở]--[xem tên máy]--[xem loại hiển thị]. html. cành cây
• [tên mẫu cơ sở]--[xem loại hiển thị]. html. cành cây
• [tên mẫu cơ sở]--[xem tên máy]. html. cành cây
• [tên mẫu cơ sở]. html. cành cây

Ví dụ; . html. twig" cho chế độ xem của chúng tôi, các tên mẫu sau đây là hợp lệ

• [tên mẫu cơ sở]--[xem tên máy]. html. cành cây
• lượt xem-xem-bài viết-accordion--trang. html. cành cây
• lượt xem-xem-trang. html. cành cây
• lượt xem-xem-bài viết-accordion. html. cành cây
• lượt xem. html. cành cây

Xây dựng Bootstrap Accordion của chúng tôi

Để xây dựng phiên bản đàn accordion bootstrap của chúng tôi, chúng tôi sẽ cần ghi đè "lượt xem-lượt xem-không được định dạng. html. twig" [vì đây là phong cách được sử dụng] và "view-view-fields. html. cành cây"

Cách dễ nhất để bắt đầu là sao chép các mẫu từ thư mục /core/modules/views/templates vào thư mục chủ đề của chúng tôi và sau đó đổi tên thành "views-view-unformatted. html. twig" thành "view-view-unformatted--articles-accordion--page-1. html. twig" và "view-view-fields. html. twig" thành "lượt xem-lượt xem--bài viết-accordion--trang. html. cành cây"

{% cho hàng trong hàng %} {% set row_classes = [ default_row_class?

{{ chèo thuyền. nội dung }}

{% endfor %}

{{ lĩnh vực. cơ thể người. nội dung }}

Đây là cách đàn accordion của chúng ta trông như thế nào