Есть Rails приложение, к которому нужно подключить шаблон finesse.
В application.css
*= require_self
*= require_tree .
в application.js
//= require jquery
//= require jquery_ujs
//= require_tree .
в application.html.erb
<%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %>
<%= javascript_include_tag "application", "data-turbolinks-track" => true %>
<%= csrf_meta_tags %>
В папке /stylesheets файлы:
/colors
application.css
flexslider.css
html5-reset.css
ie.css
jquery.fancybox.css
mediaelementplayer.css
polyglot-language-switcher.css
shortcodes.css
style.css
В папке /javascripts файлы:
application.js
custom.js
ddlevelsmenu.js
ie.js
jflickrfeed.min.js
jquery.cycle.all.js
jquery.easing.1.3.js
jquery.fancybox.pack.js
jquery.fitvids.js
jquery.flexslider-min.js
jquery.gmap.min.js
jquery.jcarousel.min.js
jquery.polyglot.language.switcher.js
jquery.quicksand.js
jquery.touchSwipe.min.js
jquery.tweet.js
jquery.ui.totop.min.js
jquery.validate.min.js
jquery-1.11.1.min.js
jquery-ui-1.10.1.custom.min.js
mediaelement-and-player.min.js
modernizr.custom.js
respond.min.js
responsive-tables.js
tinynav.min.js
Все ссылки на изображения в шаблоне имеют вид:
./../images/background-patterns/boxed/grid.png
Все файлы, которые шли вместе с шаблоном, были размещены по папкам в соответствии с архитектурой приложения, но дело в том, что при рендере страницы не работают JavaScript элементы (карусель и т.д.) и не подгружаются изображения. Как правильно подключать шаблоны в Rails приложениях?
Пример index.html.erb
<body>
<!-- begin container -->
<div id="wrap">
<!-- begin header -->
<header id="header" class="container">
<!-- begin header top -->
<section id="header-top" class="clearfix">
<!-- begin header left -->
<div class="one-half">
<h1 id="logo"><a href="index.html"><img src="logo.png" alt="Finesse"></a></h1>
<p id="tagline">Responsive Business Theme</p>
</div>
<!-- end header left -->
<!-- begin contact info -->
<div class="contact-info">
<p class="phone">(123) 456-7890</p>
<p class="email"><a href="mailto:info@finesse.com">info@finesse.com</a>
</p>
</div>
<!-- end contact info -->
</div>
<!-- end header right -->
</section>
<!-- end header top -->
<!-- begin navigation bar -->
<section id="navbar" class="clearfix">
<!-- begin navigation -->
<nav id="nav">
<ul id="navlist" class="clearfix">
<li class="current"><a href="index.html" data-rel="submenu1">Home</a>
<ul id="submenu1" class="ddsubmenustyle">
<li><a href="index.html">Home Version 1</a>
</li>
<li><a href="index-2.html">Home Version 2</a>
</li>
</ul>
</li>
<li><a href="about-us.html" data-rel="submenu2">Templates</a>
<ul id="submenu2" class="ddsubmenustyle">
<li><a href="about-us.html">About Us</a>
</li>
<li><a href="services.html">Services</a>
</li>
<li><a href="testimonials.html">Testimonials</a>
</li>
<li><a href="sitemap.html">Sitemap</a>
</li>
<li><a href="404-error-page.html">404 Error Page</a>
</li>
<li><a href="search-results.html">Search Results</a>
</li>
<li><a href="full-width-page.html">Full Width Page</a>
</li>
<li><a href="page-right-sidebar.html">Page with Right Sidebar</a>
</li>
<li><a href="page-left-sidebar.html">Page with Left Sidebar</a>
</li>
<li><a href="#">Multi-Level Drop-Down</a>
<ul>
<li><a href="#">Drop-Down Example</a>
</li>
<li><a href="#">Multi-Level Drop-Down</a>
<ul>
<li><a href="#">Drop-Down Example</a>
</li>
<li><a href="#">Drop-Down Example</a>
</li>
<li><a href="#">Drop-Down Example</a>
</li>
</ul>
</li>
<li><a href="#">Drop-Down Example</a>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="elements.html" data-rel="submenu3">Features</a>
<ul id="submenu3" class="ddsubmenustyle">
<li><a href="elements.html">Elements</a>
</li>
<li><a href="grid-columns.html">Grid Columns</a>
</li>
<li><a href="pricing-tables.html">Pricing Tables</a>
</li>
<li><a href="images.html">Images</a>
</li>
<li><a href="video.html">Video</a>
</li>
</ul>
</li>
<li><a href="portfolio.html" data-rel="submenu4">Portfolio</a>
<ul id="submenu4" class="ddsubmenustyle">
<li><a href="portfolio.html">Portfolio Overview</a>
</li>
<li><a href="portfolio-item-slider.html">Portfolio Item – Slider</a>
</li>
<li><a href="portfolio-item-image.html">Portfolio Item – Image</a>
</li>
<li><a href="portfolio-item-embedded-video.html">Portfolio Item – Embedded Video</a>
</li>
<li><a href="portfolio-item-self-hosted-video.html">Portfolio Item – Self-Hosted Video</a>
</li>
</ul>
</li>
<li><a href="blog.html" data-rel="submenu5">Blog</a>
<ul id="submenu5" class="ddsubmenustyle">
<li><a href="blog.html">Blog Overview</a>
</li>
<li><a href="blog-post.html">Blog Post</a>
</li>
</ul>
</li>
<li><a href="contact.php">Contact</a>
</li>
</ul>
</nav>
<!-- end navigation -->
<!-- begin search form -->
<form id="search-form" action="search.php" method="get">
<input id="s" type="text" name="s" placeholder="Search …" style="display: none;">
<input id="search-submit" type="submit" name="search-submit" value="Search">
</form>
<!-- end search form -->
</section>
<!-- end navigation bar -->
</header>
<!-- end header -->
<!-- begin content -->
<section id="content" class="container clearfix">
<!-- begin slider -->
<section id="slider-home">
<div class="flex-container">
<div class="flexslider">
<ul class="slides">
<li>
<img src="./../images/slider/slides/living-white-940x350.png" alt="White Living Room">
<div class="flex-caption">
<h2>Responsive Layout</h2>
<p>You can describe your slides using captions. This is an example of a caption with <a href="#">a link</a>.</p>
</div>
</li>
<li>
<img src="./../images/slider/slides/villa-940x350.png" alt="Villa">
<div class="flex-caption">
<h2>HTML5 & CSS3 Code</h2>
<p>You can describe your slides using captions. This is an example of a caption with <a href="#">a link</a>.</p>
</div>
</li>
<li>
<img src="./../images/slider/slides/building-940x350.png" alt="Building">
<div class="flex-caption">
<h2>Clean Design</h2>
<p>You can describe your slides using captions. This is an example of a caption with <a href="#">a link</a>.</p>
</div>
</li>
<li>
<img src="./../images/slider/slides/living-brown-940x350.png" alt="Brown Living Room">
<div class="flex-caption">
<h2>Touch Enabled</h2>
<p>You can describe your slides using captions. This is an example of a caption with <a href="#">a link</a>.</p>
</div>
</li>
<li>
<img src="./../images/slider/slides/dining-brown-940x350.png" alt="Brown Dining Room">
<div class="flex-caption">
<h2>Easy to Customize</h2>
<p>You can describe your slides using captions. This is an example of a caption with <a href="#">a link</a>.</p>
</div>
</li>
</ul>
</div>
</div>
</section>
<!-- end slider -->
<!-- begin infobox -->
<section>
<div class="infobox">
<div class="infobox-inner">
<a class="button large" href="http://themeforest.net/user/ixtendo/portfolio">Learn More</a>
<div class="with-button">
<h2>Responsive Business & Portfolio Theme with a Refreshingly Clean Design</h2>
<p>Carefully handcrafted using the latest technologies, Finesse features a clean design, as well as extended functionality that will come in very handy. Take a tour and discover its features!</p>
</div>
<a class="button large mobile-button" href="http://themeforest.net/user/ixtendo/portfolio">Learn More</a>
</div>
</div>
</section>
<!-- end infobox -->
<!-- begin services -->
<section>
<h2>Our Services <span class="more">– <a href="services.html">View All Services »</a></span></h2>
<!-- begin iconbox carousel -->
<ul class="iconbox-carousel">
<li>
<div class="iconbox computer">
<h4><a href="services.html#responsive-layouts"><span class="iconbox-icon"></span>Responsive Layouts</a></h4>
<p>Layouts that scale gracefully across varying screen sizes.</p>
</div>
</li>
<li>
<div class="iconbox mouse">
<h4><a href="services.html#html5-css3-code"><span class="iconbox-icon"></span>HTML5 & CSS3 Code</a></h4>
<p>Standards-compliant and cross-browser HTML/CSS code.</p>
</div>
</li>
<li>
<div class="iconbox applications">
<h4><a href="services.html#clean-design"><span class="iconbox-icon"></span>Clean Design</a></h4>
<p>Professional, clutter-free and aesthetically simple design.</p>
</div>
</li>
<li>
<div class="iconbox chemical">
<h4><a href="services.html#it-solutions"><span class="iconbox-icon"></span>IT Solutions</a></h4>
<p>Connecting technology to your business needs.</p>
</div>
</li>
</ul>
<!-- end iconbox carousel -->
</section>
<!-- end services -->
<!-- begin selected projects -->
<section>
<h2>Selected Projects <span class="more">– <a href="portfolio.html">View All Projects »</a></span></h2>
<!-- begin project carousel -->
<ul class="project-carousel">
<li class="entry">
<div class="entry-image">
<a class="fancybox" href="./../images/entries/full-size/dining-white.jpg" title="Project Title"><span class="overlay zoom"></span><img src="images/entries/220x130/dining-white-220x130.png" alt=""></a>
</div>
<h4 class="entry-title"><a href="portfolio-item-image.html">White Dining Room</a></h4>
<div class="entry-content">
<p>Image project with lightbox.</p>
</div>
</li>
<li class="entry">
<div class="entry-image">
<a class="fancybox" data-fancybox-group="gallery-living-large-windows" href="./../images/entries/full-size/living-large-windows.jpg" title="Project Title"><span class="overlay zoom"></span><img src="images/entries/220x130/living-large-windows-220x130.png" alt=""></a>
<a class="fancybox invisible" data-fancybox-group="gallery-living-large-windows" href="./../images/entries/full-size/living-brown.jpg" title="Project Title"><span class="overlay zoom"></span><img src="images/entries/220x130/living-brown-220x130.png" alt=""></a>
<a class="fancybox invisible" data-fancybox-group="gallery-living-large-windows" href="./../images/entries/full-size/dining-and-living-cream.jpg" title="Project Title"><span class="overlay zoom"></span><img src="images/entries/220x130/dining-and-living-cream-220x130.png" alt=""></a>
</div>
<h4 class="entry-title"><a href="portfolio-item-image.html">Living with Large Windows</a></h4>
<div class="entry-content">
<p>Gallery project with lightbox.</p>
</div>
</li>
<li class="entry">
<div class="entry-slider">
<ul>
<li><a class="fancybox" data-fancybox-group="gallery-living-brown" href="./../images/entries/full-size/living-brown.jpg" title="Project Title"><span class="overlay zoom"></span><img src="images/entries/220x130/living-brown-220x130.png" alt=""></a>
</li>
<li style="display: none;"><a class="fancybox" data-fancybox-group="gallery-living-brown" href="./../images/entries/full-size/dining-and-living-cream.jpg" title="Project Title"><span class="overlay zoom"></span><img src="images/entries/220x130/dining-and-living-cream-220x130.png" alt=""></a>
</li>
<li style="display: none;"><a class="fancybox" data-fancybox-group="gallery-living-brown" href="./../images/entries/full-size/living-white.jpg" title="Project Title"><span class="overlay zoom"></span><img src="images/entries/220x130/living-white-220x130.png" alt=""></a>
</li>
</ul>
</div>
<h4 class="entry-title"><a href="portfolio-item-slider.html">Brown Living Room</a></h4>
<div class="entry-content">
<p>Gallery project with slider and lightbox.</p>
</div>
</li>
<li class="entry">
<div class="entry-video">
<video width="220" height="130" style="width: 100%; height: 100%;" poster="images/entries/220x130/dining-and-living-cream-220x130.png" controls preload="none">
<!-- MP4 for Safari, IE9, iPhone, iPad, Android, and Windows Phone 7 -->
<source type="video/mp4" src="./../media/echo-hereweare.mp4" />
<!-- WebM/VP8 for Firefox4, Opera, and Chrome -->
<source type="video/webm" src="./../media/echo-hereweare.webm" />
<!-- Ogg/Vorbis for older Firefox and Opera versions -->
<source type="video/ogg" src="./../media/echo-hereweare.ogv" />
<!-- Optional: Add subtitles for each language -->
<track kind="subtitles" src="./../media/mediaelement.srt" srclang="en" />
<!-- Optional: Add chapters -->
<track kind="chapters" src="#" srclang="en" />
<!-- Flash fallback for non-HTML5 browsers without JavaScript -->
<object type="application/x-shockwave-flash" data="./flashmediaelement.swf">
<param name="movie" value="./flashmediaelement.swf" />
<param name="flashvars" value="controls=true&file=media/echo-hereweare.mp4" />
<!-- Image as a last resort -->
<img src="./entries/220x130/dining-and-living-cream-220x130.png" title="No video playback capabilities" alt="" />
</object>
</video>
</div>
<h4 class="entry-title"><a href="portfolio-item-self-hosted-video.html">Self-Hosted Video Project</a></h4>
<div class="entry-content">
<p>Self-hosted video project.</p>
</div>
</li>
<!-- begin row 2 -->
<li class="entry">
<div class="entry-image">
<a class="fancybox" href="./../images/entries/full-size/living-white.jpg" title="Project Title"><span class="overlay zoom"></span><img src="images/entries/220x130/living-white-220x130.png" alt=""></a>
</div>
<h4 class="entry-title"><a href="portfolio-item-image.html">White Living Room</a></h4>
<div class="entry-content">
<p>Image project with lightbox.</p>
</div>
</li>
<li class="entry">
<div class="entry-image">
<a class="fancybox" data-fancybox-group="gallery-study" href="./../images/entries/full-size/study.jpg" title="Project Title"><span class="overlay zoom"></span><img src="images/entries/220x130/study-220x130.png" alt=""></a>
<a class="fancybox invisible" data-fancybox-group="gallery-study" href="./../images/entries/full-size/dining-white2.jpg" title="Project Title"><span class="overlay zoom"></span><img src="images/entries/220x130/dining-white2-220x130.png" alt=""></a>
<a class="fancybox invisible" data-fancybox-group="gallery-study" href="./../images/entries/full-size/dining-brown.jpg" title="Project Title"><span class="overlay zoom"></span><img src="images/entries/220x130/dining-brown-220x130.png" alt=""></a>
</div>
<h4 class="entry-title"><a href="portfolio-item-image.html">Study</a></h4>
<div class="entry-content">
<p>Gallery project with lightbox.</p>
</div>
</li>
<li class="entry">
<h4 class="entry-title"><a href="portfolio-item-slider.html">White Dining Room 2</a></h4>
<div class="entry-content">
<p>Gallery project with slider and lightbox.</p>
</div>
</li>
<li class="entry">
<div class="entry-video">
<iframe src="http://player.vimeo.com/video/11624173?title=0&byline=0&portrait=0&color=ffffff" width="220" height="110" allowFullScreen></iframe>
</div>
<h4 class="entry-title"><a href="portfolio-item-embedded-video.html">Arhitectural Film – Interior</a></h4>
<div class="entry-content">
<p>Embedded video project.</p>
</div>
</li>
</ul>
<!-- end project carousel -->
</section>
<!-- end selected projects -->
<!-- begin latest posts -->
<section>
<h2>Latest Posts <span class="more">– <a href="blog.html">View All Posts »</a></span></h2>
<!-- begin post carousel -->
<ul class="post-carousel">
<li class="entry">
<div class="entry-image">
<a href="blog-post.html" title="Post Title"><span class="overlay link"></span><img src="./../images/entries/220x130/living-white-220x130.png" alt=""></a>
</div>
<div class="entry-meta">
<a href="blog-post.html" class="post-format-wrap" title="Permalink to How to Make Innovative Ideas Happen"><span class="post-format standard">Permalink</span></a>
<span>Mar 10, 2012</span>
</div>
<div class="entry-body">
<h4 class="entry-title"><a href="blog-post.html">How to Make Innovative Ideas Happen</a></h4>
<div class="entry-content">
<p>This is a standard post format. Here you can have a standard blog post …</p>
</div>
</div>
</li>
<div class="entry-meta">
<a href="blog-post.html" class="post-format-wrap" title="Permalink to The Elements of the Mobile User Experience"><span class="post-format video">Permalink</span></a>
<span>Mar 10, 2012</span>
</div>
<div class="entry-body">
<h4 class="entry-title"><a href="blog-post.html">The Elements of the Mobile User Experience</a></h4>
<div class="entry-content">
<p>This is a video post format. Here you can have a video blog post …</p>
</div>
</div>
</li>
<!-- begin row 2 -->
<li class="entry">
<div class="entry-audio">
<audio width="220" style="width: 100%;" src="./../media/AirReview-Landmarks-02-ChasingCorporate.mp3" type="audio/mp3" controls preload="none"></audio>
</div>
<div class="entry-meta">
<a href="blog-post.html" class="post-format-wrap" title="Permalink to How To Design A Mobile Game With HTML5"><span class="post-format audio">Permalink</span></a>
<span>Mar 10, 2012</span>
</div>
<div class="entry-body">
<h4 class="entry-title"><a href="blog-post.html">How To Design A Mobile Game With HTML5</a></h4>
<div class="entry-content">
<p>This is an audio post format. Here you can have an audio blog post …</p>
</div>
</div>
</li>
<li class="entry">
<div class="entry-meta">
<a href="blog-post.html" class="post-format-wrap" title="Permalink to Premium Templates and Themes!"><span class="post-format link">Permalink</span></a>
<span>Mar 10, 2012</span>
</div>
</li>
<li class="entry">
<div class="entry-meta">
<a href="blog-post.html" class="post-format-wrap" title="Permalink to the Quote Post"><span class="post-format quote">Permalink</span></a>
<span>Mar 10, 2012</span>
</div>
<div class="entry-body">
<div class="entry-content">
<blockquote class="simple">
<div class="quote-content">
<p>This is a quote post format. Here you can have a quote blog post …</p>
</div>
<div class="quote-meta">— Quote Author</div>
</blockquote>
</div>
</div>
</li>
<li class="entry">
<div class="entry-meta">
<a href="blog-post.html" class="post-format-wrap" title="Permalink to the Aside Post"><span class="post-format aside">Permalink</span></a>
<span>Mar 10, 2012</span>
</div>
<div class="entry-body">
<div class="entry-content">
<p>This is an aside post format. Here you can have an aside blog post …</p>
</div>
</div>
</li>
</ul>
<!-- end post carousel -->
</section>
<!-- end latest posts -->
<!-- begin newsletter -->
<section class="one-half">
<h2>Newsletter Subscription</h2>
<div id="newsletter-wrap">
<p>Subscribe to our email newsletter for useful tips and valuable resources sent out every second Monday.</p>
<div class="notification-box notification-box-success" style="display: none;">
<p>You have successfully subscribed to our newsletter. Look for the confirmation email.</p>
<a href="#" class="notification-close notification-close-success">x</a>
</div>
<div class="notification-box notification-box-error" style="display: none;">
<p>Your email address couldn't be subscribed because a server error occurred. Please try again later.</p>
<a href="#" class="notification-close notification-close-error">x</a>
</div>
<form id="newsletter-form" class="content-form clearfix" action="#" method="post">
<input id="subscribe" class="button" type="submit" name="subscribe" value="Subscribe">
<input id="newsletter" type="email" name="newsletter" placeholder="Enter your email address here …" class="required">
</form>
<p class="tip"><span class="note">*</span> Check your spam folder if the mail does not arrive.</p>
</div>
</section>
<!-- end newsletter -->
<!-- begin testimonials -->
<section class="one-half column-last">
<h2>Testimonials <span class="more">– <a href="testimonials.html">View All Testimonials »</a></span></h2>
<!-- begin testimonial carousel -->
<ul class="testimonial-carousel">
<li>
<blockquote class="speech-bubble">
<div class="quote-content">
<p>Great theme! Very intuitive, clean code, very well-organized documentation – I would highly recommend getting this theme; it’s ideal for further customization!</p>
<span class="quote-arrow"></span>
</div>
<div class="quote-meta">Harry Jones, Web Designer
<br>
<span class="grey-text">CreativeBrains</span>
</div>
</blockquote>
</li>
<li>
<blockquote class="speech-bubble">
<div class="quote-content">
<p>I would rate the template 5 out of 5 and here's why: it has a clean and straightforward look that will work for a variety of target audiences, which is important when you build for ROI.</p>
<span class="quote-arrow"></span>
</div>
<div class="quote-meta">Andrew Williams, Art Director
<br>
<span class="grey-text">SmartBiz</span>
</div>
</blockquote>
</li>
<li>
<blockquote class="speech-bubble">
<div class="quote-content">
<p>The template is really intuitive to customize and, the few instances where I needed help, you were right there to assist, in a timely manner, I might add. Well done, keep up the great work!</p>
<span class="quote-arrow"></span>
</div>
<div class="quote-meta">Larry Thompson, Web Developer
<br>
<span class="grey-text">BitVenture</span>
</div>
</blockquote>
</li>
</ul>
<!-- end testimonial carousel -->
</section>
<!-- end testimonials -->
</section>
<!-- end content -->
</div>
<!-- end container -->
</body>