Question

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

您是否将所有下载的资源都放在公用文件夹中？或者你把它们放在app / assets中的相应文件夹中，然后修复图片网址等。

Answer 1

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

对于你的问题：

您是否将所有下载的资源都放在公用文件夹中？或者你把它们放在app / assets中的相应文件夹中，然后修复图片网址等。

我的工作流程如下：

将css，js，image，font files放入assests目录

-assets
   - fonts
   - images
   - javascripts
   - stylesheets

在css文件和js文件中编辑url图像，url字体。

如果我对css文件使用扩展名css.erb，则url image，url字体应编辑如下：

图片：

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

font：

@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：

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

 ...
}

选择html结构到布局模板（头标记，标题，导航栏，侧边栏页脚），部分模板（内容，表单等） - 如果我使用html.erb
```
-views
   - layouts
   - partials
     - form
     - index
```
编码指向资产的链接
```
<%= stylesheet_link_tag "application", media: "all" %>
<%= javascript_include_tag "application" %>
```

编辑图片标签，网址标签，表格标签等以符合铁轨模板（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 %>

编辑任何符合rails的文件

你可以阅读这个
更新资产管道

修复非常简单。打开位于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

然后我会通过应用程序＆amp;努力使样式正常工作（从提到的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'%>

希望这有帮助

Themeforest to Rails App

3 个答案: