Question

我正在进行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>

Answer 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?。

codecademy练习：组合

1 个答案: