Làm cách nào để thêm tệp CSS chỉ vào trang trước?

Tôi đang cố gắng thêm một tệp CSS vào trang đầu. Tôi đã thấy Thêm biểu định kiểu (CSS) và JavaScript (JS) vào chủ đề Drupal 8 ; Tôi chỉ cần biết tên máy HOOK cho trang đầu.

function THEMENAME_preprocess_HOOK(&$variables) {
  $variables['#attached']['library'][] = 'CSSPATH';
}

Tôi nên sử dụng tên nào cho chức năng tiền xử lý, để thực hiện cuộc gọi Drupal cho trang trước?

Bạn có thể tìm thấy chính xác những gì bạn muốn trong chủ đề Thêm thư viện vào các trang cụ thể tại hướng dẫn này Drupal 8 Nguyên tắc cơ bản theo chủ đề , Phần 1

Để cho bạn một ví dụ thực tế, tôi sẽ giải thích với chủ đề Bartik, để bạn có thể thay đổi dễ dàng.

Tôi đã tạo một tập tin css cssfile.csstheo đường dẫn css/cssfile.css. Bây giờ tập tin CSS này tôi muốn sử dụng chỉ trên trang nhất.

• Bước 1: Thêm thư viện vào chủ đề: Thêm mã sau vào phầnbartik.libraries.yml

  css-filling: 
    css:
      theme:
        css/cssfile.css: {}
  

  Lưu ý: Ở đây tôi đã đặt tên css-fillingcho thư viện này nhưng bạn có thể đặt bất kỳ tên nào khác. Chúng tôi sẽ sử dụng tên này trong đường dẫn
  

• Bước 2: Đặt mã trong bartik.themethư viện vuông góc phía trên (cuối cùng là css) sẽ chỉ được thêm vào trang nhất,

  function bartik_preprocess_page(&$variables) {
    if ($variables['is_front']) {
      $variables['#attached']['library'][] = 'bartik/css-filling';
    }
  }
  

  Lưu ý: Bây giờ trong đoạn mã trên, điều quan trọng là đường dẫn, bartikmột phần xuất hiện themenamevà css-fillingxuất phát từ bước 1.

Mã này tôi đã thử nghiệm trong trang web thử nghiệm của mình và nó chỉ hoạt động trên trang nhất.

Bạn có thể đính kèm thư viện trong các mẫu, ví dụ html.html.twiglà một nơi lý tưởng để đính kèm các thư viện có điều kiện trên đường dẫn. Bạn có thể sử dụng các đề xuất mẫu, ví dụ html--front.html.twighoặc biểu thức twig.

Các câu trả lời khác xoay quanh tiền xử lý, điều này tốt, tuy nhiên tiền xử lý là một sự trừu tượng hóa và làm cho sự phát triển theo chủ đề trở nên mờ hơn, tức là nó chôn thông tin quan trọng trong một hàm PHP, thay vì rõ ràng và rõ ràng trong khuôn mẫu.

Tôi không nói tiền xử lý là xấu, chỉ có điều nó phụ thuộc phần lớn vào cách bạn muốn làm việc và mức độ mờ / trừu tượng mà bạn muốn chủ đề.

Để chỉ đính kèm thư viện cho trang trước, html.html.twigchúng ta có thể sử dụng nottoán tử và root_pathbiến làm điều kiện:

{{ not root_path ? attach_library('my_theme/my_library') }}

Nếu bạn tạo đề xuất mẫu, html--front.html.twigbạn có thể đính kèm thư viện vô điều kiện:

{{ attach_library('my_theme/my_library') }}

Hãy chắc chắn rằng bạn đã tạo css mà bạn muốn làm thư viện libraries.ymltrước tiên. Sau đó, bạn cần phải sử dụng hook_preprocess_page()như vậy:

/**
 * Implements hook_preprocess_HOOK() for page templates.
 */
function THEMENAME_preprocess_page(&$variables) {
  // Add page preprocess functions here.
  if ($variables['is_front'] == TRUE) {
    // Attach your css 
    // - replace "theme_name" with the name of your theme
    // - replace "library_name" with the name of what you called 
    //   this particular css library in libraries.yml
    $variables['#attached']['library'][] = 'theme_name/library_name'
  }
}

Bạn có thể tốt hơn là tạo một page--front.html.twigtệp và đính kèm nó ở đó thông qua libraries.ymltệp của bạn . Đây là cách tiếp cận ưa thích trong Drupal 8.