0

Есть 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 &ndash; Slider</a>
                </li>
                <li><a href="portfolio-item-image.html">Portfolio Item &ndash; Image</a>
                </li>
                <li><a href="portfolio-item-embedded-video.html">Portfolio Item &ndash; Embedded Video</a>
                </li>
                <li><a href="portfolio-item-self-hosted-video.html">Portfolio Item &ndash; 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 &hellip;" 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 &amp; 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 &amp; 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">&ndash; <a href="services.html">View All Services &raquo;</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 &amp; 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">&ndash; <a href="portfolio.html">View All Projects &raquo;</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&amp;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&amp;byline=0&amp;portrait=0&amp;color=ffffff" width="220" height="110" allowFullScreen></iframe>
            </div>
            <h4 class="entry-title"><a href="portfolio-item-embedded-video.html">Arhitectural Film &ndash; 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">&ndash; <a href="blog.html">View All Posts &raquo;</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 &hellip;</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 &hellip;</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 &hellip;</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 &hellip;</p>
                  </div>
                  <div class="quote-meta">&mdash; 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 &hellip;</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 &hellip;" class="required">
          </form>
          <p class="tip"><span class="note">&#42;</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">&ndash; <a href="testimonials.html">View All Testimonials &raquo;</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 &ndash; 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>

1
  • Не имеет смысла добавлять слова Ruby on rails в заголовок вопроса, так как присутствует метка ruby-on-rails.
    – Regent
    14 июн 2015 в 13:34

1 ответ 1

1

Нужно заменить все ссылки на изображения в CSS и JS файлах с использованием assets pepeline

  1. Переименуйте CSS файлы шаблона в имя.css.erb
  2. Там, где есть ссылки на картинки, поменяйте по аналогии с примером:

    .class { background-image: url(<%= asset_path 'image.png' %>) }
    

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.