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

【问题标题】：Using Canvas Theme from Themeforest in Rails 4 App在 Rails 4 App 中使用 Themeforest 的 Canvas 主题
【发布时间】：2015-03-04 17:19:44
【问题描述】：

我正在尝试使用 Themeforest 的 Canvas 主题构建一个 Rails 4 应用程序，这让我很生气。

我已经搜索了几种将 CSS/JS 放在正确文件夹中的方法，我什至用这个 tutorial 取得了成功。对！

当我尝试对 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”吗？

需要通过这个愚蠢的行为！

【问题讨论】：

我让它显示一些东西。在有机会显示任何内容之前，有一行 HTML 正在清除所有内容。不过，它并不漂亮。
我说得更远了，但 JavaScript 似乎根本无法正常工作。

标签： javascript css ruby-on-rails twitter-bootstrap themes

【解决方案1】：

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

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

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

【讨论】：

很高兴看到其他人经历挫折。顺便说一句，我有一个类似的问题，我通过删除涡轮链接有力地解决了这个问题。 Functions.js 继续失败。只是想我会提出这个问题，以防您在转换到其他页面时遇到更多问题。
@Craigfoo，如果您愿意在 github 上分享您的样板应用程序，我当然会非常感激，如果您有时间的话。它基本上是“Canvas on Rails”入门应用程序。（尽管想一想，我不确定画布主题许可如何接受这一点。我认为实际上发布代码应该没问题，如果人们有使用它的许可证，那将是他们需要的照顾）。你总是可以做“在此处插入画布文件”。好吧，只是一个想法。

【解决方案2】：

谢谢@Craigfoo，您的解决方案帮助我走得更远。为了使滑块工作，我没有更改 appilcation.js，但我将 functions.js 文件移动到 vendor/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 )

【讨论】：