将 Wrap Bootstrap 主题与 Ruby on Rails 集成

Posted 2023-03-13

技术标签:

【中文标题】将 Wrap Bootstrap 主题与 Ruby on Rails 集成【英文标题】：Integrating Wrap Bootstrap Themes with Ruby on Rails 【发布时间】：2013-04-16 06:07:03 【问题描述】：

我需要帮助在 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'

【问题讨论】：

您能具体说明一下您遇到了什么问题吗？另外，您能否为从未在该网站购买过主题的人提供您从 wrapbootstrap（CSS、LESS 文件、修改后的引导主题...）购买的内容？您是否检查过控制台是否有任何 javascript 错误？您好，您能说明一下问题的确切性质吗？你期待什么却没有得到？ 【参考方案1】：

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

一个

在您的 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 会知道要查看供应商。然后，您向自己承诺不编辑您的任何供应商文件，除非它绝对必要 - 只要您在 application.css 中require vendor_sheets 之前要求任何您自己的样式表，您可以简单地用您自己的样式覆盖主题的样式。

三个

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

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

四个

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

五个

像对待样式表一样对待 JavaScript 文件。在 vendor/assets/javascripts 中创建一个 vendor_scripts.js 清单文件，然后将该清单文件包含在 assets/application.js 中。确保在 Rails 默认设置之后包含此文件，例如 jQuery 和 Turbolinks（我将在稍后介绍），但在您自己的任何自定义脚本之前。同样，检查 Element 以确保包含所有 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 中运行所有内容，然后在部署后完全崩溃。

Here 是关于 Rails 4 中图像引用的一些讨论，您可能会觉得有帮助。

八

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

九

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

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

需要改成

$(document).ready(function()

Here 是关于 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。这不是必需的，甚至不是真正可取的。

祝你的主题好运。

【讨论】：

以上是关于将 Wrap Bootstrap 主题与 Ruby on Rails 集成的主要内容，如果未能解决你的问题，请参考以下文章

如何更改bootstrap navbar的颜色 03 社区 03 Ruby China

Kendo UI Bootstrap 主题无法与 Bootstrap 3.1.0 配合使用

将 Bootstrap 主题（带有自定义 CSS 和 JS 插件）与带有 Webpacker 和 Yarn/NPM 的 Rails 6 集成

如何使用 Bootstrap for Wordpress 将 Sass 实现为下划线主题？

如何将 Bootstrap 图标链接到 Ruby 上的链接？

将Bootstrap做成主题