6

我需要帮助在 Rails 中集成 wrap Bootstrap 主题。如果它不要求太多，一步一步更深入会很棒。我总觉得留下了一些小细节。

我购买了http://wrapbootstrap.com/preview/WB02634G3并且无法让某些样式/JavaScript 正常工作。

  • 我已将所有文件添加到相应的资产文件夹中，并尝试在 application.js/application.css 文件中要求每个文件名。就像下面这个例子。

//= 需要主题

  • 对于图像，我已将它们重命名为“/assets/showcase1.png”。在某些情况下，我发现这种格式也适用“../images/showcase.png”

这是我的 application.html.erb 文件的样子。

<!DOCTYPE html>

<html>

 <head>
  <title>DPL</title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <%=s tylesheet_link_tag "application", :media=>"all" %>
      <%=j avascript_include_tag "application" %>
      <%=c srf_meta_tags %>
      <!-- Styles -->
       <link href="css/bootstrap.css" rel="stylesheet">
       <link rel="stylesheet" type="text/css" href="css/theme.css">
       <link rel="stylesheet" href="css/index.css" type="text/css" media="screen" />
       <link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,900,300italic,400italic,700italic,900italic' rel='stylesheet' type='text/css'>
       <link rel="stylesheet" type="text/css" href="css/lib/animate.css" media="screen, projection">
 </head>

 <body>

   <body class="pull_top">
     <div class="navbar transparent navbar-inverse navbar-fixed-top">
       <div class="navbar-inner">
         <div class="container">
         <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         </a>
         <a class="brand" href="index.html">
         <strong>DPL</strong>
         </a>

       <div class="nav-collapse collapse">
         <ul class="nav pull-right">
            <li><a href="index.html" class="active">HOME</a></li>
            <li><a href="about-us.html">ABOUT US</a></li>
            <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">
            PAGES
            <b class="caret"></b>
            </a>

         <ul class="dropdown-menu">
            <li><a href="features.html">Features</a></li>
            <li><a href="services.html">Services</a></li>
            <li><a href="portfolio.html">Portfolio</a></li>
            <li><a href="portfolio-item.html">Portfolio Item</a></li>
            <li><a href="coming-soon.html">Coming Soon</a></li>
            <li><a href="sign-in.html">Sign in</a></li>
            <li><a href="sign-up.html">Sign up</a></li>
            <li><a href="backgrounds.html">Backgrounds</a></li>
         </ul>
            </li>
            <li><a href="pricing.html">PRICING</a></li>
            <li><a href="contact.html">CONTACT US</a></li>
            <li><a href="blog.html">BLOG</a></li>
            <li><a class="btn-header" href="sign-up.html">Sign up</a></li>
            <li><a class="btn-header" href="sign-in.html">Sign in</a></li>
         </ul>
          </div>
      </div>
     </div>
    </div>
    <div class="container">
                <%=y ield %>
            </div>
        </body>

</html>

我已将这些添加到我的 gem 文件中。

gem 'libv8'
gem 'twitter-bootstrap-rails'
gem 'bootswatch-rails'
4

1 回答 1

5

这里有一篇有用的博客文章，它应该详细说明将主题集成到资产管道时的总体方向。我不得不这样做几次，总的来说，这就是我学到的：

一

在你的 app/vendor 目录中保留一个文件夹，让整个主题完全保持原样。就像app/vendor/templates/theme这样的东西。（不过，不要忘记在您的 .gitignore 文件中包含 vendor/template/* - 这仅供参考。）这样，无论发生什么，您都可以掌握整个主题。不要将文件实际移动到应用程序的资产路径中，而是复制它们。

二

不要将您的主题资产存储在 app/assets 中。将它们存储在供应商资产中。如果您还在供应商目录中创建清单文件，它可能会帮助您保持更有条理，例如：

+ vendor
  - assets
    - stylesheets
      - vendor_sheets.css

然后在vendor_sheets.css：

/*
 *= require vendor stylesheets
 */

然后在assets/stylesheets/applications.css：

/*
 * ...
 *= require vendor_sheets
 */

Rails 会知道去寻找供应商。然后，您向自己保证不编辑任何供应商文件，除非绝对必要- 只要您require vendor_sheets在application.css中需要您自己的任何样式表，您就可以简单地用您自己的样式覆盖主题的样式。

三

首先翻译一个 html 页面。不要只是将主题中的所有内容都转移到资产管道中并假设它会起作用。相反，以index.html文件为例，然后将index.htmllink文件中编辑的每个样式表复制到vendor/assets/stylesheets中，并将它们复制到您的vendor_sheets.css文件中，其顺序与指定的完全相同在index.html文件中。*=require

不要做require_tree。明确要求文件。这保证了正确的顺序。

四

Inspect Element是您最好的朋友。看看你的消息来源。确保它们已加载，并且以正确的顺序加载。经常检查您的控制台是否有错误。如果您专注于正确加载样式表，请忽略图像警告和 javascript 警告。一心一意。

五

对待 JavaScript 文件的方式与对待样式表的方式相同。在vendor/assets/javascripts中创建一个vendor_scripts.js清单文件，然后将该清单文件包含在assets/application.js中。确保在 Rails 默认设置之后包含此文件，例如 jQuery 和 Turbolinks（我将在稍后介绍），但在您自己的任何自定义脚本之前。同样，检查元素以确保包含所有 JavaScript 文件，并且顺序正确。

六

图像可能很棘手。将您需要的图像复制到vendor/assets/images中。您需要进入config/application.rb并将vendor/assets/images添加到您的资产路径中，如下所示：

config.assets.paths << Rails.root.join("app", "assets", "vendor/assets/images")

重新启动您的服务器。

七

进入您的供应商/样式表文件，并一一搜索它们url('。替换url('path/to/image/file_name.ext')为image_path('file_name')。对字体也执行第 6 步和第 7 步，使用vendor/assets/fonts您的目录，而不是image_path使用 `asset_path('file_name.ext')。任何需要执行此操作的样式表，将“scss”附加到文件名，这样如果之前是styles.css，现在是styles.css.scss。

尽管您的加载路径在生产中会发生变化，但您可以将许多帮助程序与 Rails 默认随附的sass-rails gem 一起使用，以查找资产。使用它们，否则您最终可能会在 localhost 中运行所有内容，然后在部署后完全崩溃。

以下是有关 Rails 4 中图像引用的一些讨论，您可能会发现它们很有帮助。

八

尽可能从模板.html文件中复制和粘贴 HTML 。这样可以最大限度地减少错别字。但是，也要彻底阅读它，并尝试很好地掌握如何使用可用的东西。

九

Turbolinks：如果您的 JavaScript 仍然无法正常工作，Turbolinks 可能会妨碍您。您可以只禁用 Turbolinks，但是……您真的不必这样做，Turbolinks 会加快您网站的感觉，因此没有理由摆脱它。但是您确实需要稍微修改一下您的 JavaScript。任何以以下开头的 JavaScript 文件：

$(document).on('ready', function() {

需要改为

$(document).ready(function() {

这是关于 Turbolinks 的有用讨论，以及如何解决它。

好的，除此之外，我还注意到您的application.html.erb文件存在一些问题：

 <%=s tylesheet_link_tag "application", :media=>"all" %>
  <%=j avascript_include_tag "application" %>
  <%=c srf_meta_tags %>
  <!-- Styles -->
   <link href="css/bootstrap.css" rel="stylesheet">
   <link rel="stylesheet" type="text/css" href="css/theme.css">
   <link rel="stylesheet" href="css/index.css" type="text/css" media="screen" />
   <link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,900,300italic,400italic,700italic,900italic' rel='stylesheet' type='text/css'>
   <link rel="stylesheet" type="text/css" href="css/lib/animate.css" media="screen, projection">

具体来说<%=s tylesheet,<%=j avascript和<%=c srf应该是破坏性的东西。你需要<%= stylesheet,<%= javascript和<%= csrf分别在这里。

最重要的是，不要在标题中包含指向内部样式表的链接。如果您在application.css中正确要求文件，它们将被包含在内。唯一的例外是 Google 字体。

我还看到您确实删除了 Turbolinks。这不是必需的，甚至不是真正可取的。

祝你的主题好运。

于 2015-06-27T13:42:41.703 回答