CSS 파일을 링크하는 것보다 addStyleSheet 또는 JHtml :: stylesheet를 사용하는 이유는 무엇입니까?

9

Wiki 페이지 페이지에 Javascript 및 CSS 추가 에 따르면 다음 과 addStyleSheet같이 스타일 시트를 추가 할 수 있습니다 .

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

또는 JHtml::stylesheet이와 같이 :

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

그러나 위키 템플리트 기본 템플리트 작성 은 학습자가 다음과 같은 스타일 시트를 포함하도록 지시합니다.

<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 
— 플림
소스
자바 스크립트에 관한 질문 : 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:Adding_JavaScript_and_CSS_to_the_page
— Lodder
그것은 내 질문의 링크입니다 :) <link ...>코드를 직접 작성하는 것이 이상하게 보였기 때문에 설명을 원했습니다 .
— Flimm
1
템플릿에서는 실제 템플릿을 확장 할 수있는 방식으로 재정의 할 수 없으므로 Joomla API없이 자산 가져 오기를 수행 할 수
— 있으므로이
1
@Flimm JHtml은 MD5SUM 파일과도 작동하지만 $ document-> addStyleSheet는 작동하지 않습니다. magazine.joomla.org/issues/issue-nov-2014/item/…
— COBIZ 웹 개발
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를 제공하며 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 또는 자바 스크립트를 명시 적으로 갖고 싶다면 위의 방법으로 선언 할 수 있습니다. 다시 <head>섹션에 추가하고 템플릿을 업데이트하지 않아도됩니다.index.php

때로는 모든 DOM 요소를로드하기 위해 스크립트가 본문 끝에 표시되기를 원할 수 있습니다. 이 상황에서 <body>다음과 같이 요소 끝에 스크립트를 포함시킬 수 있습니다 .

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

CSS 및 스크립트 처리를위한 추가 제어 기능도 제공됩니다. 예를 들어 스크립트 및 스타일 시트를 필요에 따라 프로그래밍 방식으로 설정 해제 할 수 있습니다.

— 사힐 푸 라브
소스
JFactory스타일 시트를에 넣었다는 것을 이해합니다 <jdoc:include type="head" />. 제 질문은 <link ...>직접 라인을 쓸 수있을 때 템플릿에서 스타일 시트를 사용하는 이유입니다 .
— Flimm
<link...>템플릿 에서 사용 하는 것이 좋습니다 . 그러나 모든 프레임 워크 / CMS에는 자체 구현 방식이 있습니다. 줌라도 예외는 아닙니다. 스크립트와 스타일 시트를 렌더링하는 Joomla 방식입니다. 템플릿을 재정의 할 방법이없는 한 여전히 이전 <link...>마크 업에 의존 할 수 있습니다 .
— Sahil Purav
0

스타일 시트 및 자바 스크립트를로드하기 위해 "addXxxxx"메소드를 사용하면 몇 가지 추가 이점이 있습니다.

당신이 설치할 수있는 확장자들이 있는데, 그 파일들을 모아서 하나의 파일로 압축하여 페이지 속도를 향상시킵니다 (http 요청과 파일 크기를 줄임).

또한 템플릿 및 레이아웃 재정의에 사용하여 필요한 파일을로드 할 수 있습니다. 예를 들어, 일부 컨텐츠 항목에 특정 자바 스크립트 라이브러리 (예 : 사진을 벽돌 스타일로 표시하는 라이브러리)가 필요한 경우 해당 메커니즘을 사용하여 js 라이브러리를로드하는 해당 유형의 기사에 대한 특정 레이아웃을 작성할 수 있습니다. 그리고 그러한 종류의 디스플레이에 특정한 스타일 시트. 즉, 추가 가중치는 필요한 페이지에만 추가되지만 버전 정보는 한 곳에 보관하므로 한 번의 편집으로 여러 페이지가 변경 될 때마다 여러 번 변경하지 않고 여러 페이지 표시가 변경됩니다 (그리고 모두 알고 있음) 것 )로 변경합니다.

개인적으로 필자는 이러한 장점과 필요한 경우 다른 사본으로 해당 파일을 재정의하는 기능을 사용하여 선호하는 방식으로 파일을 추가 할 수 있다고 생각합니다.

— 알렌
소스
-1

자바 스크립트 블록 아래에 표시 되므로 외부 에서 joomla가 다시 폴더 css로 다시 표시 되므로 <link >joomla 헤드 를 사용하면 깔끔 하지 않습니다 . 이것은 줌라의 성능에 영향을 미칩니다. 그리고 당신이 사용 하면 일반 index.php에 많은 변수 에코가 생깁니다 :(<link ><jdoc:include type="head" /><link >

내부에 CSS 블록에 표시 $doc->addStyleSheet되기 때문에 사용 합니다 . 자바 스크립트 사용과 동일합니다 . Joomla 후 모든 완료된 것으로 가정하고 더 중요한 작업을 수행합니다. :).css<jdoc:include type="head" />$doc->addScript<jdoc:include type="head" />

어떤 사람들 <link >은 예를 들어 지원되지 않는 브라우저를 사용 합니다.

<!--[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
당신은 그 말을 <link>태그 후 나타납니다 <jdoc:include type="head" />,하지만 당신은 뒤에 코드를 추가하는 경우에만 발생합니다. 이전에 추가하면 이전에 표시됩니다. index.php에서 PHP 변수를 에코하는 것과 관련하여, 당신이 이것을 말할 때 당신이 무엇을 의미하는지 전혀 모릅니다. 사용 <link>태그하는 기본적인 HTML과 줌라이 작동하는 방식을 변경하지 않습니다
— Lodder
<jdoc : include type = "head"/> 앞에 추가할까요? @Lodder
— Evelyn Raditya
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.