javascript - 使用 Rails 4 应用程序实现 wrapbootstrap 主题的问题

Question

这里是 Rails 菜鸟。

我一直在摸索将 wrapbootstrap 一页视差主题 ( https://wrapbootstrap.com/theme/ashley-one-page-parallax-WB0R11207 ) 集成到我的 Rails 4 应用程序中。

解压缩文件后，index.html 页面(大部分)立即可用。

我尝试将其集成到新的 Rails 应用程序中所经历的过程:

• 将所有 CSS 文件转移到 assets/stylesheets 文件夹
• 将所有 JS 文件转移到 assets/javascripts 文件夹
• 在 application.js 和 application.css 中引用了所有 JS 和 CSS 文件
• 将所有图片传输到 assets/images 文件夹
• 生成新的页面 Controller / View ，并将之前讨论的 html 文件移动到该 View 中
• 将根分配给上述 html 文件

我遇到的问题是所有 JS 和 CSS 似乎都没有执行。我在 header 中包含 JS 和 CSS 标签。

我试过 rake assets:precompile，但没有成功。

关于我这里哪里出错的任何提示？

此外，index.html 文件的头部包含一堆 CSS 设置，即:

<!-- Bootstrap  -->
<link type="text/css" rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<!-- web font  -->
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,800" rel="stylesheet" type="text/css">
<!-- plugin css  -->
<link rel="stylesheet" type="text/css" href="js-plugin/animation-framework/animate.css" />
<link rel="stylesheet" type="text/css" href="js-plugin/magnific-popup/magnific-popup.css" />
<link type="text/css" rel="stylesheet" href="js-plugin/isotope/css/style.css">
<link rel="stylesheet" type="text/css" href="js-plugin/flexslider/flexslider.css" />
<link rel="stylesheet" type="text/css" href="js-plugin/pageSlide/jquery.pageslide.css" />
<!-- Owl carousel-->
<link rel="stylesheet" href="js-plugin/owl.carousel/owl-carousel/owl.carousel.css">
<link rel="stylesheet" href="js-plugin/owl.carousel/owl-carousel/owl.theme.css">

和正文底部的一堆javascrip标签，即:

<script type="text/javascript" src="js-plugin/respond/respond.min.js"></script>
<script type="text/javascript" src="js-plugin/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="js-plugin/jquery-ui/jquery-ui-1.8.23.custom.min.js"></script>
<!-- third party plugins  -->
<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
<script type="text/javascript" src="js-plugin/easing/jquery.easing.1.3.js"></script>

<script type="text/javascript" src="js-plugin/flexslider/jquery.flexslider-min.js"></script>

<script type="text/javascript" src="js-plugin/isotope/jquery.isotope.min.js"></script>
<script type="text/javascript" src="js-plugin/neko-contact-ajax-plugin/js/jquery.form.js"></script>
<script type="text/javascript" src="js-plugin/neko-contact-ajax-plugin/js/jquery.validate.min.js"></script>
<script type="text/javascript" src="js-plugin/magnific-popup/jquery.magnific-popup.min.js"></script>
<script type="text/javascript" src="js-plugin/parallax/js/jquery.scrollTo-1.4.3.1-min.js"></script>
<script type="text/javascript" src="js-plugin/parallax/js/jquery.localscroll-1.2.7-min.js"></script>

我对 Assets 管道的理解是否正确， View 中不需要这些标注？ application.css 和 application.js 中不应该所有的 CSS 和 JS 都预编译吗？

Answer 1

问题是我把模板中包含的所有CSS和JSS文件都带过来了，但是文件夹中还包含不需要的CSS和JS，其中一些文件在 Assets 管道中加载时导致冲突.一旦我删除了所有不需要的文件，所有文件都按预期工作。

总结: 将所有必需的 CSS 文件移动到 Assets /样式表 将所有必需的 JS 文件移动到 assets/javascripts

在各自的 application.css 和 application.js 文件中明确包含/要求每个 CSS/JS 文件。