Tại sao sử dụng addStyleSheet hoặc JHtml :: bản định kiểu chỉ liên kết một tệp CSS?

9

Theo trang wiki Thêm Javascript và CSS vào Trang , bạn có thể thêm biểu định kiểu addStyleSheetnhư thế này:

$document = JFactory::getDocument();
$document->addStyleSheet($url);

Hoặc JHtml::stylesheetnhư thế này:

JHtml::stylesheet($url, array(), true);

Nhưng trang wiki Tạo Mẫu cơ bản hướng dẫn người học bao gồm các bảng định kiểu như thế này:

<head>
    <jdoc:include type="head" />
    <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css">
</head>

Điều này bỏ qua addStyleSheetvà JHtml::stylesheet. Đây có phải là một ý tưởng tốt? Khi nào bạn sẽ sử dụng cái trước và khi nào bạn sẽ sử dụng cái trước?

Lưu ý: JHtml::_("script", …) và JHtml::_("stylesheet", …)gần như chính xác như JHtml::scriptvà JHtml::stylesheet. Xem những gì JHtml::_làm .

jhtml jfactory

— Flimm
nguồn

Câu hỏi liên quan hỏi về Javascript: j Joomla.stackexchange.com/q/325/5239

— Flimm

7

JHtmlthường được sử dụng trong các tiện ích mở rộng vì điều đó có nghĩa là ghi đè có thể được thực hiện, đây là một tính năng thực sự tốt nếu bạn là nhà phát triển. Nó cũng mở rộng $document->...bằng cách thêm một số chức năng bổ sung.

Đây là một ví dụ:

/js
   /script.js
   /script.min.js

Khi sử dụng JHtml, các minified phiên bản của kịch bản sẽ được nạp để giảm thời gian tải trang. Khi bạn kích hoạt chế độ debug trong Global Configuration, nó sẽ được tải unminified phiên bản của tập tin để làm cho nó có thể đọc được.

Bạn không thể ghi đè một mẫu giống như cách bạn có thể mở rộng, vì vậy rất nhiều mẫu sử dụng <link>vì mọi ghi đè có thể được thực hiện đơn giản bằng cách thêm custom.csstệp, sau đó thêm mã của bạn vào đó. Do đó, sử dụng các <link>thẻ gốc nhanh hơn sau đó sử dụng API Joomla để tải tệp CSS

— Nhà nghỉ
nguồn

Vì vậy, lợi thế duy nhất của việc sử dụng JHtmlcho một mẫu là để có được thu nhỏ?

— Flimm

@Flimm - Hãy xem ở đây, nơi nó sẽ giải thích chi tiết hơn một chút: docs.j Joomla.org/J3.x:Adding_JavaScript_and_CSS_to_the_page

— Lodder

Đó là liên kết trong câu hỏi của tôi :) Tôi chỉ muốn làm rõ vì có vẻ lạ khi bạn sẽ viết <link ...>mã directyl.

— Flimm

1

Trong một mẫu, sẽ rất tốt để làm điều này vì bạn không thể ghi đè lên một mẫu thực tế theo cách bạn có thể mở rộng, do đó, việc nhập một tài sản có thể được thực hiện mà không cần API Joomla;)

— Lodder

1

@Flimm JHtml cũng hoạt động với các tệp MD5SUM, $ document-> addStyleSheet thì không. Magazine.j

— Joomla.org/issues/su-nov-2014/item/ từ

6

Ngoài ra, những lợi ích lớn nhất mà tôi đã tìm thấy là tất cả các tệp CSS / JSS nằm trong cùng một mảng tại một thời điểm.

Điều này có vẻ không phải là một lợi ích, nhưng một đoạn trích từ một ví dụ khác

<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css">

Sau này khi bạn muốn thay đổi system.css, bạn sẽ thực hiện thay đổi và sau đó nhận ra rằng người dùng của bạn có system.cssbộ nhớ cache cũ với nội dung mới của bạn, nghĩa là bạn sẽ phải thay đổi mã thành một URL khác một chút (hoặc giảm thời gian bộ đệm của bạn và làm cho người dùng tải xuống thường xuyên hơn)

Khi bạn sử dụng phương thức JHTML khi mẫu được tạo, sau đó bạn có thể tạo "phiên bản" của tệp CSS / JS (filemtime là một cách tốt để sử dụng hoặc git commit ID, v.v.) để thay đổi nội dung ngay lập tức mang lại cho css mới tất cả mọi người để xem trang web của bạn. Thời gian bộ nhớ cache dài + tạo lại tức thì có nghĩa là ít lượt tải xuống trên mỗi trang.

Mẫu mã (KHÔNG KIỂM TRA LÀM VIỆC, Mặc dù tôi sử dụng mã tương tự)

$styles  = $this['asset']->get('css');
if ($styles) {
  foreach ($styles as $style) {
    if ($url = $style->getUrl()) {
      if ($url[0] == "/") {
      //its local, find it and add the mtime
        if (file_exists(getcwd() . $url)) {
          $url .= "?" .filemtime(getcwd() . $url);
        }
      }
      printf("<link rel=\"stylesheet\" href=\"%s\" type=\"text/css\" />\n", $url);
    } else {
      printf("<style>%s</style>\n", $style->getContent());
    }
  }
}

Mã này sẽ cần điều chỉnh cho hệ thống của bạn để đảm bảo các đường dẫn được tìm thấy chính xác

— exussum
nguồn

5

Joomla cung cấp API riêng từ Nhà máy của họ, chúng tôi có thể gọi nó là JFactory.

Không có hại khi sử dụng:

<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css">

kết thúc:

$document = JFactory::getDocument();
$document->addStyleSheet($url);

Tuy nhiên, nếu bạn bao gồm các bảng định kiểu của mình với phương thức trên, thì nó sẽ được bao gồm trong <head>phần của mẫu của bạn một cách tự động <jdoc:include type="head" />. Đi xa hơn, nếu chúng tôi đang phát triển tiện ích mở rộng của riêng mình và nếu bạn rõ ràng muốn có CSS hoặc Javascript của riêng mình thì bạn có thể khai báo bằng phương pháp trên. Nó sẽ lại thêm nó vào <head>phần của bạn và tránh cho bạn cập nhật mẫu của bạnindex.php

Đôi khi bạn muốn tập lệnh của mình xuất hiện ở phần cuối của cơ thể để tải tất cả các thành phần DOM. Ở tình huống này, bạn có thể muốn bao gồm các tập lệnh của mình ở cuối <body>phần tử của bạn với:

<script type="text/javascript" src="myScript.js"></script>

Bạn cũng sẽ nhận được kiểm soát bổ sung để xử lý CSS và tập lệnh, ví dụ: bạn có thể hủy đặt tập lệnh và biểu định kiểu theo chương trình nếu không cần thiết.

— Sahil Purav
nguồn

Tôi hiểu rằng JFactoryđặt biểu định kiểu vào <jdoc:include type="head" />, câu hỏi của tôi là tại sao phải sử dụng nó trong một mẫu khi bạn có thể tự viết <link ...>dòng này?

— Flimm

Nó là hoàn toàn tốt để sử dụng <link...>trong mẫu. Nhưng mỗi khung / CMS có cách triển khai riêng. Joomla cũng không ngoại lệ. Đó là một cách Joomla để kết xuất tập lệnh và biểu định kiểu. Theo như không có cách nào để ghi đè lên mẫu, chúng ta vẫn có thể dựa vào <link...>đánh dấu cũ .

— Sahil Purav

0

Có một số lợi ích bổ sung cho việc sử dụng các phương thức "addXxxxx" để tải biểu định kiểu và javascripts.

Có những phần mở rộng bạn có thể cài đặt sẽ đặt các tệp đó lại với nhau và nén chúng thành một tệp duy nhất, do đó cải thiện tốc độ trang (bằng cách giảm yêu cầu http và kích thước tệp).

Ngoài ra, bạn có thể sử dụng chúng trong phần ghi đè mẫu và bố cục để đảm bảo các tệp yêu cầu được tải. Ví dụ: nếu một vài mục nội dung của bạn yêu cầu thư viện javascript cụ thể (chẳng hạn như thư viện để thực hiện phân tán ảnh theo kiểu Masonary), bạn có thể tạo bố cục cụ thể cho các loại bài viết sẽ sử dụng cơ chế đó để tải thư viện js và tờ phong cách cụ thể cho các loại màn hình. Điều này có nghĩa là trọng lượng tăng thêm chỉ được thêm vào các trang cần nó, nhưng vẫn giữ thông tin phiên bản ở một nơi, do đó, một chỉnh sửa sẽ thay đổi hiển thị nhiều trang, thay vì phải thực hiện nhiều thay đổi khi mọi thứ thay đổi (và tất cả chúng ta đều biết chúng sẽ thay đổi).

Cá nhân, tôi xem xét những lợi thế đó, cộng với khả năng ghi đè các tệp đó bằng các bản sao khác nhau khi được yêu cầu, là đủ để làm cho cách thêm ưa thích của tôi vào việc thêm chúng.

— Arlen
nguồn

-1

Nếu bạn sử dụng phần <link >đầu j Joomla của bạn sẽ không gọn gàng vì phần <link >này sẽ hiển thị dưới khối javascript, outsite <jdoc:include type="head" />và j Joomla sẽ quay lại thư mục css một lần nữa. Điều này sẽ ảnh hưởng đến hiệu suất của j Joomla được cho là. Và nếu bạn sử dụng, <link >bạn sẽ nhận được nhiều tiếng vang thay đổi trong tệp index.php :(

Tôi sử dụng $doc->addStyleSheetbởi vì .csssẽ được hiển thị trên khối css, bên trong <jdoc:include type="head" />. Điều đó cũng tương tự đối với việc sử dụng javascript $doc->addScript. Sau khi <jdoc:include type="head" />Joomla sẽ giả định tất cả đã hoàn thành và sẽ làm công việc quan trọng hơn. :)

Một số người sử dụng <link >cho trình duyệt không hỗ trợ như tức là

<!--[if IE 8]>
<link href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/ie8only.css" rel="stylesheet" type="text/css" />
<![endif]-->

<!--[if lt IE 9]>
    <script src="<?php echo $this->baseurl ?>/media/jui/js/html5.js"></script>
<![endif]-->

nó sẽ được hiển thị trên đáy <jdoc:include type="head" />.

— Evelyn Raditya
nguồn

Điều này không thực sự trả lời câu hỏi đã được hỏi. Nếu bạn tin rằng mã bạn đã cung cấp là phương pháp tốt nhất, hãy giải thích lý do.

— Lodder

Bạn nói rằng <link>thẻ đó sẽ xuất hiện sau <jdoc:include type="head" />, nhưng điều này chỉ xảy ra nếu bạn thêm mã sau nó. Nếu bạn thêm nó trước, nó sẽ xuất hiện trước. Liên quan đến việc lặp lại các biến PHP trong tệp index.php, tôi không biết ý của bạn là gì khi bạn nói điều này. Sử dụng <link>thẻ là HTML cơ bản và Joomla không thay đổi cách thức hoạt động của nó

— Tạm dừng

và bạn sẽ thêm trước <jdoc: bao gồm type = "head" />? @Lodder

— Evelyn