it-swarm-id.com

Cara menambahkan kelas CSS ke <body> tergantung pada bahasa aktif

Saya merancang situs multibahasa di mana saya ingin mendasarkan beberapa gaya saya pada bahasa aktif.

Pikirkan sesuatu seperti ini:

body.en-uk li.artist:before {content:"Artist: "}
body.it-it li.artist:before {content:"Artista: "}
body.de-de li.artist:before {content:"Künstler"}

Apakah ada yang tahu ekstensi yang mampu melakukan ini (mis. Menambahkan kelas ke tag tergantung pada bahasa aktif)?

8
smz

Sebenarnya ada solusi yang lebih mudah untuk masalah Anda. Template waras apa saja (termasuk semua templat yang datang dengan CMS Joomla) akan mengatur atribut lang pada elemen HTML. Ini memungkinkan Anda menggunakan CSS :lang() pseudo-selector.

Contoh Anda akan terlihat seperti ini:

li.artist:lang(en):before {content:"Artist: "}
li.artist:lang(it):before {content:"Artista: "}
li.artist:lang(de):before {content:"Künstler"}

Ini memiliki beberapa keunggulan. Sebagai permulaan, ini akan berfungsi terlepas dari Templat atau bahkan dengan solusi selain Joomla karena semuanya dilakukan di Browser.

Juga akan berfungsi dengan baik dengan bagian yang disematkan dalam bahasa lain, selama atribut lang diatur dengan benar. Sebagai contoh:

<html lang="en">
  <head>
    <style>
     blockquote:lang(de) { color: red; }
     blockquote:lang(en) { color: red; }
    </style>
  </head>
  <body>
    <p>A famous German quote is:</p>
    <blockquote lang="de">
      <p>Den Wald vor lauter Bäumen nicht sehen</p>
    </blockquote>
    <p>A famous English quote is:</p>
    <blockquote>
      <p>Listen to many, speak to a few.</p>
    </blockquote>
  <body>
</html>

Terakhir, Joomla tidak hanya menampilkan bahasa tetapi juga lokal. Jadi satu situs Anda mungkin menggunakan en-GB, yang lain di AS dan templat akan mencerminkannya. Menggunakan :lang(en) akan cocok, tetapi Anda juga bisa menggunakan :lang(en-US) untuk hanya menargetkan Bahasa Inggris Amerika.

14
Rouven Weßling

Saya hanya akan memodifikasi file templat index.php dan menambahkan kelas langsung di sana.

<body class="<?php echo $this->language; ?>">

Akan menetapkan bahasa saat ini sebagai kelas ke tag tubuh.

5
Bakual

Satu hal kecil untuk ditambahkan sehubungan dengan metode Rouven; dukungan browser lebih baik untuk pemilih atribut daripada untuk pemilih pseudo bahasa, jadi Anda mungkin ingin mempertimbangkan untuk menggunakan sesuatu seperti ini untuk menargetkan gaya Anda:

[lang="en-GB"] .artist {…}
3
Seth Warburton

Di index.php dari templat Anda, Anda dapat mengganti tag <body> Saat ini dengan yang berikut:

<?php $lang = JFactory::getLanguage(); ?>
<body class="<?php echo $lang->getTag(); ?>">

Ini akan menampilkan yang berikut sebagai contoh:

<body class="en-GB">
1
Lodder