将HTML转换为Joomla模板,JS文件无法加载

时间:2014-08-21 12:16:44

标签: javascript php html joomla module

我正在尝试学习如何将简单的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 &amp; 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>

1 个答案:

答案 0 :(得分:0)

是的,我已经浏览了<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.x功能,所以如果你正在使用Joomla 2.5,那么删除它并参考:

Importing jQuery into Joomla

希望这有帮助