Themeforest to Rails App

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

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

rails_id.. 6

我认为这个问题会根据意见得到答案,但你可以尝试这个gem来为你的应用程序安装静态html(未经过测试).install_theme gem.供参考使用此宝石阅读此博客 http://drnicwilliams.com/category/ruby/ruby-on-rails/page/2/(如果我把tuts放在这里我的答案将全文发布)

对于你的问题:

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

我的工作流程如下:

将css,js,image,font文件放入assests目录

-assets
   - fonts
   - images
   - javascripts
   - stylesheets

在css文件和js文件中编辑url图像,url字体.

如果我使用exss css.erbfor css文件,url image,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'),

 ...
} 

选择html结构到布局模板(头标签,标题,导航栏,侧边栏页脚),部分模板(内容,表格等) - 如果我使用 html.erb

-views
   - layouts
   - partials
     - form
     - index

编码链接到资产

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

编辑图像标签,网址标签,表单标签等以符合rails模板(erb文件)

图片标签

html中的示例

改成

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

链接标记

html中的示例

Home

改成

<%= link_to "Home", root_path %>

表格标签你可以读这个

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

编辑任何文件以符合rails

你可以读这个

资产管道

Rails中的布局和渲染

形式助手

更新资产管道

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

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

Richard Peck.. 5

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

最重要的是,如果你要做这项工作,那就做对了

要做到这一点,我个人会从头开始整合主题.首先,通过更改layouts您可能拥有的各种内容(以适应主题的类和样式),然后通过系统的每个部分来相应地设置样式.

-

资产

为了assets正确呈现,我肯定会将它们包含在app/assets文件夹中,而不是public/____.原因是它们是应用程序的一般资产的一部分,需要保留在资产管道中.

因此我基本上会做三件事:

把images主题放入app/assets/images

把stylesheets主题放入app/assets/stylesheets

把javascripts主题放入app/assets/javascripts

然后我会通过应用程序和工作来使样式正常工作(从layout提到的开始).

我认为重要的是要指出,为了获得最佳效果,您最好做正确的事 - 坐下来正确地完成造型.