如何将jQuery添加到Joomla模板？
[英]How add jQuery to Joomla Template?
问题描述
抱歉，我的无知是我从Joomla开始，我需要在名为Lumiere的Joomla模板中添加一些jQuery脚本及其图像。 我正在查看模板，我看到Index.html没有代码，但是index.php文件是代码，我想我应该在代码中添加一个“那里” php脚本中的代码如下：
<?php
/**
* @version $Id: index.php 5057 2012-11-06 04:48:10Z rhuk $
* @author RocketTheme http://www.rockettheme.com
* @copyright Copyright (C) 2007 - 2012 RocketTheme, LLC
* @license http://www.gnu.org/licenses/gpl-2.0.html GNU/GPLv2 only
*
* Gantry uses the Joomla Framework (http://www.joomla.org), a GNU/GPLv2 content management system
*
*/
// no direct access
defined( '_JEXEC' ) or die( 'Restricted index access' );
// load and inititialize gantry class
require_once(dirname(__FILE__) . '/lib/gantry/gantry.php');
$gantry->init();
// get the current preset
$gpreset = str_replace(' ','',strtolower($gantry->get('name')));
?>
<!doctype html>
<html xml:lang="<?php echo $gantry->language; ?>" lang="<?php echo $gantry->language;?>" >
<head>
<?php if ($gantry->get('layout-mode') == '960fixed') : ?>
<meta name="viewport" content="width=960px">
<?php elseif ($gantry->get('layout-mode') == '1200fixed') : ?>
<meta name="viewport" content="width=1200px">
<?php else : ?>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<?php endif; ?>
<?php
$gantry->displayHead();
$gantry->addStyle('grid-responsive.css', 5);
$gantry->addLess('bootstrap.less', 'bootstrap.css', 6);
$gantry->addLess('global.less', 'master.css', 8, array('main-body'=>$gantry->get('main-body','light'), 'main-accent'=>$gantry->get('main-accent', '#a84d6c')));
if ($gantry->browser->name == 'ie'){
if ($gantry->browser->shortversion == 9){
$gantry->addInlineScript("if (typeof RokMediaQueries !== 'undefined') window.addEvent('domready', function(){ RokMediaQueries._fireEvent(RokMediaQueries.getQuery()); });");
}
if ($gantry->browser->shortversion == 8){
$gantry->addScript('html5shim.js');
}
}
if ($gantry->get('layout-mode', 'responsive') == 'responsive') $gantry->addScript('rokmediaqueries.js');
if ($gantry->get('loadtransition')) {
$gantry->addScript('load-transition.js');
$hidden = ' class="rt-hidden"';}
?>
</head>
<body <?php echo $gantry->displayBodyTag(); ?>>
<?php /** Begin Top Surround **/ if ($gantry->countModules('top') or $gantry->countModules('header')) : ?>
<header id="rt-top-surround">
<?php /** Begin Top **/ if ($gantry->countModules('top')) : ?>
<div id="rt-top" <?php echo $gantry->displayClassesByTag('rt-top'); ?>>
<div class="rt-container">
<?php echo $gantry->displayModules('top','standard','standard'); ?>
<div class="clear"></div>
</div>
</div>
<?php /** End Top **/ endif; ?>
<?php echo $gantry->displayModules('background','basic','basic'); ?>
<?php if (($gantry->countModules('showcase')) and (!$gantry->countModules('feature'))) : ?>
<div class="rt-bg-fade"></div>
<?php endif; ?>
<?php /** Begin Header **/ if ($gantry->countModules('header')) : ?>
<div id="rt-header">
<div class="rt-container">
<?php echo $gantry->displayModules('header','standard','standard'); ?>
<div class="clear"></div>
</div>
</div>
<?php /** End Header **/ endif; ?>
<?php /** Begin Showcase **/ if ($gantry->countModules('showcase')) : ?>
<div id="rt-showcase">
<div class="rt-container">
<?php echo $gantry->displayModules('showcase','standard','standard'); ?>
<div class="clear"></div>
</div>
</div>
<?php /** End Showcase **/ endif; ?>
<?php /** Begin Feature **/ if ($gantry->countModules('feature')) : ?>
<div id="rt-feature">
<div class="rt-container">
<?php echo $gantry->displayModules('feature','standard','standard'); ?>
<div class="clear"></div>
</div>
</div>
<?php /** End Feature **/ endif; ?>
</header>
<?php /** End Top Surround **/ endif; ?>
<?php /** Begin Drawer **/ if ($gantry->countModules('drawer')) : ?>
<div id="rt-drawer">
<div class="rt-container">
<?php echo $gantry->displayModules('drawer','standard','standard'); ?>
<div class="clear"></div>
</div>
</div>
<?php /** End Drawer **/ endif; ?>
<div id="rt-main-container">
<div id="rt-transition"<?php if ($gantry->get('loadtransition')) echo $hidden; ?>>
<div id="rt-mainbody-surround">
<?php /** Begin Utility **/ if ($gantry->countModules('utility')) : ?>
<div id="rt-utility">
<div class="rt-container">
<?php echo $gantry->displayModules('utility','standard','standard'); ?>
<div class="rt-main-divider"></div>
<div class="clear"></div>
</div>
</div>
<?php /** End Utility **/ endif; ?>
<?php /** Begin Breadcrumbs **/ if ($gantry->countModules('breadcrumb')) : ?>
<div id="rt-breadcrumbs">
<div class="rt-container">
<?php echo $gantry->displayModules('breadcrumb','standard','standard'); ?>
<div class="clear"></div>
</div>
</div>
<?php /** End Breadcrumbs **/ endif; ?>
<?php /** Begin Main Top **/ if ($gantry->countModules('maintop')) : ?>
<div id="rt-maintop">
<div class="rt-container">
<?php echo $gantry->displayModules('maintop','standard','standard'); ?>
<div class="clear"></div>
</div>
</div>
<?php /** End Main Top **/ endif; ?>
<?php /** Begin Main Body **/ ?>
<div class="rt-container">
<?php echo $gantry->displayMainbody('mainbody','sidebar','standard','standard','standard','standard','standard'); ?>
</div>
<?php /** End Main Body **/ ?>
<?php /** Begin Main Bottom **/ if ($gantry->countModules('mainbottom')) : ?>
<div id="rt-mainbottom">
<div class="rt-container">
<?php echo $gantry->displayModules('mainbottom','standard','standard'); ?>
<div class="clear"></div>
</div>
</div>
<?php /** End Main Bottom **/ endif; ?>
<?php /** Begin Extension **/ if ($gantry->countModules('extension')) : ?>
<div id="rt-extension">
<div class="rt-container">
<?php echo $gantry->displayModules('extension','standard','standard'); ?>
<div class="clear"></div>
</div>
</div>
<?php /** End Extension **/ endif; ?>
</div>
</div>
<?php /** Begin Bottom **/ if ($gantry->countModules('bottom')) : ?>
<div id="rt-bottom">
<div class="rt-container">
<?php echo $gantry->displayModules('bottom','standard','standard'); ?>
<div class="clear"></div>
</div>
</div>
<?php /** End Bottom **/ endif; ?>
<?php /** Begin Footer Section **/ if ($gantry->countModules('footer') or $gantry->countModules('copyright')) : ?>
<footer id="rt-footer-surround">
<?php /** Begin Footer **/ if ($gantry->countModules('footer')) : ?>
<div id="rt-footer">
<div class="rt-container">
<?php echo $gantry->displayModules('footer','standard','standard'); ?>
<div class="clear"></div>
</div>
</div>
<?php /** End Footer **/ endif; ?>
<?php /** Begin Copyright **/ if ($gantry->countModules('copyright')) : ?>
<div id="rt-copyright">
<div class="rt-container">
<?php echo $gantry->displayModules('copyright','standard','standard'); ?>
<div class="clear"></div>
</div>
</div>
<?php /** End Copyright **/ endif; ?>
</footer>
<?php /** End Footer Surround **/ endif; ?>
<?php /** Begin Debug **/ if ($gantry->countModules('debug')) : ?>
<div id="rt-debug">
<div class="rt-container">
<?php echo $gantry->displayModules('debug','standard','standard'); ?>
<div class="clear"></div>
</div>
</div>
<?php /** End Debug **/ endif; ?>
</div>
<?php /** Begin Popups **/
echo $gantry->displayModules('popup','popup','popup');
echo $gantry->displayModules('login','login','popup');
/** End Popup s**/ ?>
<?php /** Begin Analytics **/ if ($gantry->countModules('analytics')) : ?>
<?php echo $gantry->displayModules('analytics','basic','basic'); ?>
<?php /** End Analytics **/ endif; ?>
</body>
</html>
<?php
$gantry->finalize();
?>
我想，应该将js文件添加到Js文件夹中，然后将css文件添加到CSS文件夹中，将图像添加到Images文件夹中，但是如果我有以下js / css脚本：
carousel.css
carousel.js
jquery.roundabout.min.js
jquery-1.6.min.js
什么代码必须添加到此php脚本（以上），以便该脚本正常工作？ 预先感谢亚历杭德罗PS：对不起，我的英文太少了
2 个解决方案
解决方案1
4 已采纳 2013-10-21 18:27:35
看到您正在使用龙门框架时，将js和css文件上传到以下位置：
templates/yourtemplate/js
和
templates/yourtemplate/css
然后在模板的index.php中，添加以下代码：
$gantry->addScript("name_of_file.js");
$gantry->addStyle("name_of_file.css");
解决方案2
2 2013-10-21 19:15:12
加载Javascript和CSS文件的Joomla方法是JHtml::script('path-to-file'); 和JHtml::stylesheet('path-to-stylesheet'); 。 Docpage： http ://docs.joomla.org/Adding_JavaScript_and_CSS_to_the_page
您可以自由地将文件存储在何处，但是建议您对其进行一些整理。 将它们放入js和css文件夹是大多数人所做的。
旁注：Joomla 3.x随附了jQuery（1.8.1）版本。 您可以使用JHtml::_('jquery.framework'); 这还将确保仅加载一次。
Bootstrap中已经包含一个轮播插件，该插件也随Joomla 3.x一起提供。 您可以使用JHtml::_('bootstrap.carousel');加载该文件JHtml::_('bootstrap.carousel'); 。 如果使用那个，则不必显式加载jQuery，因为它也将解决此问题。
有关所含框架的更多信息，请参见http://docs.joomla.org/J3.1:Javascript_Frameworks 。
如何将JQuery添加到Joomla 3页面
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.