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

9

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::_をするかを参照してください。

jhtml  jfactory 
— フリム
ソース
Javascriptについて尋ねる関連質問：joomla.stackexchange.com/q/325/5239
— Flimm

回答:

7

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

次に例を示します。

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

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

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

— ロダー
ソース
JHtmlテンプレートに使用する唯一の利点は、縮小化することですか？
— Flimm
@Flimm-ここで、もう少し詳しく説明します。docs.joomla.org
— J3.x
それが私の質問のリンクです:) <link ...>コードを直接書くのは奇妙に思えたので、説明を求めました。
— Flimm、2015年
1
テンプレートでは、拡張のように実際のテンプレートをオーバーライドできないため、これを実行しても問題ありません。したがって、アセットのインポートは、Joomla APIなしで実行できます;）
— Lodder
1
@Flimm JHtmlはMD5SUMファイルでも機能しますが、$ document-> addStyleSheetは機能しません。 magazine.joomla.org/issues/issue-nov-2014/item/...
— COBIZのWebプログラミング
6

他に加えて、私が見つけた最大の利点は、すべての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());
    }
  }
}

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

— exussum
ソース
5

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やスクリプトを処理するための追加の制御も得られます。たとえば、必要がない場合は、プログラムでスクリプトやスタイルシートを設定解除できます。

— サヒルプラヴ
ソース
私はそれJFactoryがスタイルシートをに置くことを理解しています<jdoc:include type="head" />、私の質問はあなたが<link ...>自分で行を書くことができるときにテンプレートでそれを使うのが面倒なのはなぜですか？
— Flimm
<link...>テンプレートで使用するのはまったく問題ありません。しかし、すべてのフレームワーク/ CMSには独自の実装方法があります。Joomlaも例外ではありません。スクリプトとスタイルシートをレンダリングするJoomlaの方法です。テンプレートを上書きする方法がない限り、古い<link...>マークアップに依拠することができます。
— Sahil Purav、2015年
0

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

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

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

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

— アーレン
ソース
-1

<link >joomlaヘッドを使用すると、JavaScriptブロックの下に表示されるため、整頓されていません<link >。アウトサイト<jdoc:include type="head" />とjoomlaは、cssフォルダーに再び戻ります。これはjoomlaのパフォーマンスに影響します。そして、使用<link >すると、プレーンなindex.php :(で多くの変数エコーが得られます。

内部でcssブロックに表示される$doc->addStyleSheetので使用します。JavaScriptを使用する場合も同様です。joomlaがすべて完了したと想定した後、より重要な作業を行います。:).css<jdoc:include type="head" />$doc->addScript<jdoc:include type="head" />

一部の人々は<link >ieのようなサポートされていないブラウザに使用します

<!--[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]-->

の下部に表示されます <jdoc:include type="head" />ます。

— イヴリン・ラディティア
ソース
これは実際に尋ねられた質問に答えるものではありません。指定したコードが最善の方法であると思われる場合は、その理由を説明してください。
— Lodder、2015年
<link>タグはの後<jdoc:include type="head" />に表示されると言っていますが、これは、コードを追加した後にのみ発生します。前に追加すると、前に表示されます。index.phpでPHP変数をエコーすることに関しては、これを言ったときの意味がわかりません。<link>タグの使用は基本的なHTMLであり、Joomlaはこれが機能する方法を変更しません
— Lodder
<jdoc：include type = "head" />の前に追加しますか？@Lodder
— Evelyn Raditya、2015年
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.