Joomla - 将 .js 和 .css 文件插入到单个 Joomla 文章中？答案

【问题标题】：Joomla - Insert .js and .css files into a single Joomla article?Joomla - 将 .js 和 .css 文件插入到单个 Joomla 文章中？
【发布时间】：2011-05-18 16:10:42
【问题描述】：

Joomla 网站上的单个页面是否可以包含它自己的自定义 .js 和 .css 文件？

我基本上想为特定页面添加两个自定义 javascript 和 css 文件。我不希望这些文件包含在任何其他 Joomla 页面中。

任何建议将不胜感激。

谢谢

【问题讨论】：

标签： joomla joomla1.5

【解决方案1】：

尝试使用自定义代码扩展，例如 JUMI。它正是为此目的而设计的。

从描述中：使用 Jumi，您可以将 php、html、javascript 脚本添加到模块位置、文章、类别或部分描述中，或者添加到您自己定制的组件页面中。

【讨论】：

链接已失效...不鼓励

【解决方案2】：

Soygul 的解决方案不会产生正确的 HTML，因为这些语句/包含属于 HTML 标头。

使用：http://extensions.joomla.org/extensions/edition/custom-code-in-modules/11936 此插件允许将材料插入您的 Joomla 网站的头部。

然后您可以使用菜单分配功能将其添加到某些页面。

为自己编写一个像这样的简单模块很容易 - 但由于这似乎已经可用，请使用那个。如果它不符合您的需求：

你只需要一个带有这两个语句的“empty / hello world”模块： (http://docs.joomla.org/Creating_a_Hello_World_Module_for_Joomla_1.5) (http://docs.joomla.org/Adding_JavaScript_and_CSS_to_the_page)

// Add a reference to a Javascript file
// The default path is 'media/system/js/'
JHTML::script($filename, $path, $mootools);

// Add a reference to a CSS file
// The default path is 'media/system/css/'
JHTML::stylesheet($filename, $path);

【讨论】：

【解决方案3】：

除非绝对必要，否则我不喜欢向 Joomla 添加新扩展。如果你这样做，首先确保它不在 Joomla 的易受攻击的扩展列表中。您添加的每个第三方扩展程序/插件只是黑客的一个潜在后门。

要为页面添加您自己的自定义 CSS，您可以编辑模板的主 CSS 文件，也可以创建自己的 CSS 文件并将其链接到项目。以下是你的做法：

首先，弄清楚您的 CSS 文件是如何被调用的。根据您使用的模板，实际文件名肯定与我的示例不同，但让我们看看位于 templates/system 中的 Joomla SYSTEM 模板。 index.php 文件控制着一切，所以打开它，你会发现这一行：

<?php
include dirname(__FILE__).DIRECTORY_SEPARATOR.'component.php';
?>

打开component.php，你会看到如下代码：

<head>
    <jdoc:include type="head" />
    <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />

您可以在第 3 行看到包含 CSS 文件的调用。您需要做的就是添加另一行调用您创建的 CSS 文件。创建一个名为 /templates/system/css/custom.css 的新文件（或任何你喜欢的文件）并重写 component.php 中的代码段，如下所示：

<head>
    <jdoc:include type="head" />
    <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />
    <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/custom.css" type="text/css" />

现在您可以在您创建的新 custom.css 文件中编写自己的 CSS。您可以使用 RocketTheme 或 YooTheme 的任何模板系统轻松完成此操作。事实上，如果您使用他们的模板之一，他们可能已经有一个 custom.css 文件，您可以简单地添加自己的代码。请注意，如果您这样做，然后稍后更新模板，您将丢失您的代码添加。这就是为什么我更喜欢编写自己的文件。您可能可以做一些非常相似的事情来包含自定义 JS 代码，但我倾向于避免 JS 像瘟疫一样，所以其他人将不得不解决如何链接到自定义 JS 文件。

【讨论】：

您的方法会将代码添加到每个页面，问题指定仅将代码添加到特定页面。