web-dev-qa-db-ja.com

CSSファイルをリンクするだけで、なぜaddStyleSheetまたはJHtml :: stylesheetを使用するのですか？

Wikiページ ページへのJavaScriptとCSSの追加 によると、次のようにaddStyleSheetを使用してスタイルシートを追加できます。

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

または、次のようなJHtml::stylesheetを使用します。

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

しかし、wikiページ 基本テンプレートの作成 は、次のようなスタイルシートを含めるように学習者に指示します。

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

これはaddStyleSheetとJHtml::stylesheetをバイパスします。これは良い考えですか？前者はいつ使用し、後者はいつ使用しますか？

注：JHtml::_("script", …)およびJHtml::_("stylesheet", …)は、JHtml::scriptおよびJHtml::stylesheetとほぼ同じです。 JHtml::_の機能 を参照してください。

jhtmljfactory
9
Flimm

JHtmlは、オーバーライドを実行できることを意味する拡張機能で通常使用されます。これは、開発者であれば非常に優れた機能です。また、いくつかの追加機能を追加することで$document->...を拡張します。

次に例を示します。

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

JHtmlを使用すると、ページの読み込み時間を短縮するために、スクリプトのminifiedバージョンが読み込まれます。グローバル設定でデバッグモードを有効にすると、ファイルのnminifiedバージョンが読み込まれ、読み取り可能になります。

拡張機能の場合と同じようにテンプレートをオーバーライドすることはできません。したがって、多くのテンプレートは<link>を使用します。オーバーライドは、custom.cssファイルを追加してコードを追加するだけで簡単に実行できるためです。したがって、ネイティブ<link>タグを使用すると、Joomla APIを使用してCSSファイルをロードするよりも高速になります。

7
Lodder

他に加えて、私が見つけた最大の利点は、すべてのCSS/JSSファイルが一度に同じ配列にあることです。

これは利点のように聞こえないかもしれませんが、別の例からの抜粋

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

後で変更したいときにsystem.css、変更を加えた後、ユーザーが古いsystem.css新しいコンテンツをキャッシュに入れます。つまり、コードを少し異なるURLに変更する必要があります（またはキャッシュ時間を減らし、ユーザーが頻繁にダウンロードできるようにします）。

テンプレートの生成時にJHTMLメソッドを使用すると、CSS/JSファイルの「バージョン」を生成できます（filemtimeを使用するのが適切です。またはgit commit IDなど）。コンテンツを変更すると、新しいCSSが即座に生成されます。あなたのサイトを閲覧するすべての人々。長いキャッシュ時間+即時の再生成は、ページあたりのダウンロードが少ないことを意味します。

コードサンプル（テストされていませんが、同様のコードを使用しています）

$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());
    }
  }
}

このコードは、パスが正しく検出されるようにシステムを微調整する必要があります

6
exussum

Joomlaは独自のAPIをFactoryから提供し、それをJFactoryと呼ぶことができます。

使用による害はありません。

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

以上：

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

ただし、上記の方法でスタイルシートを含める場合、テンプレートの<head>セクションに<jdoc:include type="head" />とともに自動的に含まれます。さらに、独自の拡張機能を開発していて、独自のCSSまたはJavaScriptを明示的に使用したい場合は、上記のメソッドで宣言できます。 <head>セクションに再度追加され、テンプレートのindex.phpを更新する必要がなくなります。

すべてのDOM要素をロードするために、スクリプトを本文の最後に表示したい場合があります。この状況では、次のように<body>要素の最後にスクリプトを含めることができます。

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

また、CSSやスクリプトを処理するための追加のコントロールも取得できます。必要がない場合は、プログラムでスクリプトとスタイルシートの設定を解除できます。

5
Sahil Purav

「addXxxxx」メソッドを使用してスタイルシートとJavaScriptをロードすることには、さらにいくつかの利点があります。

これらのファイルをまとめて1つのファイルにgzipするインストール可能な拡張機能があり、ページの速度が向上します（http要求とファイルサイズを減らすことにより）。

また、これらをテンプレートおよびレイアウトのオーバーライドで使用して、必要なファイルが確実にロードされるようにすることができます。たとえば、いくつかのコンテンツアイテムに特定のJavaScriptライブラリ（写真の石積みスタイルの表示を行うライブラリなど）が必要な場合、そのメカニズムを使用してjsライブラリをロードするタイプの記事に特定のレイアウトを作成できます。これらの種類のディスプレイに固有のスタイルシート。つまり、追加のウェイトはそれを必要とするページにのみ追加されますが、バージョン情報は1か所に保持されるため、1回の編集で複数のページ表示が変更されます。 予定変更）。

個人的には、これらの利点に加えて、必要に応じてこれらのファイルをさまざまなコピーで上書きできることで、私の好みの方法でファイルを追加できると考えています。

0
Arlen