在Rails 4 App中使用Themeforest中的Canvas主题

Question

我正在尝试使用Themeforest的Canvas主题构建一个Rails 4应用程序，它正在踢我的屁股。

我已经搜索了几种方法将CSS / JS放在正确的文件夹中，我使用本教程甚至取得了成功。 是啊！

当我尝试使用与Canvas主题相同的方法时，所有的地狱都会破裂。 主题包括以下内容：

Canvas-Theme/

 - css/
    - fonts/
        - (a bunch of custom fonts)
    - animate.css
    - bootstrap.css
    - calendar.css
    - camera.css
    - colors.css
    - colors.php
    - dark.css
    - font-icons.css
    - fonts.css
    - magnific-popup.css
    - nivo-slider.css
    - responsive.css
    - vmap.css
 - images/
    - (a bunch of images)
 - js/
    - canvas.slider.fade.js
    - events-data.js
    - functions.js
    - jquery.calendario.js
    - jquery.camera.js
    - jquery.elastic.js
    - jquery.gmap.js
    - jquery.js
    - jquery.mousewheel.min.js
    - jquery.nivo.js
    - jquery.vmap.js
    - plugins.js

 - (tons of HTML templates)
 - style.css
 - style.less

在我的Rails应用程序中，我使用的是默认安装（mysql除外），其中包含以下gem：

gem 'rails', '4.1.7'
# Use mysql as the database for Active Record
gem 'mysql2'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 4.0.3'
# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'
# Use CoffeeScript for .js.coffee assets and views
gem 'coffee-rails', '~> 4.0.0'
# See https://github.com/sstephenson/execjs#readme for more supported runtimes
# gem 'therubyracer',  platforms: :ruby

# Use jquery as the JavaScript library
gem 'jquery-rails'
# Turbolinks makes following links in your web application faster. Read more: https://github.com/rails/turbolinks
gem 'turbolinks'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.0'
# bundle exec rake doc:rails generates the API under doc/api.
gem 'sdoc', '~> 0.4.0',          group: :doc

# Use ActiveModel has_secure_password
# gem 'bcrypt', '~> 3.1.7'

# Use unicorn as the app server
# gem 'unicorn'

# Use Capistrano for deployment
# gem 'capistrano-rails', group: :development

# Use debugger
# gem 'debugger', group: [:development, :test]

# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin]

我把所有的CSS文件都下了

app/assets/stylesheets/

和所有的JS

app/assets/javascript/

我还创建了一个字体文件夹，并将包含的字体放在那里

app/assets/fonts/

这是我的application.js：

//= require jquery
//= require turbolinks
//= require_tree .

这是我的application.css

*= require_tree .
*= require_self

现在，我在样式表文件夹中删除了Canvas-Theme文件夹根目录中的一个'style.css'文件。 不确定这是否是正确的做法。

毕竟，我将其中一个HTML文件复制并粘贴到我的index.html.erb文件中，基本上我得到一个空白屏幕。 我知道我需要改变图像的路径但我至少应该看到一些东西。

几个问题，

我是否摆脱了主题附带的'jquery.js'文件，因为Rails已经包含它了？
我应该使用bootstrap gem而不是包含的'bootstrap.css'吗？

需要通过这个tomfoolery！

Answer 1

固定。 事实证明，这就是我订购JavaScript的方式。 我最终将我的appilcation.js文件更改为：

//= require jquery
//= require turbolinks
//= require_tree .
//= require functions

我将'functions.js'文件移动到vendors / assets / javascript文件夹，因此在包含树之后它将被包含在最后。 似乎在做伎俩。 故事的道德，要注意CSS / JS的顺序。 但是你知道但是我在跟谁说话，因为我基本上只是评论自己的话题。 好吧，我出去了。

Answer 2

谢谢@Craigfoo，你的解决方案帮助我走得更远。 要启用滑块工作，我没有更改appilcation.js，但我将functions.js文件移动到vendors / assets / javascript文件夹并更改了views / layouts / application.html.erb

<!DOCTYPE html>
<html>
<head>
  <title>Canvas</title>
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <%= csrf_meta_tags %>
</head>
<body>

  <%= yield %>
  <%= javascript_include_tag 'functions', 'data-turbolinks-track' => true %>

</body>
</html>

我需要预编译。 添加config / initializers / assets.rb行：

Rails.application.config.assets.precompile += %w( functions.js )

在Rails 4 App中使用Themeforest中的Canvas主题

问题描述

2 个解决方案

解决方案1
3 2015-01-06 23:48:07

解决方案2
0 2016-01-06 23:50:04

在Rails 4 App中使用Themeforest中的Canvas主题

问题描述

2 个解决方案

解决方案1 3 2015-01-06 23:48:07

解决方案2 0 2016-01-06 23:50:04

解决方案1
3 2015-01-06 23:48:07

解决方案2
0 2016-01-06 23:50:04