codecademy 练习：作品集答案

【问题标题】：codecademy exercise: portfoliocodecademy 练习：作品集
【发布时间】：2015-07-04 10:23:14
【问题描述】：

我正在从事 codecademy 练习 portfolio，但我无法理解资产管道位：第 14 步练习的指令说：

将您的 JavaScript 代码保存到 app/assets/javascripts/，然后将其包含在此处显示的页面中（链接）。

我所做的是在该目录中创建 app.js 文件，并将我的 javascript 代码放在该文件中，以便在 application.html.erb 中进行图像幻灯片放映和 jquery。我可以看到幻灯片，并且当我使用 heroku 部署应用程序时一切正常，我看不到幻灯片而不是所有图片。这是我到目前为止所做的链接：[Myapp][3]

我是 Rails 的新手，所以如果有人能阐明指令期望我做什么以及如何在 heroku 中查看幻灯片，我将不胜感激。

$(function() {
    $('.banner').unslider();
});

// Place all the styles related to the Pages controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/

.header li {
display: inline-block;
position: relative;
padding: 20px;
font-size: 20px;
}

.header li a{
color:	#333300;
}


.jumbotron {
background: url('https://dl.dropboxusercontent.com/s/5tug99ala22yzk2/19087585626_d16bace51e_k.jpg?dl=0') no-repeat center center fixed;
height: 700px;
}
.jumbotron h1{
font-size: 50px;

}

.jumbo{

background-color : #FFFFFF;
padding: 10px;

}

.btn-default {
 position: relative;
 display: inline-block;
 color: white;
 background-color: #333333;
 font-family: Raleway, sans-serif;
 font-size: 20px;
 padding: 20px;
 
}

.supporting h3 {
position: relative;
text-align: center;

}

.supporting p {
position: relative;
text-align: center;

}

   
.banner { position: relative; overflow: auto;}
    .banner li { list-style: none; }
        .banner ul li { float: left;}

<!DOCTYPE html>
<html>
<head>
  <title>Portfolio</title>
  <link href='https://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  
  <script src="//unslider.com/unslider.min.js"></script>
  <%= csrf_meta_tags %>
</head>
<body>
  
  <div class ="header">
  <div class="nav nav-pills">
   <div class="container">
    <ul class ="pull-left">  
      <li><%= link_to "Welcome", root_path %></li>
    <li><%= link_to "Portfolio", portfolio_path %></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
     </ul>
   <ul class="pull-right">
     <li><a href="#">Mashuk</a></li>
     </ul>
   </div>
   </div>
</div>

<%= yield %>
  
  
<div class="footer">
  
      <div class="container">
        <div class="pull-right">
        <a href ="#"><img src ="https://dl.dropboxusercontent.com/s/14kntwgnr2bnegw/inspiration.svg?dl=0"></a>
        
          <div><p>&copy; 2015 Mashuk</p>
            
          <p>Icons made by <a href="http://www.flaticon.com/authors/freepik" title="Freepik">Freepik</a> from <a href="http://www.flaticon.com" title="Flaticon">www.flaticon.com</a>             is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0">CC BY 3.0</a></p>
          
          </div>
       </div>

    </div>  
</div>
</body>
</html>

【问题讨论】：

您应该针对您的问题分析一些代码。
我现在已经添加了我的代码。

标签： javascript jquery ruby-on-rails heroku

【解决方案1】：

GET https://unslider.com/unslider.min.js net::ERR_INSECURE_RESPONSE

Unslider.com 不支持 HTTPS。

Heroku 应用程序在 HTTPS 上运行，由于您使用的是协议相对链接 //unslider.com/unslider.min.js，它还尝试通过 HTTPS 加载脚本。

最简单的解决方案是下载脚本并将其放在/vendor/assets/javascripts。

如果您想使用 sprockets 将文件包含在 application.js 中，请参阅 How do you instruct Sprockets to include files from /vendors/assets/components on Heroku?。

【讨论】：

谢谢！这说得通。我会试试看是否能解决问题。