Themeforest to Rails App

Question

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

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

Answer 1

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

对于你的问题:

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

我的工作流程如下:

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

   -assets
      - fonts
      - images
      - javascripts
      - stylesheets
   

2. 在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'),
   
    ...
   } 
   

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

   -views
      - layouts
      - partials
        - form
        - index
   

   编码链接到资产

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

4. 编辑图像标签,网址标签,表单标签等以符合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 %>
   

   表格标签你可以读这个

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

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

   你可以读这个

   • 资产管道
   • Rails中的布局和渲染
   • 形式助手

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/____.原因是它们是应用程序的一般资产的一部分,需要保留在资产管道中.

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

• 把images主题放入app/assets/images
• 把stylesheets主题放入app/assets/stylesheets
• 把javascripts主题放入app/assets/javascripts

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

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