如何将 JS/CSS 文件添加到 Joomla 模块？答案

【问题标题】：How to add JS/CSS files to Joomla modules?如何将 JS/CSS 文件添加到 Joomla 模块？
【发布时间】：2011-12-21 14:33:35
【问题描述】：

我从 Joomla 开始，正在编写一个简单的 Joomla 模块。我在我的模块中使用了一些自定义 CSS 和 JS。现在，当我分发这个模块时，我需要我的 JS/CSS 文件与 ZIP 一起使用。我已将我的文件添加到我的模块 ZIP 文件中。

这是我需要知道的-

如何在我的模块中引用这些 CSS/JS 文件，这样即使我将模块作为 zip 文件分发，我也不必单独发送 css/js 文件？
我尝试查看不同的解决方案，包括 http://www.howtojoomla.net/how-tos/development/how-to-add-cssjavascript-to-your-joomla-extension 但是我不知道 JS/CSS 文件的 URL 应该是什么？

我正在使用托管在云托管站点上的 Joomla 1.7。

谢谢

【问题讨论】：

你能解释一下你想要完成的事情吗？您是否尝试在模块的安装文件中包含 css/js（由 xml 安装程序文件控制）；或者您是否尝试将 css/js 的使用合并到您已安装的模块中？
@Hanny - 我创建了一个简单的 hello world 模块。现在我在 default.php 文件中加入了一些 css/php。我的问题是我该怎么做。
查看下面 Dean Marshall 的解释 - 这是一个关于如何解释的地方。

标签： joomla

【解决方案1】：

我想说 HowToJoomla 网站的文章几乎总结了这个过程。

这是添加了更多步骤的过程 - 希望这会有所帮助。

我假设您已经打包好您的扩展程序，并且已经能够将您的 css 和 javascript 文件安装在服务器上。它们可能位于您的模块文件夹中，或者更准确地说，它们应该位于 /media/ 文件夹下的模块子文件夹中。

如果在安装模块后找不到 css 和 js 文件，那是因为您没有在组件的 xml 安装文件中正确引用它们。此页面包含有关 1.6/1.7 附加组件的 xml 安装/清单文件的信息，尽管它是针对组件的：http://docs.joomla.org/Developing_a_Model-View-Controller_%28MVC%29_Component_for_Joomla!1.6_-_Part_01 它们非常相似。

无论哪种方式 - 在 Joomla 的文件夹结构中找到您的文件并记下它们从网站根目录开始的相对路径 - 即包含 configuration.php 的文件夹

现在在您模块的 php 中的某处 - 添加获取对 JDocument 对象的引用的行。

$document = JFactory::getDocument();

现在添加将您的 javascript 添加到 html 头部区域的行：

$document->addScript('url/to/my/script.js');

显然将 'url/to/my/script.js' 替换为您的 javascript 的实际相对路径。

现在添加将您的 css 添加到 html 头部的行：

$document->addStyleSheet('url/to/my/stylesheet.css');

再次调整路径 - 例如可能是 media/mod_mymodule/mymodule.css（如果您的模块被称为“mymodule”）。

唯一需要注意的是，在退出 php 模式后，您需要在可执行的 php 标记中添加这些行，而不是在 html 区域内。

【讨论】：

谢谢！请注意，您可以使用 DS 代替“/”来独立。因此，路径将是 "url".DS."to".DS."my".DS."stylesheet.css"
$document->addScript('url/to/my/script.js');将脚本添加到标题的最顶部。如果您的 js 需要 jquery 库，这可能是个问题。因为您的 js 文件在 jquery 库加载之前加载。在这种情况下，我更喜欢使用 Joomla 网站中建议的其他脚本添加选项。

【解决方案2】：

您可以将 js/css 文件添加到 /media 文件夹。

http://docs.joomla.org/Manifest_files#Media_files

只需添加到您的清单文件中：

        <files>
           ...
        </files>
        <media folder="media" destination="mod_your_module">
            <folder>css</folder>
            <folder>js</folder>
        </media>

在您的可安装包中，您现在应该拥有 /media 文件夹。

然后添加到视图文件：

        $doc =& JFactory::getDocument();
        $doc->addScript("/media/mod_your_module/js/script.js");

本文解释了这种方法的好处：
http://blog.joomlatools.com/2008/09/hidden-feature-joomlas-media-folder.html

【讨论】：

建议在addScript 语句中的路径前加上JURI::base(true)，以确保脚本URL 正确并且在目录设置中也有效（例如：$doc->addScript(JURI::base(true) . "/media/mod_your_module/js/script.js");）。跨度>

【解决方案3】：

你可以使用：

JHTML::script('modules/mod_your_module/js/script.js');
JHTML::stylesheet('modules/mod_your_module/css/stylesheet.css');

这个例子不需要JFactory::getDocument()

【讨论】：

【解决方案4】：

$document = JFactory::getDocument();
$modulePath = JURI::base() . 'modules/mod_your_module_name/';

//Adding JS Files
$document->addScript($modulePath.'js/myscript.js');

//Adding CSS Files
$document->addStyleSheet($modulePath.'css/style.css');

【讨论】：

【解决方案5】：

<script type="text/javascript" src="<?php echo JURI::BASE()?>modules/your_module_name/js/your_js_file"></script>

对于CSS：

<link href="<?php echo JURI::BASE()?>modules/your_module_name/css/your_css _file" type="text/css" media="all" rel="stylesheet">

【讨论】：