it-swarm-vi.com

Cách thêm lớp CSS vào <body> tùy thuộc vào ngôn ngữ hoạt động

Tôi đang thiết kế một trang web đa ngôn ngữ nơi tôi muốn dựa trên một số phong cách của mình dựa trên ngôn ngữ hoạt động.

Hãy suy nghĩ như thế này:

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

Có ai biết một tiện ích mở rộng có khả năng thực hiện việc này không (ví dụ: thêm một lớp vào thẻ tùy thuộc vào ngôn ngữ hoạt động)?

8
smz

Thực sự có một giải pháp dễ dàng hơn cho vấn đề của bạn. Bất kỳ mẫu lành mạnh nào (bao gồm tất cả các mẫu đi kèm với Joomla CMS) sẽ đặt thuộc tính lang trên phần tử HTML. Điều này cho phép bạn sử dụng CSS :lang() pseudo-selector.

Ví dụ của bạn sẽ như thế này:

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

Điều này có một vài lợi thế. Đối với người mới bắt đầu, nó sẽ hoạt động bất kể Mẫu hay thậm chí với các giải pháp khác ngoài Joomla vì tất cả đều được thực hiện trong Trình duyệt.

Ngoài ra, nó sẽ hoạt động tốt với các phần được nhúng trong các ngôn ngữ khác, miễn là thuộc tính lang được đặt chính xác. Ví dụ:

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

Cuối cùng, Joomla không chỉ xuất ra ngôn ngữ mà là ngôn ngữ. Vì vậy, một trang web của bạn có thể sử dụng en-GB, một en-US khác và mẫu sẽ phản ánh điều đó. Sử dụng :lang(en) sẽ khớp, nhưng bạn cũng có thể sử dụng :lang(en-US) để chỉ nhắm mục tiêu tiếng Anh Mỹ.

14
Rouven Weßling

Tôi chỉ cần sửa đổi tệp index.php mẫu và thêm lớp trực tiếp vào đó.

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

Sẽ gán ngôn ngữ hiện tại là lớp cho thẻ body.

5
Bakual

Một điều nhỏ cần bổ sung liên quan đến phương pháp của Rouven; hỗ trợ trình duyệt tốt hơn cho các bộ chọn thuộc tính so với bộ chọn giả ngôn ngữ, vì vậy bạn có thể muốn xem xét sử dụng một cái gì đó như thế này để nhắm mục tiêu các kiểu của mình:

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

Trong tệp index.php của mẫu của bạn, bạn có thể thay thế thẻ <body> Hiện tại bằng cách sau:

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

Điều này sẽ xuất ra ví dụ như sau:

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