Как добавить класс CSS в <body> в зависимости от активного языка

8

Я разрабатываю многоязычный сайт, на котором я хотел бы основывать некоторые из своих стилей на активном языке.

Подумайте как-то так:

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"}

Кто-нибудь знает расширение, способное на это (т.е. добавление класса в тег в зависимости от активного языка)?

extensions СМЗ
источник

1

Всего одна маленькая точка; в этом примере вы изменяете контент, а не стиль, основываясь на языке. Конечно, вы уже можете сделать это очень легко в Joomla, вообще не нужно никаких CSS.

Сет Уорбертон

14

На самом деле есть более простое решение вашей проблемы. Любой вменяемый шаблон (включая все шаблоны, поставляемые с CMS Joomla) будет устанавливать langатрибут для элемента HTML. Это позволяет вам использовать :lang()псевдо-селектор CSS .

Ваш пример будет выглядеть так:

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

Это имеет пару преимуществ. Начнем с того, что он будет работать независимо от шаблона или даже с решениями, отличными от Joomla, поскольку все это делается в браузере.

Также он будет хорошо работать со встроенными частями на других языках, если langатрибут установлен правильно. Например:

<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>

Наконец, Joomla выводит не только язык, но и локаль. Таким образом, один ваш сайт может использовать en-GB, другой en-US, и шаблон будет отражать это. Использование :lang(en)будет соответствовать либо, но вы также можете использовать :lang(en-US)для таргетинга только на американский английский.

Рувен Веслинг
источник

Спасибо за ваш ответ, Рувен: очень интересно, и я тоже поэкспериментирую с этим.

smz

Ну, Рувен, в конце дня я должен сказать, что я принял твой метод: очень элегантный, даже не малейшая модификация моего шаблона, и это открыло мне глаза на больше возможностей, которые я сейчас пытаюсь использовать (многоязычные пользовательские модули HTML) и статьи ...). Еще раз спасибо и большое спасибо @Bakual и Lodder, конечно же!

smz

Потрясающие. Рад слышать, что я мог предложить некоторое вдохновение.

Рувен Веслинг

Это блестящий ответ, я понятия не имел!

codinghands

5

Я бы просто изменил файл шаблонов index.php и добавил туда класс.

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

Назначил бы текущий язык как класс для тега body.

Bakual
источник

Круто: еще проще!

smz

Спасибо Bakual: я добавил ваш код в свой шаблон, и он отлично работает. Я «принял» ваш ответ.

smz

Я хочу сделать что-то похожее, чтобы добавить псевдоним в класс тела. Но я не хочу переопределять шаблон в случае обновлений. Я думал о создании системного плагина, но есть ли способ добавить этот класс, или я должен просто использовать JavaScript?

Йон

3

Одна небольшая вещь, которую нужно добавить в отношении метода Рувена; поддержка браузера лучше для селекторов атрибутов, чем для псевдоселектора языка, так что вы можете рассмотреть возможность использования чего-то подобного для целевых стилей:

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

Сет Уорбертон
источник

Спасибо @Seth! Я попробую ваше целевое решение. Как насчет таргетинга с обоими? Это сделает решение еще более совместимым?

smz

Это либо переопределит ваши селекторы, либо добавит ненужный наворот. Самый короткий селектор - всегда лучший выбор, поскольку он сохраняет специфичность низкой, что позволяет вам легко переопределить его, если вам нужно. Чем конкретнее ваш селектор, тем сложнее его переопределить, поэтому вам никогда не следует использовать идентификаторы в вашем CSS. Использование обоих не даст вам больше совместимости с браузером.

Сет Уорбертон

Здравствуйте @Seth! Я попробовал ваше решение, но, похоже, оно не работает, по крайней мере, с моей Joomla! сайт. Насколько я понимаю, единственное указание на используемый язык заключается в директиве <html>, которая гласит: <html xmlns = " w3.org/1999/xhtml " xml: lang = "it-it" lang = "it -it "> в случае итальянского языка или <html xmlns =" w3.org/1999/xhtml "xml: lang =" en-gb "lang =" en-gb "> в случае английского языка. Должно ли этого быть достаточно для вашего целевого решения? Это не так ...

smz

Да, этот селектор нацелен на элемент html, основанный на атрибуте, который в данном случае является языком. Однако атрибуты чувствительны к регистру, поэтому вам нужно использовать: [lang = "en-gb"]

Сет Уорбертон

1

В index.php вашего шаблона вы можете заменить текущий <body>тег следующим:

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

Это выведет следующее в качестве примера:

<body class="en-GB">

Лоддер
источник

К сожалению, я не могу проголосовать за тебя, так как у меня недостаточно репутации ... :-(

smz

1

На самом деле ответ @ Bakual - лучший метод. Это быстрее и проще;)

Лоддер

1

Да, нет необходимости выбирать язык. Это уже доступно в шаблоне :)

Bakual

Вы не можете голосовать, но вы можете выбрать пост в качестве ответа :) Потратьте столько времени, сколько хотите, и (если ни один пост не отвечает на ваш вопрос - просто оставьте его). Лучшие ответы в конечном итоге получат наибольшее количество голосов ... в теории!

TryHarder

@Bakual - моя глупая ошибка. Причина в том, что я только что ответил на связанный с языком вопрос о SO, который не включает шаблон lol

Lodder

Как добавить класс CSS в <body> в зависимости от активного языка

Ответы: