Themeforest 到 Rails 应用程序

Question

这是我第一次为 Rails 应用程序使用外部 HTML 主题。我从 Themeforest 下载了一个主题。当然，它带有大量的 JS、CSS 和图像。我想知道你们中的大多数人在将主题集成到 Rails 应用程序时使用什么工作流程。

• 您是否将所有下载的资产都放在公用文件夹中？还是将它们放在 app/assets 中的适当文件夹中，然后修复图像 url 等？

Answer 1

我认为这个问题会根据意见得到答案，但您可以尝试使用此 gem 为您的应用程序安装静态 html（未测试）。 install_theme gem。有关使用此 gem 的参考，请阅读此博客 http://drnicwilliams.com/category/ruby/ruby-on-rails/page/2/ （如果我把 tuts 放在这里，我的答案将是完整的）

关于你的问题：

您是否将所有下载的资产都放在公用文件夹中？还是将它们放在 app/assets 中的适当文件夹中，然后修复图像 url 等？

我的工作流程如下：

1. 将css、js、图片、字体文件放到assets目录下

   -assets
      - fonts
      - images
      - javascripts
      - stylesheets
   

2. 在css文件和js文件中编辑url图片、url字体。

   如果我对 css 文件使用扩展 css.erb，url 图像，url 字体应该编辑如下：

   图片：

   background-image:url(<%= asset_path 'bg.png' %>);  
   

   字体：

   @font-face {
       font-family: namefonts;
       src: url('<%= asset_path('namefonts.eot') %>');
       src: url('<%= asset_path('namefontsd41d.eot') %>?#iefix') format('embedded-opentype'), 
          url('<%= asset_path('namefonts.woff') %>') format('woff'), 
          url('<%= asset_path('namefonts.ttf') %>') format('truetype'), 
          url('<%= asset_path('namefonts.svg') %>#icons') format('svg');
       font-weight: 400;
       font-style: normal;
   }
   

   如果我使用扩展css.scss

   图片：

   background : image-url("bg.png")
   

   字体：

   @font-face {
   font-family:'namefonts';
   src:font-url('namefonts.eot');
   src:font-url('namefonts.eot?#iefix') format('embedded-opentype'),
   
    ...
   } 
   

3. 选择 html 结构来布局模板（头部标签、页眉、导航栏、侧边栏页脚）、部分模板（内容、表单等） - 如果我使用 html.erb

   -views
      - layouts
      - partials
        - form
        - index
   

   编码到资产的链接

   <%= stylesheet_link_tag "application", media: "all" %>
   <%= javascript_include_tag "application" %>
   

4. 编辑图片标签、url标签、表单标签等以符合rails模板（erb文件）

   图片标签

   html 中的示例

   <img src="images/rails.png" class="theclass"/>   
   

   改成

   <%= image_tag "rails.png", :class => 'theclass' %>
   

   链接标签

   html 中的示例

   <a href="index.html">Home</a>
   

   改成

   <%= link_to "Home", root_path %>
   

   表单标签可以阅读this

   <%= form_tag("action", method: "post") do %>
    <%= label_tag(:q, "Label for:") %>
    <%= text_field_tag(:q) %>
    <%= submit_tag("Save") %>
   <% end %>
   

5. 编辑任何文件以符合 rails

   你可以阅读这个

   • Assets Pipeline
   • Layouts and Rendering in Rails
   • Form Helpers

6. 更新资产管道

   修复非常简单。打开位于 config/application.rb 的项目配置文件，并在 Application 类中添加以下行：

   config.assets.paths << Rails.root.join("app", "assets", "fonts")
   config.assets.precompile += %w( .svg .eot .woff .ttf )
   

Answer 2

您是否将所有下载的资产都放在公用文件夹中？还是你 将它们放在 app/assets 中的适当文件夹中，然后修复图像 网址等？

最重要的是，如果你要做好这项工作，做对了

为此，我会亲自从头开始整合主题。首先，通过更改您可能拥有的各种layouts（以适应主题的类和样式），然后通过系统的每个部分对其进行相应的样式设置。

--

资产

为了正确呈现assets，我肯定会将它们包含在app/assets 文件夹中，而不是public/____。原因是它们是应用程序通用资产的一部分，需要保存在 asset pipeline 中。

因此，我基本上会做三件事：

• 将主题中的images 放入app/assets/images
• 将主题中的stylesheets 放入app/assets/stylesheets
• 将主题中的javascripts 放入app/assets/javascripts

然后我会检查应用程序并努力使样式正常工作（从提到的layout 开始）。

我认为重要的是要指出，为了达到最佳效果，你最好把事情做对——坐下来正确地完成造型。

Answer 3

这是我的工作流程：

我通常像这样构建我的资产（比如它是一个管理模板，主题文件在 sass 中）

/app
  /assets
    /stylesheets
      /admin
        _modal.scss
        _reset.scss
        _button.scss
        ....
      /vendor
        /bootstrap
          bootstrap.min.css
        /font-awesome
        ....

      admin.scss.scss

在admin.css.scss

里面

@import 'vendor/bootstrap/bootstrap';
@import 'admin/modal';
@import 'admin/reset';
@import 'admin/button';

我通常用 javascript 做同样的事情

至于html的

我通常对每个部分进行渲染（顶部栏、侧边栏等的一部分）

我通常把它们放在

/app
  /views
    /partials

所以我打电话来

<%=render '/partials/topbar'%>

希望对你有帮助