So laden Sie den RTL-Stil in der RTL-Sprache


7

Ich habe eine mehrsprachige Website, eine der Sprachen ist eine RTL-Sprache. In Drupal 7 habe ich mein CSS in style.cssRTL-CSS style-rtl.csseingefügt und standardmäßig auch die Datei style-rtl.css geladen. In Drupal 8 habe ich jetzt eine mehrsprachige Wie kann ich Drupal anweisen, meinen RTL-Stil in RTL-Sprache zu laden?

Update Ich habe diesen Link gefunden , bin mir aber nicht sicher, da ich eine CSS-Datei mit fast 1400 Zeilen habe. Sollte ich [dir = "rtl"] vor alle Selektoren setzen? !!!

Antworten:


8

Drupal 8 verwendet Bibliotheken, die Sie in Vorlagen laden können. Eine Möglichkeit, sprachrichtungsabhängige Bibliotheken zu erreichen, besteht darin, die html_attributes['dir']Variable zu verwenden html.html.twigund je nach Wert unterschiedliche Bibliotheken zu laden:

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

Richten Sie einige Bibliotheken ein:

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

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

1

Für diejenigen, die nach einer alternativen Lösung suchen:

Sie können auch eine neue Definition libraryin libraries.ymlDatei Ihres Themas und zeigen , dass Bibliothek eine bestimmte CSS oder JS zu verwenden , oder was auch immer Sie brauchen.

Der nächste Schritt besteht darin, einen Vorprozess wie den Themenvorprozess zu verwenden, um Drupal8 anzuweisen, diese Bibliothek unter bestimmten Bedingungen zu verwenden.

Beispiel: Definieren einer neuen Bibliothek unter Ihrer Standardbibliothek inthemename.libraries.yml

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

Als nächstes können Sie die aktuelle Richtung Ihrer Seiten mit einem Vorprozess in der themename.themeDatei ermitteln:

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';
    }
}

Leeren Sie den Cache und Sie können loslegen


Danke, das hat bei mir funktioniert. Ich wollte nur darauf hinweisen, dass das Hinzufügen der Bibliothek zur Datei info.yml dazu führt, dass sie auf jeder Seite geladen wird, was für mehrsprachige Websites nicht erforderlich ist.
Achraf JEDAY

Sicher, aber ich sage nicht, dass Sie es zur Datei info.yml hinzufügen sollten, sondern zur Bibliotheksdatei. Sie können eine Bibliothek, die auf Ihren Anforderungen basiert, auch in Zweig einfügen, also liegt es an Ihnen
Sohail
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.