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

8

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

extensions

— smz
nguồn

1

Chỉ cần một điểm nhỏ; trong ví dụ này, bạn đang sửa đổi nội dung, không phải kiểu, dựa trên ngôn ngữ. Bạn đã có thể thực hiện điều này rất dễ dàng trong Joomla tất nhiên, không cần bất kỳ css nào cả.

— Seth Warburton

14

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 langthuộc tính trên thành phần HTML. Điều này cho phép bạn sử dụng :lang()bộ chọn giả CSS .

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 nhúng trong các ngôn ngữ khác, miễn là langthuộc tính đượ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 đó. Việc sử dụng :lang(en)sẽ khớp với một trong hai, 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ỹ.

— Rouven Weßling
nguồn

Cảm ơn câu trả lời của bạn, Rouven: rất thú vị và tôi cũng sẽ thử nghiệm điều này.

— smz

Chà, Rouven, vào cuối ngày tôi phải nói rằng tôi đã áp dụng phương pháp của bạn: rất thanh lịch, thậm chí không phải là sửa đổi nhỏ nhất cho mẫu của tôi và nó mở ra nhiều khả năng hơn bây giờ tôi đang cố gắng tận dụng (các mô-đun HTML tùy chỉnh đa ngôn ngữ và các bài báo ...). Cảm ơn một lần nữa và cảm ơn rất nhiều đến @Bakual và Lodder nữa, tất nhiên!

— smz

Tuyệt vời. Vui mừng khi nghe tôi có thể cung cấp một số cảm hứng.

— Rouven Weßling

Đây là một câu trả lời tuyệt vời, tôi không có ý tưởng!

— mã hóa

5

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.

— Bánh nướng
nguồn

Tuyệt vời: thậm chí còn dễ dàng hơn!

— smz

Cảm ơn Bakual: Tôi đã thêm mã của bạn vào mẫu của tôi và nó hoạt động hoàn hảo. Tôi "chấp nhận" câu trả lời của bạn.

— smz

Tôi đang tìm cách làm một cái gì đó tương tự để thêm bí danh vào lớp cơ thể. Nhưng tôi không muốn ghi đè lên mẫu trong trường hợp cập nhật. Tôi đã suy nghĩ về việc tạo một plugin hệ thống, nhưng có cách nào để thêm lớp này hay tôi chỉ nên sử dụng JavaScript?

— Eoin

3

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 {…}

— Seth Warburton
nguồn

Cảm ơn, @Seth! Tôi sẽ thử giải pháp nhắm mục tiêu của bạn. Làm thế nào về việc nhắm mục tiêu với cả hai? Điều này sẽ làm cho giải pháp thậm chí tương thích hơn?

— smz

Điều đó sẽ vượt quá khả năng của bộ chọn của bạn hoặc thêm sự phình to không cần thiết. Bộ chọn ngắn nhất luôn là lựa chọn tốt nhất vì nó giữ độ đặc hiệu thấp, cho phép bạn ghi đè dễ dàng nếu bạn cần. Công cụ chọn của bạn càng cụ thể, càng khó ghi đè, đó là lý do tại sao bạn không bao giờ nên sử dụng ID trong css của mình. Sử dụng cả hai sẽ không cung cấp cho bạn bất kỳ khả năng tương thích trình duyệt hơn.

— Seth Warburton

Xin chào, @Seth! Tôi đã thử giải pháp của bạn nhưng có vẻ như nó không hoạt động, ít nhất là với Joomla của tôi! Địa điểm. Theo như tôi hiểu thì chỉ dẫn duy nhất về ngôn ngữ được sử dụng nằm trong chỉ thị <html> có nội dung: <html xmlns = " w3.org/1999/xhtml " xml: lang = "it-it" lang = "it -it "> trong trường hợp tiếng Ý hoặc <html xmlns =" w3.org/1999/xhtml "xml: lang =" en-gb "lang =" en-gb "> trong trường hợp tiếng Anh. Điều này có đủ cho giải pháp nhắm mục tiêu của bạn? Có vẻ như không phải vậy ...

— smz

Có, bộ chọn này nhắm mục tiêu phần tử html dựa trên thuộc tính, trong trường hợp này là ngôn ngữ. Tuy nhiên, các thuộc tính phân biệt chữ hoa chữ thường nên bạn cần sử dụng: [lang = "en-gb"]

— Seth Warburton

1

Trong tệp index.php của mẫu của bạn, bạn có thể thay thế <body>thẻ hiện tại bằng thẻ 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">

— Nhà nghỉ
nguồn

Thật không may là tôi không thể bầu bạn vì tôi không có đủ danh tiếng ... :-(

— smz

1

Thật ra câu trả lời của @ Bakual là phương pháp tốt hơn. Thật nhanh chóng và dễ dàng hơn;)

— Tạm biệt

1

Đúng, không cần lấy ngôn ngữ. Nó đã có sẵn trong mẫu :)

— Bakual

Bạn không thể bỏ phiếu, nhưng bạn có thể chọn một bài đăng làm câu trả lời :) Hãy miễn là bạn muốn chọn (và nếu không có bài đăng nào trả lời câu hỏi của bạn - chỉ cần để lại nó). Các câu trả lời tốt nhất cuối cùng sẽ có nhiều phiếu nhất .... về lý thuyết!

— TryHarder

@Bakual - Sai lầm ngớ ngẩn của tôi. Lý do là tôi vừa trả lời một câu hỏi liên quan đến ngôn ngữ trên SO không liên quan đến mẫu lol

— Lodder