web-dev-qa-db-ja.com

RTL言語でRTLスタイルをロードする方法

私は多言語のウェブサイトを持っています。言語の1つはRTL言語です。Drupal 7でCSSをstyle.cssおよびRTL CSSからstyle-rtl.cssとデフォルトでdrupalもstyle-rtl.cssファイルをロードします、今in Drupal 8、多言語テーマ、どうすればDrupal RTLスタイルをRTL言語でロードするように指示できますか？

update私は this link を見つけましたが、ほぼ1400行のCSSファイルがあるため、それについてはわかりません。すべてのセレクターの前に[dir = "rtl"]を置きますか？ !!!

8i18n-l10ntheming
7
Yusef

Drupal 8はライブラリーを使用し、これらをテンプレートにロードできます。言語の方向に依存するライブラリを実現する1つの方法は、html_attributes['dir']のhtml.html.twig変数を使用し、値に応じて異なるライブラリをロードすることです。

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

いくつかのライブラリを設定します。

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

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

代替ソリューションを探している人のために：

テーマのlibraries.ymlファイルに新しいlibraryを定義し、特定のCSSまたはJSまたは必要なものを使用するようにそのライブラリをポイントすることもできます。

次のステップは、テーマ前処理などの前処理を使用して、特定の条件でそのライブラリーを使用するようにDrupal8に指示することです。

例：themename.libraries.ymlでデフォルトライブラリの下に新しいライブラリを定義する

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

次に、themename.themeファイルの前処理を使用して、ページの現在の方向を検出できます。

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

キャッシュをクリアすると、準備完了です

1
Sohail