我正在尝试学习如何将一个简单的html网站http://www.slynkon.com/business/转换成Joomla模板。
到目前为止，我有这个，它看起来并不多，菜单问题是已知的，我将在另一个问题中解决这个问题，但从我可以看到我的JS文件没有加载或根本不工作，我似乎无法理解为什么，整晚坐着试图让它工作，什么也没有。
这是我到目前为止的努力:http://www.slynkon.com/joomla/
代码如下:
<?php defined( '_JEXEC' ) or die; ?>
<?php echo '<?'; ?>xml version="1.0" encoding="<?php echo $this->_charset ?>"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict/EN" "http://www.w3.org/TR/xhtml/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>">
<head>
<jdoc:include type="head"/>
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/style.css" media="screen" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/flexslider.css" media="screen" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/layer-slider.css" media="screen" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/prettyPhoto.css" media="screen"/>
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/font-awesome/font-awesome.min.css" media="screen" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/fontello/fontello.css" media="screen" />
<link rel="stylesheet" id="main-color" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/colors/orange-color.css" media="screen" />
<?php $doc = JFactory::getDocument();
$doc->addScript($this->baseurl.'/templates/'.$this->template.'/js/colorpicker.js', 'text/javascript');
$doc->addScript($this->baseurl.'/templates/'.$this->template.'/js/custom.js', 'text/javascript');
$doc->addScript($this->baseurl.'/templates/'.$this->template.'/js/fitVids.js', 'text/javascript');
$doc->addScript($this->baseurl.'/templates/'.$this->template.'/js/flex-slider.min.js', 'text/javascript');
$doc->addScript($this->baseurl.'/templates/'.$this->template.'/js/flickr.js', 'text/javascript');
$doc->addScript($this->baseurl.'/templates/'.$this->template.'/js/instagram.js', 'text/javascript');
$doc->addScript($this->baseurl.'/templates/'.$this->template.'/js/isotope.min.js', 'text/javascript');
$doc->addScript($this->baseurl.'/templates/'.$this->template.'/js/jquery.cookie.js', 'text/javascript');
$doc->addScript($this->baseurl.'/templates/'.$this->template.'/js/jquery.jcarousel.min.js', 'text/javascript');
$doc->addScript($this->baseurl.'/templates/'.$this->template.'/js/jquery.layerslider.js', 'text/javascript');
$doc->addScript($this->baseurl.'/templates/'.$this->template.'/js/jquery.min.js', 'text/javascript');
$doc->addScript($this->baseurl.'/templates/'.$this->template.'/js/jquery.theme.plugins.min.js', 'text/javascript');
$doc->addScript($this->baseurl.'/templates/'.$this->template.'/js/jquery.twitter.js', 'text/javascript');
$doc->addScript($this->baseurl.'/templates/'.$this->template.'/js/layerslider.transitions.js', 'text/javascript');
$doc->addScript($this->baseurl.'/templates/'.$this->template.'/js/map.min.js', 'text/javascript');
$doc->addScript($this->baseurl.'/templates/'.$this->template.'/js/navigation.min.js', 'text/javascript');
$doc->addScript($this->baseurl.'/templates/'.$this->template.'/js/prettyPhoto.min.js', 'text/javascript');
$doc->addScript($this->baseurl.'/templates/'.$this->template.'/js/styleswitch.js', 'text/javascript');
$doc->addScript($this->baseurl.'/templates/'.$this->template.'/js/switcher.js', 'text/javascript'); ?>
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/style-switcher.css" media="screen"/>
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/colorpicker.css" media="screen"/>
</head>
<body>
<div id="container"><!-- main container starts-->
<div id="wrapp"><!-- main wrapp starts-->
<header id="header"><!--header starts -->
<div class="container">
<div id="header-top">
<a href="index.html" id="logo"><img src="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/images/logo.png" alt="" /></a><!--your logo-->
<div id="header-links">
<ul class="social-icons header"><!-- header social links starts-->
<li><a href="#"><i class="icon-social-twitter"></i></a></li>
<li><a href="#"><i class="icon-social-facebook"></i></a></li>
<li><a href="#"><i class="icon-social-linkedin"></i></a></li>
<li><a href="#"><i class="icon-social-gplus"></i></a></li>
<li><a href="#"><i class="icon-social-skype"></i></a></li>
<li><a href="#"><i class="icon-social-dribbble"></i></a></li>
<li><a href="#"><i class="icon-social-pinterest"></i></a></li>
</ul><!--header social links ends -->
<h4>Contact Phone: <span>+987 654 321 000</span></h4><!--contact phone number-->
</div>
</div>
</div>
<div id="main-navigation"><!--main navigation wrapper starts -->
<div class="container">
<ul class="main-menu"><!--main navigation starts -->
<jdoc:include type="modules" name="menu" style="none"/>
</ul><!-- main navigation ends-->
<nav class="top-search"><!-- search starts-->
<form action="http://themes.trendywebstar.com/BusinessBox/404-error.html" method="get">
<button class="search-btn"></button>
<input class="search-field" type="text" onblur="if(this.value=='')this.value='Search';" onfocus="if(this.value=='Search')this.value='';" value="Search"/>
</form>
</nav><!--search ends -->
</div>
</div><!--main navigation wrapper ends -->
</header><!-- header ends-->
<div id="content">
<div id="layerslider"><!--layer slider starts-->
<div class="ls-layer" style="slidedirection: top; slidedelay: 8500;">
<h1 class="ls-s3 large_heading_01" style="top: 50px; left: 70px; durationin : 1500; slidedirection: top; slideoutdirection : top; delayin : 1100; ">Lavish Business Template.</h1>
<h2 class="ls-s3 large_heading_02" style="top: 90px; left: 70px; durationin : 1500; slidedirection: top; slideoutdirection : top; delayin : 800; ">Fully Responsive!</h2>
<h1 class="ls-s-2 ls_large_text_01" style="position: absolute; top:170px; left:70px; slidedirection : bottom; durationin : 1000; durationout : 1000; easingin : easeInOutBack; easingout : easeInOutQuint; delayin : 1000; delayout : 0; showuntil : 0;">
Super Clean & Corporate HTML5 Template</h1>
<h1 class="ls-s-2 ls_large_text_01" style="position: absolute; top:215px; left: 70px; slidedirection : bottom; durationin : 1300; durationout : 1300; easingin : easeInOutBack; easingout : easeInOutQuint; delayin : 1300; delayout : 0; showuntil : 0;">
Works Perfectly on any devices</h1>
<h1 class="ls-s-2 ls_large_text_01" style="position: absolute; top:260px; left: 70px; slidedirection : bottom; durationin : 1500; durationout : 1500; easingin : easeInOutBack; easingout : easeInOutQuint; delayin : 1500; delayout : 0; showuntil : 0;">
Perferct for Your next big project</h1>
<h1 class="ls-s-2 ls_large_text_01" style="position: absolute; top:305px; left: 70px; slidedirection : bottom; durationin : 1800; durationout : 1800; easingin : easeInOutBack; easingout : easeInOutQuint; delayin : 1800; delayout : 0; showuntil : 0;">
Comes in 30 Color Versions</h1>
<img class="ls-s4" alt=" " style="top: 0px; left: 400px; durationin : 1500; durationout: 1000; slidedirection : left; slideoutdirection : left; " src="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/images/slider/layer/4/full_man.png" alt="" />
</div>
<!--/ .ls-layer-->
<div class="ls-layer" style="background-color:#fafafa; slidedirection: bottom; slidedelay: 4500;">
<img class="ls-s-1 " src="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/images/slider/layer/1/item-01.png" alt=" " style="position: absolute; top: 0px; left:440px; slidedirection : bottom;durationin : 1000; durationout : 1000; easingin : easeInSine; easingout : easeOutSine; delayin : 300; delayout : 0; showuntil : 0; ">
<h1 class="ls-s-2 ls_large_text_01" style="position: absolute; top:100px; left:70px; slidedirection : bottom; durationin : 1000; durationout : 1000; easingin : easeInOutBack; easingout : easeInOutQuint; delayin : 1000; delayout : 0; showuntil : 0;">
23 Valid HTML5 Pages Included</h1>
<h1 class="ls-s-2 ls_large_text_01" style="position: absolute; top:145px; left: 70px; slidedirection : bottom; durationin : 1300; durationout : 1300; easingin : easeInOutBack; easingout : easeInOutQuint; delayin : 1300; delayout : 0; showuntil : 0;">
Filterable Portfolio</h1>
<h1 class="ls-s-2 ls_large_text_01" style="position: absolute; top:190px; left: 70px; slidedirection : bottom; durationin : 1500; durationout : 1500; easingin : easeInOutBack; easingout : easeInOutQuint; delayin : 1500; delayout : 0; showuntil : 0;">
Working Contact Form</h1>
<h1 class="ls-s-2 ls_large_text_01" style="position: absolute; top:235px; left: 70px; slidedirection : bottom; durationin : 1800; durationout : 1800; easingin : easeInOutBack; easingout : easeInOutQuint; delayin : 1800; delayout : 0; showuntil : 0;">
3 Blog Layout Included</h1>
</div>
<div class="ls-layer" style="slidedirection: bottom; slidedelay: 4500;">
<img src="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/images/slider/layer/2/bg.jpg" class="ls-bg" alt=" ">
<h1 class="ls-s-2 ls_large_text_02" style="position: absolute; top:100px; left:70px; slidedirection : top; durationin : 1000; durationout : 1000; easingin : easeInOutBack; easingout : easeInOutQuint; delayin : 1000; delayout : 0; showuntil : 0;">
Premium Layer Slider Included</h1>
<h1 class="ls-s-2 ls_large_text_02" style="position: absolute; top:145px; left: 70px; slidedirection : top; durationin : 1300; durationout : 1300; easingin : easeInOutBack; easingout : easeInOutQuint; delayin : 1300; delayout : 0; showuntil : 0;">
250+ Icons Included</h1>
<h1 class="ls-s-2 ls_large_text_02" style="position: absolute; top:190px; left: 70px; slidedirection : top; durationin : 1500; durationout : 1500; easingin : easeInOutBack; easingout : easeInOutQuint; delayin : 1500; delayout : 0; showuntil : 0;">
500+ Custom Fonts Available</h1>
<img class="ls-s-1 " src="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/images/slider/layer/2/item-01.png" alt="" style="position: absolute; top: 50px; left: 585px; durationin : 1000; durationout : 1000; easingin : easeInSine; easingout : easeOutSine; delayin : 300; delayout : 0; showuntil : 0; ">
</div>
<div class="ls-layer" style="slidedirection: bottom; slidedelay: 4500;">
<img src="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/images/slider/layer/3/bg.jpg" class="ls-bg" alt=" ">
<h1 class="ls-s-2 ls_large_text_01" style="position: absolute; top:100px; left:70px; slidedirection : bottom; durationin : 1000; durationout : 1000; easingin : easeInOutBack; easingout : easeInOutQuint; delayin : 1000; delayout : 0; showuntil : 0;">
Easy to Use and Customize</h1>
<h1 class="ls-s-2 ls_large_text_02" style="position: absolute; top:145px; left: 70px; slidedirection : top; durationin : 1300; durationout : 1300; easingin : easeInOutBack; easingout : easeInOutQuint; delayin : 1300; delayout : 0; showuntil : 0;">
Simply add any Color Layout You wish</h1>
<h1 class="ls-s-2 ls_large_text_01" style="position: absolute; top:190px; left: 70px; slidedirection : bottom; durationin : 1500; durationout : 1500; easingin : easeInOutBack; easingout : easeInOutQuint; delayin : 1500; delayout : 0; showuntil : 0;">
Pricing Taables Included</h1>
<h1 class="ls-s-2 ls_large_text_02" style="position: absolute; top:235px; left: 70px; slidedirection : top; durationin : 1800; durationout : 1800; easingin : easeInOutBack; easingout : easeInOutQuint; delayin : 1800; delayout : 0; showuntil : 0;">
Lots of Custom Features Included</h1>
<img class="ls-s-1 " src="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/images/slider/layer/3/item-01.png" alt="" style="position: absolute; top: 20px; left: 450px; durationin : 1000; durationout : 1000; easingin : easeInSine; easingout : easeOutSine; delayin : 300; delayout : 0; showuntil : 0; ">
</div>
</div><!--layer slider ends-->
<div class="home-intro"><!--home intro starts-->
<div class="container">
<div class="three-fourth">
<jdoc:include type="modules" name="top-left" style="none"/>
</div>
<jdoc:include type="modules" name="header-right" style="none"/>
</div>
</div><!--home intro ends-->
<div class="container">
<div class="one-third"><!--block with icon starts-->
<div class="img-holder">
<i class="icon-desktop"></i>
</div>
<jdoc:include type="modules" name="middle-left" style="none"/>
</div><!--block with icon ends-->
<div class="one-third"><!--block with icon starts-->
<div class="img-holder">
<i class="icon-envelope-alt"></i>
</div>
<jdoc:include type="modules" name="middle" style="none"/>
</div><!--block with icon ends-->
<div class="one-third last"><!--block with icon starts-->
<div class="img-holder">
<i class="icon-time"></i>
</div>
<jdoc:include type="modules" name="middle-right" style="none"/>
</div><!--block with icon ends-->
</div>
<div class="latest-projects-wrapp">
<div class="container">
<jdoc:include type="modules" name="bottom-middle-left-left" style="none"/>
<div class="three-fourth last">
<div class="jcarousel-container "><!--project carousel starts-->
<ul id="projects-carousel">
<li>
<div class="portfolio-item">
<a href="images/portfolio/portfolio-item-1.jpg" class="portfolio-item-link" data-rel="prettyPhoto" >
<span class="portfolio-item-hover"></span><img src="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/images/portfolio/portfolio-item-1.jpg" alt="" />
</a>
<jdoc:include type="modules" name="bottom-middle-left" style="none"/>
</div>
</li>
<li>
<div class="portfolio-item">
<a href="images/portfolio/portfolio-item-2.jpg" class="portfolio-item-link" data-rel="prettyPhoto" >
<span class="portfolio-item-hover"></span><img src="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/images/portfolio/portfolio-item-2.jpg" alt="" />
</a>
<jdoc:include type="modules" name="bottom-middle-middle" style="none"/>
</div>
</li>
<li>
<div class="portfolio-item">
<a href="images/portfolio/portfolio-item-3.jpg" class="portfolio-item-link" data-rel="prettyPhoto" >
<span class="portfolio-item-hover"></span><img src="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/images/portfolio/portfolio-item-3.jpg" alt="" />
</a>
<jdoc:include type="modules" name="buttom-middle-right" style="none"/>
</div>
</li>
</ul>
</div><!--project carousel ends-->
</div>
</div>
</div>
<div class="container">
<ul class="clients-grid one-fifth clients"><!--clients list starts -->
<li><a href="#" data-rel="prettyPhoto"><img src="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/images/clients/client-1.png" alt="" /></a></li>
<li><a href="#" data-rel="prettyPhoto"><img src="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/images/clients/client-2.png" alt="" /></a></li>
<li><a href="#" data-rel="prettyPhoto"><img src="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/images/clients/client-3.png" alt="" /></a></li>
<li><a href="#" data-rel="prettyPhoto"><img src="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/images/clients/client-4.png" alt="" /></a></li>
<li><a href="#" data-rel="prettyPhoto"><img src="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/images/clients/client-5.png" alt="" /></a></li>
</ul><!--clients list ends -->
</div>
<footer id="footer"><!-- footer starts-->
<div class="container">
<jdoc:include type="modules" name="footer-left" style="none"/>
<div class="one-fourth">
<h4>Latest Tweets</h4>
<ul id="twitter"><!-- twitter widget starts-->
</ul><!-- twitter widget ends-->
<p>
<a href="#">Follow Me on Twitter</a>
</p>
</div>
<!--<div class="one-fourth">
<h4>Latest Posts</h4>
<ul><!-- latest posts widget starts-->
<!--<li><a href="blog-post.html">Free Responsive HTML5 Template.</a></li>
<li><a href="blog-post.html">PSD Widget UI Free Download</a></li>
<li><a href="blog-post.html">Free Business Bootsrap Template</a></li>
<li><a href="blog-post.html">Custom WordPress Themes</a></li>
<!--</ul><!-- lastest posts widget ends-->
<!--</div>-->
<!--<div class="one-fourth last">
<h4>Flickr Photos</h4>
<div class="flickr-widget"><!-- flickr widget starts-->
<!--</div><!--flickr widget ends-->
<!--</div>-->
</div>
</footer><!--footer ends -->
<div id="copyrights"><!-- copyrights starts-->
<div class="container">
<jdoc:include type="modules" name="footer-left" style="none"/>
<div class="one-half last">
<ul class="social-icons footer"><!-- social links starts-->
<li><a href="#"><i class="icon-social-twitter"></i></a></li>
<li><a href="#"><i class="icon-social-facebook"></i></a></li>
<li><a href="#"><i class="icon-social-linkedin"></i></a></li>
<li><a href="#"><i class="icon-social-gplus"></i></a></li>
<li><a href="#"><i class="icon-social-skype"></i></a></li>
<li><a href="#"><i class="icon-social-dribbble"></i></a></li>
<li><a href="#"><i class="icon-social-pinterest"></i></a></li>
</ul><!-- social links ends-->
</div>
</div>
</div><!-- copyrights ends -->
</div><!-- main content starts-->
</div> <!-- main wrapp starts-->
</div><!-- main container ends-->
</body>
</html>
好的，我已经在<head>中浏览了所有代码并对其进行了重组，并更改了一些东西。让我知道这是否适合你:
<?php
defined( '_JEXEC' ) or die;
$app = JFactory::getApplication();
$doc = JFactory::getDocument();
$user = JFactory::getUser();
$this->language = $doc->language;
$this->direction = $doc->direction;
//Load jQuery using Joomla's built in method
JHtml::_('jquery.framework');
// Define the template path
$template_path = 'templates/' .$this->template;
// Le Javascript
$doc->addScript($template_path . '/js/colorpicker.js');
$doc->addScript($template_path . '/js/custom.js');
$doc->addScript($template_path . '/js/fitVids.js');
$doc->addScript($template_path . '/js/flex-slider.min.js');
$doc->addScript($template_path . '/js/flickr.js');
$doc->addScript($template_path . '/js/instagram.js');
$doc->addScript($template_path . '/js/isotope.min.js');
$doc->addScript($template_path . '/js/jquery.cookie.js');
$doc->addScript($template_path . '/js/jquery.jcarousel.min.js');
$doc->addScript($template_path . '/js/jquery.layerslider.js');
$doc->addScript($template_path . '/js/jquery.min.js');
$doc->addScript($template_path . '/js/jquery.theme.plugins.min.js');
$doc->addScript($template_path . '/js/jquery.twitter.js');
$doc->addScript($template_path . '/js/layerslider.transitions.js');
$doc->addScript($template_path . '/js/map.min.js');
$doc->addScript($template_path . '/js/navigation.min.js');
$doc->addScript($template_path . '/js/prettyPhoto.min.js');
$doc->addScript($template_path . '/js/styleswitch.js');
?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<jdoc:include type="head"/>
<!-- Le CSS -->
<link rel="stylesheet" href="<?php echo $template_path ?>/css/style.css" />
<link rel="stylesheet" href="<?php echo $template_path ?>/css/flexslider.css" />
<link rel="stylesheet" href="<?php echo $template_path ?>/css/layer-slider.css" />
<link rel="stylesheet" href="<?php echo $template_path ?>/css/prettyPhoto.css" />
<link rel="stylesheet" href="<?php echo $template_path ?>/css/font-awesome/font-awesome.min.css" />
<link rel="stylesheet" href="<?php echo $template_path ?>/css/fontello/fontello.css" />
<link rel="stylesheet" href="<?php echo $template_path ?>/css/colors/orange-color.css" id="main-color" />
<link rel="stylesheet" href="<?php echo $template_path ?>/css/style-switcher.css" media="screen"/>
<link rel="stylesheet" href="<?php echo $template_path ?>/css/colorpicker.css" media="screen"/>
</head>
您还会注意到我添加了JHtml::_('jquery.framework');，这是Joomla导入jQuery的方法，并确保它只完成一次。然而，这是一款Joomla 3。因此，如果您使用的是Joomla 2.5，请删除它并参考以下内容:
在Joomla中导入jQuery
希望能有所帮助