Cách tải kiểu RTL bằng ngôn ngữ RTL

Tôi có một trang web đa ngôn ngữ, một trong những ngôn ngữ là ngôn ngữ RTL, trong Drupal 7 Tôi đã đặt CSS của mình style.cssvà CSS RTL style-rtl.cssvà mặc định drupal cũng tải tệp style-rtl.css, Bây giờ trong Drupal 8, tôi có một ngôn ngữ đa ngôn ngữ chủ đề, làm thế nào tôi có thể bảo Drupal tải phong cách RTL của mình bằng ngôn ngữ RTL?

cập nhật Tôi tìm thấy liên kết này nhưng tôi không chắc về điều đó vì tôi có tệp CSS với gần 1400 dòng, tôi nên đặt [dir = "rtl"] trước tất cả các bộ chọn? !!!

Drupal 8 sử dụng các thư viện và bạn có thể tải chúng trong các mẫu. Một cách để đạt được các thư viện phụ thuộc hướng ngôn ngữ là sử dụng html_attributes['dir']biến trong html.html.twigvà tải các thư viện khác nhau tùy thuộc vào giá trị:

{% if html_attributes['dir'] == 'ltr' %}
  {{ attach_library('your_theme_name/styles') }}
{% elseif html_attributes['dir'] == 'rtl' %}
  {{ attach_library('your_theme_name/styles_rtl') }}
{%- endif -%}

Thiết lập một vài thư viện:

styles:
  version: 8.x-1.0
  css:
    theme:
      css/styles.css: {}

styles_rtl:
  version: 8.x-1.0
  css:
    theme:
      css/styles-rtl.css: {}

Đối với những người đang tìm kiếm một giải pháp thay thế:

Bạn cũng có thể định nghĩa một tệp mới librarytrong libraries.ymlchủ đề của mình và chỉ ra thư viện đó để sử dụng CSS hoặc JS nhất định hoặc bất cứ thứ gì bạn cần.

Bước tiếp theo là sử dụng một tiền xử lý như tiền xử lý chủ đề để báo cho Drupal8 sử dụng thư viện đó trong một điều kiện cụ thể.

Ví dụ: Xác định thư viện mới bên dưới thư viện mặc định của bạn trongthemename.libraries.yml

rtl:
  version: VERSION
  css:
    theme:
      assets/css/themename.style-rtl.css: {}

Tiếp theo, bạn có thể phát hiện hướng hiện tại của các trang của mình bằng một tiền xử lý trong themename.themetệp:

function themename_preprocess_html (&$variables) {
    // Load specific library for pages with html attribute of RTL
    if ($variables['html_attributes']['dir'] == 'rtl') {
          $variables['#attached']['library'][] = 'themename/rtl';
    }
}

Xóa bộ nhớ cache và bạn tốt để đi