为什么仅在链接CSS文件时使用addStyleSheet或JHtml

9

根据Wiki页面Adding Javascript and CSS to Page，您可以添加一个样式表，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

— 弗利姆
source

相关问题问的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文件更快

— 寄宿
source

那么，使用JHtml模板的唯一优势就是获得最小化？

— Flimm

@Flimm-在这里看看，它将在其中进行详细说明：docs.joomla.org/J3.x

— Lodder

这就是我的问题的链接：）我只是想澄清一下，因为您曾经写过<link ...>Directyl代码似乎很奇怪。

— Flimm

1

在模板中，这样做非常好，因为您不能以扩展方式覆盖实际模板，因此可以在没有Joomla API的情况下导入资产；）

— Lodder 2015年

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

这段代码需要对您的系统进行调整，以确保正确找到路径

— 溢价
source

5

Joomla从其Factory提供了自己的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或Javascript，则可以使用上述方法声明它。它将再次将其添加到您的<head>部分中，并避免您更新模板的index.php

有时，您希望脚本显示在正文的最后，以加载所有DOM元素。在这种情况下，您可能希望在<body>元素的末尾包括以下脚本：

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

您还将获得用于处理CSS和脚本的其他控件，例如，如果不需要，可以以编程方式取消设置脚本和样式表。

— 萨希尔·普拉夫（Sahil Purav）
source

我知道JFactory把样式表放进去<jdoc:include type="head" />，我的问题是当您<link ...>自己编写线条时为什么还要在模板中使用它？

— Flimm

<link...>在模板中使用非常好。但是每个框架/ CMS都有其自己的实现方式。Joomla也不例外。这是一种Joomla渲染脚本和样式表的方式。至于没有方法可以覆盖模板，我们仍然可以依靠旧<link...>标记。

— Sahil Purav

0

使用“ addXxxxx”方法加载样式表和javascript有另外一些好处。

您可以安装一些扩展程序，将这些文件放在一起并将它们gzip压缩到一个文件中，从而提高页面速度（通过减少http请求和文件大小）。

另外，您可以在模板和布局替代中使用它们，以确保加载所需的文件。例如，如果您的一些内容项需要特定的javascript库（例如用于做照片的Masonary样式显示的库），则可以为这些类型的文章创建特定的版式，并使用该机制加载js库以及针对此类显示器的样式表。这意味着多余的权重只会添加到需要的页面上，但仍将版本信息保持在一个位置，因此一次编辑将更改多页显示，而不是在事物发生变化时必须进行多次更改（而且我们都知道它们会改变）。

就我个人而言，我认为这些优点以及能够在需要时使用不同副本覆盖这些文件的能力足以使我成为添加它们的首选方式。

— 阿伦
source

-1

如果您使用<link >joomla头部，则不会整洁，因为<link >它将显示在javascript块下，outsite <jdoc:include type="head" />和joomla将再次回到文件夹css。这将影响joomla的性能。而且，如果使用<link >，则会在普通index.php中得到许多变量echo ：(

我用，$doc->addStyleSheet因为.css它将显示在css块内<jdoc:include type="head" />。同样适用于javascript $doc->addScript。<jdoc:include type="head" />joomla 之后将承担所有工作，并将进行更重要的工作。:)

有些人使用<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" />。

— 伊芙琳·瑞迪亚（Evelyn Raditya）
source

这实际上并不能回答所提出的问题。如果您认为所提供的代码是最好的方法，请解释原因。

— 罗德（Lodder），2015年

您说<link>标记将出现在之后<jdoc:include type="head" />，但这仅在您在其后添加代码时才会发生。如果您之前添加它，它将出现在之前。关于在index.php中回显PHP变量，我不知道您说的是什么意思。使用<link>标记是基本的HTML，Joomla不会改变其工作方式

— Lodder

并且您将在<jdoc：include type =“ head” />之前添加？@Lodder

— Evelyn Raditya

为什么仅在链接CSS文件时使用addStyleSheet或JHtml :: stylesheet？