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

Question

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

这是我需要知道的内容 -

1. 如何引用这些CSS / JS文件，以便即使我将模块作为zip分发，也不必单独发送CSS / JS文件？

2. 我尝试查看了不同的解决方案，包括http://www.howtojoomla.net/how-tos/development/how-to-add-cssjavascript-to-your-joomla-extension ，但我无法弄清楚JS / CSS文件的URL应该是什么？

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

谢谢

- Pushkar

---

你能再解释一下你想要实现什么吗？你是想将 CSS/JS 包含在你的模块安装文件中（由 XML 安装程序文件控制）；还是想将 CSS/JS 的使用融入到已经安装的模块中？ - Hanny

@Hanny - 我已经创建了一个简单的“Hello World”模块。现在我正在将一些CSS/PHP代码加入到default.php文件中。我的问题是如何进行这样的操作。 - Pushkar

请查看Dean Marshall的下面的解释 - 这是一个非常准确的解释。 - Hanny

Answer 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 head 区域：

$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区域内添加。

- Dean Marshall

---

请注意，您可以使用 DS 代替 "/" 以实现独立性。因此，路径将为 **"url".DS."to".DS."my".DS."stylesheet.css"**。 - elk

$document->addScript('url/to/my/script.js'); 将脚本添加到头部的最顶部。如果您的JS需要jQuery库，这可能会成为一个问题。因为您的JS文件在jQuery库加载之前就已经加载了。在这种情况下，我更喜欢使用Joomla网站中建议的其他脚本添加选项。 - amilaishere

Answer 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

- Alexander Busygin

---

建议在addScript语句中以JURI :: base（true）开头添加路径，以确保脚本URL正确，并在目录设置中正常工作（例如：$doc-> addScript（JURI :: base（true）。 "/ media / mod_your_module / js / script.js");）。 - nietonfir

Answer 3

您可以使用以下方法：

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

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

- Christophor S. Wilson

Answer 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');

- Raj Kumar Das

Answer 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">

- Wide Vision